/* milkyway-theme v1 — dynamic galaxy layer for the ninjaops.win network */
:root,
html[data-mw="on"] {
  --mw-void:#05030f; --mw-deep:#0a0620; --mw-nebula:#2a1055; --mw-violet:#6d28d9;
  --mw-magenta:#a855f7; --mw-starlight:#7dd3fc; --mw-gold:#fbbf24; --mw-ice:#e8ecff;
  --mw-glass:rgba(18,12,40,.62); --mw-glass-2:rgba(28,18,58,.55); --mw-line:rgba(139,120,255,.28);

  /* remap the network's own tokens so var()-based designs inherit the galaxy */
  --bg:var(--mw-void) !important; --background:var(--mw-void) !important;
  --panel:var(--mw-glass) !important; --card:var(--mw-glass-2) !important;
  --surface:var(--mw-glass-2) !important; --border:var(--mw-line) !important;
  --accent:var(--mw-magenta) !important; --cyan:var(--mw-starlight) !important;
  --primary:var(--mw-violet) !important; --text:var(--mw-ice) !important;
  --muted:#a8a3d4 !important; --gold:#fbbf24 !important;
  color-scheme: dark;
}

html[data-mw="on"] { background:var(--mw-void) !important; }
html[data-mw="on"] body {
  background:
    radial-gradient(1200px 700px at 12% -10%, rgba(109,40,217,.42), transparent 62%),
    radial-gradient(900px 620px at 88% 4%, rgba(168,85,247,.30), transparent 60%),
    radial-gradient(1000px 800px at 50% 118%, rgba(56,189,248,.18), transparent 64%),
    linear-gradient(180deg, #06030f 0%, #0a0620 38%, #0b0626 68%, #05030f 100%) !important;
  background-attachment: fixed !important;
  color: var(--mw-ice) !important;
  position: relative;
}

/* animated star layers + nebula drift */
#mw-sky { position:fixed; inset:0; z-index:0; pointer-events:none; display:block; }
#mw-sky-canvas { position:fixed; inset:0; z-index:1; pointer-events:none; display:block; opacity:.95; }
html[data-mw="on"] body > *:not(#mw-sky):not(#mw-sky-canvas):not(script):not(style) { position:relative; z-index:2; }

/* glass surfaces */
html[data-mw="on"] header,
html[data-mw="on"] nav,
html[data-mw="on"] .navbar,
html[data-mw="on"] .site-header,
html[data-mw="on"] .topbar {
  background:linear-gradient(180deg, rgba(16,10,38,.86), rgba(12,8,32,.58)) !important;
  border-bottom:1px solid var(--mw-line) !important;
  backdrop-filter:blur(14px) saturate(1.25); -webkit-backdrop-filter:blur(14px) saturate(1.25);
}

html[data-mw="on"] .card,
html[data-mw="on"] .product-card,
html[data-mw="on"] .panel,
html[data-mw="on"] .box,
html[data-mw="on"] .tile,
html[data-mw="on"] .product,
html[data-mw="on"] article > div,
html[data-mw="on"] .grid > a,
html[data-mw="on"] .grid > div {
  background:linear-gradient(160deg, rgba(30,18,64,.72), rgba(12,8,32,.66)) !important;
  border:1px solid var(--mw-line) !important;
  border-radius:16px !important;
  box-shadow:0 18px 48px -28px rgba(110,60,255,.75), inset 0 1px 0 rgba(255,255,255,.05) !important;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
}
html[data-mw="on"] .card:hover,
html[data-mw="on"] .product-card:hover,
html[data-mw="on"] .grid > a:hover {
  transform:translateY(-4px);
  border-color:rgba(168,85,247,.6) !important;
  box-shadow:0 26px 60px -26px rgba(168,85,247,.85), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* type */
html[data-mw="on"] h1 {
  background:linear-gradient(96deg,#fff 6%,#d9c7ff 34%,#7dd3fc 62%,#fbbf24 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent !important;
  letter-spacing:-.018em;
}
html[data-mw="on"] h2, html[data-mw="on"] h3 { color:#efe9ff !important; letter-spacing:-.012em; }
html[data-mw="on"] p, html[data-mw="on"] li, html[data-mw="on"] td { color:#d7d3f5 !important; }
html[data-mw="on"] a { color:var(--mw-starlight) !important; text-decoration-color:rgba(125,211,252,.35) !important; }
html[data-mw="on"] a:hover { color:#fff !important; }

/* controls */
html[data-mw="on"] .cta-btn,
html[data-mw="on"] button,
html[data-mw="on"] .btn,
html[data-mw="on"] input[type="submit"] {
  background:linear-gradient(100deg,var(--mw-violet),var(--mw-magenta) 55%,#38bdf8) !important;
  color:#fff !important; border:1px solid rgba(255,255,255,.18) !important; border-radius:12px !important;
  box-shadow:0 12px 30px -14px rgba(168,85,247,.9) !important;
  transition:filter .25s, transform .25s;
}
html[data-mw="on"] .cta-btn:hover,
html[data-mw="on"] button:hover,
html[data-mw="on"] .btn:hover { filter:brightness(1.12); transform:translateY(-1px); }

/* data + code */
html[data-mw="on"] table,
html[data-mw="on"] .comp-table { background:rgba(12,8,32,.55) !important; border:1px solid var(--mw-line) !important; border-radius:14px; overflow:hidden; }
html[data-mw="on"] th { background:rgba(109,40,217,.30) !important; color:#e9d9ff !important; }
html[data-mw="on"] td, html[data-mw="on"] th { border-color:rgba(139,120,255,.18) !important; }
html[data-mw="on"] pre, html[data-mw="on"] code {
  background:rgba(6,4,18,.85) !important; color:#bfe9ff !important;
  border:1px solid rgba(125,211,252,.22) !important; border-radius:10px;
}
html[data-mw="on"] hr { border-color:var(--mw-line) !important; }
html[data-mw="on"] footer {
  background:linear-gradient(180deg, transparent, rgba(8,4,22,.85)) !important;
  border-top:1px solid var(--mw-line) !important; color:#a8a3d4 !important;
}
html[data-mw="on"] ::selection { background:rgba(168,85,247,.45); color:#fff; }
html[data-mw="on"] * { scrollbar-color:rgba(168,85,247,.6) rgba(10,6,26,.9); }

/* a small live badge proves the theme is dynamic */
#mw-badge {
  position:fixed; right:14px; bottom:14px; z-index:9999;
  font:600 11px/1 ui-sans-serif,system-ui,sans-serif; letter-spacing:.14em; text-transform:uppercase;
  color:#d9c7ff; background:rgba(14,8,32,.72); border:1px solid rgba(168,85,247,.45);
  padding:7px 11px; border-radius:999px; backdrop-filter:blur(10px);
  box-shadow:0 8px 26px -14px rgba(168,85,247,.9); pointer-events:none;
  opacity:0; animation:mw-badge-in .9s .35s forwards;
}
@keyframes mw-badge-in { to { opacity:.92 } }
@media (prefers-reduced-motion: reduce) {
  #mw-badge { animation:none; opacity:.85 }
  html[data-mw="on"] * { transition:none !important; animation:none !important }
}
@media (max-width:600px){ #mw-badge{ font-size:9px; right:8px; bottom:8px; padding:6px 9px } }