/* =====================================================================
   CURSOR SECTION — "NEON GRID" cyberpunk skin
   ---------------------------------------------------------------------
   Loaded last, after tailwind.css and style.css. The compiled Tailwind
   build bakes its palette in as literal colours, so this layer redefines
   those utilities instead of touching hundreds of templates.

   Language: deep-space canvas + holographic HUD.
     canvas   #05060d -> #0a0a18   (animated grid + aurora bloom)
     cyan     #22d3ee   primary / structure
     magenta  #f472d0   pointer / alert accents
     violet   #a855f7   depth, gradients
     surfaces translucent glass, gradient hairline borders, corner ticks
   ===================================================================== */

:root{
  --cyan-rgb: 34 211 238;
  --cy:      #22d3ee;
  --mg:      #f472d0;
  --vi:      #a855f7;
  --lime:    #a3e635;
  --ink:     #05060d;
  --panel:   rgba(16, 20, 38, .58);
  --line:    rgba(34, 211, 238, .18);
  --line-2:  rgba(34, 211, 238, .42);
  --txt:     #e6f6ff;
  --txt-dim: #9fb3cc;
  --txt-mute:#5f7391;
  --glow-cy: 0 0 14px rgba(34,211,238,.45), 0 0 42px rgba(34,211,238,.16);
  --hud-r:   14px;
}
html.light{ --cyan-rgb: 34 211 238 }

/* ---------- canvas: grid + aurora bloom + scanlines -------------------- */
html, body{ background:var(--ink) !important; color:var(--txt) !important }
body{
  font-family:"Inter", ui-sans-serif, system-ui, sans-serif !important;
  background-image:
    radial-gradient(70rem 44rem at 8% -10%,  rgba(34,211,238,.16), transparent 62%),
    radial-gradient(60rem 40rem at 96% 2%,   rgba(168,85,247,.16), transparent 62%),
    radial-gradient(70rem 46rem at 50% 118%, rgba(244,114,208,.12), transparent 62%),
    linear-gradient(rgba(34,211,238,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,.055) 1px, transparent 1px),
    linear-gradient(180deg, #05060d 0%, #0a0a18 55%, #05060d 100%) !important;
  background-size: auto, auto, auto, 46px 46px, 46px 46px, auto !important;
  background-attachment: fixed !important;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px),
    radial-gradient(120% 60% at 50% 100%, rgba(34,211,238,.10), transparent 70%);
  mix-blend-mode:screen;
}

/* ---------- surface utilities remapped -------------------------------- */
.bg-ink, .bg-ink\/70, .bg-ink\/85{ background-color:rgba(5,6,13,.82) !important }
.bg-panel, .bg-panel\/40{ background-color:var(--panel) !important }
.bg-white\/5, .bg-white\/\[\.02\], .bg-white\/\[\.03\]{
  background-color:rgba(255,255,255,.035) !important }
.bg-black\/40{ background-color:rgba(2,4,10,.66) !important }

.text-white{ color:var(--txt) !important }
.text-slate-200, .text-slate-300{ color:#c7d8ea !important }
.text-slate-400, .text-slate-500{ color:var(--txt-dim) !important }
.text-slate-600, .text-slate-800{ color:var(--txt) !important }

.border-cyan\/10, .border-cyan\/15, .border-cyan\/20, .border-cyan\/25{
  border-color:var(--line) !important }
.border-cyan\/30, .border-cyan\/40, .border-cyan\/50, .border-cyan{
  border-color:var(--line-2) !important }
.border-white\/5, .border-white\/10{ border-color:rgba(255,255,255,.07) !important }

.text-cyan{ color:var(--cy) !important }
.text-magenta, .text-magenta\/80{ color:var(--mg) !important }
.text-limeon{ color:var(--lime) !important }
.bg-magenta, .bg-neon{ background-color:var(--mg) !important }

/* ---------- typography: futuristic display ---------------------------- */
.font-orbitron{
  font-family:"Orbitron", "Inter", ui-sans-serif, sans-serif !important;
  letter-spacing:.12em !important;
}
.neon-text{
  text-shadow:0 0 10px rgba(34,211,238,.55), 0 0 30px rgba(34,211,238,.25) !important;
}
/* .neon-hero is the HERO SECTION wrapper (not text): give it a deeper
   grid + a horizon glow. The gradient headline is handled by .neon-flicker
   on the <h1> inside it. */
.neon-hero{
  position:relative; overflow:hidden;
  background:
    linear-gradient(rgba(34,211,238,.05) 1px, transparent 1px) 0 0/100% 38px,
    linear-gradient(90deg, rgba(244,114,208,.05) 1px, transparent 1px) 0 0/38px 100%,
    radial-gradient(60% 100% at 50% 0%, rgba(168,85,247,.16), transparent 70%) !important;
  border-bottom:1px solid rgba(34,211,238,.22) !important;
}
.neon-hero::after{
  content:""; position:absolute; left:50%; bottom:-1px; transform:translateX(-50%);
  width:min(760px, 80%); height:1px;
  background:linear-gradient(90deg, transparent, var(--cy), var(--mg), transparent);
  box-shadow:0 0 18px rgba(34,211,238,.7);
}

/* Hero headline — chrome-gradient with a slow neon pulse */
.neon-hero h1, .neon-flicker{
  background:linear-gradient(96deg, #67e8f9 0%, #a855f7 46%, #f472d0 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent !important;
  filter:drop-shadow(0 0 24px rgba(34,211,238,.4));
  animation:cwPulse 4.5s ease-in-out infinite;
}
@keyframes cwPulse{
  0%,100%{ filter:drop-shadow(0 0 22px rgba(34,211,238,.35)) }
  50%    { filter:drop-shadow(0 0 34px rgba(168,85,247,.55)) }
}

/* Section headings ("TOP CURSORS") — HUD rails already exist in markup;
   just make the type read as a display face. */
.section-title{ color:#eafcff; text-shadow:0 0 18px rgba(34,211,238,.28) }

/* ---------- glass cards: gradient hairline + HUD corner tick ---------- */
.glass-card{
  position:relative;
  background:linear-gradient(180deg, rgba(28,34,62,.62), rgba(12,15,30,.62)) !important;
  border:1px solid transparent !important;
  border-radius:var(--hud-r) !important;
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 18px 44px -26px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05) !important;
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s;
  overflow:hidden;
}
.glass-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg, rgba(34,211,238,.55), rgba(168,85,247,.28) 45%, rgba(244,114,208,.42));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.55; transition:opacity .22s; pointer-events:none;
}
.glass-card::after{
  content:""; position:absolute; top:8px; right:8px; width:14px; height:14px;
  border-top:2px solid rgba(34,211,238,.7); border-right:2px solid rgba(34,211,238,.7);
  border-radius:0 4px 0 0; opacity:.5; transition:opacity .22s, box-shadow .22s;
  pointer-events:none;
}
.glass-card:hover{
  transform:translateY(-4px);
  box-shadow:0 26px 60px -26px rgba(0,0,0,.95), var(--glow-cy),
             inset 0 1px 0 rgba(255,255,255,.07) !important;
}
.glass-card:hover::before{ opacity:1 }
.glass-card:hover::after{ opacity:1; box-shadow:0 0 12px rgba(34,211,238,.8) }

/* ---------- HUD pills / chips ----------------------------------------- */
.pill{
  background:rgba(255,255,255,.035) !important;
  border:1px solid var(--line) !important;
  color:#c7d8ea !important; border-radius:999px; transition:.2s;
}
.pill:hover{
  border-color:var(--line-2) !important; color:#fff !important;
  box-shadow:var(--glow-cy) !important;
}
.pill.active{
  background:linear-gradient(120deg, rgba(34,211,238,.22), rgba(168,85,247,.22)) !important;
  border-color:rgba(34,211,238,.65) !important; color:#eafcff !important;
  box-shadow:inset 0 0 18px rgba(34,211,238,.18), 0 0 16px rgba(34,211,238,.3) !important;
}

/* ---------- buttons ---------------------------------------------------- */
a.bg-cyan, button.bg-cyan, .btn-neon{
  background:linear-gradient(120deg, #22d3ee 0%, #7dd3fc 45%, #a855f7 100%) !important;
  color:#04121a !important; border:0 !important; font-weight:800 !important;
  box-shadow:0 0 0 1px rgba(34,211,238,.5), 0 10px 30px -12px rgba(34,211,238,.85) !important;
  transition:filter .2s, transform .2s, box-shadow .2s;
}
a.bg-cyan:hover, button.bg-cyan:hover, .btn-neon:hover{
  filter:brightness(1.08); transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(34,211,238,.8), 0 14px 40px -12px rgba(34,211,238,1) !important;
}
.hover\:bg-cyan\/10:hover{ background-color:rgba(34,211,238,.10) !important }
.hover\:border-cyan:hover, .hover\:border-cyan\/40:hover{ border-color:var(--cy) !important }
.hover\:text-cyan:hover, .hover\:text-gold:hover{ color:var(--cy) !important }
.hover\:text-white:hover{ color:#fff !important }
.hover\:bg-slate-50:hover{ background-color:rgba(255,255,255,.06) !important }

/* ---------- form controls --------------------------------------------- */
input, select, textarea{
  background:rgba(8,12,24,.8) !important;
  border:1px solid var(--line) !important;
  color:var(--txt) !important; border-radius:12px !important;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--cy) !important; outline:none !important;
  box-shadow:0 0 0 3px rgba(34,211,238,.14), var(--glow-cy) !important;
}
input::placeholder, textarea::placeholder{ color:var(--txt-mute) !important }

::-webkit-scrollbar{ width:10px; height:10px }
::-webkit-scrollbar-track{ background:#070a14 }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(34,211,238,.5), rgba(168,85,247,.5));
  border-radius:6px; border:2px solid #070a14;
}
::selection{ background:rgba(244,114,208,.35); color:#fff }

/* =====================================================================
   Site chrome — navbar + footer, restyled as a holographic HUD bar
   ===================================================================== */
.cw-nav{
  position:sticky; top:0; z-index:60;
  background:linear-gradient(180deg, rgba(5,7,16,.92), rgba(5,7,16,.72));
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid rgba(34,211,238,.22);
  box-shadow:0 1px 0 rgba(34,211,238,.10), 0 18px 40px -30px rgba(34,211,238,.6);
}
.cw-nav::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, var(--cy), var(--mg), transparent);
  background-size:220% 100%; animation:cwScan 7s linear infinite; opacity:.75;
}
@keyframes cwScan{ 0%{background-position:0% 0} 100%{background-position:220% 0} }

.cw-nav-inner{
  width:min(100% - 2.4rem, 1240px); margin-inline:auto;
  display:flex; align-items:center; gap:1rem; height:68px;
}
.cw-logo{ display:flex; align-items:center; gap:.6rem; text-decoration:none; flex:0 0 auto }
.cw-logo svg{ width:27px; height:27px; display:block;
  filter:drop-shadow(0 0 8px rgba(34,211,238,.5)) }
.cw-logo span{
  font-family:"Orbitron","Inter",sans-serif; font-weight:800; font-size:1rem;
  letter-spacing:.06em; color:#eafcff; text-shadow:0 0 14px rgba(34,211,238,.35);
}
.cw-nav-links{ display:flex; align-items:center; gap:.2rem; margin-left:auto; flex-wrap:wrap }
.cw-nav-links a{
  position:relative; color:#a9c0d8; font-weight:600; font-size:.88rem;
  letter-spacing:.04em; padding:.55rem .8rem; border-radius:8px;
  text-decoration:none; white-space:nowrap; transition:color .18s, background .18s;
}
.cw-nav-links a:hover{ color:#eafcff; background:rgba(34,211,238,.09) }
.cw-nav-links a[aria-current="page"]{ color:var(--cy); text-shadow:0 0 12px rgba(34,211,238,.5) }
.cw-nav-links a[aria-current="page"]::after{
  content:""; position:absolute; left:.8rem; right:.8rem; bottom:2px; height:2px;
  background:var(--cy); box-shadow:0 0 10px var(--cy); border-radius:2px;
}
.cw-nav-cta{
  background:linear-gradient(120deg,#22d3ee,#a855f7) !important;
  color:#04121a !important; font-weight:800 !important; letter-spacing:.05em;
  padding:.6rem 1.2rem !important; border-radius:999px !important;
  box-shadow:0 0 0 1px rgba(34,211,238,.45), 0 10px 30px -12px rgba(34,211,238,.9);
}
.cw-nav-cta:hover{ filter:brightness(1.08); color:#04121a !important }

.cw-foot{
  position:relative; margin-top:4.5rem; padding:3rem 0 1.5rem;
  border-top:1px solid rgba(34,211,238,.2);
  background:linear-gradient(180deg, rgba(8,11,22,.75), rgba(5,6,13,.95));
}
.cw-foot::before{
  content:""; position:absolute; top:-1px; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(34,211,238,.7), transparent);
}
.cw-foot-grid{
  width:min(100% - 2.4rem, 1240px); margin-inline:auto;
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:2.2rem;
}
.cw-foot h4{
  font-family:"Orbitron","Inter",sans-serif; font-size:.76rem; text-transform:uppercase;
  letter-spacing:.18em; color:var(--cy); margin:0 0 .9rem;
  text-shadow:0 0 12px rgba(34,211,238,.35);
}
.cw-foot a{ display:block; color:#9fb3cc; text-decoration:none; font-size:.9rem;
  padding:.3rem 0; transition:color .18s, transform .18s }
.cw-foot a:hover{ color:var(--cy); transform:translateX(3px) }
.cw-foot p{ color:#8ea4bd; font-size:.9rem; line-height:1.7; margin:.8rem 0 0 }
.cw-foot-bottom{
  width:min(100% - 2.4rem, 1240px); margin:1.8rem auto 0; padding-top:1.2rem;
  border-top:1px solid rgba(255,255,255,.06); color:var(--txt-mute); font-size:.82rem;
}
.cw-foot .cw-logo span{ font-size:.95rem }

/* ---------- fixed-header offsets no longer needed --------------------- */
.pt-28{ padding-top:2rem !important }
.pt-44{ padding-top:2.5rem !important }
@media (min-width:768px){ .md\:pt-32{ padding-top:2.5rem !important } }
.top-\[88px\]{ top:80px !important }
.top-16{ top:4.5rem !important }

@media (max-width:900px){
  .cw-foot-grid{ grid-template-columns:1fr; gap:1.6rem }
  .cw-nav-inner{ height:auto; padding:.7rem 0; flex-wrap:wrap }
  .cw-nav-links{ width:100%; margin-left:0; overflow-x:auto; padding-bottom:.2rem }
}
@media (prefers-reduced-motion:reduce){
  .cw-nav::after{ animation:none }
  .glass-card{ transition:none }
}

/* =====================================================================
   SPECIFICITY OVERRIDE
   ---------------------------------------------------------------------
   style.css ships a full `html.light …` light theme (27 rules). Those
   selectors carry TWO classes, so they beat the single-class rules above
   even when both are !important. Re-declare the same targets here with an
   equal-specificity `html.light` prefix: this file loads later, so on a
   tie we win. Result: the cyberpunk skin holds no matter which class
   (light / dark / none) ends up on <html> — no dependency on _inc.php.
   ===================================================================== */
html.light{ color-scheme:dark }
html.light body{ background:var(--ink) !important; color:var(--txt) !important }

html.light .bg-ink\/85{ background:rgba(5,6,13,.82) !important }
html.light .bg-panel,
html.light .bg-panel\/40,
html.light .bg-panel\/50,
html.light .bg-panel\/60{ background:var(--panel) !important }

html.light .glass-card{
  background:linear-gradient(180deg, rgba(28,34,62,.62), rgba(12,15,30,.62)) !important;
  border-color:transparent !important;
  color:var(--txt) !important;
}

html.light .border-cyan\/15,
html.light .border-cyan\/20,
html.light .border-cyan\/25,
html.light .border-white\/10{ border-color:var(--line) !important }

html.light .text-white,
html.light .neon-text,
html.light .neon-logo{ color:var(--txt) !important }
html.light .text-slate-300{ color:#c7d8ea !important }
html.light .text-slate-400,
html.light .text-slate-500{ color:var(--txt-dim) !important }
html.light .text-slate-600{ color:var(--txt) !important }

html.light .neon-text{
  text-shadow:0 0 10px rgba(34,211,238,.55), 0 0 30px rgba(34,211,238,.25) !important;
}
html.light .neon-flicker{
  background:linear-gradient(96deg, #67e8f9 0%, #a855f7 46%, #f472d0 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent !important;
  text-shadow:none !important;
}

html.light .pill{
  background:rgba(255,255,255,.035) !important;
  color:#c7d8ea !important; border-color:var(--line) !important;
}
html.light .pill.active{
  background:linear-gradient(120deg, rgba(34,211,238,.22), rgba(168,85,247,.22)) !important;
  color:#eafcff !important; border-color:rgba(34,211,238,.65) !important;
}
html.light .neon-sign-frame{
  background:linear-gradient(135deg, rgba(13,16,24,.85), rgba(20,24,34,.85)) !important;
}
html.light .neon-sign-text{ color:var(--txt) !important }
html.light .nav-link{ color:#a9c0d8 !important }

/* =====================================================================
   REFINEMENT PASS — hierarchy, calmer CTAs, depth
   ---------------------------------------------------------------------
   The first pass got the atmosphere right but everything competed for
   attention: solid cyan CTAs fought the artwork, and Orbitron on long
   card titles pushed them to three ragged lines. This pass restores a
   reading order: artwork first, title second, actions third.
   ===================================================================== */

/* ---------- card titles: Inter, tighter, quieter ---------------------- */
.glass-card .font-orbitron{
  font-family:"Inter", ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing:-.01em !important;
  font-weight:700 !important;
  font-size:.98rem !important;
  line-height:1.35 !important;
  color:#cfe3f5 !important;
  text-shadow:none !important;
}
.glass-card .font-orbitron:hover{ color:#fff !important }

/* ---------- artwork gets a spotlight, not a flat field ---------------- */
.glass-card{
  background:
    radial-gradient(120% 70% at 50% 34%, rgba(124,58,237,.16), transparent 62%),
    linear-gradient(180deg, rgba(24,29,54,.72), rgba(10,13,26,.78)) !important;
}
.glass-card img{
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.55)) !important;
  transition:transform .28s cubic-bezier(.2,.7,.3,1), filter .28s;
}
.glass-card:hover img{
  transform:scale(1.06);
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.6))
         drop-shadow(0 0 22px rgba(124,58,237,.45)) !important;
}

/* corner tick only on hover — 20 permanent brackets was visual noise */
.glass-card::after{ opacity:0 }
.glass-card:hover::after{ opacity:.9 }
.glass-card::before{ opacity:.32 }

/* ---------- primary CTA: HUD glass, not candy ------------------------- */
.add-btn{
  background:linear-gradient(135deg, rgba(124,58,237,.92), rgba(34,211,238,.82)) !important;
  color:#f2fbff !important;
  font-weight:700 !important;
  letter-spacing:.01em;
  border:1px solid rgba(140,220,255,.45) !important;
  border-radius:12px !important;
  padding:.62rem 1.35rem !important;
  box-shadow:0 8px 22px -12px rgba(124,58,237,.9),
             inset 0 1px 0 rgba(255,255,255,.18) !important;
  text-shadow:0 1px 6px rgba(0,0,0,.35);
  transition:filter .2s, transform .2s, box-shadow .2s;
}
.add-btn:hover{
  filter:brightness(1.1) !important; transform:translateY(-1px);
  border-color:rgba(180,240,255,.75) !important;
  box-shadow:0 12px 30px -12px rgba(34,211,238,.9),
             inset 0 1px 0 rgba(255,255,255,.24) !important;
}
.add-btn i{ opacity:.85 }

/* ---------- icon buttons: outline ghosts ------------------------------ */
.preview-btn,
.dropdown-container > button{
  width:2.6rem !important; height:2.6rem !important;
  background:rgba(255,255,255,.03) !important;
  border:1px solid rgba(34,211,238,.2) !important;
  color:#7f9dbb !important;
  transition:color .18s, border-color .18s, background .18s, box-shadow .18s;
}
.preview-btn:hover,
.dropdown-container > button:hover{
  color:var(--cy) !important; border-color:rgba(34,211,238,.6) !important;
  background:rgba(34,211,238,.08) !important;
  box-shadow:0 0 14px -2px rgba(34,211,238,.55) !important;
}
.preview-btn.active{
  color:#04121a !important; background:var(--cy) !important;
  border-color:var(--cy) !important; box-shadow:var(--glow-cy) !important;
}

/* action row divider — hairline, not a hard rule */
.glass-card .border-t{
  border-top:1px solid rgba(255,255,255,.055) !important;
  padding-top:1.05rem !important; margin-top:.9rem !important;
}

/* ---------- dropdown (download menu) ---------------------------------- */
.dropdown-menu{
  background:linear-gradient(180deg, rgba(18,22,42,.97), rgba(10,13,26,.97)) !important;
  border:1px solid rgba(34,211,238,.22) !important;
  box-shadow:0 26px 60px -24px rgba(0,0,0,.95), 0 0 0 1px rgba(34,211,238,.06) !important;
}
.dropdown-menu a{ color:#c3d6e8 !important; border-radius:10px }
.dropdown-menu a:hover{ background:rgba(34,211,238,.10) !important; color:#fff !important }

/* ---------- section heading rails: thinner, less strobe --------------- */
.section-title{ letter-spacing:.1em !important }
.animate-pulse{ animation:none !important }
.shadow-\[0_0_10px_rgba\(34\2c 211\2c 238\2c 1\)\]{
  box-shadow:0 0 8px rgba(34,211,238,.55) !important;
}

/* ---------- VIEW ALL: quieter link, brighter on hover ----------------- */
.pill{ letter-spacing:.12em !important }

/* ---------- grid a touch calmer near the fold ------------------------- */
body{ background-size: auto, auto, auto, 54px 54px, 54px 54px, auto !important }

/* =====================================================================
   FIX PASS 2
   ---------------------------------------------------------------------
   1. The icon-button rule was scoped to `.dropdown-container > button`,
      which ALSO matched the detail page's wide "Download" button and
      squashed it to 2.6rem — its label spilled over the neighbouring
      "Collection" button. Scope the icon sizing to cards only.
   2. The Add gradient leaned cyan; over dark violet artwork it read as a
      washed-out sky blue with white text on top. Rebuilt around violet,
      which is the palette the cursor art actually lives in.
   3. The HUD corner tick read as a stray frame floating over the artwork
      on hover. Removed entirely.
   ===================================================================== */

/* ---- 1. icon buttons: only inside cards ------------------------------ */
.dropdown-container > button{
  width:auto !important; height:auto !important;
}
.glass-card .preview-btn,
.glass-card .dropdown-container > button{
  width:2.6rem !important; height:2.6rem !important;
}
/* the detail page's Download / Collection / Share row */
#dlBtn, #shareBtn{
  width:auto !important; height:auto !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(34,211,238,.32) !important;
  color:#dbe9f7 !important;
  border-radius:14px !important;
  transition:border-color .18s, background .18s, color .18s, box-shadow .18s;
}
#shareBtn{ width:3rem !important; height:3rem !important; border-radius:999px !important }
#dlBtn:hover, #shareBtn:hover{
  border-color:rgba(34,211,238,.7) !important; color:#fff !important;
  background:rgba(34,211,238,.09) !important;
  box-shadow:0 0 16px -3px rgba(34,211,238,.6) !important;
}
#dlMenu{ top:calc(100% + .6rem) !important }

/* ---- 2. Add button: violet, matches the artwork --------------------- */
.add-btn{
  background:linear-gradient(135deg, #6d28d9 0%, #8b5cf6 55%, #a855f7 100%) !important;
  color:#ffffff !important;
  border:1px solid rgba(196,181,253,.4) !important;
  box-shadow:0 8px 24px -12px rgba(139,92,246,.95),
             inset 0 1px 0 rgba(255,255,255,.16) !important;
  text-shadow:0 1px 8px rgba(30,0,60,.5);
}
.add-btn:hover{
  background:linear-gradient(135deg, #7c3aed 0%, #9d6bff 55%, #c084fc 100%) !important;
  border-color:rgba(216,205,255,.65) !important;
  box-shadow:0 12px 32px -12px rgba(168,85,247,1),
             inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.add-btn i{ opacity:.9 }

/* ---- 3. no floating frame over artwork ------------------------------ */
.glass-card::after{ content:none !important }

/* hovered card keeps a soft edge instead of a hard cyan outline */
.glass-card:hover{
  box-shadow:0 26px 60px -28px rgba(0,0,0,.95),
             0 0 26px -10px rgba(139,92,246,.5) !important;
}
.glass-card:hover::before{ opacity:.7 }

/* the "CURSOR / POINTER" switch on the detail page */
#sideCursor, #sidePointer, .side-btn{
  border-radius:14px !important;
}

/* =====================================================================
   ADD BUTTON — one definition, both places
   ---------------------------------------------------------------------
   The card variant (cards.js) ships extra Tailwind colour utilities —
   `dark:bg-neon`, `dark:hover:bg-[#7c3aed]`, `shadow-lg` — whose
   compiled selectors carry more specificity than a bare `.add-btn`, so
   they kept overriding the background-color underneath our gradient and
   the two buttons never matched. Re-declare with equal-or-higher
   specificity and neutralise the leftovers, so the card button is
   pixel-for-pixel the detail page's button.
   ===================================================================== */
html .add-btn,
html.dark .add-btn,
html.light .add-btn,
.glass-card .add-btn,
button.add-btn{
  background-color:transparent !important;
  background-image:linear-gradient(135deg, #6d28d9 0%, #8b5cf6 55%, #a855f7 100%) !important;
  color:#ffffff !important;
  font-weight:700 !important;
  font-size:1rem !important;
  letter-spacing:.01em !important;
  border:1px solid rgba(196,181,253,.4) !important;
  border-radius:14px !important;
  padding:.7rem 1.5rem !important;
  box-shadow:0 8px 24px -12px rgba(139,92,246,.95),
             inset 0 1px 0 rgba(255,255,255,.16) !important;
  text-shadow:0 1px 8px rgba(30,0,60,.5) !important;
  transition:filter .2s, transform .2s, box-shadow .2s, background-image .2s !important;
}
html .add-btn:hover,
html.dark .add-btn:hover,
html.light .add-btn:hover,
.glass-card .add-btn:hover,
button.add-btn:hover{
  background-color:transparent !important;
  background-image:linear-gradient(135deg, #7c3aed 0%, #9d6bff 55%, #c084fc 100%) !important;
  border-color:rgba(216,205,255,.65) !important;
  transform:translateY(-1px) !important;
  box-shadow:0 12px 32px -12px rgba(168,85,247,1),
             inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.add-btn i{ opacity:.9; font-size:.8rem }

/* =====================================================================
   LAYOUT + BACKGROUND, v2
   ---------------------------------------------------------------------
   * Chrome aligns with the CONTENT grid. Page sections use
     `max-w-[1480px] px-4 md:px-6`, but the nav/footer were capped at
     1240px, so the logo floated inward against everything below it.
     Same container maths now → the logo sits flush with the first card.
   * The square grid is gone. In its place: a slow aurora field —
     three drifting colour blooms, a pair of diagonal light beams and a
     vignette. All CSS gradients, no image requests, GPU-cheap.
   ===================================================================== */

/* ---- chrome aligned to the 1480px content grid ---------------------- */
.cw-nav-inner,
.cw-foot-grid,
.cw-foot-bottom{
  width:100% !important;
  max-width:1480px !important;
  margin-inline:auto !important;
  padding-inline:1rem !important;
}
@media (min-width:768px){
  .cw-nav-inner,
  .cw-foot-grid,
  .cw-foot-bottom{ padding-inline:1.5rem !important }
}

/* ---- background: aurora field, no grid ------------------------------ */
body{
  background-image:
    radial-gradient(58rem 40rem at 12% -8%,  rgba(109,40,217,.30), transparent 60%),
    radial-gradient(52rem 36rem at 88% 4%,   rgba(34,211,238,.16), transparent 62%),
    radial-gradient(64rem 44rem at 50% 112%, rgba(168,85,247,.20), transparent 62%),
    linear-gradient(180deg, #070610 0%, #0b0a1c 48%, #06060f 100%) !important;
  background-size: auto !important;
  background-attachment: fixed !important;
}

/* drifting bloom layer — slow, subtle, sits behind everything */
body::before{
  content:""; position:fixed; inset:-15%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(28rem 28rem at 20% 30%, rgba(139,92,246,.22), transparent 65%),
    radial-gradient(24rem 24rem at 78% 22%, rgba(34,211,238,.14), transparent 65%),
    radial-gradient(30rem 30rem at 62% 78%, rgba(244,114,208,.13), transparent 65%);
  filter:blur(20px);
  animation:cwDrift 34s ease-in-out infinite alternate;
  mix-blend-mode:screen;
}
@keyframes cwDrift{
  0%  { transform:translate3d(0,0,0) scale(1) }
  50% { transform:translate3d(2.5%, -2%, 0) scale(1.06) }
  100%{ transform:translate3d(-2%, 2.5%, 0) scale(1.03) }
}

/* diagonal light beams + vignette */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(103deg, transparent 34%, rgba(139,92,246,.055) 41%, transparent 47%),
    linear-gradient(103deg, transparent 58%, rgba(34,211,238,.045) 64%, transparent 70%),
    radial-gradient(130% 90% at 50% 0%,  transparent 55%, rgba(2,2,8,.55) 100%),
    radial-gradient(130% 90% at 50% 100%, transparent 55%, rgba(2,2,8,.65) 100%);
}

/* ---- hero: no grid either, just a horizon glow ---------------------- */
.neon-hero{
  background:
    radial-gradient(70% 120% at 50% -20%, rgba(139,92,246,.28), transparent 70%),
    radial-gradient(40% 80% at 50% 100%, rgba(34,211,238,.10), transparent 70%) !important;
  border-bottom:1px solid rgba(139,92,246,.22) !important;
}
.neon-hero::after{
  background:linear-gradient(90deg, transparent, #8b5cf6, #22d3ee, transparent);
  box-shadow:0 0 22px rgba(139,92,246,.6);
}

/* =====================================================================
   PAGE HEADINGS — crisp white, glow instead of gradient fill
   ---------------------------------------------------------------------
   COLLECTIONS / CONSTRUCTOR / CURSOR CREATOR / HOW TO USE all render as
   `h1.neon-text` inside the hero band. The gradient text-fill applied
   earlier drained them: mid-tone violet on a violet bloom reads as a
   smudge rather than a title. Solid white core + layered halo puts the
   word first and lets the colour live in the glow, where it belongs.
   ===================================================================== */
.neon-hero h1,
h1.neon-text,
h2.neon-text{
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:#ffffff !important;
  color:#ffffff !important;
  filter:none !important;
  animation:none !important;
  text-shadow:
    0 0 1px rgba(255,255,255,.6),
    0 0 16px rgba(167,139,250,.55),
    0 0 44px rgba(139,92,246,.38),
    0 0 78px rgba(34,211,238,.22) !important;
}

/* the homepage wordmark keeps a touch more presence */
.neon-hero h1.neon-flicker{
  -webkit-text-fill-color:#ffffff !important;
  color:#ffffff !important;
  text-shadow:
    0 0 2px rgba(255,255,255,.75),
    0 0 20px rgba(167,139,250,.65),
    0 0 56px rgba(139,92,246,.45),
    0 0 96px rgba(34,211,238,.28) !important;
}

/* eyebrow above the title ("CUSTOM CURSORS") — quieter, wider */
.neon-hero .text-cyan\/80,
.neon-hero .tracking-\[\.4em\]{
  color:#a5b8ff !important;
  text-shadow:0 0 14px rgba(139,92,246,.45) !important;
}

/* short gradient rule under page titles for a bit of structure */
.neon-hero h1::after{
  content:""; display:block; width:96px; height:2px;
  margin:1rem auto 0; border-radius:2px;
  background:linear-gradient(90deg, #8b5cf6, #22d3ee);
  box-shadow:0 0 16px rgba(139,92,246,.7);
}

/* =====================================================================
   NAV CTA — same language as the Add button
   ---------------------------------------------------------------------
   The header call-to-action was still wearing the old cyan gradient with
   wide tracking, so it read as a different design system to the violet
   Add buttons below it. Rebuilt on the Add button's recipe: violet
   gradient, white label, Inter, 14px radius — plus a slow sheen sweep so
   the primary action on the page still catches the eye.
   ===================================================================== */
.cw-nav-links a.cw-nav-cta{
  position:relative; overflow:hidden;
  font-family:"Inter", ui-sans-serif, system-ui, sans-serif !important;
  font-weight:700 !important;
  font-size:.92rem !important;
  letter-spacing:.005em !important;
  color:#ffffff !important;
  background-color:transparent !important;
  background-image:linear-gradient(135deg, #6d28d9 0%, #8b5cf6 55%, #a855f7 100%) !important;
  border:1px solid rgba(196,181,253,.42) !important;
  border-radius:14px !important;
  padding:.62rem 1.35rem !important;
  box-shadow:0 8px 24px -12px rgba(139,92,246,.95),
             inset 0 1px 0 rgba(255,255,255,.16) !important;
  text-shadow:0 1px 8px rgba(30,0,60,.5) !important;
  transition:background-image .2s, border-color .2s, box-shadow .2s, transform .2s !important;
}
.cw-nav-links a.cw-nav-cta:hover{
  background-color:transparent !important;
  background-image:linear-gradient(135deg, #7c3aed 0%, #9d6bff 55%, #c084fc 100%) !important;
  border-color:rgba(216,205,255,.7) !important;
  transform:translateY(-1px);
  box-shadow:0 12px 32px -12px rgba(168,85,247,1),
             inset 0 1px 0 rgba(255,255,255,.22) !important;
}
/* sheen sweep — one pass every 6s, pauses on hover */
.cw-nav-cta::after{
  content:""; position:absolute; top:0; left:-60%; width:45%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform:skewX(-18deg);
  animation:cwSheen 6s ease-in-out infinite;
  pointer-events:none;
}
.cw-nav-cta:hover::after{ animation-play-state:paused }
@keyframes cwSheen{
  0%, 68%  { left:-60% }
  84%      { left:120% }
  100%     { left:120% }
}
@media (prefers-reduced-motion:reduce){ .cw-nav-cta::after{ animation:none } }

/* =====================================================================
   DROPDOWN FIX
   ---------------------------------------------------------------------
   cards.js gives the download menu the `glass-card` class as well, so it
   inherited `position:relative` from the card rule above. That has the
   same specificity as Tailwind's `.absolute` but loads later, so the menu
   dropped out of absolute positioning, joined the flow and shoved the
   action row around. Cards keep `relative`; the menu never does.
   ===================================================================== */
.dropdown-menu.glass-card,
.dropdown-menu{
  position:absolute !important;
  overflow:visible !important;
  transform:none !important;
  background-image:none !important;
  background:linear-gradient(180deg, rgba(20,24,45,.98), rgba(10,13,26,.98)) !important;
  border:1px solid rgba(139,92,246,.28) !important;
  border-radius:16px !important;
  box-shadow:0 28px 64px -22px rgba(0,0,0,.95),
             0 0 0 1px rgba(139,92,246,.10) !important;
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  z-index:60 !important;
}
/* the card's decorative layers must not follow the menu */
.dropdown-menu::before,
.dropdown-menu::after{ content:none !important }
.dropdown-menu:hover{ transform:none !important; box-shadow:0 28px 64px -22px rgba(0,0,0,.95) !important }
.dropdown-menu.hidden{ display:none !important }

/* menu rows */
.dropdown-menu a{
  color:#c9d8ea !important; border-radius:11px !important;
  font-weight:600 !important;
}
.dropdown-menu a:hover{ background:rgba(139,92,246,.16) !important; color:#fff !important }
.dropdown-menu a i{ color:#a78bfa !important }
.dropdown-menu a span span,
.dropdown-menu .text-\[11px\]{
  background:rgba(255,255,255,.06) !important; color:#93a7bd !important;
}

/* cards must still clip their own artwork, but never the open menu */
.glass-card{ overflow:visible !important }
.glass-card > img,
.glass-card .rise{ border-radius:12px }

/* =====================================================================
   BRAND WORDMARK
   ---------------------------------------------------------------------
   The header/footer wordmark was set in Orbitron with wide tracking to
   match the cyberpunk chrome, but a geometric display face makes
   "Chrome Wallpaper" look stretched and dated next to the logo mark —
   and it no longer matched the main site, where the brand is set in
   Inter. Back to Inter: tight, confident, with just enough glow to sit
   in the neon environment.
   ===================================================================== */
.cw-logo span{
  font-family:"Inter", ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  font-weight:700 !important;
  font-size:1.16rem !important;
  letter-spacing:-.022em !important;
  color:#f2f7ff !important;
  text-shadow:0 0 18px rgba(139,92,246,.35) !important;
  line-height:1.1;
  white-space:nowrap;
}
.cw-logo{ gap:.55rem !important }
.cw-logo svg{
  width:29px !important; height:29px !important;
  filter:drop-shadow(0 0 10px rgba(139,92,246,.45)) !important;
}
.cw-logo:hover span{ color:#ffffff !important }

.cw-foot .cw-logo span{ font-size:1.06rem !important }

@media (max-width:520px){
  .cw-logo span{ font-size:1.02rem !important }
  .cw-logo svg{ width:26px !important; height:26px !important }
}

/* =====================================================================
   FOOTER: brand lockup + CTA parity
   ---------------------------------------------------------------------
   * The footer logo wrapped to two lines because the brand block is the
     widest grid column and the mark/word pair had no wrap guard.
   * The footer CTA carried an inline `border-radius:999px`, so it read
     as a pill while the header CTA is a 14px rounded rectangle. The
     inline style is gone from _inc.php; this pins both to one recipe.
   ===================================================================== */
.cw-foot .cw-logo{
  display:inline-flex !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:.55rem !important;
  white-space:nowrap;
}
.cw-foot .cw-logo svg{ flex:0 0 auto }
.cw-foot .cw-logo span{ display:inline-block; white-space:nowrap }

/* footer CTA — identical to the header button */
.cw-foot-cta{
  display:inline-flex !important;
  align-items:center;
  border-radius:14px !important;
  font-family:"Inter", ui-sans-serif, system-ui, sans-serif !important;
  font-weight:700 !important;
  font-size:.92rem !important;
  letter-spacing:.005em !important;
  color:#ffffff !important;
  background-color:transparent !important;
  background-image:linear-gradient(135deg, #6d28d9 0%, #8b5cf6 55%, #a855f7 100%) !important;
  border:1px solid rgba(196,181,253,.42) !important;
  padding:.62rem 1.35rem !important;
  box-shadow:0 8px 24px -12px rgba(139,92,246,.95),
             inset 0 1px 0 rgba(255,255,255,.16) !important;
  text-shadow:0 1px 8px rgba(30,0,60,.5) !important;
}
.cw-foot-cta:hover{
  background-image:linear-gradient(135deg, #7c3aed 0%, #9d6bff 55%, #c084fc 100%) !important;
  border-color:rgba(216,205,255,.7) !important;
  transform:translateY(-1px);
  box-shadow:0 12px 32px -12px rgba(168,85,247,1),
             inset 0 1px 0 rgba(255,255,255,.22) !important;
}