/* ============================================================
   Nplay — Dark Luxury Theme Override
   Sitewide dark, mysterious, premium skin. Loaded after each
   page's own inline <style> block, so these rules win the
   cascade; !important is used defensively against inline
   style="" attributes and any more-specific legacy selectors.
   ============================================================ */

:root{
  --nx-bg:        #08080f;
  --nx-bg2:       #0d0d18;
  --nx-panel:     rgba(20,20,34,0.72);
  --nx-panel2:    rgba(16,16,28,0.55);
  --nx-line:      rgba(148,120,255,0.22);
  --nx-line2:     rgba(255,255,255,0.08);
  --nx-ink:       #f3f2fb;
  --nx-mut:       #a6a3c2;
  --nx-mut2:      #7d7a9c;
  --nx-violet:    #8b2ff0;
  --nx-blue:      #2f7dff;
  --nx-cyan:      #00d9ff;
  --nx-magenta:   #d926c4;
  --nx-gold:      #cda75a;
  --nx-grad:      linear-gradient(90deg,#8b2ff0 0%,#2f7dff 55%,#00d9ff 100%);
  --nx-glow:      0 0 40px rgba(139,47,240,.25), 0 0 80px rgba(0,217,255,.12);
}

html{ background:var(--nx-bg) !important; }

body{
  background:
    radial-gradient(ellipse 900px 600px at 12% -8%, rgba(139,47,240,.20), transparent 60%),
    radial-gradient(ellipse 900px 650px at 92% 8%, rgba(0,217,255,.14), transparent 55%),
    radial-gradient(ellipse 1200px 800px at 50% 110%, rgba(217,38,196,.10), transparent 60%),
    linear-gradient(180deg, var(--nx-bg) 0%, var(--nx-bg2) 100%) !important;
  background-attachment: fixed !important;
  color: var(--nx-ink) !important;
}

/* ---- neutralize light surfaces sitewide ---- */
body, section, div, article, main, aside, table, td, th, ul, li, header, footer, nav, form{
  border-color: var(--nx-line2);
}

/* catch inline light backgrounds set via style="" attributes */
[style*="background:#fff" i], [style*="background: #fff" i],
[style*="background-color:#fff" i], [style*="background-color: #fff" i],
[style*="background:#f" i], [style*="background: #f" i],
[style*="background-color:#f" i], [style*="background-color: #f" i],
[style*="background:white" i], [style*="background: white" i],
[style*="background-color:white" i], [style*="background-color: white" i],
[style*="background:rgb(255" i], [style*="background: rgb(255" i],
[style*="background:linear-gradient(180deg, #fff" i]{
  background: var(--nx-panel) !important;
  background-image: none !important;
  color: var(--nx-ink) !important;
}

section, .card, .box, .panel, .tile, [class*="card"], [class*="panel"], [class*="box"], details, [class*="prog"]{
  background-color: var(--nx-panel2) !important;
}

/* headings, body copy, muted text: force legible light tones */
h1,h2,h3,h4,h5,h6{ color: var(--nx-ink) !important; }
p, li, span, td, th, label, small{ color: var(--nx-mut) !important; }
strong, b{ color: var(--nx-ink) !important; }

/* Custom non-semantic headline/heading classes found on this site: the
   hero slider renders its rotating headlines as <div class="sh1"> (only
   the first slide is a real <h1>), and <summary> (FAQ accordion titles)
   both carry the site's original dark-navy (#191c33) text color tuned for
   a light background — invisible on the new dark background. Force both
   to a solid, legible ink color. */
.sh1, .sh2, .sh3, summary{
  background-image: none !important;
  -webkit-text-fill-color: var(--nx-ink) !important;
  color: var(--nx-ink) !important;
}
summary{ cursor: pointer; }

/* Any gradient-clipped headline text (common on this site's hero/section
   titles) was tuned for a light backdrop — on a dark page some of those
   gradient stops are unreadable. Replace with a guaranteed-bright luxury
   gradient (white -> violet -> cyan) rather than leaving it to chance.
   Scoped to h1/h2 only — h3-h6 stay solid off-white for calm hierarchy. */
h1, h2,
[style*="gradient" i], [style*="background-clip" i], [class*="grad" i]{
  background-image: linear-gradient(90deg, #ffffff 0%, #e3d4ff 30%, #9a4bff 65%, #00d9ff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: var(--nx-ink) !important;
}
h3,h4,h5,h6{
  background-image: none !important;
  -webkit-text-fill-color: var(--nx-ink) !important;
}
.brand, .logo, nav *, header *, footer *{
  background-image: none !important;
  -webkit-text-fill-color: unset !important;
}

a:not([class*="btn" i]):not(.button):not(.wa-float){ color: var(--nx-cyan) !important; }
a:not([class*="btn" i]):not(.button):not(.wa-float):hover{ color: var(--nx-violet) !important; }

/* Filled/solid buttons (e.g. class="btn primary") keep a bright cyan/gradient
   BACKGROUND from the site's own CSS, but the generic link-color rule above
   would otherwise paint their text cyan-on-cyan and make the label vanish.
   Force dark, high-contrast text on any filled/primary button or the
   floating WhatsApp button (bright green background). */
a[class*="btn" i][class*="primary" i], button[class*="primary" i],
.btn.primary, .button.primary, [class*="btn-fill" i], [class*="btn-solid" i]{
  color: #0a0a14 !important;
}
.wa-float{ color: #ffffff !important; }

/* nav / header already dark sitewide — just tighten consistency */
header, nav, .nav, .navbar{
  background: rgba(6,6,12,0.85) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--nx-line2) !important;
}
header a, nav a, .nav a, .navbar a{ color: var(--nx-mut) !important; }
header a:hover, nav a:hover, .nav a:hover, .navbar a:hover{ color: #fff !important; }

/* buttons: keep the existing brand gradient look, add a glow */
a[class*="btn" i], button, input[type="submit"], .button{
  box-shadow: 0 6px 24px rgba(139,47,240,.25) !important;
  border-color: transparent !important;
}

/* form fields */
input, textarea, select{
  background: rgba(255,255,255,0.04) !important;
  color: var(--nx-ink) !important;
  border: 1px solid var(--nx-line2) !important;
}
input::placeholder, textarea::placeholder{ color: var(--nx-mut2) !important; }

/* tables */
table{ background: transparent !important; }
tr{ border-color: var(--nx-line2) !important; }

/* footer */
footer{
  background: #05050a !important;
  border-top: 1px solid var(--nx-line2) !important;
}
footer, footer *{ color: var(--nx-mut) !important; }
footer a:hover{ color: var(--nx-cyan) !important; }

/* subtle luxury touch: thin gradient rule under H1/H2 kickers, if present */
hr{ border-color: var(--nx-line2) !important; background: var(--nx-line2) !important; }

/* images on flat white cards: frame them so they don't look like paper cut-outs */
img{ border-radius: 4px; }

/* selection color, a small luxury detail */
::selection{ background: rgba(139,47,240,.35); color:#fff; }

/* scrollbar, webkit only — quiet, not intrusive */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--nx-bg); }
::-webkit-scrollbar-thumb{ background:#2a2a44; border-radius:6px; }
::-webkit-scrollbar-thumb:hover{ background:#3a3a5c; }