/* 20260725: User panel button-loader cleanup + light multicolour cards. */

/* Keep the real page loader active. Only the legacy alternate loaders remain blocked elsewhere. */
#pn-loader:not(.hide){display:flex!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;}
#pn-loader.hide{opacity:0!important;visibility:hidden!important;pointer-events:none!important;}

/* Remove every inline spinner/text effect that used to appear inside buttons or links. */
.pn-click-processing,
button.pn-click-processing,
a.pn-click-processing,
[role="button"].pn-click-processing{cursor:inherit!important;pointer-events:auto!important;opacity:1!important;white-space:normal!important;}
.pn-click-processing::before,
.pn-click-processing::after{content:none!important;display:none!important;animation:none!important;margin:0!important;border:0!important;width:0!important;height:0!important;}
button[aria-busy="true"],a[aria-busy="true"],[role="button"][aria-busy="true"]{cursor:inherit!important;}

:root{
  --pn-light-card-bg:linear-gradient(135deg,#ffffff 0%,#eff6ff 27%,#fff7ed 52%,#fdf2f8 74%,#ecfdf5 100%);
  --pn-light-card-bg-2:linear-gradient(135deg,#f8fbff 0%,#e0f2fe 28%,#fef3c7 55%,#fce7f3 76%,#dcfce7 100%);
  --pn-light-card-text:#0f172a;
  --pn-light-card-muted:#475569;
  --pn-light-card-line:rgba(148,163,184,.34);
}
@keyframes pnSoftCardGlow{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}

/* User panel cards: replace heavy dark/blue blocks with readable light animated surfaces. */
body[data-page]:not(.admin-body) .content .card,
body[data-page]:not(.admin-body) .content .post,
body[data-page]:not(.admin-body) .content .composer,
body[data-page]:not(.admin-body) .content .product-card,
body[data-page]:not(.admin-body) .content .job-card,
body[data-page]:not(.admin-body) .content .group-card,
body[data-page]:not(.admin-body) .content .page-card,
body[data-page]:not(.admin-body) .content .profile-card,
body[data-page]:not(.admin-body) .content .activity-card,
body[data-page]:not(.admin-body) .content .wallet-card,
body[data-page]:not(.admin-body) .wallet-pro-hero,
body[data-page]:not(.admin-body) .wallet-account-card,
body[data-page]:not(.admin-body) .wallet-kpi,
body[data-page]:not(.admin-body) .wallet-panel,
body[data-page]:not(.admin-body) .wallet-action-card,
body[data-page]:not(.admin-body) .pnx-hero,
body[data-page]:not(.admin-body) .pnx-card,
body[data-page]:not(.admin-body) .market-hero,
body[data-page]:not(.admin-body) .market-card,
body[data-page]:not(.admin-body) .seller-card,
body[data-page]:not(.admin-body) .seller-metric,
body[data-page]:not(.admin-body) .seller-panel,
body[data-page]:not(.admin-body) .pnj-card,
body[data-page]:not(.admin-body) .pnj-hero,
body[data-page]:not(.admin-body) .privacy-card,
body[data-page]:not(.admin-body) .privacy-hero,
body[data-page]:not(.admin-body) .earn-card,
body[data-page]:not(.admin-body) .earn-hero,
body[data-page]:not(.admin-body) .task-card,
body[data-page]:not(.admin-body) .task-hero,
body[data-page]:not(.admin-body) .cs-hero,
body[data-page]:not(.admin-body) .cs-card,
body[data-page]:not(.admin-body) .cs-stat{
  background:var(--pn-light-card-bg)!important;
  background-size:260% 260%!important;
  animation:pnSoftCardGlow 12s ease-in-out infinite!important;
  color:var(--pn-light-card-text)!important;
  border:1px solid var(--pn-light-card-line)!important;
  box-shadow:0 14px 34px rgba(15,23,42,.07)!important;
}

/* Keep text readable when older page CSS forced white text on dark cards. */
body[data-page]:not(.admin-body) .content .card :where(h1,h2,h3,h4,h5,h6,p,span,strong,b,small,li,label,div),
body[data-page]:not(.admin-body) .content .post :where(h1,h2,h3,h4,h5,h6,p,span,strong,b,small,li,label,div),
body[data-page]:not(.admin-body) .wallet-pro-hero :where(h1,h2,h3,h4,p,span,strong,b,small,div),
body[data-page]:not(.admin-body) .wallet-account-card :where(h1,h2,h3,h4,p,span,strong,b,small,div),
body[data-page]:not(.admin-body) .wallet-kpi :where(h1,h2,h3,h4,p,span,strong,b,small,div),
body[data-page]:not(.admin-body) .wallet-panel :where(h1,h2,h3,h4,p,span,strong,b,small,div),
body[data-page]:not(.admin-body) .wallet-action-card :where(h1,h2,h3,h4,p,span,strong,b,small,div),
body[data-page]:not(.admin-body) .pnx-hero :where(h1,h2,h3,h4,p,span,strong,b,small,div),
body[data-page]:not(.admin-body) .pnx-card :where(h1,h2,h3,h4,p,span,strong,b,small,div),
body[data-page]:not(.admin-body) .market-hero :where(h1,h2,h3,h4,p,span,strong,b,small,div),
body[data-page]:not(.admin-body) .cs-hero :where(h1,h2,h3,h4,p,span,strong,b,small,div),
body[data-page]:not(.admin-body) .cs-card :where(h1,h2,h3,h4,p,span,strong,b,small,div),
body[data-page]:not(.admin-body) .cs-stat :where(h1,h2,h3,h4,p,span,strong,b,small,div){
  color:var(--pn-light-card-text)!important;
}
body[data-page]:not(.admin-body) .content .card :where(p,small,.muted,.subtle),
body[data-page]:not(.admin-body) .wallet-pro-hero :where(p,small),
body[data-page]:not(.admin-body) .wallet-account-card :where(small),
body[data-page]:not(.admin-body) .wallet-kpi :where(span,small),
body[data-page]:not(.admin-body) .wallet-action-card :where(span),
body[data-page]:not(.admin-body) .pnx-card :where(p,small),
body[data-page]:not(.admin-body) .market-hero :where(p,small){
  color:var(--pn-light-card-muted)!important;
}

/* Wallet amount/metrics remain on one line on desktop and mobile. */
.wallet-hero-balance strong,
.wallet-kpi strong,
.wallet-tx b,
.cs-stat strong,
.seller-metric strong,
.pnx-score b,
.pn-p8-kpis article strong,
.stat-card strong,
.metric-card strong{
  white-space:nowrap!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  line-height:1.05!important;
}
.wallet-hero-balance strong{font-size:clamp(30px,5vw,50px)!important;}
.wallet-kpi strong{font-size:clamp(20px,3.2vw,25px)!important;}
.wallet-account-card strong{white-space:nowrap!important;overflow:auto!important;max-width:100%;}

/* Use brighter icon chips on the new light cards. */
.wallet-kpi i,
.wallet-action-card>i:first-child,
.pnx-icon,
.cs-stat i,
.stat-card i,
.metric-card i{
  background:var(--pn-light-card-bg-2)!important;
  background-size:220% 220%!important;
  animation:pnSoftCardGlow 10s ease-in-out infinite!important;
  color:#1d4ed8!important;
  box-shadow:inset 0 0 0 1px rgba(29,78,216,.08)!important;
}

@media (prefers-reduced-motion:reduce){
  body[data-page] .card,
  body[data-page] .post,
  body[data-page] .wallet-pro-hero,
  body[data-page] .wallet-kpi,
  body[data-page] .wallet-panel,
  body[data-page] .pnx-card,
  body[data-page] .market-hero{animation:none!important;}
}
@media (max-width:640px){
  .wallet-hero-balance strong{font-size:30px!important;}
  .wallet-account-card{display:block!important;}
}