/* XERIONYX — Connected Dashboard Magnetic Field V5 PERFORMANCE
   Visual target: approved V4 magnetic design.
   Performance strategy:
   - keep the full plasma ring visually equivalent but static/rasterizable;
   - animate only a compact perimeter spark (compositor-friendly motion path);
   - automatically pause off-screen/page-hidden sparks;
   - never alter card backgrounds, text colors, wallet/payment/referral/treasury logic. */

:root {
  --xer-v5-violet: rgba(151, 62, 255, .98);
  --xer-v5-magenta: rgba(240, 77, 255, .98);
  --xer-v5-blue: rgba(78, 101, 255, .96);
  --xer-v5-cyan: rgba(74, 211, 255, .86);
  --xer-v5-white: rgba(255, 231, 255, .98);
}

.xerionyx-magnetic-panel,
.xerionyx-magnetic-card,
.xerionyx-magnetic-button {
  position: relative;
  isolation: isolate;
}

body.xerionyx-wallet-dashboard-live .xerionyx-magnetic-panel,
body.xerionyx-wallet-dashboard-live .xerionyx-magnetic-card {
  border-color: rgba(153, 76, 255, .82) !important;
  box-shadow:
    0 0 0 1px rgba(170, 94, 255, .16),
    0 0 7px rgba(202, 98, 255, .22),
    0 0 18px rgba(135, 70, 255, .20),
    0 0 34px rgba(74, 41, 164, .16) !important;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

body.xerionyx-wallet-dashboard-live .xerionyx-magnetic-panel::before,
body.xerionyx-wallet-dashboard-live .xerionyx-magnetic-card::before,
body.xerionyx-wallet-dashboard-live .xerionyx-magnetic-panel::after,
body.xerionyx-wallet-dashboard-live .xerionyx-magnetic-card::after,
body.xerionyx-wallet-dashboard-live .xerionyx-magnetic-button::before,
body.xerionyx-wallet-dashboard-live .xerionyx-magnetic-button::after {
  content: '';
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
}

/* V4 plasma palette retained, but made static so it is rasterized once. */
body.xerionyx-wallet-dashboard-live .xerionyx-magnetic-panel::before,
body.xerionyx-wallet-dashboard-live .xerionyx-magnetic-card::before {
  inset: -2px;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    rgba(92, 95, 255, .88) 0deg 18deg,
    rgba(137, 72, 255, .96) 25deg 72deg,
    rgba(246, 83, 255, .99) 82deg 112deg,
    rgba(255, 216, 255, .98) 118deg 124deg,
    rgba(202, 86, 255, .96) 130deg 176deg,
    rgba(81, 146, 255, .90) 187deg 217deg,
    rgba(136, 74, 255, .96) 226deg 271deg,
    rgba(243, 77, 255, .99) 282deg 317deg,
    rgba(255, 230, 255, .98) 322deg 328deg,
    rgba(109, 86, 255, .93) 336deg 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: .98;
  filter:
    drop-shadow(0 0 2px rgba(255, 206, 255, .72))
    drop-shadow(0 0 5px rgba(219, 95, 255, .52))
    drop-shadow(0 0 11px rgba(107, 72, 255, .34));
}

/* Only a compact electrical knot moves around the perimeter. */
body.xerionyx-wallet-dashboard-live .xerionyx-magnetic-panel::after,
body.xerionyx-wallet-dashboard-live .xerionyx-magnetic-card::after {
  left: 0;
  top: 0;
  width: 34px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(236,82,255,.55) 14%,
    rgba(255,236,255,.99) 47%,
    rgba(113,107,255,.94) 72%,
    rgba(255,255,255,0) 100%);
  box-shadow:
    0 0 2px rgba(255,236,255,.96),
    0 0 7px rgba(229,79,255,.68),
    0 0 15px rgba(95,77,255,.42);
  opacity: .96;
  will-change: transform, opacity;
  offset-path: border-box;
  offset-distance: 0%;
  offset-rotate: 0deg;
  offset-anchor: center;
  animation:
    xerV5SparkTravel 4.15s linear infinite,
    xerV5SparkBreath 1.65s ease-in-out infinite alternate;
}

body.xerionyx-wallet-dashboard-live .xerionyx-magnetic-panel:hover,
body.xerionyx-wallet-dashboard-live .xerionyx-magnetic-card:hover {
  transform: translateY(-1px);
  border-color: rgba(194, 101, 255, .94) !important;
  box-shadow:
    0 0 0 1px rgba(213, 125, 255, .22),
    0 0 9px rgba(221, 104, 255, .28),
    0 0 23px rgba(145, 73, 255, .24),
    0 0 42px rgba(76, 42, 170, .20) !important;
}

body.xerionyx-wallet-dashboard-live #wallet-personal-space,
body.xerionyx-wallet-dashboard-live #xerionyx-referral-panel-v2 {
  border-color: rgba(172, 83, 255, .90) !important;
  box-shadow:
    0 0 0 1px rgba(193, 104, 255, .20),
    0 0 9px rgba(214, 97, 255, .25),
    0 0 24px rgba(136, 67, 255, .25),
    0 0 48px rgba(77, 39, 173, .20) !important;
}

body.xerionyx-wallet-dashboard-live .xerionyx-magnetic-card--focus {
  border-color: rgba(203, 99, 255, .94) !important;
  box-shadow:
    0 0 0 1px rgba(229, 137, 255, .22),
    0 0 9px rgba(231, 110, 255, .30),
    0 0 25px rgba(156, 75, 255, .28),
    0 0 48px rgba(83, 43, 181, .21) !important;
}

body.xerionyx-wallet-dashboard-live .xerionyx-magnetic-card--table {
  overflow: visible;
}

body.xerionyx-wallet-dashboard-live .xerionyx-magnetic-button {
  overflow: visible;
  border-color: rgba(164, 84, 255, .86) !important;
  box-shadow:
    0 0 7px rgba(213, 96, 255, .22),
    0 0 17px rgba(122, 73, 255, .18) !important;
}

body.xerionyx-wallet-dashboard-live .xerionyx-magnetic-button::before {
  inset: -2px;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    rgba(116,91,255,.92),
    rgba(245,76,255,.99),
    rgba(255,229,255,.98),
    rgba(77,159,255,.88),
    rgba(168,73,255,.96),
    rgba(116,91,255,.92)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  filter:
    drop-shadow(0 0 3px rgba(244,125,255,.54))
    drop-shadow(0 0 9px rgba(95,75,255,.28));
}

body.xerionyx-wallet-dashboard-live .xerionyx-magnetic-button::after {
  left: 0;
  top: 0;
  width: 20px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    transparent,
    rgba(239,77,255,.84) 25%,
    rgba(255,235,255,.99) 50%,
    rgba(94,145,255,.80) 75%,
    transparent);
  box-shadow:
    0 0 3px rgba(255,234,255,.88),
    0 0 8px rgba(227,89,255,.52);
  opacity: .95;
  will-change: transform, opacity;
  offset-path: border-box;
  offset-distance: 0%;
  offset-rotate: 0deg;
  offset-anchor: center;
  animation:
    xerV5SparkTravel 3.85s linear infinite reverse,
    xerV5SparkBreath 1.55s ease-in-out infinite alternate;
}

body.xerionyx-wallet-dashboard-live #xerionyx-referral-link,
body.xerionyx-wallet-dashboard-live #presale-amount,
body.xerionyx-wallet-dashboard-live #presale-currency {
  border-color: rgba(119, 98, 255, .92) !important;
  box-shadow:
    0 0 0 1px rgba(157,112,255,.14),
    0 0 7px rgba(105,89,255,.22) !important;
}

body.xerionyx-wallet-dashboard-live #personal-total-tokens,
body.xerionyx-wallet-dashboard-live #personal-total-usd,
body.xerionyx-wallet-dashboard-live #xerionyx-referral-assigned,
body.xerionyx-wallet-dashboard-live #xerionyx-referral-buyers,
body.xerionyx-wallet-dashboard-live #xerionyx-referral-purchases,
body.xerionyx-wallet-dashboard-live #xerionyx-referral-volume,
body.xerionyx-wallet-dashboard-live #xerionyx-referral-pending {
  text-shadow: 0 0 10px rgba(104, 214, 255, .22), 0 0 16px rgba(167, 82, 255, .14);
}

/* Invisible effects do zero continuous animation work. */
body.xerionyx-wallet-dashboard-live .xerionyx-magnetic-paused::after,
body.xerionyx-magnetic-page-hidden.xerionyx-wallet-dashboard-live .xerionyx-magnetic-panel::after,
body.xerionyx-magnetic-page-hidden.xerionyx-wallet-dashboard-live .xerionyx-magnetic-card::after,
body.xerionyx-magnetic-page-hidden.xerionyx-wallet-dashboard-live .xerionyx-magnetic-button::after {
  animation-play-state: paused !important;
}

@keyframes xerV5SparkTravel {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}

@keyframes xerV5SparkBreath {
  from { opacity: .74; }
  to   { opacity: 1; }
}

@supports not (offset-path: border-box) {
  body.xerionyx-wallet-dashboard-live .xerionyx-magnetic-panel::after,
  body.xerionyx-wallet-dashboard-live .xerionyx-magnetic-card::after,
  body.xerionyx-wallet-dashboard-live .xerionyx-magnetic-button::after {
    left: 50%;
    top: -2px;
    transform: translateX(-50%);
    animation: xerV5SparkBreath 1.65s ease-in-out infinite alternate;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.xerionyx-wallet-dashboard-live .xerionyx-magnetic-panel::after,
  body.xerionyx-wallet-dashboard-live .xerionyx-magnetic-card::after,
  body.xerionyx-wallet-dashboard-live .xerionyx-magnetic-button::after {
    animation-duration: 11s, 4s !important;
  }
}

/* V11 — Smartphone Personal Space transaction-table containment only.
   Keeps the validated desktop magnetic presentation untouched. */
@media (max-width: 768px) {
  body.xerionyx-wallet-dashboard-live #wallet-personal-space .xerionyx-magnetic-card--table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.xerionyx-wallet-dashboard-live #wallet-personal-space .xerionyx-magnetic-card--table > table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }

  body.xerionyx-wallet-dashboard-live #wallet-personal-space .xerionyx-magnetic-card--table > table th,
  body.xerionyx-wallet-dashboard-live #wallet-personal-space .xerionyx-magnetic-card--table > table td {
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    hyphens: none !important;
    text-align: start !important;
    font-size: clamp(8px, 2.35vw, 10px) !important;
    line-height: 1.25 !important;
  }

  body.xerionyx-wallet-dashboard-live #wallet-personal-space .xerionyx-magnetic-card--table > table th:nth-child(1),
  body.xerionyx-wallet-dashboard-live #wallet-personal-space .xerionyx-magnetic-card--table > table td:nth-child(1) { width: 18% !important; }
  body.xerionyx-wallet-dashboard-live #wallet-personal-space .xerionyx-magnetic-card--table > table th:nth-child(2),
  body.xerionyx-wallet-dashboard-live #wallet-personal-space .xerionyx-magnetic-card--table > table td:nth-child(2) { width: 18% !important; }
  body.xerionyx-wallet-dashboard-live #wallet-personal-space .xerionyx-magnetic-card--table > table th:nth-child(3),
  body.xerionyx-wallet-dashboard-live #wallet-personal-space .xerionyx-magnetic-card--table > table td:nth-child(3) { width: 15% !important; }
  body.xerionyx-wallet-dashboard-live #wallet-personal-space .xerionyx-magnetic-card--table > table th:nth-child(4),
  body.xerionyx-wallet-dashboard-live #wallet-personal-space .xerionyx-magnetic-card--table > table td:nth-child(4) { width: 18% !important; }
  body.xerionyx-wallet-dashboard-live #wallet-personal-space .xerionyx-magnetic-card--table > table th:nth-child(5),
  body.xerionyx-wallet-dashboard-live #wallet-personal-space .xerionyx-magnetic-card--table > table td:nth-child(5) { width: 16% !important; }
  body.xerionyx-wallet-dashboard-live #wallet-personal-space .xerionyx-magnetic-card--table > table th:nth-child(6),
  body.xerionyx-wallet-dashboard-live #wallet-personal-space .xerionyx-magnetic-card--table > table td:nth-child(6) { width: 15% !important; }

  body.xerionyx-wallet-dashboard-live #wallet-personal-space .xerionyx-magnetic-card--table > table td:nth-child(5) a {
    display: inline !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-all !important;
  }
}