/* ======================================================================
   NEKON HUB · TESTER v26.70
   Refinamiento premium multicolor por rango + transición contenida.
   El color VIP es acento, nunca un filtro general.
   ====================================================================== */

@property --tier-accent{syntax:"<color>";inherits:true;initial-value:#8A2BE2}
@property --tier-accent-2{syntax:"<color>";inherits:true;initial-value:#0066FF}
@property --tier-accent-3{syntax:"<color>";inherits:true;initial-value:#B77CFF}
@property --tier-complement{syntax:"<color>";inherits:true;initial-value:#2C63D7}
@property --tier-border{syntax:"<color>";inherits:true;initial-value:#604378}

html.nekon-growth-tester-theme{
  --tier-accent-3:#B77CFF;
  --tier-complement:#2C63D7;
  --tier-complement-rgb:44,99,215;
  --tier-card-edge:#2D2F35;
}
html.nekon-growth-tester-theme[data-tier="normal"],
html.nekon-growth-tester-theme.vip-theme--standard{
  --tier-accent:#8A2BE2;
  --tier-accent-2:#0066FF;
  --tier-accent-3:#B77CFF;
  --tier-complement:#2C63D7;
  --tier-complement-rgb:44,99,215;
  --tier-border:#57446C;
  --tier-card-edge:#34303D;
}
html.nekon-growth-tester-theme[data-tier="bronze"],
html.nekon-growth-tester-theme.vip-theme--bronze{
  --tier-accent:#CD7F32;
  --tier-accent-2:#7A3F24;
  --tier-accent-3:#E2AD72;
  --tier-complement:#6B3134;
  --tier-complement-rgb:107,49,52;
  --tier-border:#70482E;
  --tier-card-edge:#3A2B24;
}
html.nekon-growth-tester-theme[data-tier="silver"],
html.nekon-growth-tester-theme.vip-theme--silver{
  --tier-accent:#D6E0EB;
  --tier-accent-2:#73849A;
  --tier-accent-3:#9DD7FF;
  --tier-complement:#4B6D9A;
  --tier-complement-rgb:75,109,154;
  --tier-border:#657488;
  --tier-card-edge:#2C3542;
}
html.nekon-growth-tester-theme[data-tier="gold"],
html.nekon-growth-tester-theme.vip-theme--gold{
  --tier-accent:#FFD84D;
  --tier-accent-2:#A98216;
  --tier-accent-3:#FFE5A0;
  --tier-complement:#285C4D;
  --tier-complement-rgb:40,92,77;
  --tier-border:#8F7528;
  --tier-card-edge:#393321;
}

/* Variables VIP animables: el cambio se interpola, no parpadea. */
html.nekon-growth-tester-theme.vip-theme-morphing{
  transition:
    --tier-accent 3.85s cubic-bezier(.45,0,.18,1),
    --tier-accent-2 3.85s cubic-bezier(.45,0,.18,1),
    --tier-accent-3 3.85s cubic-bezier(.45,0,.18,1),
    --tier-complement 3.85s cubic-bezier(.45,0,.18,1),
    --tier-border 3.85s cubic-bezier(.45,0,.18,1)!important;
}

/* Fondo real, siempre negro. No hay baño de color por rango. */
html.nekon-growth-tester-theme,
html.nekon-growth-tester-theme body,
html.nekon-growth-tester-theme main,
html.nekon-growth-tester-theme .view,
html.nekon-growth-tester-theme .view.inner{
  background-color:#0A0A0A!important;
}
html.nekon-growth-tester-theme body{
  background:
    radial-gradient(circle at 90% -5%,rgba(var(--tier-accent-rgb),.024),transparent 23rem),
    radial-gradient(circle at 7% 96%,rgba(var(--tier-complement-rgb),.018),transparent 25rem),
    #0A0A0A!important;
}

/* Superficies: grafito/negro con dos notas del rango, no un solo color. */
html.nekon-growth-tester-theme :is(
  .growth-hero,.growth-card,.vip-current,.vip-journey-card,.vip-member-showcase,
  .vip-ranking-card,.member-panel,.wallet-panel,.ranking-panel,.profile-card,.premium-product-card,
  .premium-product-detail-shell,.premium-purchase-shell,.premium-status-shell,.premium-support-shell,
  .streaming-account-card,.shared-account-card,.notification-center-shell,.notification-accordion-item,
  .notification-inline-detail,.tester-service-shell,.points-summary,.points-reward,.operator-card,
  .operator-package-card,.sportsbook-card,.recharge-operator-card,.recharge-sportsbook-card,
  .benefit-card,.methodology-card,.faq-item,.member-info-card,.member-data-item,.profile-stat,.profile-field,
  .wallet-balance-card,.wallet-request-card,.wallet-transaction-card,.growth-stat,.prediction-metric,
  .activity-item,.onboarding-item,.premium-sale-banner,.wallet-bank-info,.referral-share-card
){
  background:
    radial-gradient(circle at 100% 0%,rgba(var(--tier-accent-rgb),.032),transparent 11rem),
    radial-gradient(circle at 0% 100%,rgba(var(--tier-complement-rgb),.022),transparent 13rem),
    linear-gradient(145deg,#17181B,#111214)!important;
  border-color:color-mix(in srgb,var(--tier-card-edge) 82%,var(--tier-accent) 18%)!important;
  box-shadow:0 16px 38px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.025)!important;
}

/* Tarjetas clave: una línea metálica + una segunda nota cromática muy sutil. */
html.nekon-growth-tester-theme :is(.growth-hero,.vip-current,.profile-card,.wallet-balance-card){
  background:
    radial-gradient(circle at 93% 4%,rgba(var(--tier-accent-rgb),.055),transparent 15rem),
    radial-gradient(circle at 4% 96%,rgba(var(--tier-complement-rgb),.035),transparent 16rem),
    linear-gradient(145deg,#18191C,#101113)!important;
  border-color:color-mix(in srgb,var(--tier-border) 62%,#34363C 38%)!important;
}
html.nekon-growth-tester-theme :is(.growth-hero,.vip-current,.profile-card,.wallet-balance-card)::before{
  background:linear-gradient(90deg,transparent,var(--tier-accent),var(--tier-accent-3),var(--tier-complement),transparent)!important;
  opacity:.58!important;
}

/* Controles principales ahora combinan material + contraste secundario. */
html.nekon-growth-tester-theme :is(
  .member-primary-button,.premium-finalize-button,.premium-detail-buy,
  .growth-lab-entry__actions button:not(.secondary),.points-reward button:not(:disabled),
  .operator-recharge-tabs button.is-active,.cta-primary,.primary-button,button.primary,
  .notification-detail-card__action,.streaming-platform-tabs button.is-active,.wallet-history-tabs button.is-active
){
  background:linear-gradient(135deg,var(--tier-accent) 0%,var(--tier-accent-3) 42%,var(--tier-accent-2) 100%)!important;
  border-color:color-mix(in srgb,var(--tier-accent) 72%,var(--tier-complement) 28%)!important;
  box-shadow:0 9px 25px rgba(0,0,0,.36),0 0 11px rgba(var(--tier-accent-rgb),.09),inset 0 1px 0 rgba(255,255,255,.20)!important;
}

/* Estados activos: el metal manda, el segundo color solo acompaña. */
html.nekon-growth-tester-theme :is(
  .menu-link.is-active,.menu-group-toggle.is-active,.menu-submenu button.is-active,
  .arena-bottom-nav button.is-active,.bottom-nav button.is-active,
  [data-view="cuentas-premium"].is-active,[data-view="cuentas-premium"][aria-current="page"]
){
  background:
    linear-gradient(90deg,rgba(var(--tier-accent-rgb),.105),rgba(var(--tier-complement-rgb),.035) 58%,#15161A 100%)!important;
  border-color:color-mix(in srgb,color-mix(in srgb,var(--tier-accent) 72%,var(--tier-complement) 28%) 56%,#36383D 44%)!important;
  box-shadow:inset 3px 0 0 var(--tier-accent),inset 0 -1px 0 rgba(var(--tier-complement-rgb),.13)!important;
}

/* Pequeños títulos conservan jerarquía sin convertir todo en el color VIP. */
html.nekon-growth-tester-theme :is(
  .growth-kicker,.growth-card__head small,.growth-stat small,.growth-vip-chip small,
  .vip-current__head small,.vip-current__meta small,.vip-section-head small,.vip-journey-card>div>small,
  .vip-journey-stats small,.member-panel__head>span,.member-panel__eyebrow,.section-kicker,.card-kicker,
  .notification-list-item__category,.points-summary small,.premium-purchase-topbar small
){color:color-mix(in srgb,var(--tier-accent) 82%,#FFFFFF 18%)!important;text-shadow:none!important}

/* Iconos VIP: metal principal con una segunda corona/halo cromática discreta. */
html.nekon-growth-tester-theme :is(.growth-vip-chip i,.vip-current__icon){
  color:var(--tier-accent)!important;
  filter:drop-shadow(0 0 5px rgba(var(--tier-accent-rgb),.30)) drop-shadow(0 0 2px rgba(var(--tier-complement-rgb),.18))!important;
}

/* Comparador de planes: cada tarjeta mezcla su metal con un segundo material propio. */
html.nekon-growth-tester-theme .vip-plan.vip-tier--bronze{
  --plan-accent:#CD7F32;--plan-accent-2:#7A3F24;--plan-accent-3:#E2AD72;--plan-rgb:205,127,50;--plan-extra-rgb:107,49,52;
}
html.nekon-growth-tester-theme .vip-plan.vip-tier--silver{
  --plan-accent:#E1E8F0;--plan-accent-2:#7A899E;--plan-accent-3:#9DD7FF;--plan-rgb:225,232,240;--plan-extra-rgb:75,109,154;
}
html.nekon-growth-tester-theme .vip-plan.vip-tier--gold{
  --plan-accent:#FFD84D;--plan-accent-2:#A98216;--plan-accent-3:#FFE5A0;--plan-rgb:255,216,77;--plan-extra-rgb:40,92,77;
}
html.nekon-growth-tester-theme .vip-plan{
  background:
    radial-gradient(circle at 95% 5%,rgba(var(--plan-rgb),.05),transparent 9rem),
    radial-gradient(circle at 5% 96%,rgba(var(--plan-extra-rgb,44,99,215),.028),transparent 9rem),
    linear-gradient(145deg,#17181B,#101113)!important;
}
html.nekon-growth-tester-theme .vip-plan::before{
  background:linear-gradient(90deg,transparent,var(--plan-accent),var(--plan-accent-3,var(--plan-accent)),transparent)!important;
}
html.nekon-growth-tester-theme .vip-plan button{
  background:linear-gradient(135deg,var(--plan-accent),var(--plan-accent-3,var(--plan-accent)) 44%,var(--plan-accent-2))!important;
}

/* ----------------------------------------------------------------------
   TRANSICIÓN 4s CONTENIDA EN LOS CUADROS VISIBLES
   No existe overlay global; nada atraviesa topbar, barra inferior o paneles.
   ---------------------------------------------------------------------- */
.vip-theme-trace-host{isolation:isolate}
.vip-theme-card-trace{
  position:absolute;
  inset:0;
  z-index:20;
  pointer-events:none;
  box-sizing:border-box;
  opacity:0;
  background:
    linear-gradient(90deg,transparent,rgb(var(--morph-rgb)),transparent) top center/0 1.5px no-repeat,
    linear-gradient(90deg,transparent,rgb(var(--morph-rgb)),transparent) bottom center/0 1.5px no-repeat,
    linear-gradient(180deg,transparent,rgb(var(--morph-rgb)),transparent) left center/1.5px 0 no-repeat,
    linear-gradient(180deg,transparent,rgb(var(--morph-rgb)),transparent) right center/1.5px 0 no-repeat;
  box-shadow:inset 0 0 0 0 rgba(var(--morph-rgb),0);
  will-change:background-size,opacity,box-shadow;
}
.vip-theme-card-trace.is-running{
  animation:nekonContainedTrace 3.78s var(--trace-delay,0s) cubic-bezier(.45,0,.18,1) both;
}
.vip-theme-card-trace.is-leaving{opacity:0!important;transition:opacity .18s ease-out}

@keyframes nekonContainedTrace{
  0%{opacity:0;background-size:0 1.5px,0 1.5px,1.5px 0,1.5px 0;box-shadow:inset 0 0 0 0 rgba(var(--morph-rgb),0)}
  13%{opacity:.72}
  48%{opacity:.82;background-size:100% 1.5px,100% 1.5px,1.5px 48%,1.5px 48%;box-shadow:inset 0 0 28px rgba(var(--morph-rgb),.028)}
  78%{opacity:.52;background-size:100% 1.5px,100% 1.5px,1.5px 100%,1.5px 100%;box-shadow:inset 0 0 34px rgba(var(--morph-rgb),.018)}
  100%{opacity:0;background-size:100% 1.5px,100% 1.5px,1.5px 100%,1.5px 100%;box-shadow:inset 0 0 0 0 rgba(var(--morph-rgb),0)}
}

/* Anular por completo el overlay de la transición v26.69 si quedara en DOM por caché. */
.vip-theme-line-transition,.vip-theme-line-transition__ambient,.vip-theme-line-transition__sweep,.vip-theme-line-transition__outline{display:none!important}

@media(max-width:820px){
  .vip-theme-card-trace{z-index:8}
}
@media(prefers-reduced-motion:reduce){
  .vip-theme-card-trace{display:none!important}
}