:root {
  --bg: #0a0a0a;
  --bg2: #121214;
  --bg3: #1a1a1f;
  --magenta: #ff00aa;
  --cyan: #00ffff;
  --yellow: #ffff00;
  --blue: #00bfff;
  --text: #e9e9ee;
  --muted: #8a8a99;
  --line: #2a2a32;
}

* { box-sizing: border-box; }
html { margin: 0; padding: 0; background: var(--bg); min-height: 100%; }
body { margin: 0; padding: 0; color: var(--text); font-family: 'Inter', system-ui, sans-serif; min-height: 100%;
  /* Body must be transparent so the fixed video background (z-index: -1)
     shows through. The neon radial accents are kept but layered on top of
     the video as soft tints (no opaque base). */
  background:
    radial-gradient(circle at 20% 10%, rgba(255,0,170,0.10), transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(0,255,255,0.08), transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(255,255,0,0.06), transparent 50%);
  background-color: transparent;
}

/* ---- Cinematic full-screen video background --------------------------- */
.bg-video {
  position: fixed; inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);
}
.bg-video__src {
  /* Full-bleed 16:9 cover trick that works for both <video> and YouTube
     <iframe>: pick whichever is bigger between width=100vw / height=56.25vw
     and the height=100vh / width=177.78vh pair, then center + slightly
     over-scale so the cyberpunk filter's blur has no visible edge. */
  position: absolute;
  top: 50%; left: 50%;
  width: 100vw;
  height: 56.25vw;            /* 16:9 */
  min-height: 100vh;
  min-width: 177.78vh;        /* 16:9 inverse */
  transform: translate(-50%, -50%) scale(1.08);
  border: 0;
  pointer-events: none;       /* keep clicks passing through to the app */
  object-fit: cover;          /* harmless on iframe, kept for <video> fallback */
  /* Deep cyberpunk grade: neon-shifted hue, boosted saturation + contrast,
     dropped brightness for that premium dark-cinema feel. Filter applies to
     iframes too in modern browsers. */
  /* bgvideo20 — premium stencil grade:
     - saturate(2.1) + contrast(1.6) → pink/cyan/yellow neons truly POP
     - brightness(0.42) ≈ 58% darkness, in the spec'd 55-62% range
     - hue-rotate(-4deg) cools warm spray-paint tones into the wikey palette
     - blur(2px) softens compression artefacts at large scale */
  filter: blur(2px) saturate(2.1) contrast(1.6) brightness(0.42) hue-rotate(-4deg);
  will-change: transform;
  /* Calmer movement: 75s cycle (was 60s) + smaller scale/pan delta so the
     background never competes with foreground content for attention. */
  animation: bg-kenburns 75s ease-in-out infinite alternate;
}
/* Cinematic veil:
   - Strong vertical gradient (very dark top + bottom, slightly transparent middle)
   - Radial vignette darkening the corners
   - Neon magenta + cyan tints across the frame */
.bg-video__veil {
  position: absolute; inset: 0;
  /* bgvideo20 — premium veil:
     - stronger neon tints (pink/cyan/yellow stay vibrant through the darker grade)
     - heavier corner vignette → cinematic framing
     - vertical gradient stays in the 58-62% mid-darkness range so foreground
       text + UI chrome reads sharp without crushing the underlying art */
  background:
    radial-gradient(ellipse at 18% 28%, rgba(255,0,170,0.18), transparent 50%),
    radial-gradient(ellipse at 82% 72%, rgba(0,210,255,0.16), transparent 50%),
    radial-gradient(ellipse at 65% 18%, rgba(255,255,0,0.08), transparent 55%),
    /* Vignette: very dark corners for true cinematic framing. */
    radial-gradient(ellipse at center, transparent 18%, rgba(0,0,0,0.94) 100%),
    /* Vertical gradient — heavier top/bottom, ~60% mid-darkness. */
    linear-gradient(
      to bottom,
      rgba(4,4,6,0.96) 0%,
      rgba(4,4,6,0.84) 18%,
      rgba(4,4,6,0.60) 50%,
      rgba(4,4,6,0.90) 82%,
      rgba(4,4,6,0.98) 100%
    );
}
/* Ultra-fine black dot-matrix texture (Ben-Day / halftone style).
   3px grid, pure-dark dots, multiply-blended over the (already-dark) video
   so it reads as a subtle texture — not a visible pattern. Fades from the
   corners inward so the center stays clean and content stays crisp. */
.bg-video__dots {
  position: absolute; inset: 0;
  pointer-events: none;
  /* Crisp 4px grid of dark cyan-black dots. Screen-blended → on the deep
     black video they read as a cool tech-grid sheen, not a flat overlay. */
  background-image:
    radial-gradient(circle, rgba(0, 20, 35, 0.92) 0.7px, transparent 1.1px);
  background-size: 4px 4px;
  background-position: 0 0;
  mix-blend-mode: screen;
  opacity: 0.82;
  /* Radial fade: full strength at corners + dark video zones, calmer in
     the central reading area so foreground text/neon stays crisp. */
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.25) 28%, #000 100%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.25) 28%, #000 100%);
}
[data-theme="light"] .bg-video__dots {
  /* Light theme: screen-blend of dark cyan would be invisible on a bright
     bg, so swap to multiply with a denser tone so the grid still reads. */
  background-image:
    radial-gradient(circle, rgba(0, 30, 50, 0.55) 0.7px, transparent 1.1px);
  mix-blend-mode: multiply;
  opacity: 0.45;
}

/* Film-grain layer (SVG noise as data URL, ~6kB inline) */
.bg-video__grain {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
  animation: bg-grain 1.6s steps(6) infinite;
}
@keyframes bg-grain {
  0%   { transform: translate(0,    0);    }
  16%  { transform: translate(-3%, -2%);   }
  33%  { transform: translate(2%,  -4%);   }
  50%  { transform: translate(-2%,  3%);   }
  66%  { transform: translate(4%,   1%);   }
  83%  { transform: translate(-1%, -3%);   }
  100% { transform: translate(0,    0);    }
}

@keyframes bg-kenburns {
  /* Very calm: scale delta ~0.025 + pan ~0.4% → barely perceptible drift,
     reads as cinematic rather than "moving wallpaper". */
  0%   { transform: translate(-50%, -50%) scale(1.07)  translate3d(0,     0,    0); }
  50%  { transform: translate(-50%, -50%) scale(1.095) translate3d(-0.4%, -0.4%, 0); }
  100% { transform: translate(-50%, -50%) scale(1.08)  translate3d(0.4%,  0.4%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  /* Full reduced-motion honor: the video itself is the dominant motion
     source, so hide the iframe entirely and fall back to the same static
     neon-radial background as the ≤480px breakpoint. Grain animation off. */
  .bg-video__src { display: none; }
  .bg-video__grain { animation: none; opacity: 0.10; }
  .bg-video {
    background:
      radial-gradient(circle at 30% 20%, rgba(255,0,170,0.22), transparent 55%),
      radial-gradient(circle at 70% 80%, rgba(0,255,255,0.18), transparent 55%),
      radial-gradient(circle at 50% 50%, rgba(120,0,200,0.10), transparent 60%),
      var(--bg);
  }
}

/* Tablet (≤768px): drop the heavy dot-matrix + film-grain overlays to save
   GPU/bandwidth. Iframe stays but gets a smaller blur for cheaper compositing. */
@media (max-width: 768px) {
  .bg-video__dots,
  .bg-video__grain { display: none; }
  .bg-video__src {
    /* Lighter filter on mobile → less GPU compositing cost. */
    filter: saturate(1.7) contrast(1.4) brightness(0.46) hue-rotate(-4deg);
    /* Shorten the still-running Ken-Burns cycle's apparent cost. */
    animation-duration: 90s;
  }
}
/* Phone (≤480px): drop the YouTube iframe entirely — it's too expensive on
   small/low-power devices. Fall back to a static neon radial that keeps the
   cyberpunk vibe at near-zero cost. */
@media (max-width: 480px) {
  .bg-video__src { display: none; }
  .bg-video { background:
    radial-gradient(circle at 30% 20%, rgba(255,0,170,0.22), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(0,255,255,0.18), transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(120,0,200,0.10), transparent 60%),
    var(--bg); }
}
a { color: var(--cyan); text-decoration: none; }
a:hover { text-shadow: 0 0 8px var(--cyan); }

/* Topbar */
.topbar {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.9rem 1.4rem;
  border-bottom: 1px solid var(--line);
  background: rgba(10,10,10,0.85);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 100;
}
.brand { display: flex; align-items: center; gap: 0.5rem; font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 1.4rem; text-decoration: none; }
.brand-mark { color: var(--blue); text-shadow: 0 0 12px var(--blue), 0 0 24px var(--cyan); animation: pulse 2s ease-in-out infinite; }
.brand-name { color: var(--text); text-shadow: 0 0 8px rgba(255,0,170,0.5); }
.brand-dot { color: var(--magenta); }
.brand { padding: 4px 14px 4px 16px; border-radius: 8px; margin-right: 32px; position: relative; }
.brand-logo {
  display: block; height: 46px; width: auto; max-width: 300px;
  filter: none;
  transition: transform .25s ease;
}
.brand:hover .brand-logo { transform: translateY(-1px); }
@media (max-width: 640px) { .brand-logo { height: 38px; max-width: 240px; } }

/* Floating magical sparks around the colorful leaf */
.brand-sparks { position: absolute; left: 4px; top: 0; width: 64px; height: 100%; pointer-events: none; z-index: 1; }
.brand-sparks i {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: #fff;
  opacity: 0;
  animation: brand-spark 3.8s ease-in-out infinite;
  will-change: opacity, transform;
}
.brand-sparks i:nth-child(1) { left: 6px;  top: 18%; background: #ff2da5; box-shadow: 0 0 8px #ff2da5, 0 0 16px rgba(255,45,165,.6); animation-delay: 0s;   }
.brand-sparks i:nth-child(2) { left: 22px; top: 6%;  background: #ffe600; box-shadow: 0 0 8px #ffe600, 0 0 16px rgba(255,230,0,.6); animation-delay: .6s;  }
.brand-sparks i:nth-child(3) { left: 36px; top: 30%; background: #00ffff; box-shadow: 0 0 8px #00ffff, 0 0 16px rgba(0,255,255,.6); animation-delay: 1.2s; }
.brand-sparks i:nth-child(4) { left: 14px; top: 62%; background: #00ffff; box-shadow: 0 0 8px #00ffff, 0 0 16px rgba(0,255,255,.6); animation-delay: 1.8s; width: 3px; height: 3px; }
.brand-sparks i:nth-child(5) { left: 44px; top: 70%; background: #ff2da5; box-shadow: 0 0 8px #ff2da5, 0 0 16px rgba(255,45,165,.6); animation-delay: 2.4s; width: 3px; height: 3px; }
.brand-sparks i:nth-child(6) { left: 2px;  top: 44%; background: #ffe600; box-shadow: 0 0 8px #ffe600, 0 0 16px rgba(255,230,0,.6); animation-delay: 3.0s; width: 4px; height: 4px; }

@keyframes brand-spark {
  0%, 100% { opacity: 0; transform: translateY(0) scale(.6); }
  20%      { opacity: 1; transform: translateY(-3px) scale(1.1); }
  50%      { opacity: .85; transform: translateY(-6px) scale(1); }
  80%      { opacity: 0; transform: translateY(-9px) scale(.7); }
}

@media (prefers-reduced-motion: reduce) {
  .brand-sparks i { animation: none; opacity: .6; }
}
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }

.mainnav { display: flex; gap: 1rem; flex: 1; flex-wrap: wrap; }
.mainnav a { color: var(--text); font-weight: 500; font-size: 0.92rem; opacity: 0.85; padding: 0.3rem 0.5rem; border-radius: 4px; transition: all 0.18s ease; position: relative; }
.mainnav a:hover { color: var(--cyan); opacity: 1; text-shadow: 0 0 8px var(--cyan); }
.mainnav a.admin-link { color: var(--yellow); }
.bell { margin-left: 0.3rem; position: relative; }
.bell-count {
  position: absolute; top: -8px; right: -10px;
  background: var(--magenta); color: #000; border-radius: 999px;
  font-size: 0.65rem; font-weight: 700; padding: 1px 5px;
  box-shadow: 0 0 8px var(--magenta);
}

.topright { display: flex; align-items: center; gap: 0.7rem; }
.lang-switch { display: flex; gap: 0.3rem; align-items: center; font-size: 0.85rem; }
.lang-switch a { color: var(--muted); padding: 0.2rem 0.4rem; border-radius: 4px; }
.lang-switch a.active { color: var(--yellow); text-shadow: 0 0 8px var(--yellow); }
.lang-switch .sep { color: var(--line); }

.eve-chip { background: linear-gradient(135deg, var(--yellow), #ff8800); color: #000; font-weight: 700; padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.85rem; box-shadow: 0 0 14px rgba(255,255,0,0.4); }
.user-chip { color: var(--cyan); font-weight: 600; font-size: 0.85rem; }

.btn-ghost { color: var(--text); border: 1px solid var(--line); padding: 0.4rem 0.9rem; border-radius: 6px; font-size: 0.85rem; }
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); text-shadow: 0 0 8px var(--cyan); }

.btn-neon {
  background: var(--magenta); color: #000; font-weight: 700;
  padding: 0.45rem 1rem; border-radius: 6px; border: none; cursor: pointer;
  box-shadow: 0 0 14px var(--magenta), 0 0 28px rgba(255,0,170,0.4);
  text-shadow: none; transition: all 0.18s;
  display: inline-block;
}
.btn-neon:hover { transform: translateY(-1px); box-shadow: 0 0 22px var(--magenta), 0 0 44px rgba(255,0,170,0.55); }
.btn-cyan {
  background: var(--cyan); color: #000; font-weight: 700;
  padding: 0.45rem 1rem; border-radius: 6px; border: none; cursor: pointer;
  box-shadow: 0 0 14px var(--cyan);
  display: inline-block;
}
.btn-cyan:hover { transform: translateY(-1px); box-shadow: 0 0 22px var(--cyan); }
.btn-yellow {
  background: var(--yellow); color: #000; font-weight: 700;
  padding: 0.45rem 1rem; border-radius: 6px; border: none; cursor: pointer;
  box-shadow: 0 0 14px var(--yellow);
  display: inline-block;
}

/* Container */
.container { max-width: 1180px; margin: 0 auto; padding: 2rem 1.4rem 4rem; }

/* Flash */
.flash-stack { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.2rem; }
.flash { padding: 0.7rem 1rem; border-radius: 6px; border: 1px solid; }
.flash-error { color: var(--magenta); border-color: var(--magenta); background: rgba(255,0,170,0.08); }
.flash-success { color: var(--cyan); border-color: var(--cyan); background: rgba(0,255,255,0.08); }

/* Hero / Home */
.hero { text-align: center; padding: 5rem 1rem 3rem; position: relative; }
.hero h1 {
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.05; margin: 1rem 0;
  background: linear-gradient(90deg, var(--magenta), var(--cyan), var(--yellow));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 40px rgba(255,0,170,0.25);
}
.hero p.sub { color: var(--muted); max-width: 720px; margin: 0 auto 2rem; font-size: 1.1rem; }
.hero .cta-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Dot mascot */
.dot-wrap { position: relative; display: inline-block; }
.dot-mascot {
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #79e0ff, var(--blue) 60%, #0070c0);
  position: relative; margin: 0 auto;
  box-shadow:
    0 0 40px var(--cyan),
    0 0 80px rgba(0,191,255,0.6),
    inset -10px -20px 40px rgba(0,0,0,0.3);
  animation: bob 3s ease-in-out infinite;
}
.dot-mascot::before, .dot-mascot::after {
  content: ''; position: absolute; top: 35%; width: 28px; height: 32px;
  background: #fff; border-radius: 50%;
  box-shadow: inset -4px -4px 0 #ddd;
}
.dot-mascot::before { left: 28%; }
.dot-mascot::after  { right: 28%; }
.dot-pupil-l, .dot-pupil-r {
  position: absolute; top: 42%; width: 12px; height: 16px; background: #000;
  border-radius: 50%; box-shadow: inset 2px 2px 0 #444;
}
.dot-pupil-l { left: 33%; }
.dot-pupil-r { right: 33%; }
.dot-smile {
  position: absolute; left: 50%; top: 62%; transform: translateX(-50%);
  width: 70px; height: 35px; border-bottom: 4px solid #000;
  border-radius: 0 0 80px 80px;
}
.dot-cheek-l, .dot-cheek-r {
  position: absolute; top: 58%; width: 20px; height: 12px; border-radius: 50%;
  background: rgba(255,0,170,0.45); filter: blur(2px);
}
.dot-cheek-l { left: 15%; }
.dot-cheek-r { right: 15%; }
.dot-shine { position: absolute; top: 18%; left: 22%; width: 30px; height: 18px;
  background: rgba(255,255,255,0.5); border-radius: 50%; transform: rotate(-30deg); filter: blur(1px); }
.dot-glow {
  position: absolute; inset: -40px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,255,255,0.35), transparent 60%);
  z-index: -1; animation: glow-pulse 2.5s ease-in-out infinite;
}
@keyframes bob { 0%,100%{transform: translateY(0) rotate(-2deg)} 50%{transform: translateY(-14px) rotate(2deg)} }
@keyframes glow-pulse { 0%,100%{opacity:0.7; transform: scale(1)} 50%{opacity:1; transform: scale(1.08)} }

.dot-mini { width: 64px; height: 64px; display: inline-block; vertical-align: middle; }
.dot-mini .dot-mascot { width: 64px; height: 64px; box-shadow: 0 0 16px var(--cyan), 0 0 32px rgba(0,191,255,0.5); }
.dot-mini .dot-mascot::before, .dot-mini .dot-mascot::after { width: 10px; height: 12px; top: 32%; }
.dot-mini .dot-mascot::before { left: 27%; } .dot-mini .dot-mascot::after { right: 27%; }
.dot-mini .dot-pupil-l, .dot-mini .dot-pupil-r { width: 5px; height: 7px; top: 40%; }
.dot-mini .dot-pupil-l { left: 32%; } .dot-mini .dot-pupil-r { right: 32%; }
.dot-mini .dot-smile { width: 24px; height: 12px; border-bottom-width: 2.5px; }
.dot-mini .dot-cheek-l, .dot-mini .dot-cheek-r { display: none; }
.dot-mini .dot-glow { inset: -12px; }

/* Section headings */
h2.section { font-family: 'Orbitron', sans-serif; font-size: 1.6rem; color: var(--cyan);
  text-shadow: 0 0 12px var(--cyan); margin: 2rem 0 1rem; }
h3 { font-family: 'Orbitron', sans-serif; color: var(--magenta); text-shadow: 0 0 8px rgba(255,0,170,0.5); }

/* Cards / grid */
.grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card {
  background: var(--bg2);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 1.1rem; position: relative; overflow: hidden;
  transition: all 0.2s ease;
}
.card::before {
  content: ''; position: absolute; inset: 0; border-radius: 10px; pointer-events: none;
  box-shadow: inset 0 0 0 1px transparent; transition: all 0.25s;
}
.card:hover { transform: translateY(-3px); border-color: var(--magenta); box-shadow: 0 0 16px rgba(255,0,170,0.35); }
.card .thumb { width: 100%; aspect-ratio: 16/10; background: #111; border-radius: 6px; overflow: hidden; margin-bottom: 0.7rem; }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.card .thumb.placeholder { display: flex; align-items: center; justify-content: center; color: var(--magenta); font-family:'Orbitron'; font-size:1.5rem; text-shadow:0 0 12px var(--magenta);}
.card h4 { margin: 0 0 0.3rem; font-size: 1.1rem; color: var(--text); }
.card .meta { font-size: 0.78rem; color: var(--muted); display: flex; gap: 0.6rem; flex-wrap: wrap; }
.badge { padding: 0.18rem 0.55rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.badge-active { background: rgba(0,255,255,0.15); color: var(--cyan); border: 1px solid var(--cyan); }
.badge-completed { background: rgba(255,255,0,0.15); color: var(--yellow); border: 1px solid var(--yellow); }
.badge-successful { background: rgba(255,0,170,0.15); color: var(--magenta); border: 1px solid var(--magenta); }

/* Forms */
.form-stack { display: flex; flex-direction: column; gap: 1rem; max-width: 560px; }
.form-stack label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; color: var(--muted); }
.form-stack input[type=text], .form-stack input[type=password], .form-stack input[type=number],
.form-stack input[type=url], .form-stack textarea, .form-stack input[type=file], .form-stack select {
  background: var(--bg3); border: 1px solid var(--line); color: var(--text);
  padding: 0.65rem 0.85rem; border-radius: 6px; font-size: 0.95rem; font-family: inherit;
  outline: none; transition: all 0.18s;
}
.form-stack input:focus, .form-stack textarea:focus, .form-stack select:focus {
  border-color: var(--magenta); box-shadow: 0 0 10px rgba(255,0,170,0.35);
}
.form-stack textarea { min-height: 110px; resize: vertical; }
.form-stack .row { display: flex; gap: 0.6rem; align-items: center; }

/* Auth */
.auth-box { max-width: 420px; margin: 4rem auto; padding: 2rem;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 0 30px rgba(255,0,170,0.15); }
.auth-box h2 { font-family: 'Orbitron'; color: var(--cyan); text-align: center; margin-top: 0; }

/* Spread detail */
.detail-head { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-bottom: 1.4rem; align-items: flex-start; }
.detail-head .left { flex: 1; min-width: 280px; }
.detail-head .right { width: 280px; }
.stat-row { display: flex; gap: 1rem; margin: 0.8rem 0; flex-wrap: wrap; }
.stat { background: var(--bg2); border: 1px solid var(--line); padding: 0.6rem 0.9rem; border-radius: 8px; min-width: 100px; }
.stat .n { font-family: 'Orbitron'; font-size: 1.4rem; color: var(--yellow); text-shadow: 0 0 8px var(--yellow); }
.stat .l { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }

.gallery { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin: 1rem 0; }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }

.media-block iframe { width: 100%; aspect-ratio: 16/9; border: 1px solid var(--line); border-radius: 8px; background: #000; }

.qr-block { background: var(--bg2); border: 1px solid var(--cyan); border-radius: 10px; padding: 1rem; text-align: center; box-shadow: 0 0 14px rgba(0,255,255,0.25); }
.qr-block img { width: 200px; height: 200px; background: #fff; padding: 6px; border-radius: 6px; }
.qr-block .shortlink { display: block; font-family: 'Orbitron'; color: var(--magenta); text-shadow: 0 0 8px var(--magenta); margin: 0.6rem 0; word-break: break-all; }

/* Comments */
.comment-list { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 1rem; }
.comment {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 0.9rem 1rem;
}
.comment .head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
.comment .head .who { color: var(--cyan); font-weight: 600; }
.comment .head .when { color: var(--muted); font-size: 0.78rem; }
.comment .body { white-space: pre-wrap; line-height: 1.5; }
.comment img.cimg { max-width: 260px; max-height: 200px; border-radius: 6px; margin-top: 0.5rem; border: 1px solid var(--line); }
.comment .actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.like-btn {
  background: transparent; border: 1px solid var(--line); color: var(--text);
  padding: 0.25rem 0.7rem; border-radius: 999px; cursor: pointer; font-size: 0.8rem;
}
.like-btn:hover { border-color: var(--magenta); color: var(--magenta); }
.like-btn.liked { background: rgba(255,0,170,0.18); border-color: var(--magenta); color: var(--magenta); box-shadow: 0 0 10px rgba(255,0,170,0.4); }

.sort-tabs { display: flex; gap: 0.4rem; margin: 0.6rem 0 0.4rem; }
.sort-tabs a { padding: 0.3rem 0.8rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: 0.82rem; }
.sort-tabs a.active { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 8px rgba(0,255,255,0.4); }

/* Tables */
table.eve-table { width: 100%; border-collapse: collapse; }
.eve-table th, .eve-table td { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--line); text-align: left; font-size: 0.9rem; }
.eve-table th { color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75rem; }
.eve-table .pos { color: var(--cyan); font-weight: 700; }
.eve-table .neg { color: var(--magenta); font-weight: 700; }

/* Notifications */
.notif-list { display: flex; flex-direction: column; gap: 0.5rem; }
.notif { background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 0.6rem 0.9rem; display: flex; justify-content: space-between; gap: 0.6rem; }
.notif.unread { border-color: var(--magenta); box-shadow: 0 0 10px rgba(255,0,170,0.2); }
.notif .when { color: var(--muted); font-size: 0.75rem; }

/* Wallet */
.wallet-hero {
  background: linear-gradient(135deg, rgba(255,0,170,0.12), rgba(0,255,255,0.10));
  border: 1px solid var(--magenta); border-radius: 14px; padding: 2rem; text-align: center;
  box-shadow: 0 0 30px rgba(255,0,170,0.25);
  margin-bottom: 1.5rem;
}
.wallet-hero .num { font-family: 'Orbitron'; font-size: 3.8rem; color: var(--yellow); text-shadow: 0 0 18px var(--yellow); }
.wallet-hero .lbl { color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.85rem; }

/* Footer */
.footer { border-top: 1px solid var(--line); padding: 1.4rem; text-align: center; color: var(--muted); margin-top: 3rem; }
.footer-inner { display: inline-flex; gap: 0.5rem; align-items: center; }

/* Misc */
.muted { color: var(--muted); }
.hr { height: 1px; background: var(--line); border: none; margin: 1.2rem 0; }
.row-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.tag { display: inline-block; padding: 0.18rem 0.55rem; border-radius: 6px; font-size: 0.72rem; background: rgba(0,255,255,0.12); color: var(--cyan); border: 1px solid var(--cyan); }

.empty {
  text-align: center; padding: 3rem 1rem; color: var(--muted);
  border: 1px dashed var(--line); border-radius: 12px;
}

/* Responsive */
@media (max-width: 880px) {
  .topbar { flex-wrap: wrap; }
  .mainnav { order: 3; flex: 1 1 100%; }
  .detail-head .right { width: 100%; }
}

/* ============ ENHANCEMENTS v2 ============ */

/* Nav glow accent */
.nav-glow { color: var(--yellow) !important; text-shadow: 0 0 8px var(--yellow); }
.page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:1rem; flex-wrap:wrap; }

/* Bouncy Dot */
.dot-mascot.bouncy { animation: dotBounce 2.4s ease-in-out infinite; }
@keyframes dotBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  20%      { transform: translateY(-8px) scale(1.04, 0.96); }
  40%      { transform: translateY(0)    scale(0.98, 1.02); }
  60%      { transform: translateY(-3px) scale(1.02, 0.98); }
}
.dot-mascot { transition: transform 0.18s ease-out; }
.dot-mascot:hover { transform: scale(1.07) rotate(-3deg); }
.dot-mascot:hover .dot-smile { height: 16px; width: 28px; }

/* Share buttons */
.share-block {
  margin-top: 1.4rem; padding: 1rem 1.1rem; border-radius: 14px;
  background: rgba(255,0,170,0.05);
  border: 1px solid rgba(0,255,255,0.25);
  box-shadow: 0 0 24px rgba(255,0,170,0.08) inset;
}
.share-title { font-family: 'Orbitron', sans-serif; font-weight:700; color: var(--cyan); margin-bottom:0.6rem; text-shadow:0 0 8px rgba(0,255,255,0.5); }
.share-eve { color: var(--yellow); font-size:0.85rem; margin-left:0.3rem; }
.share-buttons { display:flex; flex-wrap:wrap; gap:0.5rem; }
.share-btn {
  display:inline-flex; align-items:center; gap:0.4rem;
  padding: 0.45rem 0.8rem; border-radius: 999px;
  font-size: 0.85rem; font-weight:600; text-decoration:none;
  background: rgba(255,255,255,0.04);
  color: #f0f0f5;
  border: 1px solid rgba(255,255,255,0.12);
  transition: all 0.18s ease;
}
.share-btn:hover { transform: translateY(-2px); box-shadow: 0 0 18px currentColor; }
.share-btn .ic { font-weight: 900; }
.share-btn.share-twitter   { color:#1da1f2; }
.share-btn.share-facebook  { color:#4267b2; }
.share-btn.share-whatsapp  { color:#25d366; }
.share-btn.share-telegram  { color:#0088cc; }
.share-btn.share-linkedin  { color:#0a66c2; }
.share-btn.share-bluesky   { color:#00d0ff; }
.share-btn.share-instagram { color:#e1306c; }
.share-btn.share-email     { color:var(--magenta); }
.share-btn.share-copy      { color:var(--yellow); }
.share-btn.copied { background: var(--cyan); color: #0a0a0a !important; }

/* Requests list */
.req-list { display:flex; flex-direction:column; gap:0.7rem; }
.req-row {
  display:flex; gap:0.9rem; padding: 0.9rem 1rem; border-radius: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,0,170,0.18);
  transition: border-color 0.2s, transform 0.2s;
}
.req-row:hover { border-color: var(--cyan); transform: translateX(2px); }
.vote-col { display:flex; flex-direction:column; align-items:center; gap:0.2rem; min-width:46px; }
.vote-col button, .vote-col span {
  background: none; border:0; color: #888; font-size:1.1rem; cursor:pointer; padding:0;
  transition: color 0.15s, transform 0.15s;
}
.vote-col .vote-up.active, .vote-col .vote-up:hover { color: var(--cyan); transform: scale(1.3); text-shadow:0 0 10px var(--cyan); }
.vote-col .vote-down.active, .vote-col .vote-down:hover { color: var(--magenta); transform: scale(1.3); text-shadow:0 0 10px var(--magenta); }
.vote-col .score { font-family:'Orbitron', sans-serif; color: var(--yellow); font-weight:700; }
.req-body { flex:1; }
.req-title { color: var(--cyan); font-weight:700; font-size:1.05rem; text-decoration:none; }
.req-title:hover { text-shadow: 0 0 8px var(--cyan); }
.req-meta { display:flex; gap:0.5rem; flex-wrap:wrap; align-items:center; font-size:0.8rem; margin-top:0.3rem; }
.req-card { position: relative; }
.req-score { position:absolute; top:0.6rem; right:0.8rem; color: var(--yellow); font-weight:700; font-family:'Orbitron', sans-serif; }
.vote-bar { display:flex; gap:0.6rem; align-items:center; margin:0.8rem 0; }
.vote-bar .score-big { color: var(--yellow); font-family:'Orbitron', sans-serif; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 800px) { .grid-3 { grid-template-columns: 1fr; } }

/* Request status badges */
.badge-pending        { background: rgba(255,255,0,0.15);  color: var(--yellow); }
.badge-approved       { background: rgba(0,255,255,0.18);  color: var(--cyan); }
.badge-in_production  { background: rgba(255,0,170,0.18);  color: var(--magenta); }
.badge-distributed    { background: rgba(0,255,128,0.18);  color: #00ff80; }
.badge-rejected       { background: rgba(255,80,80,0.18);  color: #ff5050; }

/* Leaderboard table */
.lb-table { width:100%; border-collapse: collapse; margin-top: 0.6rem; }
.lb-table th, .lb-table td { padding: 0.6rem 0.7rem; text-align:left; border-bottom: 1px solid rgba(255,255,255,0.06); }
.lb-table th { color: var(--cyan); font-family:'Orbitron', sans-serif; font-weight:700; text-transform: uppercase; font-size:0.75rem; letter-spacing: 0.06em; }
.lb-table .rank { color: var(--yellow); font-weight:900; font-family:'Orbitron', sans-serif; width:46px; }
.lb-table tr:hover td { background: rgba(255,0,170,0.05); }
.lb-table a { color: var(--magenta); }
.lb-table a:hover { text-shadow: 0 0 8px var(--magenta); }

/* Badges */
.badge-grid { display:grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin-top:1rem; }
.badge-card {
  padding: 1rem; border-radius: 14px; text-align:center;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(0,255,255,0.18);
  transition: transform 0.2s, box-shadow 0.2s;
}
.badge-card.unlocked { border-color: var(--yellow); box-shadow: 0 0 22px rgba(255,255,0,0.18); }
.badge-card.unlocked:hover { transform: translateY(-3px); box-shadow: 0 0 28px rgba(255,255,0,0.35); }
.badge-card.locked { opacity: 0.45; filter: grayscale(0.5); }
.badge-icon { font-size: 2.4rem; line-height:1; margin-bottom: 0.4rem; }
.badge-name { font-family:'Orbitron', sans-serif; font-weight:700; color: var(--cyan); margin-bottom: 0.3rem; }
.badge-desc { font-size: 0.8rem; color: #aaa; }
.badge-locked-tag { margin-top: 0.4rem; font-size: 0.72rem; color: var(--magenta); }

.badge-strip { display:flex; gap:0.4rem; flex-wrap:wrap; align-items:center; margin-top:0.6rem; }
.badge-chip {
  display:inline-flex; gap:0.35rem; align-items:center;
  padding: 0.3rem 0.7rem; border-radius: 999px;
  background: rgba(255,255,0,0.08); border: 1px solid var(--yellow);
  font-size: 0.78rem; color: var(--yellow);
  box-shadow: 0 0 8px rgba(255,255,0,0.18);
}
.badge-chip .i { font-size: 1.1rem; }

/* ============ THEME VARIABLES & LIGHT MODE ============ */
:root, [data-theme="dark"] {
  --bg:        #0a0a0a;
  --bg-2:      #111;
  --surface:   rgba(255,255,255,0.03);
  --surface-2: rgba(255,255,255,0.05);
  --border:    rgba(255,255,255,0.10);
  --text:      #f0f0f5;
  --text-mute: #999;
  --magenta:   #ff00aa;
  --cyan:      #00ffff;
  --yellow:    #ffff00;
  --green:     #00ff80;
  --glow:      0 0 14px;
}
[data-theme="light"] {
  --bg:        #f6f4ff;
  --bg-2:      #ffffff;
  --bg2:       #ffffff;
  --bg3:       #f0eef9;
  --surface:   rgba(0,0,0,0.03);
  --surface-2: rgba(0,0,0,0.05);
  --border:    rgba(0,0,0,0.12);
  --line:      rgba(0,0,0,0.12);
  --text:      #181826;
  --text-mute: #5a5a72;
  --muted:     #5a5a72;
  --magenta:   #d6008e;
  --cyan:      #008ea8;
  --blue:      #006a99;
  --yellow:    #b09000;
  --green:     #008f48;
  --glow:      0 0 6px;
}
html { background: var(--bg); color: var(--text); transition: background 0.25s, color 0.25s; }
body { background-color: transparent; color: var(--text); transition: color 0.25s; }
[data-theme="light"] body {
  background:
    radial-gradient(circle at 20% 0%, rgba(214,0,142,0.07), transparent 50%),
    radial-gradient(circle at 80% 100%, rgba(0,142,168,0.07), transparent 50%);
  background-color: transparent;
}
/* Light theme: brighten the video and lighten the veil so it reads as a soft cinematic backdrop instead of a dark mask. */
[data-theme="light"] .bg-video__src { filter: blur(2px) saturate(1.1) contrast(1.05) brightness(1.05); }
[data-theme="light"] .bg-video__veil {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(214,0,142,0.05), transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(0,142,168,0.05), transparent 55%),
    linear-gradient(
      to bottom,
      rgba(246,244,255,0.70) 0%,
      rgba(246,244,255,0.40) 25%,
      rgba(246,244,255,0.35) 50%,
      rgba(246,244,255,0.45) 75%,
      rgba(246,244,255,0.75) 100%
    );
}
[data-theme="light"] .topbar { background: rgba(255,255,255,0.85); border-bottom-color: var(--border); backdrop-filter: blur(10px); }
[data-theme="light"] .card, [data-theme="light"] .req-row, [data-theme="light"] .badge-card,
[data-theme="light"] .share-block, [data-theme="light"] .admin-card {
  background: var(--bg-2); border-color: var(--border);
  box-shadow: 0 2px 18px rgba(0,0,0,0.06);
}
[data-theme="light"] .footer { background: rgba(0,0,0,0.02); color: var(--text-mute); }
[data-theme="light"] .muted { color: var(--text-mute); }
[data-theme="light"] .eve-chip { background: rgba(214,0,142,0.08); color: var(--magenta); border-color: var(--magenta); }
[data-theme="light"] .user-chip { background: rgba(0,142,168,0.08); color: var(--cyan); border-color: var(--cyan); }
[data-theme="light"] input, [data-theme="light"] textarea, [data-theme="light"] select {
  background: #fff; color: var(--text); border-color: var(--border);
}
[data-theme="light"] .flash { background: rgba(255,255,255,0.95); color: var(--text); }

/* Theme toggle button */
.theme-toggle {
  display:inline-flex; align-items:center; justify-content:center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 1.05rem;
}
.theme-toggle:hover { border-color: var(--cyan); box-shadow: var(--glow) var(--cyan); transform: rotate(20deg); }
.theme-toggle .t-sun  { display: none; }
.theme-toggle .t-moon { display: inline; }
[data-theme="light"] .theme-toggle .t-sun  { display: inline; }
[data-theme="light"] .theme-toggle .t-moon { display: none; }

/* ============ HAMBURGER MOBILE NAV ============ */
.hamburger {
  display: none;
  width: 38px; height: 38px;
  border: 0; background: transparent;
  cursor: pointer;
  padding: 8px;
  flex-direction: column; justify-content: space-between;
}
.hamburger span {
  display: block; height: 2px; width: 100%;
  background: var(--cyan); border-radius: 2px;
  box-shadow: var(--glow) var(--cyan);
  transition: transform 0.25s, opacity 0.25s;
}
.hamburger.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

@media (max-width: 880px) {
  .topbar { flex-wrap: wrap; }
  .hamburger { display: flex; order: 2; }
  .topright { order: 3; margin-left: auto; }
  .mainnav {
    order: 4; flex-direction: column; width: 100%;
    max-height: 0; overflow: hidden;
    transition: max-height 0.3s ease;
    align-items: flex-start; gap: 0;
  }
  .mainnav.open { max-height: 600px; padding: 0.5rem 0; }
  .mainnav a { padding: 0.6rem 0.8rem; width: 100%; }
}

/* ============ TABS ============ */
.tabs { margin-top: 1.2rem; }
.tab-bar {
  display: flex; gap: 0.4rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}
.tab {
  background: transparent; border: 0;
  color: var(--text-mute);
  padding: 0.7rem 1.1rem;
  font-size: 0.92rem; font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  font-family: 'Inter', sans-serif;
}
.tab:hover { color: var(--cyan); }
.tab.active {
  color: var(--magenta);
  border-bottom-color: var(--magenta);
  text-shadow: var(--glow) var(--magenta);
}
.tab-panel { display: none; animation: fadeIn 0.25s ease; }
.tab-panel.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ============ PROFILE ============ */
.profile-head {
  display: flex; gap: 1.4rem; align-items: center;
  padding: 1.4rem; border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.profile-avatar {
  width: 120px; height: 120px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
  border: 3px solid var(--magenta);
  box-shadow: 0 0 28px rgba(255,0,170,0.4);
  display:flex; align-items:center; justify-content:center;
  background: var(--bg-2);
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-dot {
  position: relative; width: 100px; height: 100px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #88d6ff, #00aaff 60%, #0066cc);
  box-shadow: 0 0 20px rgba(0,200,255,0.5);
}
.avatar-dot .dot-eye { position: absolute; top: 32%; width: 18px; height: 18px; border-radius: 50%; background: #fff; }
.avatar-dot .dot-eye-l { left: 28%; }
.avatar-dot .dot-eye-r { right: 28%; }
.avatar-dot .dot-pupil { position: absolute; top: 30%; left: 30%; width: 8px; height: 8px; border-radius: 50%; background: #111; }
.avatar-dot .dot-smile {
  position: absolute; bottom: 22%; left: 50%; transform: translateX(-50%);
  width: 26px; height: 13px; border-bottom: 3px solid #fff;
  border-radius: 0 0 26px 26px;
}
.avatar-preview { display: block; margin-top: 0.5rem; width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid var(--cyan); }
.profile-name { font-family: 'Orbitron', sans-serif; margin: 0 0 0.4rem 0; color: var(--cyan); text-shadow: var(--glow) var(--cyan); }
.profile-meta { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.profile-bio { margin: 0.6rem 0; max-width: 560px; line-height: 1.5; color: var(--text); }

/* Chart cards */
.chart-grid { display: grid; gap: 1rem; grid-template-columns: 2fr 1fr; }
@media (max-width: 880px) { .chart-grid { grid-template-columns: 1fr; } }
.chart-card { padding: 1rem; }
.chart-card h3 { margin: 0 0 0.6rem 0; font-family: 'Orbitron', sans-serif; color: var(--cyan); font-size: 1rem; }

/* Badge progress bar */
.badge-progress { margin-top: 0.5rem; }
.badge-progress .bar {
  height: 7px; background: var(--surface-2); border-radius: 999px; overflow: hidden;
}
.badge-progress .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--magenta), var(--yellow));
  border-radius: 999px;
  box-shadow: var(--glow) var(--magenta);
  transition: width 0.4s ease;
}
.badge-progress .bar-label {
  margin-top: 0.3rem; font-size: 0.72rem; color: var(--text-mute);
  font-family: 'Orbitron', sans-serif;
}

/* ============ ADMIN DASHBOARD ============ */
.admin-cards {
  display: grid; gap: 0.9rem; margin: 1rem 0;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.admin-card {
  padding: 1.1rem; border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.admin-card:hover {
  transform: translateY(-3px);
  border-color: var(--cyan);
  box-shadow: var(--glow) var(--cyan);
}
.admin-card .ac-icon { font-size: 1.8rem; }
.admin-card .ac-n {
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  font-size: 1.8rem; color: var(--cyan);
  text-shadow: var(--glow) var(--cyan);
}
.admin-card .ac-l { font-size: 0.8rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.06em; }
.admin-card.eve  .ac-n { color: var(--yellow); text-shadow: var(--glow) var(--yellow); }
.admin-card.warn { border-color: var(--magenta); }
.admin-card.warn .ac-n { color: var(--magenta); text-shadow: var(--glow) var(--magenta); }

.admin-flow { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 1rem; }
.admin-flow .card { padding: 1rem; }
.admin-flow .card h3 { margin: 0 0 0.6rem 0; font-family: 'Orbitron', sans-serif; color: var(--cyan); font-size: 0.95rem; }
.flow-row { display: flex; justify-content: space-between; padding: 0.3rem 0; border-bottom: 1px dashed var(--border); }
.flow-row:last-child { border-bottom: 0; }
.thin-list { list-style: none; padding: 0; margin: 0; }
.thin-list li { padding: 0.3rem 0; border-bottom: 1px dashed var(--border); font-size: 0.88rem; display: flex; justify-content: space-between; }
.thin-list li:last-child { border-bottom: 0; }
.form-inline { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.form-inline select, .form-inline input { padding: 0.4rem 0.6rem; }
.admin-collapse summary {
  cursor: pointer; padding: 0.7rem 0; font-family: 'Orbitron', sans-serif;
  color: var(--cyan); font-size: 0.92rem;
}

/* ============ HOWTO ACCORDION ============ */
.howto-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.dot-mascot.small { width: 64px; height: 64px; flex-shrink: 0; }
.howto-acc { display: flex; flex-direction: column; gap: 0.6rem; max-width: 820px; }
.howto-acc details {
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.howto-acc details[open] { border-color: var(--magenta); box-shadow: 0 0 18px rgba(255,0,170,0.12); }
.howto-acc summary {
  cursor: pointer; padding: 1rem 1.2rem;
  font-size: 1.02rem; color: var(--text);
  list-style: none; display: flex; align-items: center; gap: 0.5rem;
}
.howto-acc summary::-webkit-details-marker { display: none; }
.howto-acc summary::after {
  content: "▾"; margin-left: auto; color: var(--cyan);
  transition: transform 0.2s;
}
.howto-acc details[open] summary::after { transform: rotate(180deg); }
.howto-acc .howto-body { padding: 0 1.2rem 1.2rem; line-height: 1.65; }
.howto-acc .howto-body p { margin: 0.4rem 0; }
.howto-acc .howto-body table { margin-top: 0.6rem; }

/* ============ REVEAL / SKELETON ============ */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity 0.45s ease, transform 0.45s ease; }
.reveal.revealed { opacity: 1; transform: none; }
.skeleton {
  background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%);
  background-size: 200% 100%;
  animation: skeleton 1.2s infinite;
  border-radius: 8px;
}
@keyframes skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* checkbox row */
.checkbox-row { display: flex; align-items: center; gap: 0.5rem; }
.checkbox-row input { width: auto !important; }

/* ============ Marketplace v2 ============ */
.head-actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.page-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; margin-bottom:.6rem; }

.market-tabs { display:flex; gap:.4rem; border-bottom:1px solid var(--border); margin:.8rem 0; flex-wrap:wrap; }
.market-tabs .mtab {
  padding:.55rem 1rem; border-radius:10px 10px 0 0; color:var(--text-mute);
  text-decoration:none; font-weight:600; border:1px solid transparent; border-bottom:none;
  transition: all .18s;
}
.market-tabs .mtab:hover { color:var(--text); background:var(--surface); }
.market-tabs .mtab.active {
  color:var(--cyan); background:var(--surface);
  border-color:var(--border);
  box-shadow:0 -2px 0 var(--cyan) inset, var(--glow) var(--cyan);
}

.market-filters { display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; margin:.6rem 0 .4rem; }
.market-filters input, .market-filters select {
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  padding:.45rem .6rem; border-radius:8px; font-size:.88rem;
}
.market-filters input[type=text] { flex:1; min-width:160px; }

.cat-chips { display:flex; flex-wrap:wrap; gap:.4rem; margin:.6rem 0 1rem; }
.cat-chip {
  padding:.35rem .75rem; border:1px solid var(--border); border-radius:999px;
  color:var(--text-mute); background:var(--surface); text-decoration:none;
  font-size:.85rem; transition:all .15s;
}
.cat-chip:hover { color:var(--text); border-color:var(--cyan); }
.cat-chip.active {
  color:var(--bg); background:var(--cyan); border-color:var(--cyan);
  box-shadow:var(--glow) var(--cyan);
}

.market-grid {
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
}
.mcard {
  display:flex; flex-direction:column; text-decoration:none; color:var(--text);
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  overflow:hidden; transition:transform .18s, box-shadow .18s, border-color .18s;
}
.mcard:hover {
  transform:translateY(-2px);
  border-color:var(--magenta);
  box-shadow:var(--glow) var(--magenta);
}
.mcard-img {
  position:relative; aspect-ratio:4/3; background:var(--bg-2);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.mcard-img img { width:100%; height:100%; object-fit:cover; }
.mcard-emoji { font-size:3.6rem; opacity:.7; }
.mcard-cat {
  position:absolute; left:.5rem; top:.5rem; padding:.2rem .55rem; border-radius:999px;
  background:rgba(0,0,0,0.55); color:#fff; font-size:.75rem; backdrop-filter:blur(4px);
}
[data-theme="light"] .mcard-cat { background:rgba(255,255,255,.85); color:var(--text); }
.mcard-kind {
  position:absolute; right:.5rem; top:.5rem; padding:.2rem .55rem; border-radius:999px;
  font-size:.72rem; font-weight:700;
}
.mcard-kind.wanted   { background:var(--yellow); color:#000; box-shadow:var(--glow) var(--yellow); }
.mcard-kind.archived { background:var(--text-mute); color:var(--bg); }
.mcard-kind.sold     { background:var(--green); color:#000; box-shadow:var(--glow) var(--green); }

.mcard-body { padding:.7rem .85rem .85rem; flex:1; display:flex; flex-direction:column; gap:.35rem; }
.mcard-body h4 { margin:0; font-size:1rem; }
.mcard-meta { display:flex; justify-content:space-between; align-items:center; font-size:.85rem; }
.mcard-meta .tag.eve { background:var(--magenta); color:#fff; padding:.2rem .6rem; border-radius:999px; box-shadow:var(--glow) var(--magenta); font-weight:700; }
.mcard-foot { display:flex; flex-wrap:wrap; gap:.4rem .8rem; margin-top:.3rem; font-size:.78rem; }
.mcard-foot .small { font-size:.78rem; }
.countdown.expired { color:#ff5577; }

/* Market detail */
.market-detail {
  display:grid; grid-template-columns:1.1fr 1fr; gap:1.5rem; margin-top:1rem;
}
@media (max-width: 820px) { .market-detail { grid-template-columns:1fr; } }
.md-gallery { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:.5rem; }
.md-hero { width:100%; max-height:420px; object-fit:contain; border-radius:10px; background:var(--bg-2); }
.md-thumbs { display:flex; gap:.4rem; margin-top:.4rem; flex-wrap:wrap; }
.md-thumbs img { width:72px; height:72px; object-fit:cover; border-radius:8px; border:1px solid var(--border); }
.md-emoji {
  font-size:7rem; text-align:center; padding:3rem; background:var(--surface);
  border:1px solid var(--border); border-radius:14px;
}
.md-head { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.md-cat { padding:.25rem .7rem; background:var(--cyan); color:#000; border-radius:999px; font-weight:600; box-shadow:var(--glow) var(--cyan); }
.md-price { font-size:1.8rem; color:var(--magenta); font-weight:800; text-shadow:var(--glow) var(--magenta); margin:.5rem 0; }
.md-meta { display:grid; gap:.25rem; color:var(--text-mute); margin:.6rem 0 .8rem; }
.md-meta a { color:var(--cyan); }
.md-desc { white-space:pre-wrap; line-height:1.55; }
.md-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }

/* Chat */
.chat-list { display:flex; flex-direction:column; gap:.6rem; margin:.5rem 0 1rem; }
.chat-msg { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:.55rem .75rem; max-width:80%; }
.chat-msg.mine { align-self:flex-end; border-color:var(--cyan); background:rgba(0,255,255,.06); }
.chat-head { font-size:.78rem; margin-bottom:.2rem; }
.chat-offer { color:var(--yellow); font-weight:600; }
.chat-body { white-space:pre-wrap; }
.chat-form { display:flex; flex-direction:column; gap:.4rem; }
.chat-form textarea { background:var(--surface); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:.5rem; }
.chat-actions { display:flex; justify-content:space-between; align-items:center; gap:.5rem; flex-wrap:wrap; }

/* Market form */
.market-form .form-row { display:flex; gap:.6rem; flex-wrap:wrap; }
.market-form .form-row > label { flex:1; min-width:160px; }
.kind-toggle { display:flex; gap:1rem; align-items:center; border:1px solid var(--border); border-radius:10px; padding:.5rem 1rem; }
.kind-toggle legend { padding:0 .4rem; color:var(--text-mute); }
.loc-map { height:240px; border-radius:10px; border:1px solid var(--border); background:var(--bg-2); }


/* ============ Polish pass: tour, reviews, hero CTAs, market intro ============ */

/* Hero CTAs */
.hero-pitch{
  max-width: 760px; margin: .4rem auto 1rem;
  color: var(--text); opacity: .85; line-height: 1.55;
}
.cta-row{
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center;
  margin: 1rem 0 1.5rem;
}
.cta-row .btn-neon, .cta-row .btn-cyan, .cta-row .btn-yellow, .cta-row .btn-ghost{
  padding:.65rem 1.1rem; font-weight:700; letter-spacing:.02em;
}

/* Value grid */
.value-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 1rem; margin: 1.5rem 0 2rem;
}
.vcard{
  background: var(--surface); border:1px solid var(--border); border-radius: 14px;
  padding: 1rem 1.1rem; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.vcard:hover{
  transform: translateY(-3px);
  border-color: var(--magenta);
  box-shadow: 0 8px 30px -8px rgba(255,0,170,.35);
}
.vcard-icon{ font-size: 2rem; margin-bottom:.4rem; filter: drop-shadow(0 0 6px var(--cyan)); }
.vcard h3{ margin:.2rem 0; font-size: 1.05rem; color: var(--cyan); }

/* Market intro */
.market-intro{
  max-width: 820px; margin: .3rem 0 1rem;
  color: var(--text); opacity: .85; line-height: 1.55;
}

/* Reputation & stars */
.rep-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.25rem .55rem; border-radius: 999px;
  background: rgba(255,255,0,.08);
  border:1px solid rgba(255,255,0,.35);
  color: var(--yellow); font-weight:700; letter-spacing:.06em;
}
.seller-stars{
  display:inline-flex; align-items:center; gap:.25rem;
  color: var(--yellow); letter-spacing:.05em; font-weight:700;
  margin-left:.4rem;
}
.stars-shown{ color: var(--yellow); letter-spacing:.08em; font-weight:700; }

/* Review section */
.review-section{ margin-top: 1.2rem; }
.review-section h3{ margin: 0 0 .8rem; color: var(--cyan); }
.review-form{
  display: grid; gap: .6rem;
  background: rgba(0,255,255,.04);
  border: 1px dashed rgba(0,255,255,.35);
  border-radius: 12px; padding: .8rem; margin-bottom: 1rem;
}
.review-form textarea{
  width:100%; background: var(--bg); color: var(--text);
  border:1px solid var(--border); border-radius:8px; padding:.55rem .7rem;
  font-family: inherit; resize: vertical;
}
.review-form button{ justify-self: end; }
/* Star picker — radio group rendered as 5 stars */
.star-picker{
  display:inline-flex; flex-direction: row-reverse; gap:.15rem;
  font-size: 1.6rem; cursor: pointer; width: max-content;
}
.star-picker input{ display:none; }
.star-picker label{
  color: #444; transition: color .15s, transform .15s, text-shadow .15s;
  user-select:none;
}
.star-picker label:hover,
.star-picker label:hover ~ label,
.star-picker input:checked ~ label{
  color: var(--yellow);
  text-shadow: 0 0 8px var(--yellow);
}
.star-picker label:hover{ transform: scale(1.15); }

.review-list{ display: grid; gap:.6rem; }
.review-item{
  background: var(--surface); border:1px solid var(--border);
  border-radius: 10px; padding:.7rem .9rem;
}
.review-head{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin-bottom:.25rem; }
.review-body{ white-space: pre-wrap; line-height:1.5; color: var(--text); opacity:.9; }

/* Welcome tour modal */
.tour-backdrop{
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.75); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; animation: tourFadeIn .25s ease-out;
}
.tour-backdrop.hidden{ display:none; }
@keyframes tourFadeIn{ from { opacity:0 } to { opacity:1 } }
.tour-card{
  background: linear-gradient(140deg, var(--surface) 0%, var(--bg) 100%);
  border: 1px solid var(--magenta);
  border-radius: 18px;
  box-shadow: 0 0 50px rgba(255,0,170,.4), inset 0 0 30px rgba(0,255,255,.06);
  max-width: 500px; width: 100%; padding: 1.6rem 1.4rem 1.2rem;
  position: relative; text-align: center;
  animation: tourPop .35s cubic-bezier(.2,.9,.3,1.4);
}
@keyframes tourPop { from { transform: scale(.85); opacity:0 } to { transform: scale(1); opacity:1 } }
.tour-close{
  position: absolute; top: .6rem; right: .8rem;
  background: transparent; border: 0; color: var(--text);
  font-size: 1.6rem; cursor: pointer; line-height: 1;
}
.tour-close:hover{ color: var(--magenta); }
.tour-dot{ display:flex; justify-content:center; margin-bottom:.6rem; }
.tour-dot .dot-mascot{ width: 88px; height: 88px; }
.tour-title{
  font-family: "Orbitron", system-ui, sans-serif; font-weight: 700;
  color: var(--cyan); text-shadow: 0 0 12px rgba(0,255,255,.6);
  margin: 0 0 .8rem;
}
.tour-step{ min-height: 4.5rem; margin: .4rem 0 1rem; line-height: 1.5; }
.tour-step strong{ color: var(--yellow); }
.tour-dots{ display:flex; gap:.4rem; justify-content:center; margin-bottom: 1rem; }
.tour-dots .td{
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--border); cursor: pointer; transition: background .2s, transform .2s;
}
.tour-dots .td.active{ background: var(--magenta); transform: scale(1.3); box-shadow: 0 0 8px var(--magenta); }
.tour-actions{
  display:flex; gap:.6rem; justify-content: center; flex-wrap:wrap;
}

/* Howto polish */
.howto-intro{
  max-width: 800px; margin: .5rem 0 1.2rem;
  color: var(--text); opacity: .9; line-height: 1.6;
  padding: .8rem 1rem; border-left: 3px solid var(--cyan);
  background: rgba(0,255,255,.04); border-radius: 0 8px 8px 0;
}
.howto-tip{
  margin-top: .6rem; padding: .55rem .8rem;
  background: rgba(255,255,0,.08); border-radius: 8px;
  border: 1px dashed rgba(255,255,0,.4);
}
.eve-table{
  width: 100%; border-collapse: collapse; margin: .5rem 0;
}
.eve-table td{
  padding: .45rem .6rem;
  border-bottom: 1px dashed var(--border);
}
.eve-table td.pos{
  text-align: right; color: var(--cyan); font-weight: 700;
}

/* JSON-LD slot doesn't render, no styles needed. */

/* ============ Polish v3: hero, dot life, mobile, microcopy ============ */

/* Hero shell */
.hero { padding-top: 3.5rem; padding-bottom: 1.5rem; }
.hero-xl { padding-top: 4.5rem; padding-bottom: 2rem; position: relative; }
.hero-eyebrow{
  display: inline-block; font-family:'Orbitron', system-ui, sans-serif;
  font-size: .72rem; letter-spacing: .25em; text-transform: uppercase;
  color: var(--cyan); padding: .25rem .7rem;
  border: 1px solid rgba(0,255,255,.4); border-radius: 999px;
  background: rgba(0,255,255,.05);
  text-shadow: 0 0 10px rgba(0,255,255,.5);
  margin-bottom: 1rem;
  animation: eyebrowGlow 3.2s ease-in-out infinite;
}
@keyframes eyebrowGlow {
  0%,100% { box-shadow: 0 0 0 rgba(0,255,255,0); }
  50%     { box-shadow: 0 0 14px rgba(0,255,255,.45); }
}
.hero h1 { margin-top: .6rem; }
.hero .sub { font-size: 1.18rem; margin-bottom: 1rem; opacity: .95; color: var(--text); }
.hero-pitch{ font-size: 1rem; max-width: 780px; }

.hero-badges{
  display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center;
  margin: .4rem 0 1.2rem;
}
.hero-badges .hb{
  display:inline-flex; align-items:center; gap:.3rem;
  padding: .3rem .75rem; border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  font-size: .82rem; color: var(--text);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.hero-badges .hb:hover{
  transform: translateY(-2px);
  border-color: var(--magenta);
  box-shadow: 0 0 12px rgba(255,0,170,.35);
}

/* Scroll cue */
.scroll-hint{
  margin-top: 1.2rem; display:inline-flex; flex-direction:column; align-items:center; gap:.2rem;
  color: var(--muted); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  animation: scrollBob 2.2s ease-in-out infinite;
}
.scroll-hint .sh-arrow{ font-size: 1.1rem; color: var(--cyan); text-shadow: 0 0 8px var(--cyan); }
@keyframes scrollBob {
  0%, 100% { transform: translateY(0); opacity: .65; }
  50%      { transform: translateY(5px); opacity: 1; }
}

/* Section subtitle */
.section-sub{
  margin: -.4rem 0 .9rem;
  max-width: 760px;
  line-height: 1.5;
  font-size: .96rem;
}

/* ----- Dot v3 lifelike animations ----- */

/* Larger hero dot with breathing + lean toward cursor */
.hero-dot .dot-mascot{ width: 220px; height: 220px; }
.dot-mascot{
  --lean-x: 0px;
  --lean-y: 0px;
  transition: transform .25s cubic-bezier(.2,.9,.3,1.4),
              filter .3s ease, box-shadow .3s ease;
}
.dot-mascot.breathing{
  animation: dotBreathe 4.8s ease-in-out infinite, dotBob 3.4s ease-in-out infinite;
}
@keyframes dotBreathe {
  0%, 100% { filter: brightness(1)   saturate(1); }
  50%      { filter: brightness(1.08) saturate(1.15); }
}
@keyframes dotBob {
  0%, 100% { transform: translate(var(--lean-x), 0) rotate(-1.5deg); }
  50%      { transform: translate(var(--lean-x), -10px) rotate(1.5deg); }
}
.hero-dot .dot-mascot:hover{
  transform: translate(var(--lean-x), -4px) scale(1.05);
  box-shadow: 0 0 60px var(--cyan), 0 0 100px rgba(0,191,255,.7);
}

/* Smile widens when whole hero is hovered */
.hero-dot:hover .dot-smile{ width: 78px; height: 38px; }

/* Blink — close the eyes */
.dot-mascot.blink::before,
.dot-mascot.blink::after{
  height: 3px; top: 46%; border-radius: 4px;
  box-shadow: none; background: #fff;
}
.dot-mascot.blink .dot-pupil-l,
.dot-mascot.blink .dot-pupil-r{ opacity: 0; }

/* Happy click hop */
.dot-mascot.happy-jump{ animation: dotHop .62s cubic-bezier(.2,.9,.3,1.5); }
@keyframes dotHop {
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(-22px) scale(1.08, .94); }
  60%  { transform: translateY(0) scale(.95, 1.05); }
  80%  { transform: translateY(-6px) scale(1.02, .98); }
  100% { transform: translateY(0) scale(1); }
}
.dot-mascot.happy-jump .dot-smile{ height: 18px; width: 32px; }

/* Look-up micro-reaction on scroll — the JS biases the eye target upward
   while .scrolling is present; smile widens for a brief delighted look. */
.dot-mascot.scrolling .dot-smile{ height: 16px; width: 30px; }

/* Orbital sparks around hero dot */
.dot-orbit{
  position: absolute; inset: -60px;
  pointer-events: none;
}
.orbit-spark{
  position: absolute; top: 50%; left: 50%;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 12px var(--magenta), 0 0 24px var(--magenta);
  transform-origin: 0 0;
  opacity: .85;
}
.dot-orbit{ --orbit-r1: 140px; --orbit-r2: 160px; --orbit-r3: 180px; }
.orbit-spark.s1{ animation: orbit-r1 6s linear infinite; }
.orbit-spark.s2{ animation: orbit-r2 8s linear infinite; background: var(--cyan); box-shadow: 0 0 12px var(--cyan), 0 0 22px var(--cyan); }
.orbit-spark.s3{ animation: orbit-r3 10s linear infinite; background: var(--yellow); box-shadow: 0 0 12px var(--yellow), 0 0 22px var(--yellow); }
@keyframes orbit-r1 { from { transform: rotate(0deg)   translateX(var(--orbit-r1)) rotate(0deg);   } to { transform: rotate(360deg) translateX(var(--orbit-r1)) rotate(-360deg); } }
@keyframes orbit-r2 { from { transform: rotate(120deg) translateX(var(--orbit-r2)) rotate(-120deg); } to { transform: rotate(480deg) translateX(var(--orbit-r2)) rotate(-480deg); } }
@keyframes orbit-r3 { from { transform: rotate(240deg) translateX(var(--orbit-r3)) rotate(-240deg); } to { transform: rotate(600deg) translateX(var(--orbit-r3)) rotate(-600deg); } }

/* Dot helper chip (used on market/howto/profile headers) */
.dot-helper{
  display:inline-flex; align-items:center; gap:.6rem;
  background: var(--surface, var(--bg2));
  border: 1px solid var(--border, var(--line));
  border-radius: 999px;
  padding: .35rem .85rem .35rem .4rem;
  font-size: .88rem; color: var(--text);
  box-shadow: 0 0 18px rgba(0,255,255,.12);
  margin-bottom: .8rem;
}
.dot-helper .dot-mini{ width: 36px; height: 36px; flex: 0 0 36px; }
.dot-helper .dot-mini .dot-mascot{ width: 36px; height: 36px; box-shadow: 0 0 10px var(--cyan); }
.dot-helper .dot-mini .dot-mascot::before,
.dot-helper .dot-mini .dot-mascot::after{ width: 6px; height: 7px; top: 32%; }
.dot-helper .dot-mini .dot-pupil-l,
.dot-helper .dot-mini .dot-pupil-r{ width: 3px; height: 4px; top: 40%; }
.dot-helper .dot-mini .dot-smile{ width: 14px; height: 8px; border-bottom-width: 2px; }
.dot-helper .dot-mini .dot-glow{ inset: -8px; }

/* Card / vcard hover polish */
.vcard{
  position: relative; overflow: hidden;
}
.vcard::after{
  content:""; position:absolute; inset:auto -30% -60% auto;
  width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,255,255,.18), transparent 70%);
  opacity: 0; transition: opacity .3s;
  pointer-events: none;
}
.vcard:hover::after{ opacity: 1; }
.vcard:hover .vcard-icon{ transform: scale(1.12) rotate(-4deg); transition: transform .3s; }

/* Mobile polish — hero, badges, cta */
@media (max-width: 720px) {
  .hero-xl { padding: 2.2rem .8rem 1.2rem; }
  .hero h1 { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .hero .sub { font-size: 1rem; }
  .hero-pitch { font-size: .95rem; }
  .hero-dot .dot-mascot { width: 160px; height: 160px; }
  .dot-orbit{ inset: -30px; --orbit-r1: 95px; --orbit-r2: 108px; --orbit-r3: 120px; }
  .cta-row { gap: .45rem; }
  .cta-row .btn-neon, .cta-row .btn-cyan, .cta-row .btn-yellow, .cta-row .btn-ghost{
    padding: .55rem .8rem; font-size: .88rem;
  }
  .hero-badges .hb { font-size: .76rem; padding: .22rem .55rem; }
  .scroll-hint { margin-top: .6rem; }
  .value-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .vcard { padding: .8rem .85rem; }
  .vcard h3 { font-size: .98rem; }
  .vcard p { font-size: .85rem; }
  .market-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
}
@media (max-width: 420px) {
  .value-grid { grid-template-columns: 1fr; }
  .market-grid { grid-template-columns: 1fr; }
  .hero-eyebrow { font-size: .65rem; letter-spacing: .18em; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .dot-mascot, .dot-mascot.breathing, .dot-glow,
  .scroll-hint, .hero-eyebrow, .orbit-spark, .brand-mark {
    animation: none !important;
  }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ===== EVE Breakdown (Wallet + Dashboard) ===== */
.eve-breakdown { margin: 1rem 0 1.6rem; }
.eve-breakdown h3 { margin-bottom: 0.2rem; }
.eve-bd-grid {
  display: grid; gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.eve-bd-card {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--magenta) 6%, transparent),
    color-mix(in srgb, var(--cyan) 6%, transparent));
  border: 1px solid var(--border, var(--line, #233));
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  cursor: help;
}
.eve-bd-card:hover {
  transform: translateY(-2px);
  border-color: var(--cyan);
  box-shadow: 0 0 14px color-mix(in srgb, var(--cyan) 35%, transparent);
}
.eve-bd-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem; font-weight: 600; margin-bottom: 0.4rem;
}
.eve-bd-name { font-size: 0.92rem; }
.eve-bd-amt { font-variant-numeric: tabular-nums; font-weight: 800; }
.eve-bd-amt.pos { color: var(--cyan); text-shadow: 0 0 6px color-mix(in srgb, var(--cyan) 55%, transparent); }
.eve-bd-amt.neg { color: var(--magenta); }
.eve-bd-bar {
  height: 6px; background: color-mix(in srgb, var(--text, #fff) 8%, transparent);
  border-radius: 3px; overflow: hidden;
}
.eve-bd-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--magenta), var(--cyan));
  box-shadow: 0 0 8px var(--cyan);
  transition: width .6s ease;
}
.eve-bd-meta {
  display: flex; justify-content: space-between; font-size: 0.78rem;
  margin-top: 0.35rem; color: var(--muted, #99a);
  font-variant-numeric: tabular-nums;
}
.eve-mult {
  display: inline-block; padding: 0.05rem 0.4rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--yellow) 22%, transparent);
  color: var(--yellow);
  font-size: 0.78rem; font-weight: 700;
  text-shadow: 0 0 4px color-mix(in srgb, var(--yellow) 60%, transparent);
}

/* ---- Spread of the Day banner ---- */
.sotd-banner {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.85rem 1.2rem; margin: 0 0 1.1rem;
  border: 1px solid var(--yellow);
  border-radius: 14px;
  background: linear-gradient(95deg,
    color-mix(in srgb, var(--magenta) 14%, transparent),
    color-mix(in srgb, var(--yellow) 18%, transparent) 60%,
    color-mix(in srgb, var(--cyan) 14%, transparent));
  box-shadow: 0 0 18px color-mix(in srgb, var(--yellow) 35%, transparent),
              inset 0 0 18px color-mix(in srgb, var(--magenta) 18%, transparent);
  color: var(--text, #fff);
  text-decoration: none;
  position: relative; overflow: hidden;
  animation: sotdPulse 2.6s ease-in-out infinite;
}
@keyframes sotdPulse {
  0%,100% { box-shadow: 0 0 18px color-mix(in srgb, var(--yellow) 35%, transparent),
                       inset 0 0 18px color-mix(in srgb, var(--magenta) 18%, transparent); }
  50%    { box-shadow: 0 0 30px color-mix(in srgb, var(--yellow) 55%, transparent),
                       inset 0 0 22px color-mix(in srgb, var(--cyan) 22%, transparent); }
}
.sotd-star { font-size: 1.6rem; filter: drop-shadow(0 0 6px var(--yellow)); animation: sotdSpin 6s linear infinite; }
@keyframes sotdSpin { from{transform:rotate(0)} to{transform:rotate(360deg)} }
.sotd-text { flex: 1; line-height: 1.35; }
.sotd-text strong { color: var(--yellow); text-shadow: 0 0 6px color-mix(in srgb, var(--yellow) 60%, transparent); }
.sotd-mult {
  display: inline-block; margin-left: 0.6rem; padding: 0.12rem 0.55rem;
  border-radius: 999px; font-weight: 800; font-size: 0.82rem;
  background: var(--magenta); color: #fff;
  text-shadow: 0 0 6px color-mix(in srgb, var(--magenta) 60%, transparent);
}
.sotd-detail { animation: none; }
.sotd-dot {
  width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #66ddff, #0088cc 70%);
  box-shadow: 0 0 12px var(--cyan); position: relative; flex-shrink: 0;
}
.sotd-eye-l, .sotd-eye-r {
  position: absolute; top: 12px; width: 5px; height: 7px; background: #001;
  border-radius: 50%;
}
.sotd-eye-l { left: 9px; } .sotd-eye-r { right: 9px; }

/* ---- Local hit banner ---- */
.local-hit-banner {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.6rem 1rem; margin: 0 0 0.9rem;
  border: 1px solid var(--cyan);
  border-radius: 12px;
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--cyan) 30%, transparent);
}
.local-hit-banner strong { color: var(--cyan); }
.local-hit-mult {
  margin-left: auto; padding: 0.12rem 0.55rem; border-radius: 999px;
  font-weight: 800; background: var(--cyan); color: #001;
}

/* ---- Wallet detailed tooltip ---- */
.eve-tooltip { position: relative; cursor: help; }
.eve-tooltip .eve-tip {
  visibility: hidden; opacity: 0;
  position: absolute; z-index: 50; right: 0; top: calc(100% + 6px);
  min-width: 260px; max-width: 320px;
  padding: 0.7rem 0.85rem;
  background: var(--surface, #0d0d10);
  border: 1px solid var(--magenta);
  border-radius: 10px;
  box-shadow: 0 0 18px color-mix(in srgb, var(--magenta) 35%, transparent);
  font-size: 0.82rem; line-height: 1.4;
  text-align: left; white-space: normal;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.eve-tooltip:hover .eve-tip,
.eve-tooltip:focus .eve-tip { visibility: visible; opacity: 1; }
.eve-tip strong { color: var(--cyan); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }
.eve-tip-calc {
  margin: 0.35rem 0 0.55rem;
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  color: var(--yellow);
  background: color-mix(in srgb, var(--yellow) 8%, transparent);
  padding: 0.35rem 0.5rem; border-radius: 6px;
  word-break: break-word;
}
.eve-tip-list { list-style: none; margin: 0; padding: 0; }
.eve-tip-list li {
  display: flex; justify-content: space-between; padding: 0.18rem 0;
  border-top: 1px dashed color-mix(in srgb, var(--text, #fff) 12%, transparent);
}
.eve-tip-list li:first-child { border-top: none; }
.eve-tip-list b { color: var(--magenta); }

/* ---- Admin SOTD card ---- */
.sotd-admin .sotd-current {
  padding: 0.6rem 0.8rem; margin-bottom: 0.6rem;
  border-left: 3px solid var(--yellow);
  background: color-mix(in srgb, var(--yellow) 6%, transparent);
  border-radius: 6px;
}

/* =========================================================================
   FX layer — companion Dot, tiered EVE toasts, badge unlocks, particles
   ========================================================================= */

/* ---- Companion Dot (small, fixed, on all non-home pages) ---- */
.companion-dot {
  position: fixed;
  right: clamp(0.6rem, 2vw, 1.4rem);
  bottom: clamp(0.6rem, 2vw, 1.4rem);
  width: 56px; height: 56px;
  z-index: 70;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.25s ease;
}
.companion-dot:hover { transform: scale(1.1) rotate(-6deg); }
.companion-dot .cd-glow {
  position: absolute; inset: -10px;
  background: radial-gradient(circle, color-mix(in srgb, #00ffff 50%, transparent), transparent 65%);
  border-radius: 50%;
  animation: cdBreath 3.4s ease-in-out infinite;
}
@keyframes cdBreath {
  0%,100% { opacity: 0.55; transform: scale(1); }
  50%     { opacity: 0.9;  transform: scale(1.08); }
}
.companion-dot .cd-body {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #88e6ff 0%, #1a9ad6 55%, #0a6494 100%);
  box-shadow: 0 0 12px #00ffff, inset -4px -6px 10px rgba(0,0,0,0.25);
}
.companion-dot .cd-eye-l, .companion-dot .cd-eye-r {
  position: absolute; top: 18px; width: 7px; height: 10px;
  background: #001020; border-radius: 50%;
  box-shadow: inset 1px 1px 2px rgba(255,255,255,0.4);
}
.companion-dot .cd-eye-l { left: 14px; }
.companion-dot .cd-eye-r { right: 14px; }
.companion-dot .cd-mouth {
  position: absolute; left: 50%; bottom: 14px;
  width: 14px; height: 7px; transform: translateX(-50%);
  border: 2px solid #001020; border-top: none;
  border-radius: 0 0 14px 14px;
}
.companion-dot.cd-blink .cd-eye-l,
.companion-dot.cd-blink .cd-eye-r { height: 1.5px; transition: height 0.06s; }
.companion-dot.cd-nod  { animation: cdNod 0.7s ease-in-out 2; }
.companion-dot.cd-hop  { animation: cdHop 0.6s ease-out 3; }
.companion-dot.cd-spin { animation: cdSpin 1.4s ease-in-out 1; }
.companion-dot.cd-fly  { animation: cdFly 3.2s ease-in-out 1; }
@keyframes cdNod  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes cdHop  { 0%,100%{transform:translateY(0)} 40%{transform:translateY(-22px) rotate(-10deg)} 70%{transform:translateY(-6px) rotate(5deg)} }
@keyframes cdSpin { 0%{transform:rotate(0) scale(1)} 50%{transform:rotate(360deg) scale(1.18)} 100%{transform:rotate(720deg) scale(1)} }
@keyframes cdFly  {
  0%   { transform: translate(0,0) rotate(0); }
  25%  { transform: translate(-30vw,-30vh) rotate(-25deg) scale(1.1); }
  55%  { transform: translate(-50vw,-50vh) rotate(15deg) scale(1.2); }
  85%  { transform: translate(-20vw,-15vh) rotate(-10deg) scale(1.05); }
  100% { transform: translate(0,0) rotate(0); }
}

/* Home page already has the big hero Dot, hide companion to avoid duplicates */
body.is-home .companion-dot { display: none; }

/* Tighten Hero Dot presence (more "Dot-Liebe" on home) */
.hero-dot .dot-mascot { animation: heroBob 4s ease-in-out infinite; }
@keyframes heroBob {
  0%,100% { transform: translateY(0) rotate(0); }
  50%     { transform: translateY(-10px) rotate(2deg); }
}
.hero-dot .dot-glow {
  animation: heroPulse 2.6s ease-in-out infinite;
}
@keyframes heroPulse {
  0%,100% { opacity: 0.55; transform: scale(1); }
  50%     { opacity: 1;    transform: scale(1.15); }
}

/* ---- FX stage (full-screen overlay, only active during animations) ---- */
#fx-stage {
  position: fixed; inset: 0;
  z-index: 200;
  pointer-events: none;
  overflow: hidden;
}
.fx-toast {
  position: absolute; left: 50%; top: 38%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  filter: drop-shadow(0 0 24px color-mix(in srgb, #ff00aa 40%, transparent));
  animation: fxIn 0.32s cubic-bezier(.18,1.4,.5,1) both;
}
.fx-toast.fx-fade { animation: fxOut 0.28s ease-in forwards; }
@keyframes fxIn  { from{opacity:0; transform:translate(-50%,-30%) scale(0.7)} to{opacity:1; transform:translate(-50%,-50%) scale(1)} }
@keyframes fxOut { to  {opacity:0; transform:translate(-50%,-70%) scale(0.9)} }

.fx-number {
  font-family: Orbitron, system-ui, sans-serif;
  font-weight: 900;
  text-shadow: 0 0 14px currentColor;
  line-height: 1;
}
.fx-unit { font-size: 0.45em; opacity: 0.8; margin-left: 0.2em; }

/* Tier-specific number sizes + colours */
.fx-tier-small  .fx-number { font-size: 2.4rem; color: var(--cyan, #00ffff); }
.fx-tier-medium .fx-number {
  font-size: 3.4rem;
  background: linear-gradient(90deg, #ffd700, #ff00aa, #00ffff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px #ff00aa);
}
.fx-tier-large  .fx-number {
  font-size: 4.6rem;
  background: linear-gradient(90deg, #ffd700, #ff00aa, #00ffff, #ffd700);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fxShift 1.6s linear infinite;
  filter: drop-shadow(0 0 18px #ffd700);
}
.fx-tier-epic   .fx-number {
  font-size: 6rem;
  background: linear-gradient(90deg, #ff00aa, #ffd700, #00ffff, #ff66ff, #ffd700, #ff00aa);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fxShift 1.2s linear infinite, fxPulse 0.9s ease-in-out infinite;
  filter: drop-shadow(0 0 28px #ffd700) drop-shadow(0 0 16px #ff00aa);
}
@keyframes fxShift { from{background-position:0% 0} to{background-position:200% 0} }
@keyframes fxPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }

/* The Dot inside the toast */
.fx-dot {
  position: relative; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #88e6ff, #0a6494);
  box-shadow: 0 0 18px #00ffff;
}
.fx-dot .fx-eye-l, .fx-dot .fx-eye-r {
  position: absolute; top: 30%; width: 14%; height: 22%;
  background: #001020; border-radius: 50%;
}
.fx-dot .fx-eye-l { left: 25%; } .fx-dot .fx-eye-r { right: 25%; }
.fx-dot .fx-mouth {
  position: absolute; left: 50%; bottom: 25%;
  width: 30%; height: 16%; transform: translateX(-50%);
  border: 2px solid #001020; border-top: none;
  border-radius: 0 0 100% 100%;
}
.fx-dot-small  { width: 64px;  height: 64px; animation: cdNod 0.6s ease-in-out 2; }
.fx-dot-medium { width: 88px;  height: 88px; animation: cdHop 0.7s ease-out 3; }
.fx-dot-large  { width: 110px; height: 110px; animation: cdSpin 1.4s ease-in-out 1; }
.fx-dot-epic   { width: 140px; height: 140px; animation: dotEpic 3s ease-in-out 1; }
.fx-dot-clap   { animation: cdHop 0.5s ease-out 4; }
@keyframes dotEpic {
  0%,100% { transform: translateY(0) rotate(0) scale(1); }
  20%     { transform: translateY(-80px) rotate(-20deg) scale(1.15); }
  50%     { transform: translateY(-140px) rotate(15deg) scale(1.25); }
  80%     { transform: translateY(-60px) rotate(-5deg) scale(1.1); }
}

/* ---- Particles ---- */
.fx-particles { position: absolute; inset: 0; pointer-events: none; }
.fx-particle {
  position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px; border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
  animation: fxParticle 1.1s ease-out forwards;
  opacity: 0;
}
@keyframes fxParticle {
  0%   { transform: translate(-50%,-50%) scale(0.3) rotate(0); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.8) rotate(var(--rot)); opacity: 0; }
}

/* Golden apple confetti (epic) */
.fx-confetti {
  position: absolute; top: -10%;
  animation: fxConfetti 2s ease-in forwards;
  filter: drop-shadow(0 0 6px #ffd700);
}
@keyframes fxConfetti {
  0%   { transform: translateY(-20vh) rotate(0); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(120vh) rotate(720deg); opacity: 0; }
}

/* ---- Screen shake ---- */
@keyframes fxShake {
  0%,100% { transform: translate(0,0); }
  20%  { transform: translate(calc(var(--shake-i) * -0.6), calc(var(--shake-i) * 0.3)); }
  40%  { transform: translate(calc(var(--shake-i) * 0.7),  calc(var(--shake-i) * -0.4)); }
  60%  { transform: translate(calc(var(--shake-i) * -0.4), calc(var(--shake-i) * -0.5)); }
  80%  { transform: translate(calc(var(--shake-i) * 0.5),  calc(var(--shake-i) * 0.6)); }
}
body.fx-shake { animation: fxShake 0.48s cubic-bezier(.36,.07,.19,.97); }

/* ---- Badge unlock ---- */
.fx-badge-unlock { gap: 0.7rem; }
.fx-badge-icon {
  font-size: 4.2rem;
  filter: drop-shadow(0 0 18px #ffd700);
  animation: badgePop 0.8s cubic-bezier(.18,1.6,.5,1) both;
}
@keyframes badgePop {
  0%   { transform: scale(0) rotate(-180deg); opacity: 0; }
  60%  { transform: scale(1.3) rotate(20deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
.fx-badge-label {
  font-family: Orbitron, system-ui, sans-serif;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 12px #ff00aa;
}
.fx-badge-label strong {
  display: block;
  background: linear-gradient(90deg, #00ffff, #ff00aa, #ffd700);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.fx-ring {
  position: absolute; left: 50%; top: 50%;
  width: 220px; height: 220px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 3px solid transparent;
  background: conic-gradient(from 0deg, #00ffff, #ff00aa, #ffd700, #00ffff) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ringSpin 2.8s linear infinite, ringGrow 0.7s ease-out both;
}
.fx-ring-inner { display: none; }
@keyframes ringSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes ringGrow {
  from { width: 0; height: 0; opacity: 0; }
  to   { width: 220px; height: 220px; opacity: 1; }
}

/* ---- Skeleton loader (neon, with pulsing Dot) ---- */
.skeleton {
  position: relative; overflow: hidden;
  background: color-mix(in srgb, var(--magenta, #ff00aa) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--magenta, #ff00aa) 18%, transparent);
  border-radius: 10px;
  min-height: 80px;
}
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--cyan, #00ffff) 22%, transparent),
    transparent);
  animation: skelSweep 1.6s linear infinite;
}
@keyframes skelSweep { from{transform:translateX(-100%)} to{transform:translateX(100%)} }
.skeleton-dot {
  width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #88e6ff, #0a6494);
  box-shadow: 0 0 12px #00ffff;
  animation: skelDot 1.2s ease-in-out infinite;
  margin: 1rem auto;
}
@keyframes skelDot {
  0%,100% { transform: scale(1); opacity: 0.7; }
  50%     { transform: scale(1.25); opacity: 1; }
}

/* ---- Empty states with Dot illustration ---- */
.empty {
  text-align: center;
  padding: 2.4rem 1rem;
  border: 1px dashed color-mix(in srgb, var(--cyan, #00ffff) 30%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--cyan, #00ffff) 4%, transparent);
}
.empty::before {
  content: "";
  display: block;
  width: 76px; height: 76px;
  margin: 0 auto 0.9rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 65% 35%, #001020 8%, transparent 9%),
    radial-gradient(circle at 35% 35%, #001020 8%, transparent 9%),
    radial-gradient(circle at 30% 30%, #88e6ff, #0a6494);
  box-shadow: 0 0 18px #00ffff;
  animation: cdBreath 3s ease-in-out infinite;
}

/* ---- Inline mini button (used on profile_edit sound test) ---- */
.btn-mini { padding: 0.18rem 0.55rem; font-size: 0.78rem; margin-left: 0.6rem; }

/* ---- Reduced motion: kill all FX motion, keep colours/visibility ---- */
@media (prefers-reduced-motion: reduce) {
  .companion-dot, .companion-dot .cd-glow,
  .hero-dot .dot-mascot, .hero-dot .dot-glow,
  .sotd-banner, .sotd-star, .fx-toast, .fx-dot, .fx-number,
  .fx-particle, .fx-confetti, .fx-ring, .skeleton::after, .skeleton-dot,
  .empty::before {
    animation: none !important;
    transition: none !important;
  }
  .fx-particle, .fx-confetti { display: none !important; }
}

/* ============================================================
   Launch Readiness card (Admin Dashboard)
   ============================================================ */
.launch-card{
  border:2px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, var(--magenta), var(--cyan), var(--yellow)) border-box;
  box-shadow:0 0 30px rgba(255,0,170,.18);
  position:relative;overflow:hidden;
}
.launch-card.ready{
  box-shadow:0 0 40px rgba(0,255,255,.35), 0 0 80px rgba(255,255,0,.15);
  animation:launchPulse 2.8s ease-in-out infinite;
}
.launch-card.ready::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 90% 10%, rgba(255,255,0,.18), transparent 40%);
}
@keyframes launchPulse{
  0%,100%{box-shadow:0 0 40px rgba(0,255,255,.35),0 0 80px rgba(255,255,0,.10);}
  50%{box-shadow:0 0 60px rgba(0,255,255,.55),0 0 110px rgba(255,255,0,.25);}
}
.launch-check{
  display:flex;align-items:center;gap:.5rem;
  padding:.45rem .7rem;border-radius:8px;
  background:rgba(255,255,255,.03);border:1px solid var(--border);
  font-size:.92rem;
}
.launch-check.ok{border-color:rgba(0,255,255,.4);background:rgba(0,255,255,.06);}
.launch-check.miss{border-color:rgba(255,0,170,.45);background:rgba(255,0,170,.06);}
.launch-check .lc-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;font-weight:700;font-size:.85rem;
  flex-shrink:0;
}
.launch-check.ok   .lc-mark{background:var(--cyan);color:#003;box-shadow:0 0 12px var(--cyan);}
.launch-check.miss .lc-mark{background:var(--magenta);color:#fff;box-shadow:0 0 12px var(--magenta);}
.launch-check .lc-label{flex:1;color:var(--text);}
@media (prefers-reduced-motion: reduce){
  .launch-card.ready{animation:none!important;}
}

/* ===== Password change card (profile edit) ===== */
.pw-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:1.4rem 1.6rem;
  position:relative;
  box-shadow:0 0 28px rgba(255,0,170,.08), inset 0 0 22px rgba(0,255,255,.04);
}
.pw-card::before{
  content:"";position:absolute;inset:-1px;border-radius:14px;pointer-events:none;
  background:linear-gradient(135deg, rgba(255,0,170,.35), rgba(0,255,255,.25));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:1px;
}
.pw-card__title{
  margin:0 0 1rem;font-size:1.15rem;
  background:linear-gradient(90deg,var(--magenta),var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.pw-forgot-link{
  display:inline-block;margin-top:.35rem;font-size:.85rem;color:var(--cyan);
  text-decoration:none;border-bottom:1px dashed rgba(0,255,255,.4);
}
.pw-forgot-link:hover{color:var(--magenta);border-bottom-color:var(--magenta);}
.pw-strength{display:none;margin-top:.5rem;}
.pw-strength.is-active{display:block;animation:pwFade .25s ease;}
@keyframes pwFade{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}
.pw-strength__bar{
  height:8px;border-radius:6px;background:rgba(255,255,255,.06);
  border:1px solid var(--border);overflow:hidden;position:relative;
}
.pw-strength__bar span{
  display:block;height:100%;width:0;
  transition:width .25s ease, background .25s ease, box-shadow .25s ease;
}
.pw-strength__label{font-size:.85rem;font-weight:600;margin-top:.3rem;letter-spacing:.04em;}
.pw-strength__hint{font-size:.75rem;color:var(--muted);margin-top:.15rem;}
.pw-match{display:inline-block;margin-top:.25rem;font-size:.85rem;font-weight:600;}
.btn-magenta{
  background:linear-gradient(90deg,var(--magenta),#ff4488);
  border-color:var(--magenta);
}
.btn-magenta:hover{box-shadow:0 0 18px var(--magenta),0 0 36px rgba(255,0,170,.4);}

/* ===================== Premium Flyer Picker ===================== */
.flyer-picker{
  margin-top:1.5rem; padding:1.4rem 1.6rem;
  background:linear-gradient(180deg, rgba(20,16,20,.85), rgba(10,10,10,.95));
  border:1px solid rgba(212,175,55,.35);
  border-radius:14px;
  box-shadow:
    0 0 30px rgba(212,175,55,.10),
    inset 0 0 22px rgba(0,255,255,.04);
  position:relative; overflow:hidden;
}
.flyer-picker::before{
  content:""; position:absolute; inset:-1px; border-radius:14px; pointer-events:none;
  background:linear-gradient(135deg, rgba(255,243,168,.55), rgba(212,175,55,.25) 40%,
                                     rgba(255,0,170,.20) 70%, rgba(0,255,255,.20));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:1px;
}
.flyer-picker__title{
  margin:0 0 1rem; font-size:1.15rem; letter-spacing:.04em;
  background:linear-gradient(90deg,#fff3a8,#d4af37 40%,#ff00aa 75%,#00ffff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.flyer-grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));
}
.flyer-tile{
  position:relative; display:flex; flex-direction:column; gap:.6rem;
  padding:1rem .9rem; border-radius:12px; text-decoration:none;
  background:linear-gradient(180deg, #0f0c0f 0%, #060406 100%);
  border:1px solid #2a2226;
  transition:transform .18s ease, box-shadow .25s ease, border-color .25s ease;
  isolation:isolate;
}
.flyer-tile:hover{
  transform:translateY(-3px);
  border-color:rgba(212,175,55,.55);
  box-shadow:0 6px 24px rgba(212,175,55,.25), 0 0 18px rgba(255,0,170,.15);
}
.flyer-tile.is-premium{
  border-color:transparent;
  background:
    linear-gradient(#0c0a0c,#0c0a0c) padding-box,
    linear-gradient(135deg,#fff3a8,#d4af37 45%,#8a6b1e 75%,#d4af37) border-box;
  border:1.5px solid transparent;
}
.flyer-tile.is-premium:hover{
  box-shadow:0 8px 32px rgba(212,175,55,.45), 0 0 28px rgba(255,0,170,.25);
}
.flyer-tile__badge{
  position:absolute; top:-9px; right:10px;
  font-size:.65rem; font-weight:800; letter-spacing:.12em;
  padding:.18rem .55rem; border-radius:999px; color:#1a1408;
  background:linear-gradient(90deg,#fff3a8,#d4af37 50%,#8a6b1e);
  box-shadow:0 0 10px rgba(255,243,168,.55), 0 2px 6px rgba(0,0,0,.5);
  z-index:2;
}
.flyer-tile__preview{
  height:120px; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 30% 20%, rgba(212,175,55,.18), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(0,255,255,.10), transparent 65%),
    #050305;
  border-radius:8px; border:1px solid #1a1418;
}
.flyer-tile__paper{
  position:relative; background:#0a0708;
  border:1.5px solid #d4af37;
  box-shadow:0 0 12px rgba(212,175,55,.45), inset 0 0 8px rgba(255,243,168,.15);
  display:flex; align-items:flex-end; justify-content:center; padding:6px;
}
.flyer-tile__paper::before{
  content:""; position:absolute; inset:3px; border:.5px solid rgba(255,243,168,.45);
  pointer-events:none;
}
.flyer-tile__inner{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;}
.flyer-tile__wm{
  font-size:.55rem; letter-spacing:.18em; font-weight:800;
  background:linear-gradient(90deg,#fff3a8,#d4af37);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.flyer-tile__qr{
  width:60%; height:18px;
  background:
    repeating-linear-gradient(90deg,#e8e0c0 0 2px,transparent 2px 4px),
    repeating-linear-gradient(0deg,#e8e0c0 0 2px,transparent 2px 4px);
  border:.5px solid #d4af37; opacity:.85;
}
/* paper shapes per format */
.flyer-tile--mini .flyer-tile__paper{ width:42px;  height:92px; }
.flyer-tile--card .flyer-tile__paper{ width:104px; height:64px; flex-direction:row;
  align-items:center; justify-content:space-between; padding:6px 8px;}
.flyer-tile--card .flyer-tile__inner{align-items:flex-start;width:auto;}
.flyer-tile--card .flyer-tile__qr{width:22px;height:22px;}
.flyer-tile--a6   .flyer-tile__paper{ width:62px;  height:88px; }
.flyer-tile--a5   .flyer-tile__paper{ width:72px;  height:100px;}
.flyer-tile--a4   .flyer-tile__paper{ width:80px;  height:108px;}
.flyer-tile__meta{display:flex;flex-direction:column;gap:.15rem;}
.flyer-tile__name{font-weight:700;color:#fff3a8;font-size:.92rem;}
.flyer-tile__desc{font-size:.75rem;color:var(--muted);line-height:1.35;min-height:2.5em;}
.flyer-tile__cta{
  margin-top:.35rem; font-size:.75rem; font-weight:600;
  color:var(--cyan); letter-spacing:.04em;
}
.flyer-tile.is-premium .flyer-tile__cta{color:#fff3a8;}

/* ===== Live Scans Map =================================================== */
.live-scans{
  margin:1.6rem 0 1.2rem;
  padding:1rem 1rem 1.1rem;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,0,170,0.06), rgba(0,255,255,0.04));
  border:1px solid rgba(255,0,170,0.30);
  box-shadow:0 0 32px rgba(255,0,170,0.10), inset 0 0 18px rgba(0,255,255,0.04);
}
.live-head{
  position:relative;
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "title chip" "sub sub";
  column-gap:.9rem; row-gap:.25rem;
  align-items:center;
}
.live-head h3{
  grid-area: title;
  margin:0;
  text-shadow:0 0 12px rgba(255,0,170,0.6);
  min-width:0;
}
.live-head .live-sub{ grid-area: sub; margin:0; }
.live-counter-chip{
  grid-area: chip;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.32rem .75rem;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(0,255,255,.18), rgba(255,221,0,.18));
  border:1px solid rgba(255,221,0,.45);
  color:#ffdd00;
  font-size:.82rem; font-weight:600;
  text-shadow:0 0 8px rgba(255,221,0,.45);
  white-space:nowrap;
}
.live-counter-chip::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:#ffdd00;
  box-shadow:0 0 8px #ffdd00, 0 0 14px #ff00aa;
  animation:wikey-blink 1.6s ease-in-out infinite;
}
.live-grid{
  display:grid;
  grid-template-columns: 1fr 260px;
  gap:1rem;
  margin-top:.9rem;
}
.live-map-wrap{position:relative; min-height:340px;}
.live-map{
  height:380px; width:100%;
  border-radius:14px;
  border:1px solid rgba(0,255,255,0.35);
  box-shadow:0 0 24px rgba(0,255,255,0.18);
  background:#0a0a0a;
  overflow:hidden;
}
.live-empty{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--muted, #aaa);
  font-style:italic; pointer-events:none;
  background:rgba(10,10,10,0.6);
  border-radius:14px;
}
/* Dim OSM tiles so the neon heatmap pops */
.wikey-tile{
  filter:grayscale(0.55) brightness(0.65) contrast(1.05);
}
[data-theme="light"] .wikey-tile{ filter:none; }

/* Pulse marker for newly arrived scans */
.scan-pulse-icon{position:relative;}
.scan-pulse-icon .sp-dot{
  position:absolute; left:50%; top:50%;
  width:10px; height:10px; margin:-5px 0 0 -5px;
  border-radius:50%;
  background:#ffdd00;
  box-shadow:0 0 12px rgba(255,221,0,0.95), 0 0 26px rgba(255,0,170,0.8);
}
.scan-pulse-icon .sp-ring{
  position:absolute; left:50%; top:50%;
  width:14px; height:14px; margin:-7px 0 0 -7px;
  border-radius:50%;
  border:2px solid #ff00aa;
  animation:wikey-pulse 1.4s ease-out infinite;
}
@keyframes wikey-pulse{
  0%   { transform:scale(0.6); opacity:1; }
  100% { transform:scale(3.5); opacity:0; }
}

/* Side list — modern neon roster */
.live-side{
  background:linear-gradient(180deg, rgba(10,10,10,0.55), rgba(10,10,10,0.30));
  border:1px solid rgba(0,255,255,0.22);
  border-radius:14px;
  padding:.85rem .9rem;
  max-height:380px;
  display:flex; flex-direction:column;
  box-shadow:inset 0 0 18px rgba(0,255,255,0.05);
}
.live-side-title{
  margin:0 0 .65rem;
  font-size:.78rem; letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--cyan, #00ffff);
  text-shadow:0 0 10px rgba(0,255,255,0.55);
  display:flex; align-items:center; gap:.45rem;
}
.live-side-title::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--cyan,#00ffff);
  box-shadow:0 0 8px var(--cyan,#00ffff);
  animation:wikey-blink 1.6s ease-in-out infinite;
}
@keyframes wikey-blink{ 0%,100%{opacity:1} 50%{opacity:.35} }

.live-list{
  list-style:none; margin:0; padding:0;
  overflow-y:auto; flex:1;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,0,170,0.35) transparent;
}
.live-list::-webkit-scrollbar{ width:6px; }
.live-list::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(0,255,255,0.4), rgba(255,0,170,0.4));
  border-radius:6px;
}

.live-list .ls-item{
  display:grid;
  grid-template-columns: 38px 1fr auto;
  gap:.85rem; align-items:center;
  padding:.7rem .85rem;
  margin-bottom:.5rem;
  border-radius:14px;
  background:
    linear-gradient(135deg, rgba(0,255,255,.07), rgba(255,0,170,.05) 60%, rgba(10,10,10,.55) 100%);
  border:1px solid rgba(0,255,255,.20);
  box-shadow:
    0 4px 18px rgba(0,0,0,.35),
    0 0 14px rgba(0,255,255,.08),
    inset 0 0 18px rgba(0,255,255,.04);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  transition:background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  animation:ls-pop .55s cubic-bezier(.2,.9,.3,1.12);
}
.live-list .ls-item:hover{
  background:
    linear-gradient(135deg, rgba(0,255,255,.12), rgba(255,0,170,.10) 60%, rgba(10,10,10,.55) 100%);
  border-color:rgba(255,0,170,.42);
  transform:translateX(2px);
  box-shadow:
    0 6px 22px rgba(0,0,0,.42),
    0 0 22px rgba(255,0,170,.18),
    inset 0 0 22px rgba(0,255,255,.08);
}
.live-list .ls-item.is-fresh{
  border-color:rgba(255,221,0,.6);
  box-shadow:
    0 0 22px rgba(255,221,0,.32),
    0 0 36px rgba(255,0,170,.22),
    inset 0 0 18px rgba(255,221,0,.10);
}
@keyframes ls-pop{
  0%  { opacity:0; transform:translateY(-10px) scale(.94); filter: blur(2px); }
  60% { opacity:1; transform:translateY(2px) scale(1.015); filter: blur(0); }
  100%{ opacity:1; transform:translateY(0)  scale(1); filter: blur(0); }
}

/* Dot-mascot avatar — same friendly face as the rest of the app, tiny edition */
.ls-avatar{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  background:radial-gradient(circle at 32% 26%,
    hsl(var(--h, 200) 100% 75%),
    hsl(var(--h, 200) 90% 50%) 65%,
    hsl(var(--h, 200) 85% 28%));
  box-shadow:
    0 0 12px hsla(var(--h, 200), 95%, 55%, .55),
    inset -3px -5px 10px rgba(0,0,0,.30),
    inset 2px 3px 7px rgba(255,255,255,.30);
  border:1.5px solid rgba(255,255,255,.55);
}
.ls-avatar-dot{
  position:absolute; inset:0;
  display:block;
}
.ls-avatar-eye{
  position:absolute; top:38%;
  width:6px; height:8px; border-radius:50%;
  background:#fff;
  box-shadow:inset -1px -1px 0 #d8e6ee;
}
.ls-avatar-eye::after{
  content:""; position:absolute; left:50%; top:55%;
  width:3px; height:4px; margin:-2px 0 0 -1.5px;
  border-radius:50%; background:#0a0a0a;
}
.ls-avatar-eye--l{ left:25%; }
.ls-avatar-eye--r{ right:25%; }
.ls-avatar-smile{
  position:absolute; left:50%; top:62%;
  width:14px; height:7px; margin-left:-7px;
  border-bottom:2px solid #0a0a0a;
  border-radius:0 0 14px 14px;
}

.ls-meta{ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.ls-meta .ls-who{
  color:#fff; font-weight:700; font-size:.95rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-shadow:0 0 10px rgba(0,255,255,.30);
  letter-spacing:.01em;
}
.ls-meta .ls-sub{
  color:var(--muted,#a8b0b8); font-size:.76rem;
  font-variant-numeric:tabular-nums; margin-top:2px;
  display:flex; align-items:center; gap:.45rem;
}
.ls-meta .ls-sub .ls-ago::before{
  content:"⏱"; margin-right:.25rem; opacity:.7;
}

.ls-eve{
  display:inline-flex; align-items:center; gap:.25rem;
  padding:.3rem .65rem;
  border-radius:999px;
  font-size:.78rem; font-weight:800;
  background:linear-gradient(95deg, #ffdd00 0%, #ff8800 45%, #ff00aa 100%);
  color:#0a0a0a;
  box-shadow:
    0 0 12px rgba(255,221,0,.55),
    0 0 22px rgba(255,0,170,.40),
    inset 0 1px 0 rgba(255,255,255,.45);
  white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,255,255,.25);
}
.ls-eve::before{
  content:"⚡"; font-size:.9em; line-height:1;
}
.ls-eve--neutral{
  background:linear-gradient(95deg, rgba(0,255,255,.30), rgba(255,0,170,.30));
  color:#ffffff;
  box-shadow:0 0 10px rgba(0,255,255,.30), inset 0 0 8px rgba(0,255,255,.10);
  text-shadow:none;
}
.ls-eve--neutral::before{ content:"📡"; }

/* Empty state */
.live-list .ls-empty{
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  padding:1.5rem 1rem; color:var(--muted,#888); font-style:italic;
  text-align:center;
}
.ls-empty-dot{
  width:36px; height:36px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #4ad9ff, #1098e3 65%, #0a4e7a);
  box-shadow:0 0 18px rgba(0,255,255,.45);
  position:relative; animation:edBob 3.2s ease-in-out infinite;
}
.ls-empty-dot::before, .ls-empty-dot::after{
  content:""; position:absolute; top:42%;
  width:5px; height:5px; border-radius:50%; background:#0a0a0a;
}
.ls-empty-dot::before{ left:30%; }
.ls-empty-dot::after { right:30%; }

@media (prefers-reduced-motion: reduce){
  .live-list .ls-item,
  .live-side-title::before,
  .ls-pulse,
  .ls-empty-dot,
  .scan-pulse-icon .sp-ring{ animation:none !important; }
}

/* Mobile — compact notification cards */
@media (max-width: 720px){
  .live-grid{ grid-template-columns: 1fr; }
  .live-side{ max-height:none; }
  .live-map{ height:300px; }
  .live-counter-chip{ position:static; display:inline-block; margin-top:.5rem; }
  .live-list .ls-item{
    grid-template-columns: 30px 1fr auto;
    gap:.6rem;
    padding:.5rem .65rem;
    margin-bottom:.4rem;
    border-radius:11px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .ls-avatar{ width:30px; height:30px; border-width:1px; }
  .ls-avatar-eye{ width:5px; height:6px; top:36%; }
  .ls-avatar-smile{ width:11px; height:5px; margin-left:-5.5px; top:60%; }
  .ls-meta .ls-who{ font-size:.85rem; }
  .ls-meta .ls-sub{ font-size:.7rem; }
  .ls-eve{ padding:.22rem .5rem; font-size:.72rem; }
}

/* Leaflet popup neon override */
.leaflet-popup-content-wrapper{
  background:#0a0a0a !important;
  color:#fff !important;
  border:1px solid rgba(255,0,170,0.5);
  box-shadow:0 0 18px rgba(255,0,170,0.35);
  border-radius:10px;
}
.leaflet-popup-tip{ background:#0a0a0a !important; border:1px solid rgba(255,0,170,0.4); }

/* ============================================================
   Spread Editor (form.html) — EasyMDE neon overrides + layout
   ============================================================ */
.editor-page { max-width: 1100px; margin: 0 auto; }
.editor-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.editor-head__title h2 { margin: 0; }
.editor-head__title .muted { margin: .2rem 0 0; font-family: monospace; color: var(--cyan); }

.autosave-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .8rem; border-radius: 999px;
  background: var(--surface, #141420); border: 1px solid var(--border, #2a2a3a);
  font-size: .85rem; color: var(--text, #eee);
  transition: all .25s ease;
}
.autosave-pill .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #666; box-shadow: 0 0 6px #666;
}
.autosave-pill[data-state="idle"]   .dot { background: #888; box-shadow: 0 0 6px #888; }
.autosave-pill[data-state="saving"] .dot { background: var(--yellow, #ffff00); box-shadow: 0 0 10px var(--yellow,#ffff00); animation: pulse 1s infinite; }
.autosave-pill[data-state="saved"]  .dot { background: var(--cyan, #00ffff);   box-shadow: 0 0 10px var(--cyan,#00ffff); }
.autosave-pill[data-state="error"]  .dot { background: var(--magenta,#ff00aa); box-shadow: 0 0 10px var(--magenta,#ff00aa); }
.autosave-pill[data-state="saved"]  { border-color: rgba(0,255,255,.5); }
.autosave-pill[data-state="error"]  { border-color: rgba(255,0,170,.6); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.editor-grid {
  display: grid; gap: 1.2rem;
  grid-template-columns: minmax(0, 1fr) 320px;
}
@media (max-width: 880px) {
  .editor-grid { grid-template-columns: 1fr; }
}
.editor-form .field { display: block; margin-bottom: 1rem; }
.field__label {
  display: block; font-weight: 600; margin-bottom: .35rem; color: var(--text, #eee);
}
.field__hint { font-weight: 400; color: var(--muted, #888); font-size: .8rem; margin-left: .4rem; }
.field__input {
  width: 100%; padding: .65rem .8rem;
  background: var(--surface,#141420); border: 1px solid var(--border,#2a2a3a);
  border-radius: 8px; color: var(--text,#eee); font: inherit;
}
.field__input--lg { font-size: 1.2rem; font-weight: 600; }
.field__input:focus { outline: none; border-color: var(--cyan,#00ffff); box-shadow: 0 0 12px rgba(0,255,255,.35); }
.field-row { display: grid; gap: .8rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) { .field-row { grid-template-columns: 1fr; } }

/* EasyMDE neon skin */
.EasyMDEContainer .CodeMirror,
.EasyMDEContainer .editor-preview-side {
  background: var(--surface,#0f0f1a) !important;
  color: var(--text,#eee) !important;
  border-color: var(--border,#2a2a3a) !important;
}
.editor-toolbar {
  background: var(--surface,#141420) !important;
  border-color: var(--border,#2a2a3a) !important;
  border-top-left-radius: 8px; border-top-right-radius: 8px;
}
.editor-toolbar > button {
  color: var(--text,#eee) !important;
}
.editor-toolbar > button:hover,
.editor-toolbar > button.active {
  background: rgba(0,255,255,.12) !important;
  border-color: var(--cyan,#00ffff) !important;
  color: var(--cyan,#00ffff) !important;
}
.editor-toolbar i.separator { border-left: 1px solid var(--border,#2a2a3a); }
.editor-statusbar { color: var(--muted,#888); }
.CodeMirror-cursor { border-left-color: var(--magenta,#ff00aa) !important; }
.editor-preview-side h1,.editor-preview-side h2,.editor-preview-side h3 {
  color: var(--cyan,#00ffff); text-shadow: 0 0 6px rgba(0,255,255,.4);
}
.editor-preview-side a { color: var(--magenta,#ff00aa); }
.editor-preview-side code,.editor-preview-side pre {
  background: rgba(255,255,255,.04); border-radius: 4px; padding: 2px 5px;
}
[data-theme="light"] .EasyMDEContainer .CodeMirror,
[data-theme="light"] .EasyMDEContainer .editor-preview-side { background: #fff !important; color: #222 !important; }

/* Dropzone */
.dropzone {
  border: 2px dashed var(--border,#2a2a3a); border-radius: 12px;
  padding: 1rem; background: var(--surface,#141420);
  transition: border-color .2s, background .2s;
}
.dropzone.is-drag { border-color: var(--cyan,#00ffff); background: rgba(0,255,255,.06); }
.dropzone__inner {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  cursor: pointer; padding: 1rem;
}
.dropzone__icon { font-size: 2rem; }
.dropzone__title { font-weight: 600; }
.dropzone__sub { color: var(--muted,#888); font-size: .8rem; }
.dropzone__preview {
  list-style: none; padding: 0; margin: .8rem 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
}
.dz-tile { position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; border: 1px solid var(--border,#2a2a3a); }
.dz-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dz-tile__name {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2px 4px; font-size: .65rem; background: rgba(0,0,0,.7); color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Existing images grid (edit mode) */
.existing-images { margin-top: 1rem; }
.existing-images__title { margin: 0 0 .5rem; font-size: .95rem; color: var(--cyan,#00ffff); }
.existing-images__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.exi-tile { position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; border: 1px solid var(--border,#2a2a3a); }
.exi-tile label { display: block; width: 100%; height: 100%; cursor: pointer; }
.exi-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.exi-tile input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.exi-tile__overlay {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center;
  padding: 4px; font-size: .7rem; font-weight: 600;
  background: linear-gradient(to top, rgba(0,0,0,.75), transparent 60%);
  color: #fff;
}
.exi-tile__remove { display: none; color: var(--magenta,#ff00aa); }
.exi-tile__check  { color: var(--cyan,#00ffff); }
.exi-tile input:not(:checked) ~ .exi-tile__overlay .exi-tile__check  { display: none; }
.exi-tile input:not(:checked) ~ .exi-tile__overlay .exi-tile__remove { display: inline; }
.exi-tile input:not(:checked) ~ img { opacity: .35; filter: grayscale(.8); }
.exi-tile:hover { box-shadow: 0 0 10px rgba(0,255,255,.4); }

.editor-actions {
  display: flex; gap: .6rem; justify-content: flex-end;
  margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--border,#2a2a3a);
}
@media (max-width: 600px) {
  .editor-actions { flex-direction: column-reverse; }
  .editor-actions .btn-neon, .editor-actions .btn-ghost { width: 100%; text-align: center; }
}

/* Rendered Markdown body on /spread/<id> */
.md-body { line-height: 1.7; }
.md-body h1, .md-body h2, .md-body h3 { color: var(--cyan,#00ffff); text-shadow: 0 0 6px rgba(0,255,255,.35); margin: 1.2rem 0 .5rem; }
.md-body h1 { font-size: 1.7rem; }
.md-body h2 { font-size: 1.35rem; }
.md-body h3 { font-size: 1.1rem; }
.md-body a { color: var(--magenta,#ff00aa); }
.md-body a:hover { text-shadow: 0 0 6px rgba(255,0,170,.5); }
.md-body ul, .md-body ol { padding-left: 1.4rem; }
.md-body blockquote {
  border-left: 3px solid var(--magenta,#ff00aa);
  padding: .3rem .8rem; margin: .8rem 0;
  background: rgba(255,0,170,.05); color: var(--text,#ddd);
}
.md-body code { background: rgba(255,255,255,.06); padding: 2px 5px; border-radius: 4px; font-size: .9em; }
.md-body pre { background: rgba(255,255,255,.04); padding: .8rem; border-radius: 6px; overflow-x: auto; border: 1px solid var(--border,#2a2a3a); }
.md-body img { max-width: 100%; border-radius: 8px; margin: .5rem 0; }
.md-body hr { border: none; border-top: 1px solid var(--border,#2a2a3a); margin: 1.2rem 0; }

/* ============================================================
   Phase 1 Geo — editor picker + Spreadlog map
   ============================================================ */
.geo-field {
  border: 1px solid var(--border,#2a2a3a); border-radius: 10px;
  padding: .8rem 1rem 1rem; margin-top: 1rem;
  background: var(--surface,#141420);
}
.geo-field > legend { padding: 0 .5rem; color: var(--cyan,#00ffff); font-weight: 600; }
.geo-row { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: .6rem; }
.geo-btn { white-space: nowrap; }
.geo-map { height: 260px; width: 100%; border-radius: 8px; border: 1px solid var(--border,#2a2a3a); overflow: hidden; }
.geo-coords { display: flex; justify-content: space-between; gap: 1rem; margin-top: .35rem; font-size: .85rem; flex-wrap: wrap; }
@media (max-width: 600px) {
  .geo-row { flex-direction: column; align-items: stretch; }
  .geo-btn { width: 100%; }
  .geo-map { height: 220px; }
}

/* Spreadlog big map */
.spread-map-wrap {
  margin: 1.2rem 0 1.5rem;
  border: 1px solid var(--border,#2a2a3a); border-radius: 12px;
  background: var(--surface,#141420);
  overflow: hidden;
}
.spread-map-head { padding: .8rem 1rem .4rem; }
.spread-map { height: 380px; width: 100%; }
@media (max-width: 600px) { .spread-map { height: 280px; } }
.spread-map-legend {
  list-style: none; padding: .6rem 1rem; margin: 0;
  display: flex; flex-wrap: wrap; gap: .8rem;
  border-top: 1px solid var(--border,#2a2a3a);
  font-size: .85rem;
}
.spread-map-legend li { display: inline-flex; align-items: center; gap: .35rem; }
.legend-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
}
.spread-map-empty { padding: .8rem 1rem; border-top: 1px solid var(--border,#2a2a3a); }

/* Leaflet pin override */
.spread-pin { background: transparent; border: 0; }
.spread-pin__dot {
  display: block; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #0a0a0a;
  transition: transform .15s ease;
}
.spread-pin:hover .spread-pin__dot { transform: scale(1.25); }
.spread-pin-pop strong { color: var(--cyan,#00ffff); font-size: 1rem; }
.leaflet-popup-content-wrapper {
  background: #0a0a0a !important; color: #eee !important;
  border: 1px solid rgba(0,255,255,.5);
  box-shadow: 0 0 18px rgba(0,255,255,.35);
  border-radius: 10px;
}
.leaflet-popup-content { margin: .6rem .8rem; }
.leaflet-popup-tip { background: #0a0a0a !important; }

/* ============================================================
   Phase 2 Geo — clusters, filter, origin badge, mini map
   ============================================================ */
.spread-map-wrap.is-compact .spread-map { border-radius: 10px; }
.spread-map-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.spread-map-filter {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(0,0,0,.35); padding: .35rem .6rem;
  border: 1px solid var(--border,#2a2a3a); border-radius: 8px;
  font-size: .85rem;
}
.spread-map-filter select {
  background: transparent; color: inherit;
  border: 0; outline: none; font-size: .85rem;
}

/* Cluster icon — dominant region color, neon glow */
.spread-cluster { background: transparent; border: 0; }
.spread-cluster__inner {
  border-radius: 50%; color: #0a0a0a; font-weight: 700;
  text-align: center; border: 2px solid #0a0a0a;
  font-family: inherit;
}
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large,
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div { background: transparent !important; }

/* On the full/standalone map (filter-nav mode) clusters deep-link into the
   region-filtered list — give them the same tappable affordance as the home
   mini-map: pointer cursor + a lift & brighter neon glow on hover. */
.spread-map.is-filter-nav .spread-cluster { cursor: pointer; }
.spread-map.is-filter-nav .spread-cluster__inner {
  transition: transform .16s ease, filter .16s ease;
}
.spread-map.is-filter-nav .spread-cluster:hover { z-index: 1000; }
.spread-map.is-filter-nav .spread-cluster:hover .spread-cluster__inner {
  transform: scale(1.08);
  filter: brightness(1.18) saturate(1.25);
}

/* Origin badge on spread detail */
.origin-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .5rem; padding: .35rem .7rem;
  border: 1px solid var(--border,#2a2a3a); border-radius: 999px;
  background: rgba(0,0,0,.4);
  color: inherit; text-decoration: none;
  font-size: .85rem; transition: transform .15s ease;
}
.origin-badge:hover { transform: translateY(-1px); }
.origin-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
}
.origin-label { font-weight: 600; }
.origin-name { font-size: .8rem; }

/* ============================================================
   Detail page — magical hero, claim card, confetti, position map
   ============================================================ */

/* Aurora gradient bg scoped to detail hero */
.magic-hero{
  position: relative; overflow: hidden;
  padding: 28px 24px 24px;
  border-radius: 26px;
  background: linear-gradient(180deg, var(--surface), var(--surface-2,#0d0d12));
  box-shadow: 0 0 0 1px var(--border), 0 30px 80px -30px rgba(0,0,0,.6);
  margin-bottom: 1.6rem;
}
.magic-hero::before, .magic-hero::after{
  content:""; position:absolute; width:520px; height:520px; border-radius:50%;
  filter: blur(80px); opacity:.45; pointer-events:none; mix-blend-mode:screen;
}
.magic-hero::before{background:radial-gradient(circle,var(--magenta),transparent 60%); top:-260px; left:-160px;}
.magic-hero::after{background:radial-gradient(circle,var(--cyan),transparent 60%); bottom:-260px; right:-160px;}
html[data-theme=light] .magic-hero::before, html[data-theme=light] .magic-hero::after{opacity:.18}

.magic-hero__grid{position:relative; z-index:1; display:grid; grid-template-columns: 1fr; gap: 18px;}
@media (min-width: 820px){ .magic-hero__grid{ grid-template-columns: 1fr 280px; gap: 28px; align-items:start;} }

.magic-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:999px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  box-shadow: 0 0 0 1px var(--border);
  font-size:12px; color:var(--muted); letter-spacing:.04em;
}
.magic-eyebrow .pulse{width:7px;height:7px;border-radius:50%;background:var(--magenta);box-shadow:0 0 10px var(--magenta);animation:m-pulse 2s ease-in-out infinite}
@keyframes m-pulse{0%,100%{opacity:.6;transform:scale(.9)}50%{opacity:1;transform:scale(1.2)}}

.magic-title{
  font-size: clamp(28px, 5.2vw, 44px);
  line-height: 1.04; letter-spacing:-0.025em; font-weight:800;
  margin: 10px 0 6px;
  background: linear-gradient(180deg, var(--text) 35%, color-mix(in srgb,var(--text) 55%, transparent) 130%);
  -webkit-background-clip:text; background-clip:text; color: transparent;
}
.magic-meta{color:var(--muted); font-size:14px; display:flex; flex-wrap:wrap; gap:.8rem; align-items:center}
.magic-meta a{color:var(--cyan); text-decoration:none}
.magic-meta a:hover{text-decoration:underline}

/* EVE claim card (premium) */
.claim-card{
  position: relative; margin-top: 22px;
  padding: 22px 20px 20px;
  border-radius: 22px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 60%, transparent), color-mix(in srgb, var(--bg) 90%, transparent));
  box-shadow: 0 0 0 1px var(--border);
  text-align: center;
  overflow: hidden;
}
.claim-card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background: conic-gradient(from 120deg, var(--magenta), var(--cyan), var(--yellow), var(--magenta));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.55; pointer-events:none;
  animation: claim-spin 14s linear infinite;
}
@keyframes claim-spin{to{transform:rotate(1turn)}}
.claim-amount{display:inline-flex;align-items:baseline;gap:6px;font-weight:800;letter-spacing:-0.02em}
.claim-amount .n{font-size:40px;line-height:1;background:linear-gradient(135deg,var(--yellow),var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent}
.claim-amount .u{font-size:13px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.claim-hint{color:var(--muted);font-size:13px;margin:6px 0 14px}

.btn-claim{
  position: relative; isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%; max-width:340px;
  padding:16px 22px; border-radius:16px;
  font-weight:700; font-size:16px; letter-spacing:.01em;
  color:#0a0a0a; border:0; cursor:pointer;
  background: linear-gradient(120deg, var(--magenta), var(--cyan));
  box-shadow:
    0 12px 30px -10px rgba(255,0,170,.5),
    0 8px 24px -10px rgba(0,255,255,.45),
    inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .15s ease, filter .2s ease;
  overflow:hidden;
}
.btn-claim::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .8s ease;
}
.btn-claim:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn-claim:hover::after{transform:translateX(120%)}
.btn-claim:active{transform:translateY(0) scale(.98)}
.btn-claim[disabled]{opacity:.7;cursor:not-allowed;filter:saturate(.8)}
.btn-claim.claimed{
  background: linear-gradient(120deg,#1f9d55,#5ed39e);
  box-shadow: 0 10px 28px -10px rgba(94,211,158,.55);
}

/* confetti / sparkle */
.spark{position:absolute;pointer-events:none;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff;animation:claim-sparkle .9s ease-out forwards}
@keyframes claim-sparkle{
  0%{transform:translate(0,0) scale(1);opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}
}

/* gallery — soft uniform tiles */
.magic-gallery{
  margin-top: 18px;
  display:grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.magic-gallery a{display:block;border-radius:12px;overflow:hidden;aspect-ratio:1;background:var(--surface);box-shadow:0 0 0 1px var(--border);transition:transform .2s ease}
.magic-gallery a:hover{transform:translateY(-2px)}
.magic-gallery img{width:100%;height:100%;object-fit:cover;display:block}

/* media block (YT/audio) */
.media-frame{margin-top:14px;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 0 0 1px var(--border)}
.media-frame iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.audio-frame{margin-top:10px;padding:12px 14px;border-radius:14px;background:var(--surface);box-shadow:0 0 0 1px var(--border);display:flex;align-items:center;gap:10px}
.audio-frame audio{flex:1;width:100%}

/* position mini-map */
.pos-map{
  margin-top:18px; height:220px; border-radius:16px;
  box-shadow:0 0 0 1px var(--border); overflow:hidden;
}

/* magic side (qr) — softer */
.magic-side{display:flex; flex-direction:column; gap:14px}
.magic-side .qr-block{margin:0; padding:18px; border-radius:18px; background:var(--surface); box-shadow:0 0 0 1px var(--border); text-align:center}
.magic-side .qr-block img{border-radius:10px}

/* owner tools */
.owner-tools{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:14px}

@media (max-width: 820px){
  .pos-map{height:180px}
}

/* ===== Magic Claim Modal + Toast + Balance Pulse ===== */
.claim-modal{
  position:fixed; inset:0; z-index:9999; display:none;
  align-items:center; justify-content:center;
  padding:1rem;
}
.claim-modal.is-open{ display:flex; animation:claimFadeIn .25s ease-out; }
@keyframes claimFadeIn{ from{opacity:0} to{opacity:1} }
.claim-modal__backdrop{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center, rgba(255,0,170,.25), rgba(0,0,0,.85) 70%);
  backdrop-filter: blur(6px);
}
.claim-modal__card{
  position:relative; z-index:2;
  background: linear-gradient(160deg, rgba(20,20,28,.96), rgba(8,8,14,.98));
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px; padding:2.4rem 2rem 1.8rem; max-width:440px; width:100%;
  text-align:center; overflow:hidden;
  box-shadow: 0 20px 60px rgba(255,0,170,.35),
              0 0 0 1px rgba(0,255,255,.18),
              0 0 80px rgba(0,255,255,.18) inset;
  animation: claimPop .55s cubic-bezier(.18,.85,.32,1.2);
}
@keyframes claimPop{
  0%   { transform:scale(.7) translateY(20px); opacity:0; }
  60%  { transform:scale(1.04) translateY(-2px); opacity:1; }
  100% { transform:scale(1) translateY(0); opacity:1; }
}
.claim-modal__halo{
  position:absolute; top:-60%; left:-20%; right:-20%; height:160%;
  background: conic-gradient(from 0deg, #ff00aa, #00ffff, #ffff00, #ff00aa);
  filter: blur(60px); opacity:.35; z-index:-1;
  animation: haloSpin 12s linear infinite;
}
@keyframes haloSpin{ to{ transform:rotate(360deg);} }
.claim-modal__sparks{
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
}
.claim-modal__icon{
  font-size:3rem; line-height:1;
  filter: drop-shadow(0 0 18px #ffff00);
  animation: iconBob 2.4s ease-in-out infinite;
}
@keyframes iconBob{ 50%{ transform:translateY(-6px) scale(1.06);} }
.claim-modal__title{
  margin:.6rem 0 .3rem; font-size:2.4rem;
  background: linear-gradient(90deg, #ff00aa, #00ffff 60%, #ffff00);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing:.02em;
}
.claim-modal__sub{ color:#cfd2db; margin:.2rem 0 1rem; font-size:1rem; }
.claim-modal__sub strong{ color:var(--cyan, #00ffff); }
.claim-modal__balance{
  display:inline-flex; gap:.8rem; align-items:baseline;
  padding:.7rem 1.2rem; border-radius:999px;
  background: rgba(0,255,255,.08); border:1px solid rgba(0,255,255,.25);
  margin-bottom:1.2rem;
}
.claim-modal__balance .l{ color:#9aa; font-size:.85rem; }
.claim-modal__balance .n{ color:#fff; font-weight:700; font-size:1.4rem;
  text-shadow:0 0 12px rgba(0,255,255,.6); }
.btn-claim--close{ width:100%; max-width:280px; }

/* Balance pulse on chip + modal */
.eve-pulse{
  animation: evePulse .8s ease-out;
  text-shadow: 0 0 18px #ffff00, 0 0 8px #ff00aa;
}
@keyframes evePulse{
  0%   { transform:scale(1); color:inherit; }
  40%  { transform:scale(1.35); color:#ffff00; }
  100% { transform:scale(1); }
}

/* Loading state on claim button */
.btn-claim.is-loading{ opacity:.7; cursor:wait; position:relative; }
.btn-claim.is-loading::after{
  content:''; position:absolute; right:14px; top:50%;
  width:14px; height:14px; margin-top:-7px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff; border-radius:50%;
  animation: claimSpin .8s linear infinite;
}
@keyframes claimSpin{ to{ transform:rotate(360deg);} }
.btn-claim.claimed{ background:linear-gradient(90deg,#444,#666)!important;
  cursor:not-allowed; box-shadow:none!important; }

/* Floating toast */
.claim-toast{
  position:fixed; bottom:24px; left:50%; transform:translate(-50%, 30px);
  background: rgba(20,20,28,.96); color:#fff;
  border:1px solid rgba(255,255,255,.15); border-radius:14px;
  padding:.9rem 1.3rem; font-size:.95rem; z-index:10000;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  opacity:0; transition: opacity .25s, transform .25s;
}
.claim-toast.show{ opacity:1; transform:translate(-50%, 0); }
.claim-toast.warn{ border-color:rgba(255,180,0,.5); box-shadow:0 0 22px rgba(255,180,0,.3); }
.claim-toast.info{ border-color:rgba(0,255,255,.4);  box-shadow:0 0 22px rgba(0,255,255,.25); }

/* ===== POLISH PASS: Magic Hero + Claim ===== */

/* Hero — softer parallax-ready layer */
.magic-hero{
  background:
    radial-gradient(1200px 480px at 20% -10%, rgba(255,0,170,.10), transparent 60%),
    radial-gradient(900px 360px at 90% 110%, rgba(0,255,255,.10), transparent 60%),
    linear-gradient(180deg, var(--surface), var(--surface-2,#0d0d12));
  transition: transform .3s ease-out;
}
.magic-hero[data-parallax]{ will-change: transform; }

.magic-title{
  background: linear-gradient(120deg, var(--text) 25%, color-mix(in srgb,var(--magenta) 70%, var(--text)) 75%, color-mix(in srgb,var(--cyan) 70%, var(--text)) 110%);
  -webkit-background-clip:text; background-clip:text; color: transparent;
  filter: drop-shadow(0 6px 24px rgba(255,0,170,.18));
}

/* Claim card — bigger amount + softer body */
.claim-card{ padding: 26px 22px 22px; }
.claim-amount .n{ font-size: 48px; filter: drop-shadow(0 0 16px rgba(255,255,0,.35)); }
.claim-amount .u{ font-size: 14px; }
.claim-hint{ font-size: 14px; max-width: 32ch; margin: 8px auto 16px; }

/* Button — bigger tap target + breathing glow */
.btn-claim{
  padding: 18px 26px; font-size: 17px; border-radius: 18px;
  animation: claim-breathe 3.4s ease-in-out infinite;
}
@keyframes claim-breathe{
  0%,100%{ box-shadow: 0 12px 30px -10px rgba(255,0,170,.5),  0 8px 24px -10px rgba(0,255,255,.45), inset 0 1px 0 rgba(255,255,255,.4); }
  50%   { box-shadow: 0 16px 40px -10px rgba(255,0,170,.65), 0 12px 32px -10px rgba(0,255,255,.6),  inset 0 1px 0 rgba(255,255,255,.55); }
}
.btn-claim:focus-visible{ outline: 3px solid var(--cyan); outline-offset: 3px; }
.btn-claim[disabled]:not(.claimed){ animation: none; }

/* +N floater that rises from the button on claim success */
.claim-floater{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.8);
  font-weight:900; font-size: 28px; letter-spacing:-.02em;
  color:#fff; pointer-events:none; z-index: 5;
  text-shadow: 0 0 18px var(--yellow), 0 0 36px var(--magenta);
  animation: claim-float 1.6s cubic-bezier(.16,.85,.3,1) forwards;
}
@keyframes claim-float{
  0%   { transform: translate(-50%, -50%) scale(.7); opacity: 0; }
  18%  { opacity: 1; transform: translate(-50%, -60%) scale(1.18); }
  100% { transform: translate(-50%, -260%) scale(1); opacity: 0; }
}

/* Sparkle — slightly bigger, longer, fades elegantly */
.spark{
  width: 10px; height: 10px;
  animation: claim-sparkle 1.4s cubic-bezier(.12,.7,.2,1) forwards;
}
.spark.s2{ width:6px; height:6px; }
.spark.s3{ width:14px; height:14px; opacity:.85; }
@keyframes claim-sparkle{
  0%  { transform: translate(0,0) scale(.6) rotate(0deg); opacity:1; }
  18% { transform: translate(calc(var(--dx)*.35), calc(var(--dy)*.35 - 6px)) scale(1.15) rotate(45deg); opacity:1; }
  100%{ transform: translate(var(--dx), calc(var(--dy) + 80px)) scale(.15) rotate(220deg); opacity:0; }
}

/* ===== Modal polish ===== */
.claim-modal.is-open{ animation: claimFadeIn .35s cubic-bezier(.18,.85,.32,1); }
.claim-modal__card{
  padding: 2.8rem 2.2rem 2rem;
  max-width: 480px;
  animation: claimPop .7s cubic-bezier(.18,.85,.32,1.25);
}
.claim-modal__title{
  font-size: 2.8rem; font-weight: 900;
  letter-spacing: -.025em; margin: .5rem 0 .4rem;
  animation: titleShine 2.4s ease-in-out infinite;
  background-size: 200% 100%;
}
@keyframes titleShine{
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
.claim-modal__sub{ font-size: 1.08rem; line-height:1.55; max-width: 32ch; margin: .3rem auto 1.2rem; }
.claim-modal__icon{
  font-size: 3.6rem;
  filter: drop-shadow(0 0 28px #ffff00) drop-shadow(0 0 50px #ff00aa);
  animation: iconBob 2.4s ease-in-out infinite, iconSpin 18s linear infinite;
}
@keyframes iconSpin{ to{ transform: rotate(360deg);} }
.claim-modal__balance{
  padding: .85rem 1.4rem; border-radius: 999px;
  background: linear-gradient(120deg, rgba(0,255,255,.10), rgba(255,0,170,.10));
  border: 1px solid rgba(0,255,255,.30);
  box-shadow: 0 0 24px rgba(0,255,255,.18) inset;
}
.claim-modal__balance .n{ font-size: 1.6rem; }
.btn-claim--close{ animation: none; padding: 14px 22px; font-size: 16px; }

/* Mobile full-screen feel */
@media (max-width: 520px){
  .claim-modal{ padding: 0; }
  .claim-modal__card{
    padding: 2.4rem 1.4rem 1.6rem;
    border-radius: 22px 22px 0 0;
    max-width: 100%; min-height: 78vh;
    align-self: flex-end;
    animation: claimSlideUp .55s cubic-bezier(.18,.85,.32,1.05);
  }
  @keyframes claimSlideUp{
    0%   { transform: translateY(60%); opacity:0; }
    100% { transform: translateY(0);    opacity:1; }
  }
  .claim-modal__title{ font-size: 2.2rem; }
  .claim-modal__icon{ font-size: 3rem; }
  .btn-claim{ padding: 16px 20px; font-size: 16px; }
  .claim-card{ padding: 22px 16px 18px; margin-top: 18px; }
  .claim-amount .n{ font-size: 42px; }
}

/* Offline-only banner (rendered also online if owner inspects) */
.offline-hint-banner{
  margin: 14px 0 0;
  padding: 12px 16px; border-radius: 14px;
  display:flex; align-items:center; gap: 10px;
  background: linear-gradient(120deg, rgba(0,255,255,.08), rgba(255,0,170,.08));
  border: 1px solid rgba(0,255,255,.30);
  color: var(--text); font-size: 14px;
  box-shadow: 0 0 22px rgba(0,255,255,.10) inset;
}
.offline-hint-banner .icon{ font-size: 18px; filter: drop-shadow(0 0 8px var(--yellow)); }
.offline-hint-banner a{ color: var(--cyan); font-weight: 600; }

/* Respect reduced motion globally for new animations */
@media (prefers-reduced-motion: reduce){
  .btn-claim, .claim-modal__icon, .claim-modal__title, .magic-hero{
    animation: none !important; transition: none !important;
  }
  .claim-floater{ animation-duration: .001ms !important; }
}

/* ---- Publish-as-Spread (organic vs paid boost) ----------------------- */
.publish-box{
  margin-top:1.4rem; padding:1.2rem 1.2rem 1rem;
  border:1px solid rgba(0,255,255,.25); border-radius:14px;
  background:linear-gradient(180deg, rgba(0,255,255,.04), rgba(255,0,170,.04));
  box-shadow:0 0 24px rgba(0,255,255,.08) inset;
}
.publish-box--done{
  border-color:rgba(0,255,170,.35);
  background:rgba(0,255,170,.06);
  text-align:center; padding:0.9rem 1rem;
}
.publish-box__title{ margin:0 0 .2rem; font-size:1.1rem; letter-spacing:.5px; }
.publish-options{
  display:grid; grid-template-columns:1fr 1fr; gap:0.9rem;
}
@media (max-width:640px){ .publish-options{ grid-template-columns:1fr; } }
.publish-opt{
  padding:0.9rem 1rem; border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(10,10,10,.45);
  display:flex; flex-direction:column; gap:.5rem;
}
.publish-opt--organic{ border-color:rgba(0,255,255,.35); box-shadow:0 0 14px rgba(0,255,255,.15); }
.publish-opt--paid   { border-color:rgba(255,0,170,.40); box-shadow:0 0 14px rgba(255,0,170,.18); }
.publish-opt__head{ display:flex; justify-content:space-between; align-items:center; }
.publish-opt__tag{
  font-size:.75rem; padding:.18rem .55rem; border-radius:999px;
  background:rgba(0,255,255,.12); color:#00ffff; letter-spacing:.5px; text-transform:uppercase;
}
.publish-opt__tag--boost{ background:rgba(255,0,170,.14); color:#ff00aa; }
.publish-opt__price{ font-weight:700; font-size:1.05rem; color:#ffff00; }
.publish-opt__price-old{ color:#888; margin-left:.4rem; font-weight:400; font-size:.85rem; }
.publish-opt__body{ margin:0; font-size:.92rem; line-height:1.45; }
.publish-opt__bar{
  height:8px; border-radius:6px; background:rgba(255,255,255,.07); overflow:hidden;
}
.publish-opt__bar > span{
  display:block; height:100%;
  background:linear-gradient(90deg,#00ffff,#ff00aa);
  box-shadow:0 0 10px #00ffff88;
  transition:width .4s ease;
}
.publish-opt__cta{ width:100%; }
.publish-opt__cta[disabled]{ opacity:.45; cursor:not-allowed; }

/* Inline & hero Boosted badge */
.badge-boost-inline{
  display:inline-block; padding:.05rem .4rem; border-radius:6px;
  background:rgba(255,0,170,.18); color:#ff00aa; font-size:.8rem; font-weight:600;
}
.badge-boosted{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.25rem .65rem; border-radius:999px;
  background:linear-gradient(90deg, rgba(255,0,170,.22), rgba(255,255,0,.18));
  border:1px solid rgba(255,0,170,.55);
  color:#ff00aa; font-weight:700; font-size:.78rem; letter-spacing:.5px;
  text-transform:uppercase;
  box-shadow:0 0 12px rgba(255,0,170,.45), 0 0 4px rgba(255,255,0,.35) inset;
  animation: boostedPulse 2.6s ease-in-out infinite;
}
@keyframes boostedPulse{
  0%,100%{ box-shadow:0 0 10px rgba(255,0,170,.35), 0 0 4px rgba(255,255,0,.30) inset; }
  50%   { box-shadow:0 0 18px rgba(255,0,170,.65), 0 0 6px rgba(255,255,0,.45) inset; }
}
@media (prefers-reduced-motion: reduce){ .badge-boosted{ animation:none; } }

/* ============================================================
   DOT-MATRIX ACCENTS (v=bgvideo12)
   Reusable cyberpunk dot-grid overlay applied to prominent
   surfaces. Uses background-image layering so it stacks with
   existing backgrounds without colliding with pseudo-elements
   (e.g. .card::before, .magic-hero::after) defined earlier.
   Foreground text/neon remain bright and untouched.
   ============================================================ */

/* Hero — animated, slightly stronger (it's the showcase) */
.hero {
  background-image:
    radial-gradient(circle, rgba(0, 35, 55, 0.55) 0.65px, transparent 1.05px);
  background-size: 4px 4px;
  background-position: 0 0;
  background-repeat: repeat;
  animation: wk-dot-drift 22s linear infinite;
}
.hero > * { position: relative; z-index: 1; }

/* Magic hero (spread detail) — same vibe, layered ON TOP of the
   existing radial-gradient ::before/::after. We add the dot grid
   as a background-image directly on the element. */
.magic-hero {
  background-image:
    radial-gradient(circle, rgba(0, 35, 55, 0.50) 0.65px, transparent 1.05px);
  background-size: 4px 4px;
  background-blend-mode: screen;
  animation: wk-dot-drift 28s linear infinite;
}

/* Cards (spread previews, request previews, generic boxes).
   Re-declare background-color so the shorthand from line 337
   stays intact while we add the dot-grid image on top. */
.card {
  background-color: var(--bg2);
  background-image:
    radial-gradient(circle, rgba(0, 30, 45, 0.45) 0.6px, transparent 1px);
  background-size: 4px 4px;
  background-blend-mode: screen;
}

/* Value cards on landing */
.vcard {
  background-image:
    radial-gradient(circle, rgba(0, 30, 45, 0.45) 0.6px, transparent 1px);
  background-size: 4px 4px;
  background-blend-mode: screen;
}

/* Top navigation — very subtle, no animation (sticky element). */
.topbar {
  background-color: rgba(10, 10, 10, 0.85);
  background-image:
    radial-gradient(circle, rgba(0, 35, 55, 0.35) 0.55px, transparent 0.95px);
  background-size: 4px 4px;
  background-blend-mode: screen;
}

@keyframes wk-dot-drift {
  0%   { background-position: 0 0; }
  100% { background-position: 4px 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero, .magic-hero { animation: none; }
}

/* ============================================================
   LANDING PAGE OVERRIDES — "randomly all-black" mood
   Targets pages that render the home hero (.hero-xl). Deepens
   the veil to near-pure-black with minimal video bleed, and
   layers scattered cluster glows into the dot-matrix so the
   pattern reads as organic noise rather than a clean grid.
   ============================================================ */

/* Landing: pitch-black canvas covered edge-to-edge with a dark
   blue/black dot-matrix glow. No video, no grain, no hero-box —
   the whole viewport is the dot matrix. */
body:has(.hero-xl) .bg-video__src   { display: none; }
body:has(.hero-xl) .bg-video__grain { display: none; }
/* Landing veil: deep near-black charcoal with the slightest blue
   undertone, so pitch-black dots on top still read as dots. */
body:has(.hero-xl) .bg-video__veil  { background: #06080c; }

/* Full-canvas dot matrix on landing: pitch-black, soft-round
   dots with a blurred falloff. Dense enough to feel like a
   texture, but spaced so each dot is still individually
   countable when you look closely. */
body:has(.hero-xl) .bg-video__dots {
  display: block;
  /* Soft radial: solid black core → blurred halo → transparent.
     The wider falloff (0px → 1.6px → 2.6px) gives each dot a
     blurred round shape instead of a crisp pixel. */
  background-image:
    radial-gradient(
      circle,
      rgba(0, 0, 0, 0.95) 0px,
      rgba(0, 0, 0, 0.55) 1.6px,
      transparent 2.6px
    );
  background-size: 7px 7px;
  background-position: 0 0;
  background-repeat: repeat;
  mix-blend-mode: normal;
  opacity: 1;
  mask-image: none;
  -webkit-mask-image: none;
}

/* Remove the per-element dot-matrix box from the hero on the
   landing (the dot grid lives on the global background layer
   instead, so the hero shouldn't carry its own). */
body:has(.hero-xl) .hero {
  background-image: none;
  animation: none;
}

/* ===== Re-Spread / Amplify block ===== */
.respread-block{
  margin:1.2rem 0;
  padding:1rem 1.1rem;
  border:1px solid rgba(255,255,0,0.35);
  border-radius:14px;
  background:linear-gradient(135deg, rgba(255,0,170,0.06), rgba(0,255,255,0.05));
  box-shadow:0 0 22px rgba(255,255,0,0.10) inset;
}
.respread-head{
  display:flex; justify-content:space-between; align-items:center;
  gap:0.6rem; margin-bottom:0.3rem;
}
.respread-title{
  font-weight:700; color:var(--yellow, #ffff00);
  text-shadow:0 0 6px rgba(255,255,0,0.5);
  font-size:1.02rem;
}
.respread-count{
  font-size:0.95rem; color:var(--cyan, #00ffff);
  background:rgba(0,255,255,0.08);
  padding:0.15rem 0.55rem; border-radius:999px;
  border:1px solid rgba(0,255,255,0.25);
}
.respread-hint{ font-size:0.85rem; margin:0 0 0.6rem; }
.respread-form{ display:flex; gap:0.6rem; align-items:center; flex-wrap:wrap; }
.respread-btn:disabled{ opacity:0.5; cursor:not-allowed; }
.respread-done-lbl{ font-size:0.85rem; }
.respread-bonus-badge{
  display:inline-block; margin-top:0.6rem;
  padding:0.2rem 0.6rem; border-radius:999px;
  background:rgba(255,0,170,0.12);
  border:1px solid rgba(255,0,170,0.45);
  color:#ff66cc; font-size:0.82rem; font-weight:600;
  text-shadow:0 0 4px rgba(255,0,170,0.6);
}

/* =========================================================================
   SPREAD DETAIL — NOIR REDESIGN (merged from spread-demo)
   Scoped via .magic-hero--noir to leave other pages untouched.
   ========================================================================= */

/* Opaque deep-black hero card — kills BG-video bleed-through, matches demo */
.magic-hero.magic-hero--noir {
  background: #111113;
  border: 1px solid #1a1a20;
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 1px 0 rgba(255,255,255,.02) inset,
              0 30px 80px rgba(0,0,0,.55);
  overflow: hidden;
}
.magic-hero.magic-hero--noir::before,
.magic-hero.magic-hero--noir::after { display: none; }

@media (min-width: 820px){
  .magic-hero.magic-hero--noir { padding: 28px 30px; }
}

/* ---- Featured Image (16:9 hero) — scoped to noir hero only ---------- */
.magic-hero--noir .featured-img-block {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 0 1.2rem 0;
  border-radius: 16px;
  overflow: hidden;
  background: #050505;
  border: 1px solid #1a1a20;
  box-shadow: 0 8px 28px rgba(0,0,0,.5);
}
.magic-hero--noir .featured-img-block img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.magic-hero--noir:hover .featured-img-block img { transform: scale(1.02); }
.magic-hero--noir .featured-img-block__gradient {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
              rgba(5,5,5,.0) 50%,
              rgba(5,5,5,.85) 100%);
}
.magic-hero--noir .featured-img-block__meta {
  position: absolute;
  left: 14px; right: 14px; bottom: 10px;
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 12px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.magic-hero--noir .featured-img-block__cat { color: #8a8a99; }
.magic-hero--noir .featured-img-block__loc { color: var(--cyan); text-shadow: 0 0 8px rgba(0,255,255,.5); }

/* ---- Metric Tiles (replace tiny stat-row) ---------------------------- */
.magic-hero--noir .metric-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 720px){
  .magic-hero--noir .metric-row {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
}
.magic-hero--noir .metric {
  position: relative;
  background: #0c0c10;
  border: 1px solid #1a1a20;
  border-radius: 14px;
  padding: 16px 14px 14px;
  text-align: center;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease;
}
.magic-hero--noir .metric:hover { transform: translateY(-2px); }
.magic-hero--noir .metric::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--accent, var(--cyan));
  opacity: .55;
}
.magic-hero--noir .metric__label {
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #8a8a99;
  margin-bottom: 6px;
}
.magic-hero--noir .metric__num {
  font-family: 'Orbitron', sans-serif;
  font-size: 30px;
  line-height: 1.05;
  font-weight: 800;
  color: var(--accent, var(--cyan));
  text-shadow: 0 0 10px color-mix(in srgb, var(--accent, var(--cyan)) 55%, transparent);
}
.magic-hero--noir .metric--cyan   { --accent: #00ffff; }
.magic-hero--noir .metric--pink   { --accent: #ff00aa; }
.magic-hero--noir .metric--violet { --accent: #8b5cf6; }
.magic-hero--noir .metric--yellow { --accent: #ffff00; }
.magic-hero--noir .metric--cyan:hover   { border-color: rgba(0,255,255,.35); }
.magic-hero--noir .metric--pink:hover   { border-color: rgba(255,0,170,.35); }
.magic-hero--noir .metric--violet:hover { border-color: rgba(139,92,246,.35); }
.magic-hero--noir .metric--yellow:hover { border-color: rgba(255,255,0,.35); }

@media (min-width: 720px){
  .magic-hero--noir .metric { padding: 18px 16px 16px; }
  .magic-hero--noir .metric__num { font-size: 38px; }
}

/* ---- Claim card inside noir hero — pink/violet gradient like demo --- */
.magic-hero--noir .claim-card {
  background: linear-gradient(135deg, rgba(255,0,170,.10), rgba(139,92,246,.08));
  border: 1px solid rgba(255,0,170,.25);
  border-radius: 16px;
  padding: 22px 20px;
  margin-top: 1.2rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.magic-hero--noir .claim-card::before { display: none; }

/* ---- Sidebar (QR) — match noir card aesthetic ------------------------ */
.magic-hero--noir .magic-side .qr-block {
  background: #0c0c10;
  border: 1px solid #1a1a20;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.magic-hero--noir .magic-side .qr-block .shortlink {
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(0,255,255,.4);
}

/* ---- Gallery (remaining images) tighter -----------------------------*/
.magic-hero--noir .magic-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 1rem;
}
.magic-hero--noir .magic-gallery a {
  border-radius: 12px;
  background: #0c0c10;
  box-shadow: 0 0 0 1px #1a1a20;
}

/* ---- Description body legibility on dark card -----------------------*/
.magic-hero--noir .spread-body { color: #d8d8de; }

/* ---- Eyebrow + meta toned down on the dark card ---------------------*/
.magic-hero--noir .magic-eyebrow {
  background: #16161c;
  border-color: #1a1a20;
}
.magic-hero--noir .magic-title {
  /* keep shimmer but on opaque dark looks even stronger */
  filter: drop-shadow(0 2px 24px rgba(0,255,255,.10));
}

/* ---- Media frames (yt iframe, audio) align with card ----------------*/
.magic-hero--noir .media-frame {
  border-radius: 14px;
  box-shadow: 0 0 0 1px #1a1a20;
  margin-top: 14px;
}

/* ---- Pos map matches card ------------------------------------------- */
.magic-hero--noir .pos-map {
  border-radius: 14px;
  margin-top: 14px;
  overflow: hidden;
}

/* ---- Thick Like Button (spreads list + requests list) -------------- */
.card--with-like { padding-bottom: 3.6rem; }
.like-big-form {
  position: absolute; right: 12px; bottom: 12px;
  margin: 0; padding: 0; z-index: 3;
}
.like-big {
  --pink: #ff00aa;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  font: 700 15px/1 'Inter', system-ui, sans-serif;
  letter-spacing: .04em;
  color: #ffd6ee;
  background: linear-gradient(180deg, #1a0a18 0%, #11060f 100%);
  border: 2px solid rgba(255,0,170,.55);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .25s ease,
              border-color .25s ease, color .15s ease, background .25s ease;
  box-shadow: 0 0 0 1px rgba(255,0,170,.15) inset,
              0 6px 18px rgba(255,0,170,.25);
  position: relative;
  overflow: visible;
}
.like-big:hover {
  transform: translateY(-2px);
  border-color: var(--pink);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255,0,170,.3) inset,
              0 10px 28px rgba(255,0,170,.55);
}
.like-big:active { transform: translateY(0); }
.like-big__heart {
  font-size: 20px; line-height: 1;
  color: rgba(255,0,170,.7);
  text-shadow: 0 0 6px rgba(255,0,170,.4);
  transition: color .2s ease, text-shadow .2s ease, transform .2s ease;
}
.like-big__count {
  min-width: 1ch;
  font-variant-numeric: tabular-nums;
}
.like-big.is-liked {
  color: #fff;
  background: linear-gradient(180deg, #ff00aa 0%, #c80087 100%);
  border-color: #ff00aa;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset,
              0 0 24px rgba(255,0,170,.85),
              0 8px 22px rgba(255,0,170,.55);
}
.like-big.is-liked .like-big__heart {
  color: #fff;
  text-shadow: 0 0 10px rgba(255,255,255,.9), 0 0 18px rgba(255,0,170,.9);
  transform: scale(1.15);
}
.like-big--anon { opacity: .85; }
.like-big--anon:hover { opacity: 1; }

/* Inline variant for the requests list (sits at the row's right edge) */
.like-big--inline {
  padding: 8px 14px;
  font-size: 14px;
}
.req-row { position: relative; }
.like-col {
  display: flex; align-items: center;
  margin-left: auto; padding-left: 12px;
}
@media (max-width: 640px) {
  .like-col { width: 100%; justify-content: flex-end; padding: 8px 0 0; }
}

/* EVE pop on like */
.like-big__pop {
  position: absolute;
  right: 8px; top: -6px;
  transform: translateY(0);
  padding: 4px 10px;
  font: 700 12px 'Inter', sans-serif; letter-spacing: .06em;
  color: #fff;
  background: linear-gradient(180deg, #ff00aa, #7a0055);
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(255,0,170,.8);
  pointer-events: none;
  animation: like-pop 1.3s ease-out forwards;
}
@keyframes like-pop {
  0%   { opacity: 0; transform: translateY(6px) scale(.8); }
  20%  { opacity: 1; transform: translateY(-4px) scale(1.05); }
  100% { opacity: 0; transform: translateY(-34px) scale(1); }
}

/* Heart-pulse on liked-state flip */
.like-big--pulse .like-big__heart {
  animation: like-heart-beat .55s ease-out;
}
@keyframes like-heart-beat {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.55); }
  60%  { transform: scale(.9); }
  100% { transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .like-big, .like-big__heart, .like-big--pulse .like-big__heart,
  .like-big__pop { animation: none !important; transition: none !important; }
}

/* =========================================================
   Request-New: Noir Form (scoped via .req-new-*)
   ========================================================= */
.req-new-hero { margin: 0 0 1.4rem; padding: 38px 40px; }
.req-new-hero__inner { display: flex; align-items: center; gap: 1.4rem; position: relative; z-index: 2; }
.req-new-hero__icon {
  width: 88px; height: 88px; flex: 0 0 88px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,0,170,0.16), rgba(0,255,255,0.10));
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--cyan);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 28px rgba(0,255,255,0.18), inset 0 0 24px rgba(255,0,170,0.10);
}
.req-new-hero__title {
  margin: 0 0 0.35rem; font-size: clamp(1.6rem, 2.4vw + 1rem, 2.4rem);
  font-weight: 800; letter-spacing: -0.01em;
  background: linear-gradient(90deg, #fff, var(--cyan) 55%, var(--magenta));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.req-new-hero__sub { margin: 0; color: var(--muted); font-size: 1.02rem; max-width: 60ch; }

.req-new-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1.6rem;
  align-items: start;
}

.req-new-form {
  background: #111113;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 28px 30px;
  display: flex; flex-direction: column; gap: 1.35rem;
  box-shadow: 0 18px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.03);
}

.rn-field { display: flex; flex-direction: column; gap: 0.55rem; }
.rn-label { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
.rn-label__text { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: #d8d8df; font-weight: 600; }
.rn-label__hint { font-size: 0.72rem; color: var(--muted); }

.rn-input {
  background: #0a0a0c;
  color: #f3f3f7;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 14px 16px;
  font: inherit; font-size: 1rem;
  width: 100%; box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.rn-input::placeholder { color: #5a5a66; }
.rn-input:focus {
  outline: none;
  border-color: var(--cyan);
  background: #0d0d10;
  box-shadow: 0 0 0 3px rgba(0,255,255,0.18), 0 0 24px rgba(0,255,255,0.22);
}
.rn-input--lg { font-size: 1.18rem; padding: 18px 20px; font-weight: 600; letter-spacing: -0.01em; }

.rn-editor {
  background: #0a0a0c;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.rn-editor:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,255,255,0.18), 0 0 24px rgba(0,255,255,0.22); }
.rn-editor__toolbar {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.rn-chip {
  font-size: 0.72rem; padding: 4px 9px; border-radius: 999px;
  background: rgba(255,255,255,0.04); color: #a8a8b3;
  border: 1px solid rgba(255,255,255,0.06);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.rn-textarea {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  min-height: 220px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.55;
}
.rn-textarea:focus { box-shadow: none !important; }

.rn-row {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 1.2rem;
}

.rn-stepper { display: flex; align-items: stretch; gap: 6px; }
.rn-stepper__btn {
  width: 46px; flex: 0 0 46px;
  background: #0a0a0c;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  color: var(--cyan); font-size: 1.4rem; font-weight: 700;
  cursor: pointer; line-height: 1;
  transition: all .15s;
}
.rn-stepper__btn:hover { border-color: var(--cyan); box-shadow: 0 0 14px rgba(0,255,255,0.28); }
.rn-stepper__input { text-align: center; font-weight: 700; font-size: 1.1rem; }

.rn-drop {
  display: flex; align-items: center; gap: 1rem;
  padding: 22px 24px;
  background: #0a0a0c;
  border: 1.5px dashed rgba(0,255,255,0.25);
  border-radius: 14px;
  cursor: pointer;
  transition: all .15s;
}
.rn-drop:hover { border-color: var(--cyan); background: #0d0d12; }
.rn-drop.is-drag { border-color: var(--magenta); background: rgba(255,0,170,0.06); box-shadow: 0 0 28px rgba(255,0,170,0.25); }
.rn-drop__icon { color: var(--cyan); flex: 0 0 auto; }
.rn-drop__text { display: flex; flex-direction: column; gap: 2px; }
.rn-drop__text strong { color: #f3f3f7; font-size: 1rem; }
.rn-drop__text span { color: var(--muted); font-size: 0.85rem; }

.rn-drop__preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 10px; }
.rn-drop__tile {
  position: relative;
  border-radius: 10px; overflow: hidden;
  background: #0a0a0c; border: 1px solid rgba(255,255,255,0.07);
  aspect-ratio: 1/1;
}
.rn-drop__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rn-drop__tile span {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 4px 6px; font-size: 0.7rem; color: #fff;
  background: linear-gradient(0deg, rgba(0,0,0,0.75), transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.rn-submit { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.4rem; }
.rn-submit__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 16px 28px !important;
  font-size: 1.08rem !important;
  border-radius: 14px !important;
  align-self: flex-start;
  background: linear-gradient(90deg, var(--magenta), var(--cyan)) !important;
  color: #0a0a0a !important;
  border: none !important;
  font-weight: 800 !important; letter-spacing: 0.01em;
  box-shadow: 0 0 24px rgba(255,0,170,0.45), 0 0 48px rgba(0,255,255,0.25);
}
.rn-submit__btn:hover { transform: translateY(-2px); box-shadow: 0 0 32px rgba(255,0,170,0.65), 0 0 60px rgba(0,255,255,0.4) !important; }
.rn-submit__bolt { font-size: 1.2rem; filter: drop-shadow(0 0 6px rgba(255,255,0,0.7)); }
.rn-submit__note { margin: 0; color: var(--muted); font-size: 0.85rem; max-width: 60ch; }
.rn-submit__note strong { color: var(--cyan); }

.rn-tips { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 80px; }
.rn-tip {
  background: #111113;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.rn-tip__icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,255,255,0.10); color: var(--cyan); font-size: 1.1rem;
  margin-bottom: 4px;
}
.rn-tip h3 { margin: 0; font-size: 0.95rem; color: #f3f3f7; letter-spacing: 0.01em; }
.rn-tip p { margin: 0; font-size: 0.85rem; color: var(--muted); line-height: 1.5; }
.rn-tip--accent {
  background: linear-gradient(135deg, rgba(255,0,170,0.10), rgba(0,255,255,0.06));
  border-color: rgba(255,0,170,0.28);
}
.rn-tip--accent .rn-tip__icon { background: rgba(255,0,170,0.18); color: var(--magenta); }

/* Light theme overrides */
html[data-theme=light] .req-new-form,
html[data-theme=light] .rn-tip { background: #fff; border-color: rgba(0,0,0,0.08); box-shadow: 0 8px 30px rgba(0,0,0,0.06); }
html[data-theme=light] .rn-input,
html[data-theme=light] .rn-editor,
html[data-theme=light] .rn-stepper__btn,
html[data-theme=light] .rn-drop,
html[data-theme=light] .rn-drop__tile { background: #fafafc; color: #111; border-color: rgba(0,0,0,0.10); }
html[data-theme=light] .rn-input { color: #111; }
html[data-theme=light] .rn-input::placeholder { color: #9a9aa6; }
html[data-theme=light] .rn-label__text { color: #111; }
html[data-theme=light] .rn-drop__text strong { color: #111; }
html[data-theme=light] .req-new-hero__title { background: linear-gradient(90deg, #111, var(--magenta) 55%, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme=light] .rn-chip { background: rgba(0,0,0,0.04); color: #555; border-color: rgba(0,0,0,0.08); }

/* Mobile */
@media (max-width: 900px) {
  .req-new-grid { grid-template-columns: 1fr; }
  .rn-tips { position: static; flex-direction: row; flex-wrap: wrap; }
  .rn-tip { flex: 1 1 calc(50% - 12px); min-width: 220px; }
}
@media (max-width: 640px) {
  .req-new-hero { padding: 24px 20px; }
  .req-new-hero__inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .req-new-hero__icon { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 16px; }
  .req-new-hero__icon svg { width: 38px; height: 38px; }
  .req-new-form { padding: 20px 18px; border-radius: 16px; }
  .rn-input--lg { font-size: 1.05rem; padding: 14px 16px; }
  .rn-row { grid-template-columns: 1fr; gap: 1rem; }
  .rn-tip { flex: 1 1 100%; }
  .rn-submit__btn { width: 100%; align-self: stretch; }
  .rn-drop { flex-direction: column; text-align: center; padding: 24px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .rn-input, .rn-editor, .rn-stepper__btn, .rn-drop, .rn-submit__btn { transition: none !important; }
  .rn-submit__btn:hover { transform: none !important; }
}

/* visually-hidden file input that stays keyboard-focusable inside .rn-drop */
.rn-drop__file {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.rn-drop { position: relative; }
.rn-drop:focus-within { border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(255,0,170,0.25), 0 0 22px rgba(255,0,170,0.25); }

/* =========================================================
   Spread Detail · "Claimed" metric tile — beefed up pink
   ========================================================= */
.magic-hero--noir .metric--claimed {
  background: linear-gradient(160deg, rgba(255,0,170,0.18), rgba(255,0,170,0.04) 60%, transparent);
  border-color: rgba(255,0,170,0.45) !important;
  box-shadow: 0 0 18px rgba(255,0,170,0.22), inset 0 0 24px rgba(255,0,170,0.08);
  position: relative;
}
.magic-hero--noir .metric--claimed::before {
  background: linear-gradient(180deg, #ff00aa, #ff66c4) !important;
  width: 4px !important;
  box-shadow: 0 0 14px rgba(255,0,170,0.7);
}
.magic-hero--noir .metric--claimed:hover,
.magic-hero--noir .metric--claimed:focus-visible {
  border-color: #ff00aa !important;
  box-shadow: 0 0 26px rgba(255,0,170,0.45), 0 0 50px rgba(255,0,170,0.22), inset 0 0 28px rgba(255,0,170,0.12);
  transform: translateY(-3px);
}
.magic-hero--noir .metric--claimed .metric__label {
  display: inline-flex; align-items: center; gap: 6px;
  color: #ffb3e1 !important; font-weight: 700;
}
.magic-hero--noir .metric--claimed .metric__icon {
  display: inline-flex; color: #ff00aa;
  filter: drop-shadow(0 0 6px rgba(255,0,170,0.7));
}
.magic-hero--noir .metric--claimed .metric__num {
  color: #fff !important;
  text-shadow: 0 0 14px rgba(255,0,170,0.6), 0 0 28px rgba(255,0,170,0.35);
}

/* Tooltip via data-tip */
.magic-hero--noir .metric--claimed::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  background: #1a0a14;
  color: #ffd2ed;
  border: 1px solid rgba(255,0,170,0.45);
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s, transform .18s;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 16px rgba(255,0,170,0.25);
  z-index: 30;
  max-width: 260px;
  white-space: normal;
  text-align: center;
  width: max-content;
}
.magic-hero--noir .metric--claimed:hover::after,
.magic-hero--noir .metric--claimed:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Pulse animation when count increments */
@keyframes claimedBump {
  0% { transform: scale(1); text-shadow: 0 0 14px rgba(255,0,170,0.6); }
  35% { transform: scale(1.18); text-shadow: 0 0 22px rgba(255,0,170,0.9), 0 0 44px rgba(255,0,170,0.55); color: #fff; }
  100% { transform: scale(1); text-shadow: 0 0 14px rgba(255,0,170,0.6); }
}
.magic-hero--noir .metric--claimed .metric__num.is-bumped {
  animation: claimedBump .55s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .magic-hero--noir .metric--claimed { transition: none !important; }
  .magic-hero--noir .metric--claimed:hover { transform: none !important; }
  .magic-hero--noir .metric--claimed .metric__num.is-bumped { animation: none !important; }
}

/* Claimed tile — empty state (no claims yet): dezent, schwächerer Glow */
.magic-hero--noir .metric--claimed.metric--claimed-empty {
  background: linear-gradient(160deg, rgba(255,0,170,0.06), rgba(255,255,255,0.02) 60%, transparent);
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow: none;
  opacity: 0.78;
}
.magic-hero--noir .metric--claimed.metric--claimed-empty::before {
  background: linear-gradient(180deg, rgba(255,0,170,0.45), rgba(255,0,170,0.15)) !important;
  box-shadow: none;
  width: 3px !important;
}
.magic-hero--noir .metric--claimed.metric--claimed-empty .metric__label {
  color: #c8c8d2 !important;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1.35;
  white-space: normal;
}
.magic-hero--noir .metric--claimed.metric--claimed-empty .metric__icon { color: #a87a9a; filter: none; opacity: 0.75; }
.magic-hero--noir .metric--claimed.metric--claimed-empty:hover,
.magic-hero--noir .metric--claimed.metric--claimed-empty:focus-visible {
  opacity: 1;
  border-color: rgba(255,0,170,0.35) !important;
  box-shadow: 0 0 14px rgba(255,0,170,0.18);
  transform: translateY(-1px);
}

/* =========================================================
   First Claimer Badge — gold→cyan gradient, strong glow
   Scoped: appears only inside .magic-hero--noir
   ========================================================= */
.magic-hero--noir .first-claimer-wrap {
  margin: 1rem 0 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.magic-hero--noir .first-claimer-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: #1a0f00;
  background: linear-gradient(95deg, #ffd966 0%, #ffff66 35%, #5ef0ff 100%);
  border: 1.5px solid rgba(255, 220, 80, 0.65);
  box-shadow:
    0 0 18px rgba(255, 220, 80, 0.55),
    0 0 36px rgba(0, 255, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  cursor: default;
  animation: firstClaimerHalo 2.6s ease-in-out infinite;
}
.magic-hero--noir .first-claimer-badge:focus-visible {
  outline: 2px solid #fff; outline-offset: 3px;
}
.magic-hero--noir .first-claimer-badge__icon { display: inline-flex; color: #b8860b; filter: drop-shadow(0 0 4px rgba(255,255,0,0.6)); }
.magic-hero--noir .first-claimer-badge__label { line-height: 1; }
.magic-hero--noir .first-claimer-note {
  margin: 0; font-size: 0.92rem; font-weight: 600;
  color: #fff8c8;
  text-shadow: 0 0 10px rgba(255, 220, 80, 0.45);
}

@keyframes firstClaimerHalo {
  0%, 100% { box-shadow: 0 0 18px rgba(255,220,80,0.55), 0 0 36px rgba(0,255,255,0.35), inset 0 1px 0 rgba(255,255,255,0.55); }
  50%      { box-shadow: 0 0 28px rgba(255,220,80,0.80), 0 0 56px rgba(0,255,255,0.55), inset 0 1px 0 rgba(255,255,255,0.7); }
}

@keyframes firstClaimerReveal {
  0%   { opacity: 0; transform: translateY(8px) scale(.88); filter: blur(4px); }
  60%  { opacity: 1; transform: translateY(0) scale(1.08); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.magic-hero--noir .first-claimer-wrap.is-revealed .first-claimer-badge {
  animation: firstClaimerReveal .7s cubic-bezier(.2,.9,.3,1.4) both,
             firstClaimerHalo 2.6s ease-in-out 0.7s infinite;
}
.magic-hero--noir .first-claimer-wrap.is-revealed .first-claimer-note {
  animation: firstClaimerReveal .7s cubic-bezier(.2,.9,.3,1.4) 0.15s both;
}

@media (prefers-reduced-motion: reduce) {
  .magic-hero--noir .first-claimer-badge,
  .magic-hero--noir .first-claimer-wrap.is-revealed .first-claimer-badge,
  .magic-hero--noir .first-claimer-wrap.is-revealed .first-claimer-note {
    animation: none !important;
  }
}

@media (max-width: 640px) {
  .magic-hero--noir .first-claimer-badge { font-size: 0.72rem; padding: 7px 13px; letter-spacing: 0.1em; }
  .magic-hero--noir .first-claimer-note  { font-size: 0.85rem; }
}

/* =========================================================
   Comments Section — premium noir redesign
   Discord/X/Notion vibe with neon accents.
   ========================================================= */
.comments-section {
  --c-bg: #0f0f12;
  --c-bg-elev: #15151a;
  --c-bg-hover: #1a1a22;
  --c-line: rgba(255,255,255,0.06);
  --c-line-strong: rgba(255,255,255,0.12);
  --c-text: #e8e8ef;
  --c-muted: #8a8a96;
  --c-cyan: #00ffff;
  --c-pink: #ff00aa;
  margin: 1.5rem 0 2rem;
  padding: 1.25rem;
  background: linear-gradient(180deg, #0c0c10 0%, var(--c-bg) 100%);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  box-shadow: 0 4px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
  color: var(--c-text);
}

.comments-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
  padding-bottom: .85rem; border-bottom: 1px solid var(--c-line);
}
.comments-title {
  margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: .01em;
  display: inline-flex; align-items: baseline; gap: .55rem;
}
.comments-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.8em; padding: 2px 8px;
  font-size: .72rem; font-weight: 700; line-height: 1;
  color: var(--c-cyan);
  background: rgba(0,255,255,.08);
  border: 1px solid rgba(0,255,255,.22);
  border-radius: 999px;
  text-shadow: 0 0 8px rgba(0,255,255,.35);
}
.comments-sort { display: inline-flex; gap: .25rem; }
.comments-sort a {
  padding: 6px 12px; font-size: .82rem; font-weight: 600;
  color: var(--c-muted); text-decoration: none; border-radius: 8px;
  transition: background .15s ease, color .15s ease;
}
.comments-sort a:hover { color: var(--c-text); background: var(--c-bg-hover); }
.comments-sort a.active {
  color: var(--c-cyan);
  background: rgba(0,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(0,255,255,.18);
}

/* ---- Composer ---- */
.comment-composer {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: 1rem; margin-bottom: 1.25rem;
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line-strong);
  border-radius: 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.comment-composer:focus-within {
  border-color: rgba(0,255,255,.35);
  box-shadow: 0 0 0 3px rgba(0,255,255,.08), 0 0 24px rgba(0,255,255,.12);
}
.comment-composer__avatar,
.comment-card__avatar {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  overflow: hidden; position: relative;
  background: linear-gradient(135deg, #1f1f28, #15151c);
  border: 1.5px solid rgba(255,255,255,.08);
  display: inline-flex; align-items: center; justify-content: center;
}
.comment-composer__avatar img,
.comment-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.comment-avatar-fallback {
  font-size: 1rem; font-weight: 700; color: var(--c-cyan);
  text-shadow: 0 0 10px rgba(0,255,255,.4);
  text-transform: uppercase;
}
.comment-card__avatar::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 2px rgba(0,255,255,.35), 0 0 14px rgba(0,255,255,.45);
  transition: opacity .2s ease;
}
.comment-card:hover .comment-card__avatar::after { opacity: 1; }

.comment-composer__main { flex: 1 1 auto; min-width: 0; }
.comment-composer__input {
  display: block; width: 100%;
  background: transparent !important;
  border: 0 !important; outline: none; resize: vertical;
  color: var(--c-text) !important;
  font: inherit; font-size: 1rem; line-height: 1.55;
  padding: .25rem 0 .5rem;
  min-height: 64px;
  box-shadow: none !important;
}
.comment-composer__input::placeholder { color: var(--c-muted); }
.comment-composer__foot {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding-top: .6rem; border-top: 1px solid var(--c-line);
}

.comment-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; font-size: .78rem; font-weight: 600;
  color: var(--c-text);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--c-line-strong);
  border-radius: 999px;
  cursor: pointer; user-select: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.comment-chip:hover { background: rgba(0,255,255,.06); border-color: rgba(0,255,255,.25); color: var(--c-cyan); }
.comment-chip--muted { color: var(--c-muted); cursor: default; }
.comment-chip--muted:hover { background: rgba(255,255,255,.03); border-color: var(--c-line-strong); color: var(--c-muted); }
.comment-chip.has-file { color: var(--c-pink); border-color: rgba(255,0,170,.35); background: rgba(255,0,170,.06); }

.comment-post-btn {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border: 0; border-radius: 999px;
  font-weight: 700; font-size: .88rem; letter-spacing: .02em;
  color: #04121a; cursor: pointer;
  background: linear-gradient(95deg, #00ffff 0%, #5ef0ff 50%, #ff66cc 130%);
  box-shadow: 0 0 18px rgba(0,255,255,.45), 0 0 32px rgba(255,0,170,.18);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.comment-post-btn:hover { transform: translateY(-1px); box-shadow: 0 0 24px rgba(0,255,255,.65), 0 0 44px rgba(255,0,170,.28); }
.comment-post-btn:active { transform: translateY(0); }
.comment-post-btn:disabled { opacity: .6; cursor: progress; filter: saturate(.6); transform: none; }
.comment-post-btn__eve {
  font-size: .72rem; padding: 2px 7px; border-radius: 999px;
  background: rgba(4,18,26,.18); color: #04121a;
}
.comment-post-btn.is-loading .comment-post-btn__label::after {
  content: ""; display: inline-block; width: 10px; height: 10px;
  margin-left: 8px; border-radius: 50%;
  border: 2px solid rgba(4,18,26,.35); border-top-color: #04121a;
  animation: cmtSpin .7s linear infinite;
}
@keyframes cmtSpin { to { transform: rotate(360deg); } }

.comment-loginhint {
  padding: 1rem; margin-bottom: 1rem;
  background: var(--c-bg-elev); border: 1px dashed var(--c-line-strong);
  border-radius: 12px; text-align: center; color: var(--c-muted);
}
.comment-loginhint a { color: var(--c-cyan); font-weight: 600; }

/* ---- Comment list ---- */
.comment-list { display: flex; flex-direction: column; gap: .65rem; }
.comment-card {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: .9rem 1rem;
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.comment-card:hover {
  background: var(--c-bg-hover);
  border-color: var(--c-line-strong);
}
.comment-card.is-new {
  animation: cmtIn .45s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes cmtIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.comment-card__main { flex: 1 1 auto; min-width: 0; }
.comment-card__head {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  margin-bottom: .35rem;
}
.comment-card__user {
  color: var(--c-cyan); font-weight: 700; text-decoration: none;
  font-size: .92rem;
  text-shadow: 0 0 8px rgba(0,255,255,.18);
}
.comment-card__user:hover { text-decoration: underline; }
.comment-card__dot { color: var(--c-muted); }
.comment-card__time { color: var(--c-muted); font-size: .78rem; }
.comment-badge {
  display: inline-flex; align-items: center;
  padding: 1px 7px; font-size: .66rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  border-radius: 999px;
  background: linear-gradient(95deg, rgba(255,0,170,.18), rgba(0,255,255,.18));
  color: #ffd2ee;
  border: 1px solid rgba(255,0,170,.35);
  box-shadow: 0 0 10px rgba(255,0,170,.18);
}
.comment-card__body {
  color: var(--c-text); line-height: 1.55; font-size: .95rem;
  word-wrap: break-word; overflow-wrap: anywhere;
}
.comment-card__body p { margin: 0 0 .5rem; }
.comment-card__body p:last-child { margin-bottom: 0; }
.comment-card__body a { color: var(--c-cyan); }
.comment-card__body code {
  background: rgba(0,255,255,.06); padding: 1px 6px; border-radius: 4px;
  font-size: .88em; color: #c8fbff;
}
.comment-card__body pre {
  background: #0a0a0f; padding: .65rem .8rem; border-radius: 8px;
  border: 1px solid var(--c-line); overflow-x: auto;
}
.comment-card__image {
  display: inline-block; margin-top: .6rem;
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--c-line-strong);
  max-width: 280px;
}
.comment-card__image img { display: block; width: 100%; height: auto; }
.comment-card__actions { display: flex; gap: .5rem; margin-top: .6rem; }

.comment-like-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; font-size: .82rem; font-weight: 600;
  color: var(--c-muted);
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease, transform .12s ease;
}
.comment-like-btn:hover { color: var(--c-pink); border-color: rgba(255,0,170,.35); background: rgba(255,0,170,.05); }
.comment-like-btn.is-liked {
  color: var(--c-pink);
  background: rgba(255,0,170,.10);
  border-color: rgba(255,0,170,.45);
  box-shadow: 0 0 14px rgba(255,0,170,.20);
}
.comment-like-btn.is-liked .comment-like-btn__icon { animation: cmtHeart .55s cubic-bezier(.2,.9,.3,1.6); }
.comment-like-btn--readonly { cursor: default; }
.comment-like-btn--readonly:hover { color: var(--c-muted); background: transparent; border-color: var(--c-line); }
.comment-like-btn__icon { display: inline-block; }
@keyframes cmtHeart {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45); }
  60%  { transform: scale(.9); }
  100% { transform: scale(1); }
}

/* ---- Empty state ---- */
.comment-empty {
  position: relative;
  text-align: center; padding: 2.25rem 1rem;
  background: var(--c-bg-elev);
  border: 1px dashed var(--c-line-strong);
  border-radius: 14px;
  color: var(--c-muted);
  overflow: hidden;
}
.comment-empty__glow {
  position: absolute; inset: -40% 30% auto 30%; height: 160px;
  background: radial-gradient(closest-side, rgba(0,255,255,.18), transparent 70%);
  filter: blur(20px); pointer-events: none;
}
.comment-empty svg { color: var(--c-cyan); filter: drop-shadow(0 0 8px rgba(0,255,255,.45)); }
.comment-empty__title {
  margin: .6rem 0 .2rem; font-size: 1rem; font-weight: 700; color: var(--c-text);
}
.comment-empty__sub { margin: 0; font-size: .85rem; }

@media (max-width: 640px) {
  .comments-section { padding: 1rem .85rem; border-radius: 12px; }
  .comment-composer { padding: .85rem; gap: .65rem; border-radius: 12px; }
  .comment-composer__avatar,
  .comment-card__avatar { width: 36px; height: 36px; }
  .comment-card { padding: .8rem; gap: .65rem; border-radius: 10px; }
  .comment-post-btn { padding: 8px 14px; font-size: .82rem; }
  .comment-chip { font-size: .72rem; padding: 5px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .comment-card.is-new,
  .comment-like-btn.is-liked .comment-like-btn__icon,
  .comment-post-btn.is-loading .comment-post-btn__label::after { animation: none !important; }
}

/* Comments: focus-visible polish */
.comments-section .comment-post-btn:focus-visible,
.comments-section .comment-like-btn:focus-visible,
.comments-section .comment-chip:focus-within {
  outline: 2px solid var(--c-cyan);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0,255,255,.18);
}

/* =========================================================
   Spread-Detail Mobile-First Polish
   Scoped under .magic-hero--noir + page-level sticky bar.
   ========================================================= */

/* ---- Premium QR Card (v2) ---- */
.magic-hero--noir .qr-block--v2 {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 14px; padding: 18px;
  background: linear-gradient(180deg, #0a0a0e 0%, #0c0c12 100%);
  border: 1px solid #1a1a22;
  border-radius: 20px;
  box-shadow: 0 10px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03);
}
.magic-hero--noir .qr-block--v2 .qr-block__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem;
}
.magic-hero--noir .qr-block--v2 .qr-block__eyebrow {
  font: 700 .68rem/1 'Orbitron', system-ui, sans-serif;
  letter-spacing: .22em; color: #00ffff;
  text-shadow: 0 0 10px rgba(0,255,255,.45);
}
.magic-hero--noir .qr-block--v2 .qr-block__short {
  font-family: 'Orbitron', monospace;
  font-size: .78rem; color: #ff66cc;
  text-shadow: 0 0 8px rgba(255,0,170,.4);
  padding: 3px 8px; border-radius: 999px;
  background: rgba(255,0,170,.08);
  border: 1px solid rgba(255,0,170,.25);
  word-break: break-all;
}
.magic-hero--noir .qr-block--v2 .qr-block__media {
  position: relative; align-self: center;
  padding: 12px; border-radius: 16px;
  background: #fff;
  box-shadow: 0 0 0 1px #1a1a22, 0 0 38px rgba(0,255,255,.25);
}
.magic-hero--noir .qr-block--v2 .qr-block__media img {
  display: block; width: 100%;
  width: clamp(180px, 60vw, 240px); height: auto;
  border-radius: 8px; background: #fff; padding: 0;
}
.magic-hero--noir .qr-block--v2 .qr-block__hint {
  margin: 0; text-align: center; font-size: .82rem; color: #8a8a96;
}

.magic-hero--noir .qr-copy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 13px 18px; min-height: 48px;
  font-weight: 700; font-size: .92rem; letter-spacing: .02em;
  color: #04121a; border: 0; cursor: pointer;
  background: linear-gradient(95deg, #00ffff 0%, #5ef0ff 60%, #ff66cc 130%);
  border-radius: 14px;
  box-shadow: 0 0 18px rgba(0,255,255,.4), 0 0 32px rgba(255,0,170,.18);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.magic-hero--noir .qr-copy-btn:hover  { transform: translateY(-1px); box-shadow: 0 0 24px rgba(0,255,255,.6), 0 0 44px rgba(255,0,170,.28); }
.magic-hero--noir .qr-copy-btn:active { transform: translateY(0); }
.magic-hero--noir .qr-copy-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.magic-hero--noir .qr-copy-btn.is-copied {
  background: linear-gradient(95deg, #5fff9a, #00ffff);
  animation: qrCopyPop .35s ease;
}
@keyframes qrCopyPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.magic-hero--noir .qr-flyers {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
  margin-top: 2px;
}
.magic-hero--noir .qr-flyer {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 48px; padding: 6px 4px;
  font-size: .78rem; font-weight: 700; text-decoration: none;
  color: #d6d6dc;
  background: #14141a;
  border: 1px solid #20202a;
  border-radius: 10px;
  transition: transform .12s ease, border-color .15s ease, color .15s ease, background .15s ease;
}
.magic-hero--noir .qr-flyer:hover { transform: translateY(-1px); border-color: rgba(0,255,255,.3); color: #fff; }
.magic-hero--noir .qr-flyer__star { color: #ffd966; font-size: .72rem; line-height: 1; text-shadow: 0 0 8px rgba(255,217,102,.6); }
.magic-hero--noir .qr-flyer--premium {
  color: #ffd966; border-color: rgba(255,217,102,.32);
  background: linear-gradient(180deg, rgba(255,217,102,.06), #14141a);
}
.magic-hero--noir .qr-flyer--premium:hover { color: #fff8c8; border-color: rgba(255,217,102,.55); }

/* ---- Mobile-First: stacking + claim button ---- */
@media (max-width: 819px) {
  /* sidebar moves below content automatically via existing 1fr grid;
     give it polish + center alignment */
  .magic-hero--noir .magic-side { order: 2; margin-top: .5rem; }
  .magic-hero--noir .qr-block--v2 .qr-block__media img {
    width: clamp(220px, 70vw, 300px);
  }
}

@media (max-width: 640px) {
  .magic-hero.magic-hero--noir { padding: 14px 14px; border-radius: 14px; }
  .magic-hero--noir .magic-title { font-size: clamp(1.55rem, 6vw, 2.2rem); line-height: 1.12; }
  .magic-hero--noir .magic-meta  { font-size: .82rem; gap: .35rem .55rem; flex-wrap: wrap; }
  .magic-hero--noir .metric-row  { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .magic-hero--noir .metric      { padding: 12px 10px; min-height: 76px; }
  .magic-hero--noir .metric__num { font-size: clamp(1.4rem, 6vw, 1.9rem); }
  .magic-hero--noir .metric__label { font-size: .7rem; }

  /* QR card */
  .magic-hero--noir .qr-block--v2 { padding: 16px; border-radius: 18px; gap: 12px; }
  .magic-hero--noir .qr-block--v2 .qr-block__media img {
    width: min(85vw, 320px); min-width: 280px;
  }
  .magic-hero--noir .qr-copy-btn { padding: 14px 18px; font-size: 1rem; min-height: 52px; border-radius: 16px; }
  .magic-hero--noir .qr-flyers { grid-template-columns: repeat(5, 1fr); gap: 5px; }
  .magic-hero--noir .qr-flyer  { min-height: 52px; font-size: .74rem; }

  /* Claim card prominence */
  .magic-hero--noir .claim-card { padding: 18px 14px; }
  .magic-hero--noir .claim-card .claim-amount { font-size: clamp(2.2rem, 9vw, 3rem); }
  .btn-claim { min-height: 56px !important; padding: 16px 22px !important; font-size: 1.05rem !important; width: 100% !important; max-width: 100% !important; }

  /* Owner tools wrap nicely */
  .magic-hero--noir .owner-tools { display: flex; flex-wrap: wrap; gap: 8px; }
  .magic-hero--noir .owner-tools .btn-yellow,
  .magic-hero--noir .owner-tools .btn-ghost { flex: 1 1 calc(50% - 4px); min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 12px 14px; font-size: .9rem; }

  /* Comments composer tighter on mobile */
  .comments-section { padding: 1rem .8rem; }
  .comments-section .comment-composer__input { font-size: 1rem; min-height: 80px; }
  .comments-section .comment-post-btn { min-height: 48px; padding: 12px 18px; }
  .comments-section .comment-card { padding: .85rem .85rem; gap: .7rem; line-height: 1.6; }
  .comments-section .comment-card__avatar,
  .comments-section .comment-composer__avatar { width: 40px; height: 40px; }
  .comments-section .comment-like-btn { min-height: 36px; padding: 7px 12px; font-size: .88rem; }

  /* First-claimer badge keeps existing mobile clamp but ensure stacking */
  .magic-hero--noir .first-claimer-wrap { align-items: center; text-align: center; }
  .magic-hero--noir .first-claimer-note { text-align: center; }

  /* Leave room for sticky bar (only on pages that include it) */
  body:has(.spread-mobilebar) { padding-bottom: 76px; }
}

@media (max-width: 480px) {
  .magic-hero--noir .featured-img-block { border-radius: 12px; }
  .magic-hero--noir .metric             { padding: 10px 8px; min-height: 70px; }
  .magic-hero--noir .qr-block--v2 .qr-block__short { font-size: .72rem; }
  .magic-hero--noir .qr-flyers          { grid-template-columns: repeat(3, 1fr); }
  .magic-hero--noir .qr-flyer           { min-height: 48px; }
  .comments-section .comment-card       { border-radius: 10px; }
}

@media (max-width: 360px) {
  .magic-hero.magic-hero--noir { padding: 12px 10px; }
  .magic-hero--noir .metric-row { grid-template-columns: 1fr 1fr; gap: 6px; }
  .magic-hero--noir .qr-flyers  { grid-template-columns: repeat(2, 1fr); }
  .magic-hero--noir .qr-block--v2 .qr-block__media img { min-width: 240px; }
}

/* =========================================================
   Sticky Mobile Action Bar (≤640px)
   ========================================================= */
.spread-mobilebar { display: none; }

@media (max-width: 640px) {
  .spread-mobilebar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    display: flex; gap: 6px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: rgba(10,10,14,.92);
    border-top: 1px solid rgba(0,255,255,.18);
    box-shadow: 0 -8px 28px rgba(0,0,0,.55);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    transform: translateY(0);
    transition: transform .25s ease;
  }
  .spread-mobilebar.is-hidden { transform: translateY(110%); }
  .spread-mobilebar__btn {
    flex: 1 1 0; min-height: 52px;
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 6px 4px;
    font-size: .72rem; font-weight: 700; letter-spacing: .02em;
    text-decoration: none; color: #cfd0d6;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    transition: color .15s ease, background .15s ease, border-color .15s ease, transform .1s ease;
  }
  .spread-mobilebar__btn:active { transform: scale(.97); }
  .spread-mobilebar__btn:focus-visible {
    outline: 2px solid #00ffff; outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0,255,255,.25);
  }
  .spread-mobilebar__btn svg { stroke: currentColor; }
  .spread-mobilebar__btn--primary {
    color: #04121a;
    background: linear-gradient(95deg, #00ffff 0%, #5ef0ff 55%, #ff66cc 130%);
    border-color: rgba(0,255,255,.6);
    box-shadow: 0 0 16px rgba(0,255,255,.5);
  }
  .spread-mobilebar__btn--primary.is-disabled,
  .spread-mobilebar__btn--primary:disabled {
    filter: grayscale(.6) saturate(.4); opacity: .55; box-shadow: none; cursor: not-allowed;
  }
}

@media (prefers-reduced-motion: reduce) {
  .magic-hero--noir .qr-copy-btn.is-copied,
  .spread-mobilebar { transition: none !important; animation: none !important; }
}

/* =========================================================
   Cheer / Supporter-Boost card — distinct from Claim (+15)
   ========================================================= */
.magic-hero--noir .cheer-card {
  margin-top: 14px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(180deg, #0c1322 0%, #0a1018 100%);
  border: 1px solid #1d2a3e;
  border-radius: 16px;
  box-shadow: 0 6px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(120,200,255,.05);
}
.magic-hero--noir .cheer-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; flex-wrap: wrap;
}
.magic-hero--noir .cheer-card__title {
  font: 800 .92rem/1 'Orbitron', system-ui, sans-serif;
  letter-spacing: .12em; color: #6ecbff;
  text-shadow: 0 0 10px rgba(110,203,255,.4);
}
.magic-hero--noir .cheer-card__count {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(110,203,255,.08);
  border: 1px solid rgba(110,203,255,.2);
  font-size: .78rem; color: #9fd9ff;
}
.magic-hero--noir .cheer-card__count-num {
  font-weight: 800; color: #fff; font-size: .92rem;
  text-shadow: 0 0 8px rgba(110,203,255,.5);
}
.magic-hero--noir .cheer-card__hint {
  margin: 0; font-size: .85rem; color: #8a99ad; line-height: 1.45;
}

.magic-hero--noir .cheer-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 48px; padding: 13px 18px;
  font-weight: 800; font-size: .98rem; letter-spacing: .03em;
  color: #04121a; border: 0; cursor: pointer;
  background: linear-gradient(95deg, #2a7bff 0%, #4fb6ff 50%, #00ffff 100%);
  border-radius: 14px;
  box-shadow: 0 0 18px rgba(79,182,255,.45), 0 4px 14px rgba(0,0,0,.35);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease, background .25s ease;
  position: relative; overflow: hidden;
}
.magic-hero--noir .cheer-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 0 26px rgba(79,182,255,.65), 0 8px 22px rgba(0,0,0,.45);
  filter: brightness(1.06);
}
.magic-hero--noir .cheer-btn:active:not(:disabled) { transform: translateY(0); }
.magic-hero--noir .cheer-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.magic-hero--noir .cheer-btn.is-loading {
  cursor: wait; opacity: .85;
}
.magic-hero--noir .cheer-btn.is-loading::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-100%);
  animation: cheerShimmer 1.1s linear infinite;
}
@keyframes cheerShimmer { to { transform: translateX(100%); } }

.magic-hero--noir .cheer-btn.is-done,
.magic-hero--noir .cheer-btn[disabled].is-done {
  background: linear-gradient(95deg, #1f8a4c 0%, #2ecc71 60%, #5fffa6 100%);
  color: #02160a;
  box-shadow: 0 0 18px rgba(46,204,113,.45), inset 0 0 0 1px rgba(255,255,255,.12);
  cursor: default; opacity: 1; filter: none;
}
.magic-hero--noir .cheer-btn[disabled]:not(.is-done) {
  background: linear-gradient(95deg, #2a2f38, #3a4150);
  color: #8a92a0; cursor: not-allowed;
  box-shadow: none;
}
.magic-hero--noir .cheer-btn.is-error {
  background: linear-gradient(95deg, #6b1e1e, #b03030);
  color: #fff; cursor: not-allowed;
}
.magic-hero--noir .cheer-btn.just-voted {
  animation: cheerPop .55s ease;
}
@keyframes cheerPop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.05); box-shadow: 0 0 32px rgba(94,255,166,.7); }
  100% { transform: scale(1); }
}
.magic-hero--noir .cheer-btn--login {
  text-decoration: none; text-align: center;
}

@media (max-width: 640px) {
  .magic-hero--noir .cheer-card  { padding: 14px 14px; border-radius: 14px; }
  .magic-hero--noir .cheer-btn   { min-height: 52px; font-size: 1rem; padding: 14px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .magic-hero--noir .cheer-btn,
  .magic-hero--noir .cheer-btn.is-loading::after,
  .magic-hero--noir .cheer-btn.just-voted { animation: none !important; transition: none !important; }
}

/* =========================================================
   Cheer-FX: spark burst (confetti-lite) + daily-bonus state
   ========================================================= */
.magic-hero--noir .cheer-fx {
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0; pointer-events: none;
}
.magic-hero--noir .cheer-spark {
  position: absolute; left: 0; top: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: #4fb6ff;
  box-shadow: 0 0 10px currentColor;
  transform: translate(0,0) scale(.6);
  opacity: 0;
  animation: cheerSpark .85s cubic-bezier(.18,.7,.3,1) forwards;
}
@keyframes cheerSpark {
  0%   { transform: translate(0,0) scale(.4); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: translate(var(--dx,0), var(--dy,0)) scale(.2); opacity: 0; }
}
.magic-hero--noir .cheer-btn.is-bonus {
  background: linear-gradient(95deg, #ffd11a 0%, #ffae28 40%, #ff6bd1 80%, #b266ff 100%);
  color: #1a0a04;
  box-shadow: 0 0 26px rgba(255,180,40,.55), 0 0 50px rgba(255,107,209,.35);
}

/* =========================================================
   Top Voters mini-list inside cheer-card
   ========================================================= */
.magic-hero--noir .voters-list {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px dashed rgba(110,203,255,.18);
}
.magic-hero--noir .voters-list__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.magic-hero--noir .voters-list__title {
  font: 700 .78rem/1 'Orbitron', system-ui, sans-serif;
  letter-spacing: .14em; color: #6ecbff; text-transform: uppercase;
}
.magic-hero--noir .voters-list__more {
  font-size: .76rem; color: #9fd9ff;
  text-decoration: underline dotted; cursor: pointer;
}
.magic-hero--noir .voters-list__items {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.magic-hero--noir .voters-list__empty {
  font-size: .82rem; color: #6e7a8d; font-style: italic;
}
.magic-hero--noir .voter-chip__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 4px; border-radius: 999px;
  background: rgba(79,182,255,.08);
  border: 1px solid rgba(79,182,255,.22);
  color: #cfe9ff; text-decoration: none;
  font-size: .78rem; line-height: 1;
  transition: background .15s ease, transform .12s ease;
}
.magic-hero--noir .voter-chip__link:hover {
  background: rgba(79,182,255,.18); transform: translateY(-1px);
}
.magic-hero--noir .voter-chip__avatar {
  width: 22px; height: 22px; border-radius: 50%;
  object-fit: cover; flex: 0 0 22px;
  background: linear-gradient(135deg, #1d2a3e, #2a3e58);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .7rem; color: #9fd9ff;
}
.magic-hero--noir .voter-chip__avatar--fallback {
  text-transform: uppercase;
}
.magic-hero--noir .voter-chip__name { font-weight: 600; color: #e6f4ff; }
.magic-hero--noir .voter-chip__amount {
  font-weight: 800; color: #5fffa6;
  text-shadow: 0 0 6px rgba(95,255,166,.35);
}

@media (prefers-reduced-motion: reduce) {
  .magic-hero--noir .cheer-spark { animation: none !important; opacity: 0 !important; }
}

/* ===== Vote-Streak chip on Cheer card ===== */
.streak-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .55rem; margin: .3rem 0 .1rem;
  border-radius: 999px;
  font-size: .78rem; font-weight: 600;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text, #ddd);
  transition: transform .18s ease, box-shadow .25s ease, background .25s ease;
}
.streak-chip.is-on {
  background: linear-gradient(135deg, rgba(255,140,0,.22), rgba(255,0,170,.22));
  border-color: rgba(255,140,0,.55);
  color: #ffe7b3;
  box-shadow: 0 0 10px rgba(255,140,0,.35);
}
.streak-chip.is-off { opacity: .55; }
.streak-chip.is-milestone {
  animation: streakPulse .9s ease-out 1;
  box-shadow: 0 0 22px rgba(255,170,0,.85), 0 0 40px rgba(255,0,170,.55);
}
.streak-chip__n  { font-variant-numeric: tabular-nums; font-size: .95rem; }
.streak-chip__l  { opacity: .8; font-weight: 400; }
@keyframes streakPulse {
  0%   { transform: scale(1);   }
  35%  { transform: scale(1.22); }
  100% { transform: scale(1);   }
}

/* ===== Vote-Streak card on profile ===== */
.streak-card { padding: 1rem 1.1rem; }
.streak-card__head { display:flex; align-items:center; gap:.5rem; margin-bottom:.6rem; }
.streak-card__icon { font-size: 1.4rem; }
.streak-card__title { font-weight: 700; letter-spacing:.02em; }
.streak-card--active .streak-card__title { color: #ff9544; text-shadow: 0 0 10px rgba(255,140,0,.5); }
.streak-card__body { display:flex; gap:1.8rem; flex-wrap:wrap; }
.streak-stat__n { font-size: 2rem; font-weight: 800; line-height:1; color: var(--neon-cyan, #00ffff); }
.streak-card--active .streak-stat__n { color: #ffaa55; text-shadow: 0 0 12px rgba(255,140,0,.6); }
.streak-stat__l { font-size:.78rem; opacity:.7; margin-top:.25rem; }
.streak-card__hint { margin: .8rem 0 0; font-size: .82rem; }

/* ===== /spreads page leaderboards ===== */
.lb-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin: 1rem 0 1.2rem;
}
.lb-card { padding: 1rem 1.1rem; }
.lb-title { margin: 0 0 .7rem; font-size: 1rem; letter-spacing:.02em; }
.lb-list  { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.4rem; }
.lb-row   { display:flex; align-items:center; gap:.55rem; }
.lb-rank  {
  flex:0 0 1.8rem; height:1.8rem; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.85rem;
  background: rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12);
}
.lb-rank--1 { background: linear-gradient(135deg,#ffcc00,#ff7a00); color:#1a0a00; border-color:transparent; box-shadow:0 0 10px rgba(255,170,0,.55); }
.lb-rank--2 { background: rgba(200,200,220,.18); }
.lb-rank--3 { background: rgba(205,127,50,.25); }
.lb-link  {
  flex:1; display:flex; flex-direction:column; gap:.15rem;
  text-decoration:none; color:inherit;
  padding:.35rem .5rem; border-radius:8px;
  transition: background .18s ease;
}
.lb-link:hover { background: rgba(0,255,255,.07); }
.lb-title-text { font-weight:600; }
.lb-meta { display:flex; gap:.7rem; font-size:.75rem; opacity:.75; flex-wrap:wrap; }
.lb-count { color: var(--neon-magenta, #ff00aa); font-weight:600; }
.lb-scans { color: var(--neon-cyan, #00ffff); }
.lb-empty { margin:.4rem 0 0; font-size:.85rem; }

@media (prefers-reduced-motion: reduce) {
  .streak-chip, .streak-chip.is-milestone { animation: none !important; transition: none !important; }
}

/* ===== Bell icon in navbar ===== */
.nav-bell {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  padding: .25rem .55rem;
  border-radius: 999px;
  transition: background .18s ease, transform .18s ease;
}
.nav-bell:hover { background: rgba(0,255,255,.08); transform: translateY(-1px); }
.nav-bell.has-unread { animation: bellShake 2.4s ease-in-out infinite; }
.nav-bell .bell-count {
  position: absolute; top: -2px; right: -4px;
  min-width: 1.1rem; height: 1.1rem; padding: 0 .25rem;
  border-radius: 999px;
  background: var(--neon-magenta, #ff00aa);
  color: #fff; font-size: .65rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 8px rgba(255,0,170,.65);
}
@keyframes bellShake {
  0%,82%,100% { transform: rotate(0); }
  85% { transform: rotate(-14deg); }
  88% { transform: rotate(12deg); }
  91% { transform: rotate(-8deg); }
  94% { transform: rotate(6deg); }
  97% { transform: rotate(-3deg); }
}

/* ===== Notifications page ===== */
.notif-head {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.notif-meta { font-size: .82rem; }
.notif-list { list-style: none; padding: 0; margin: 0; display:flex; flex-direction:column; gap:.55rem; }
.notif-item {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto;
  gap: .8rem; align-items: center;
  padding: .75rem .9rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  transition: background .18s ease, border-color .18s ease;
}
.notif-item.is-unread {
  background: linear-gradient(90deg, rgba(0,255,255,.10), rgba(255,0,170,.06));
  border-color: rgba(0,255,255,.35);
  box-shadow: 0 0 10px rgba(0,255,255,.18);
}
.notif-item--vote    .notif-icon { color: var(--neon-magenta, #ff00aa); }
.notif-item--comment .notif-icon { color: var(--neon-cyan, #00ffff); }
.notif-item--badge   .notif-icon { color: #ffd24d; }
.notif-item--claim   .notif-icon { color: #ffff00; }
.notif-item--market  .notif-icon { color: #00ff80; }
.notif-icon { font-size: 1.4rem; text-align: center; }
.notif-msg  { margin: 0; line-height: 1.35; }
.notif-foot { display:flex; gap:.7rem; align-items:center; font-size:.72rem; margin-top:.25rem; }
.notif-tag  { color: var(--neon-cyan, #00ffff); font-weight: 600; }
.notif-go   { white-space: nowrap; }
.notif-pager { display:flex; gap:.7rem; align-items:center; justify-content:center; margin: 1.2rem 0; }

/* ===== Vote-History tab ===== */
.vote-history { list-style: none; padding: 0; margin: 0; display:flex; flex-direction:column; gap:.4rem; }
.vote-history__row {}
.vote-history__link {
  display: grid;
  grid-template-columns: 1.8rem 1fr auto auto;
  gap: .7rem; align-items: center;
  padding: .55rem .8rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  text-decoration: none; color: inherit;
  transition: background .18s ease, border-color .18s ease;
}
.vote-history__link:hover { background: rgba(255,0,170,.08); border-color: rgba(255,0,170,.4); }
.vote-history__icon   { color: var(--neon-magenta, #ff00aa); font-weight: 700; }
.vote-history__title  { font-weight: 600; }
.vote-history__amount { color: var(--neon-cyan, #00ffff); font-size: .82rem; font-weight: 600; }
.vote-history__date   { font-size: .72rem; white-space: nowrap; }
@media (max-width: 600px) {
  .vote-history__link { grid-template-columns: 1.6rem 1fr; }
  .vote-history__amount, .vote-history__date { grid-column: 1 / -1; padding-left: 2.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-bell.has-unread { animation: none !important; }
}

/* ===== Featured Spreads (gold/purple glow) ===== */
:root {
  --feat-gold: #ffd24d;
  --feat-purple: #b266ff;
}
.nav-featured { color: var(--feat-gold); text-shadow: 0 0 6px rgba(255,210,77,.55); }
.featured-header { margin-bottom: 1rem; }
.featured-strip {
  margin: 1rem 0 1.4rem;
  padding: 1rem 1.1rem 1.2rem;
  border-radius: 14px;
  background:
    radial-gradient(circle at 20% 30%, rgba(178,102,255,.18), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(255,210,77,.12), transparent 60%),
    rgba(255,255,255,.03);
  border: 1px solid rgba(255,210,77,.35);
  box-shadow: 0 0 24px rgba(178,102,255,.18);
}
.featured-strip__title {
  margin: 0 0 .8rem;
  font-size: 1.05rem;
  letter-spacing: .04em;
  color: var(--feat-gold);
  text-shadow: 0 0 8px rgba(255,210,77,.5);
}
.card--featured {
  position: relative;
  border: 1.5px solid var(--feat-gold) !important;
  box-shadow:
    0 0 0 1px rgba(178,102,255,.45) inset,
    0 0 18px rgba(255,210,77,.35),
    0 0 28px rgba(178,102,255,.25);
  background: linear-gradient(180deg, rgba(178,102,255,.08), rgba(255,210,77,.04)) !important;
  animation: featuredPulse 4s ease-in-out infinite;
}
@keyframes featuredPulse {
  0%,100% { box-shadow: 0 0 0 1px rgba(178,102,255,.45) inset, 0 0 18px rgba(255,210,77,.35), 0 0 28px rgba(178,102,255,.25); }
  50%     { box-shadow: 0 0 0 1px rgba(178,102,255,.60) inset, 0 0 26px rgba(255,210,77,.50), 0 0 42px rgba(178,102,255,.35); }
}
.featured-ribbon {
  position: absolute; top: .55rem; left: .55rem; z-index: 2;
  background: linear-gradient(135deg, var(--feat-gold), var(--feat-purple));
  color: #1a0030; font-weight: 700; font-size: .72rem;
  padding: .18rem .55rem; border-radius: 999px;
  box-shadow: 0 0 12px rgba(255,210,77,.6);
  letter-spacing: .03em;
}
.featured-until { font-size: .72rem; margin-top: .35rem; }
.feature-active-banner {
  margin-top: 1rem;
  padding: .55rem .8rem;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255,210,77,.18), rgba(178,102,255,.18));
  border: 1px solid rgba(255,210,77,.4);
  font-size: .9rem;
}
.btn-featured {
  background: linear-gradient(135deg, var(--feat-gold), var(--feat-purple));
  color: #1a0030; font-weight: 700;
  border: none; padding: .55rem 1.1rem; border-radius: 8px;
  cursor: pointer; letter-spacing: .02em;
  box-shadow: 0 0 14px rgba(255,210,77,.45);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn-featured:hover:not([disabled]) { transform: translateY(-1px); box-shadow: 0 0 22px rgba(178,102,255,.55); }
.btn-featured[disabled] { opacity: .45; cursor: not-allowed; }

/* ===== Referral panel ===== */
.ref-banner {
  background: linear-gradient(90deg, rgba(0,255,255,.15), rgba(178,102,255,.15));
  border: 1px solid rgba(0,255,255,.4);
  color: var(--neon-cyan, #00ffff);
  padding: .6rem .8rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: .9rem;
  text-align: center;
}
.referral-panel {
  margin: 1rem 0 1.5rem;
  padding: 1rem 1.1rem 1.2rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(0,255,255,.25);
  border-radius: 12px;
}
.referral-panel__title { margin: 0 0 .4rem; }
.referral-stats { display:flex; gap:1.5rem; margin: .8rem 0; }
.referral-stat { display:flex; flex-direction:column; }
.referral-stat .num { font-size: 1.4rem; font-weight: 700; color: var(--neon-cyan, #00ffff); }
.referral-stat .lbl { font-size: .72rem; opacity: .75; }
.referral-link-row { display:flex; flex-direction:column; gap:.3rem; }
.referral-link-input-wrap { display:flex; gap:.5rem; }
.referral-link-input {
  flex: 1; font-family: monospace; font-size: .82rem;
  padding: .45rem .6rem; border-radius: 6px;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.15); color: inherit;
}
.referral-users { margin-top: .8rem; }
.referral-users summary { cursor: pointer; font-weight: 600; }
.referral-users ul { list-style: none; padding: .5rem 0 0; margin: 0; display:flex; flex-direction:column; gap:.25rem; }

@media (prefers-reduced-motion: reduce) {
  .card--featured { animation: none !important; }
}

/* ============================================================
   Premium Homepage Redesign
   ============================================================ */
:root {
  --hp-bg-1: #050507;
  --hp-bg-2: #0a0a14;
  --hp-ink:  #ffffff;
  --hp-muted:#9aa4b8;
  --hp-acc:  #00f2fe;       /* electric cyan */
  --hp-acc2: #4facfe;       /* deep cyan-blue */
  --hp-gold: #ffd24d;
  --hp-purple:#b266ff;
  --hp-line: rgba(255,255,255,.08);
  --hp-line-strong: rgba(0,242,254,.35);
}

/* ===== Premium Hero ===== */
.hero-premium {
  position: relative;
  margin: 1rem -1rem 2rem;
  padding: 5.5rem 1.5rem 5rem;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(79,172,254,.18), transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgba(178,102,255,.14), transparent 55%),
    linear-gradient(180deg, var(--hp-bg-1), var(--hp-bg-2));
  border: 1px solid var(--hp-line);
  box-shadow:
    0 0 0 1px rgba(0,242,254,.08) inset,
    0 20px 60px -20px rgba(0,242,254,.18);
}
.hero-premium__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
  pointer-events: none;
}
.hero-premium__halo {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%);
  width: 720px; height: 720px; pointer-events: none;
  background: radial-gradient(circle, rgba(0,242,254,.25), transparent 60%);
  filter: blur(40px);
}
.hero-premium__particles { position:absolute; inset:0; pointer-events:none; }
.hero-premium__particles span {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: var(--hp-acc);
  box-shadow: 0 0 10px var(--hp-acc), 0 0 18px var(--hp-acc2);
  opacity: .55;
  animation: hpDrift 14s linear infinite;
}
.hero-premium__particles span:nth-child(1){ left: 8%;  top: 22%; animation-delay:  -0s; }
.hero-premium__particles span:nth-child(2){ left: 18%; top: 78%; animation-delay:  -2s; background: var(--hp-purple); box-shadow: 0 0 10px var(--hp-purple); }
.hero-premium__particles span:nth-child(3){ left: 32%; top: 12%; animation-delay:  -4s; }
.hero-premium__particles span:nth-child(4){ left: 55%; top: 88%; animation-delay:  -6s; background: var(--hp-gold); box-shadow: 0 0 10px var(--hp-gold); }
.hero-premium__particles span:nth-child(5){ left: 70%; top: 18%; animation-delay:  -8s; }
.hero-premium__particles span:nth-child(6){ left: 82%; top: 60%; animation-delay: -10s; background: var(--hp-purple); box-shadow: 0 0 10px var(--hp-purple); }
.hero-premium__particles span:nth-child(7){ left: 92%; top: 30%; animation-delay: -12s; }
.hero-premium__particles span:nth-child(8){ left: 45%; top: 45%; animation-delay: -14s; background: var(--hp-gold); box-shadow: 0 0 10px var(--hp-gold); }
@keyframes hpDrift {
  0%   { transform: translate(0,0) scale(1);   opacity: .25; }
  50%  { transform: translate(20px, -28px) scale(1.4); opacity: .85; }
  100% { transform: translate(0,0) scale(1);   opacity: .25; }
}

.hero-premium__inner {
  position: relative; z-index: 2;
  max-width: 940px; margin: 0 auto; text-align: center;
}
.hero-premium__eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .35rem .85rem; border-radius: 999px;
  background: rgba(0,242,254,.08);
  border: 1px solid var(--hp-line-strong);
  color: var(--hp-acc);
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 600;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hp-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--hp-acc);
  box-shadow: 0 0 10px var(--hp-acc);
  animation: hpPulse 1.6s ease-in-out infinite;
}
@keyframes hpPulse {
  0%,100% { transform: scale(1);   opacity: 1; }
  50%     { transform: scale(1.4); opacity: .5; }
}
.hero-premium__title {
  font-family: 'Orbitron', 'Inter', sans-serif;
  font-size: clamp(2.2rem, 5.5vw, 4.4rem);
  line-height: 1.05;
  margin: 1.4rem 0 .9rem;
  color: var(--hp-ink);
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, #ffffff 0%, #c8e7ff 60%, #6ab9ff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 60px rgba(0,242,254,.15);
}
.hero-premium__sub {
  max-width: 720px; margin: 0 auto .4rem;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  color: rgba(255,255,255,.88);
  font-weight: 400; line-height: 1.5;
}
.hero-premium__tag {
  font-size: .9rem; margin: .4rem auto 1.8rem; max-width: 600px;
  color: var(--hp-muted);
}
.hero-premium__ctas {
  display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap;
  margin-top: 1.6rem;
}
.btn-hero-primary {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.7rem;
  font-weight: 700; font-size: 1rem; letter-spacing: .02em;
  color: #051018;
  background: linear-gradient(135deg, var(--hp-acc) 0%, var(--hp-acc2) 100%);
  border: none; border-radius: 12px;
  text-decoration: none;
  box-shadow:
    0 8px 26px -8px rgba(0,242,254,.55),
    0 0 0 1px rgba(255,255,255,.08) inset;
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn-hero-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 34px -8px rgba(0,242,254,.7),
    0 0 0 1px rgba(255,255,255,.15) inset;
}
.bhp-ic { font-size: 1.15rem; }
.btn-hero-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .9rem 1.4rem;
  color: var(--hp-ink); text-decoration: none;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  font-weight: 600;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.btn-hero-ghost:hover {
  background: rgba(0,242,254,.08);
  border-color: var(--hp-line-strong);
  transform: translateY(-2px);
}
.hero-premium__chips {
  display: flex; gap: .55rem; justify-content: center; flex-wrap: wrap;
  margin-top: 1.8rem;
}
.hpchip {
  font-size: .78rem; color: rgba(255,255,255,.7);
  padding: .35rem .8rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

/* ===== Trust strip ===== */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 0 0 3rem;
  padding: 1.4rem 1.2rem;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0));
  border: 1px solid var(--hp-line);
  border-radius: 16px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.trust-stat { text-align: center; display: flex; flex-direction: column; gap: .25rem; }
.ts-num {
  font-family: 'Orbitron', monospace;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 700;
  background: linear-gradient(180deg, var(--hp-acc), var(--hp-acc2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: .02em;
}
.ts-lbl { font-size: .78rem; color: var(--hp-muted); letter-spacing: .04em; }

/* ===== Section heading polish ===== */
.section--lux {
  font-family: 'Orbitron', 'Inter', sans-serif;
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  margin: 2.6rem 0 .25rem;
  letter-spacing: .01em;
  color: var(--hp-ink);
  position: relative; padding-left: 1rem;
}
.section--lux::before {
  content: ""; position: absolute; left: 0; top: 0.35em; bottom: 0.35em;
  width: 4px; border-radius: 2px;
  background: linear-gradient(180deg, var(--hp-acc), var(--hp-purple));
  box-shadow: 0 0 10px var(--hp-acc);
}

/* ===== How it works ===== */
.howto-premium { margin-bottom: 3rem; }
.how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem; margin-top: 1.2rem;
}
.how-card {
  position: relative;
  padding: 1.4rem 1.2rem 1.3rem;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid var(--hp-line);
  border-radius: 14px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  overflow: hidden;
}
.how-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 0%, rgba(0,242,254,.12), transparent 60%);
  opacity: 0; transition: opacity .25s ease;
}
.how-card:hover {
  transform: translateY(-4px);
  border-color: var(--hp-line-strong);
  box-shadow: 0 18px 40px -22px rgba(0,242,254,.5);
}
.how-card:hover::after { opacity: 1; }
.how-card__num {
  position: absolute; top: .7rem; right: .9rem;
  font-family: 'Orbitron', monospace;
  font-size: 2rem; font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px rgba(0,242,254,.35);
  opacity: .6;
}
.how-card__icon { font-size: 1.8rem; margin-bottom: .5rem; }
.how-card h3 { margin: .2rem 0 .4rem; font-size: 1.05rem; color: var(--hp-ink); }
.how-card p { font-size: .88rem; line-height: 1.5; margin: 0; }

/* ===== Card premium hover (applied where opted-in) ===== */
.card--premium {
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
}
.card--premium:hover {
  transform: translateY(-3px);
  border-color: var(--hp-line-strong) !important;
  box-shadow: 0 18px 38px -22px rgba(0,242,254,.45);
}

/* ===== Responsive ===== */
@media (max-width: 720px) {
  .hero-premium { margin: .5rem 0 1.5rem; padding: 3.4rem 1rem 3.2rem; border-radius: 18px; }
  .trust-strip { grid-template-columns: repeat(2, 1fr); padding: 1.1rem .8rem; gap: .8rem; }
  .hero-premium__ctas { flex-direction: column; align-items: stretch; }
  .btn-hero-primary, .btn-hero-ghost { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-premium__particles span,
  .hp-pulse { animation: none !important; }
}

/* ===== Floating Wikey Dot in premium hero =====
   Renders the existing .dot-mascot free-floating in the top-right corner of
   .hero-premium — no card, no box. Sized down, layered above grid/particles,
   below the .hero-premium__inner copy so it never blocks text. */
.hero-premium__dot {
  position: absolute;
  top: 2.2rem;
  right: 2.6rem;
  z-index: 3;
  pointer-events: auto;
  filter: drop-shadow(0 0 24px rgba(0,242,254,.45));
  animation: hpDotFloat 6s ease-in-out infinite;
}
.hero-premium__dot .dot-mascot {
  width: 110px; height: 110px;
  background: radial-gradient(circle at 38% 32%, #d6f8ff 0%, #38c8ff 55%, #007bd6 100%);
  border: 2px solid rgba(0,242,254,.7);
  box-shadow:
    0 0 22px rgba(0,242,254,.55),
    0 0 44px rgba(79,172,254,.35),
    inset 0 -10px 22px rgba(0,80,160,.55);
}
.hero-premium__dot .dot-glow {
  inset: -28px;
  background: radial-gradient(circle, rgba(0,242,254,.45) 0%, rgba(0,242,254,0) 65%);
  filter: blur(14px);
  animation: hpDotGlow 3.4s ease-in-out infinite;
}
.hero-premium__dot .dot-mascot::before,
.hero-premium__dot .dot-mascot::after {
  width: 14px; height: 18px;
  background: #ffffff;
  box-shadow: 0 0 6px rgba(255,255,255,.6);
}
.hero-premium__dot .dot-pupil-l,
.hero-premium__dot .dot-pupil-r {
  width: 7px; height: 9px; background: #0a1a3a;
}

@keyframes hpDotFloat {
  0%,100% { transform: translateY(0)    rotate(-2deg); }
  50%     { transform: translateY(-10px) rotate(2deg); }
}
@keyframes hpDotGlow {
  0%,100% { opacity: .65; transform: scale(1); }
  50%     { opacity: 1;   transform: scale(1.12); }
}

/* Tablet — shrink + tuck closer */
@media (max-width: 900px) {
  .hero-premium__dot { top: 1.4rem; right: 1.4rem; }
  .hero-premium__dot .dot-mascot { width: 84px; height: 84px; }
  .hero-premium__dot .dot-mascot::before,
  .hero-premium__dot .dot-mascot::after { width: 11px; height: 14px; }
  .hero-premium__dot .dot-pupil-l,
  .hero-premium__dot .dot-pupil-r { width: 5px; height: 7px; }
}
/* Mobile — small + safely out of the eyebrow's way */
@media (max-width: 560px) {
  .hero-premium__dot { top: 0.8rem; right: 0.9rem; }
  .hero-premium__dot .dot-mascot { width: 64px; height: 64px; }
  .hero-premium__dot .dot-glow { inset: -16px; }
  /* Push eyebrow down so it never collides with the dot */
  .hero-premium { padding-top: 7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-premium__dot,
  .hero-premium__dot .dot-glow { animation: none !important; }
}

/* ============================================================
   Cyberpunk Neon Hero — no card, floats on the void
   ============================================================ */
.hero-neon {
  position: relative;
  margin: -1rem -1rem 3rem;
  padding: 5rem 1.5rem 5.5rem;
  min-height: 78vh;
  background: #000000;
  overflow: hidden;
  isolation: isolate;
}
/* Animated neon grid floor */
.hero-neon__grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(0,242,254,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,0,255,.10) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 45%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 25%, transparent 78%);
  animation: hnGridShift 22s linear infinite;
}
@keyframes hnGridShift {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 56px 56px, -56px 56px; }
}
/* Slow scanline sweep */
.hero-neon__scan {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, transparent 0%, rgba(0,242,254,.07) 50%, transparent 100%);
  background-size: 100% 8px;
  mix-blend-mode: screen;
  opacity: .35;
  animation: hnScan 5.5s linear infinite;
}
@keyframes hnScan {
  0%   { background-position: 0 -200px; }
  100% { background-position: 0 200px; }
}
/* Deep vignette to anchor the void */
.hero-neon__vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(0,0,0,.85) 90%),
    radial-gradient(ellipse at 20% 100%, rgba(255,0,255,.10), transparent 55%),
    radial-gradient(ellipse at 80% 0%,   rgba(0,242,254,.10), transparent 55%);
}
/* Drifting neon particles */
.hero-neon__particles { position:absolute; inset:0; pointer-events:none; z-index:2; }
.hero-neon__particles span {
  position:absolute; width:4px; height:4px; border-radius:50%;
  animation: hnDrift 12s linear infinite;
}
.hero-neon__particles span:nth-child(1)  { left:6%;  top:18%; background:#00f2fe; box-shadow:0 0 12px #00f2fe,0 0 24px #00f2fe; animation-delay:-0s; }
.hero-neon__particles span:nth-child(2)  { left:14%; top:72%; background:#ff00ff; box-shadow:0 0 12px #ff00ff,0 0 24px #ff00ff; animation-delay:-1.5s; }
.hero-neon__particles span:nth-child(3)  { left:24%; top:34%; background:#ffff00; box-shadow:0 0 10px #ffff00,0 0 20px #ffff00; animation-delay:-3s; }
.hero-neon__particles span:nth-child(4)  { left:32%; top:88%; background:#00f2fe; box-shadow:0 0 12px #00f2fe; animation-delay:-4.5s; }
.hero-neon__particles span:nth-child(5)  { left:44%; top:14%; background:#ff00ff; box-shadow:0 0 12px #ff00ff; animation-delay:-6s; }
.hero-neon__particles span:nth-child(6)  { left:52%; top:80%; background:#ffff00; box-shadow:0 0 10px #ffff00; animation-delay:-7.5s; }
.hero-neon__particles span:nth-child(7)  { left:62%; top:28%; background:#00f2fe; box-shadow:0 0 12px #00f2fe; animation-delay:-9s; }
.hero-neon__particles span:nth-child(8)  { left:72%; top:64%; background:#ff00ff; box-shadow:0 0 12px #ff00ff; animation-delay:-10.5s; }
.hero-neon__particles span:nth-child(9)  { left:80%; top:22%; background:#ffff00; box-shadow:0 0 10px #ffff00; animation-delay:-2s; }
.hero-neon__particles span:nth-child(10) { left:86%; top:78%; background:#00f2fe; box-shadow:0 0 12px #00f2fe; animation-delay:-5s; }
.hero-neon__particles span:nth-child(11) { left:94%; top:42%; background:#ff00ff; box-shadow:0 0 12px #ff00ff; animation-delay:-8s; }
.hero-neon__particles span:nth-child(12) { left:38%; top:54%; background:#ffff00; box-shadow:0 0 10px #ffff00; animation-delay:-11s; }
@keyframes hnDrift {
  0%   { transform: translate(0,0)       scale(1);   opacity:.25; }
  50%  { transform: translate(18px,-24px) scale(1.4); opacity:1; }
  100% { transform: translate(0,0)       scale(1);   opacity:.25; }
}

/* Floating Wikey Dot — intense neon */
.hero-neon__dot {
  position: absolute;
  top: 2.2rem; right: 3rem;
  z-index: 4;
  filter:
    drop-shadow(0 0 14px #00f2fe)
    drop-shadow(0 0 28px rgba(0,242,254,.55))
    drop-shadow(0 0 50px rgba(255,0,255,.35));
  animation: hnDotFloat 6s ease-in-out infinite;
}
.hero-neon__dot .dot-mascot {
  width: 120px; height: 120px;
  background: radial-gradient(circle at 38% 32%, #e6fbff 0%, #20cfff 55%, #006fd6 100%);
  border: 2px solid #00f2fe;
  box-shadow:
    0 0 18px #00f2fe,
    0 0 38px rgba(0,242,254,.6),
    0 0 70px rgba(255,0,255,.35),
    inset 0 -10px 22px rgba(0,80,160,.55);
}
.hero-neon__dot .dot-glow {
  inset: -32px;
  background: radial-gradient(circle, rgba(0,242,254,.55) 0%, rgba(255,0,255,.2) 45%, transparent 70%);
  filter: blur(16px);
  animation: hnDotGlow 3s ease-in-out infinite;
}
.hero-neon__dot .dot-mascot::before,
.hero-neon__dot .dot-mascot::after {
  width: 15px; height: 19px; background: #fff;
  box-shadow: 0 0 8px rgba(255,255,255,.7);
}
.hero-neon__dot .dot-pupil-l,
.hero-neon__dot .dot-pupil-r { width: 7px; height: 9px; background: #001624; }
@keyframes hnDotFloat {
  0%,100% { transform: translateY(0)    rotate(-3deg); }
  50%     { transform: translateY(-12px) rotate(3deg); }
}
@keyframes hnDotGlow {
  0%,100% { opacity:.55; transform:scale(1); }
  50%     { opacity:1;   transform:scale(1.18); }
}

/* Hero copy */
.hero-neon__inner {
  position: relative; z-index: 5;
  max-width: 1040px; margin: 0 auto; text-align: center;
  padding-top: 1rem;
}
.hero-neon__eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .38rem 1rem; border-radius: 999px;
  color: #00f2fe;
  font-size: .74rem; letter-spacing: .26em; text-transform: uppercase; font-weight: 700;
  background: rgba(0,0,0,.55);
  border: 1px solid #00f2fe;
  box-shadow:
    0 0 10px rgba(0,242,254,.55),
    0 0 22px rgba(0,242,254,.35),
    inset 0 0 10px rgba(0,242,254,.18);
  text-shadow: 0 0 8px rgba(0,242,254,.8);
}
.hn-pulse {
  width: 7px; height: 7px; border-radius:50%;
  background: #00f2fe;
  box-shadow: 0 0 10px #00f2fe, 0 0 20px #00f2fe;
  animation: hnPulse 1.4s ease-in-out infinite;
}
@keyframes hnPulse {
  0%,100% { transform:scale(1);   opacity:1; }
  50%     { transform:scale(1.6); opacity:.4; }
}

/* MASSIVE neon headline */
.hero-neon__title {
  position: relative;
  font-family: 'Orbitron','Inter',sans-serif;
  font-weight: 900;
  font-size: clamp(2.6rem, 7vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 1.6rem auto 1.1rem;
  max-width: 14ch;
  background: linear-gradient(92deg, #00f2fe 0%, #ff00ff 50%, #ffff00 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.08);
  filter:
    drop-shadow(0 0 14px rgba(0,242,254,.55))
    drop-shadow(0 0 28px rgba(255,0,255,.4))
    drop-shadow(0 0 50px rgba(255,255,0,.18));
  animation: hnHue 9s linear infinite;
}
@keyframes hnHue { 0%{filter:drop-shadow(0 0 14px rgba(0,242,254,.55)) drop-shadow(0 0 28px rgba(255,0,255,.4)) hue-rotate(0deg);} 100%{filter:drop-shadow(0 0 14px rgba(0,242,254,.55)) drop-shadow(0 0 28px rgba(255,0,255,.4)) hue-rotate(360deg);} }
/* Subtle glitch ghost behind the title */
.hero-neon__title::before,
.hero-neon__title::after {
  content: attr(data-text);
  position: absolute; left: 0; right: 0; top: 0;
  margin: 0 auto; max-width: 14ch;
  background: none; -webkit-text-fill-color: initial;
  pointer-events: none;
}
.hero-neon__title::before { color: rgba(0,242,254,.35); transform: translate(-2px,-1px); mix-blend-mode: screen; filter: blur(.5px); }
.hero-neon__title::after  { color: rgba(255,0,255,.30); transform: translate(2px,1px);  mix-blend-mode: screen; filter: blur(.5px); }

.hero-neon__sub {
  font-size: clamp(1.05rem, 1.9vw, 1.4rem);
  color: #ffffff;
  font-weight: 500;
  max-width: 760px; margin: 0 auto .55rem;
  line-height: 1.5;
  text-shadow: 0 0 10px rgba(0,242,254,.45), 0 0 22px rgba(0,242,254,.18);
}
.hero-neon__tag {
  font-size: .95rem;
  color: rgba(255,255,255,.65);
  max-width: 600px; margin: .3rem auto 2rem;
  text-shadow: 0 0 8px rgba(255,0,255,.35);
}

.hero-neon__ctas {
  display: flex; gap: 1.1rem; justify-content: center; flex-wrap: wrap;
  margin-top: 1.8rem;
}
.btn-neon-primary {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 1rem 2rem;
  font-weight: 800; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase;
  color: #000;
  background: linear-gradient(135deg, #00f2fe 0%, #ff00ff 100%);
  border: 2px solid #00f2fe;
  border-radius: 6px;
  text-decoration: none;
  position: relative;
  box-shadow:
    0 0 14px #00f2fe,
    0 0 28px rgba(0,242,254,.6),
    0 0 50px rgba(255,0,255,.4),
    inset 0 0 12px rgba(255,255,255,.4);
  transition: transform .18s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-neon-primary:hover {
  transform: translateY(-3px) scale(1.03);
  filter: saturate(1.25);
  box-shadow:
    0 0 22px #00f2fe,
    0 0 44px rgba(0,242,254,.85),
    0 0 80px rgba(255,0,255,.65),
    inset 0 0 16px rgba(255,255,255,.6);
}
.bnp-ic { font-size: 1.2rem; text-shadow: 0 0 8px #ffff00; }
.btn-neon-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: 1rem 1.7rem;
  color: #00f2fe; text-decoration: none;
  background: rgba(0,0,0,.4);
  border: 2px solid #00f2fe;
  border-radius: 6px;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .95rem;
  box-shadow:
    0 0 10px rgba(0,242,254,.55),
    inset 0 0 10px rgba(0,242,254,.15);
  text-shadow: 0 0 8px rgba(0,242,254,.8);
  transition: color .18s ease, background .18s ease, box-shadow .25s ease, transform .18s ease;
}
.btn-neon-ghost:hover {
  color: #ffff00;
  border-color: #ffff00;
  background: rgba(255,255,0,.06);
  transform: translateY(-3px);
  box-shadow:
    0 0 16px #ffff00,
    0 0 32px rgba(255,255,0,.6),
    inset 0 0 12px rgba(255,255,0,.2);
  text-shadow: 0 0 10px #ffff00;
}

/* Tri-color neon chips */
.hero-neon__chips {
  display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap;
  margin-top: 2rem;
}
.hnchip {
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  padding: .4rem .9rem; border-radius: 999px;
  background: rgba(0,0,0,.55);
  border: 1px solid currentColor;
}
.hnchip--cyan    { color: #00f2fe; box-shadow: 0 0 10px rgba(0,242,254,.55), inset 0 0 8px rgba(0,242,254,.18); text-shadow: 0 0 6px rgba(0,242,254,.7); }
.hnchip--magenta { color: #ff00ff; box-shadow: 0 0 10px rgba(255,0,255,.55), inset 0 0 8px rgba(255,0,255,.18); text-shadow: 0 0 6px rgba(255,0,255,.7); }
.hnchip--yellow  { color: #ffff00; box-shadow: 0 0 10px rgba(255,255,0,.55), inset 0 0 8px rgba(255,255,0,.18); text-shadow: 0 0 6px rgba(255,255,0,.7); }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .hero-neon { padding: 4rem 1rem 4.5rem; min-height: 70vh; }
  .hero-neon__dot { top: 1.2rem; right: 1.2rem; }
  .hero-neon__dot .dot-mascot { width: 88px; height: 88px; }
  .hero-neon__dot .dot-mascot::before,
  .hero-neon__dot .dot-mascot::after { width: 12px; height: 15px; }
  .hero-neon__dot .dot-pupil-l,
  .hero-neon__dot .dot-pupil-r { width: 5px; height: 7px; }
}
@media (max-width: 560px) {
  .hero-neon { padding-top: 6.5rem; }
  .hero-neon__dot { top: .8rem; right: .8rem; }
  .hero-neon__dot .dot-mascot { width: 64px; height: 64px; }
  .hero-neon__dot .dot-glow { inset: -18px; }
  .hero-neon__ctas { flex-direction: column; align-items: stretch; }
  .btn-neon-primary, .btn-neon-ghost { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-neon__grid, .hero-neon__scan, .hero-neon__particles span,
  .hero-neon__dot, .hero-neon__dot .dot-glow,
  .hero-neon__title, .hn-pulse { animation: none !important; }
}

/* ===== 🔥 Global Scan Heatmap (spreads page) ===== */
.heatmap-section{
  position:relative;
  margin:1.6rem 0 1.4rem;
  padding:1.1rem 1.1rem 1rem;
  border-radius:18px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255,0,170,.10), transparent 55%),
    radial-gradient(120% 80% at 100% 100%, rgba(0,255,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(10,10,10,.78), rgba(10,10,10,.92));
  border:1px solid rgba(0,255,255,.35);
  box-shadow:
    0 0 0 1px rgba(255,0,170,.18) inset,
    0 0 28px rgba(0,255,255,.22),
    0 0 60px rgba(255,0,170,.18);
  overflow:hidden;
}
.heatmap-section::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  background:linear-gradient(135deg, #ff00aa, #00ffff 50%, #ffff00) border-box;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  padding:1px; pointer-events:none; opacity:.7;
}
.heatmap-section__head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:1rem; flex-wrap:wrap; margin-bottom:.8rem;
}
.heatmap-section__title{
  margin:0; font-size:1.35rem; letter-spacing:.02em;
  background:linear-gradient(90deg, #ff00aa, #00ffff 55%, #ffff00);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 18px rgba(0,255,255,.35);
}
.heatmap-section__sub{
  margin:.15rem 0 0; font-size:.85rem; color:rgba(255,255,255,.65);
}
.heatmap-toggle{
  display:inline-flex; gap:.25rem; padding:.25rem;
  border:1px solid rgba(0,255,255,.35); border-radius:999px;
  background:rgba(0,0,0,.55); backdrop-filter:blur(4px);
}
.heatmap-toggle__btn{
  appearance:none; border:0; background:transparent; color:rgba(255,255,255,.7);
  font:600 .78rem/1 inherit; letter-spacing:.04em; text-transform:uppercase;
  padding:.5rem .85rem; border-radius:999px; cursor:pointer;
  transition:color .15s ease, background .15s ease, box-shadow .15s ease;
}
.heatmap-toggle__btn:hover{ color:#fff; }
.heatmap-toggle__btn.is-active{
  color:#0a0a0a;
  background:linear-gradient(90deg, #00ffff, #ff00aa);
  box-shadow:0 0 14px rgba(0,255,255,.55), 0 0 22px rgba(255,0,170,.35);
}
.heatmap-map{
  width:100%; height:460px; min-height:420px;
  border-radius:14px; overflow:hidden;
  background:#000;
  box-shadow:
    inset 0 0 0 1px rgba(0,255,255,.25),
    0 0 24px rgba(0,255,255,.18),
    0 0 38px rgba(255,0,170,.18);
  transition:opacity .2s ease;
}
.heatmap-map.is-loading{ opacity:.55; }
.heatmap-section__foot{
  display:flex; justify-content:space-between; align-items:center;
  gap:1rem; flex-wrap:wrap; margin-top:.7rem;
}
.heatmap-stats{
  display:inline-flex; gap:.5rem; align-items:baseline;
  font-size:.92rem; color:rgba(255,255,255,.78);
}
.heatmap-stat strong{
  color:#00ffff; text-shadow:0 0 10px rgba(0,255,255,.6);
  font-size:1.05rem;
}
.heatmap-stat--dot{ color:rgba(255,255,255,.3); }
.heatmap-legend{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.heatmap-legend__bar{
  display:inline-block; width:120px; height:9px; border-radius:999px;
  background:linear-gradient(90deg, #ffff00 0%, #ff9900 35%, #ff00aa 65%, #00ffff 100%);
  box-shadow:0 0 12px rgba(0,255,255,.45), 0 0 18px rgba(255,0,170,.35);
}
.heatmap-hint{ margin:.55rem 0 0; font-size:.78rem; }
.heatmap-empty{
  margin:.8rem 0 0; padding:.7rem .9rem; border-radius:10px;
  background:rgba(255,255,255,.04); border:1px dashed rgba(0,255,255,.35);
  color:rgba(255,255,255,.75); font-size:.88rem; text-align:center;
}
@media (max-width:640px){
  .heatmap-map{ height:360px; min-height:320px; }
  .heatmap-section__title{ font-size:1.15rem; }
  .heatmap-legend__bar{ width:90px; }
}
@media (prefers-reduced-motion:reduce){
  .heatmap-map, .heatmap-toggle__btn{ transition:none; }
}

/* ===== Market — Neues Angebot/Gesuch (premium neon redesign) ===== */
.mnew-hero{ text-align:center; margin:1.2rem auto 1.5rem; max-width:780px; padding:0 1rem; }
.mnew-hero__eyebrow{
  display:inline-block; font:600 .72rem/1 inherit; letter-spacing:.32em; text-transform:uppercase;
  padding:.45rem .9rem; border-radius:999px;
  color:#00ffff; border:1px solid rgba(0,255,255,.45);
  background:rgba(0,255,255,.06); box-shadow:0 0 14px rgba(0,255,255,.3);
}
.mnew-hero__title{
  margin:.7rem 0 .4rem; font-size:clamp(1.7rem, 4vw, 2.6rem); line-height:1.08;
  background:linear-gradient(90deg, #ff00aa, #00ffff 55%, #ffff00);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 26px rgba(0,255,255,.4);
  letter-spacing:.01em;
}
.mnew-hero__sub{ margin:0; color:rgba(255,255,255,.65); font-size:.95rem; }

.mnew-form{ max-width:1280px; margin:0 auto; padding:0 1rem 3rem; }
.mnew-grid{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:1.6rem; align-items:start; }
.mnew-col--main{ display:flex; flex-direction:column; gap:1.4rem; min-width:0; }
.mnew-col--preview{ position:relative; }

.mnew-label{
  font:700 .78rem/1 inherit; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.7); margin-bottom:.5rem; display:block;
}
.mnew-label__hint{ color:rgba(255,255,255,.4); font-weight:500; letter-spacing:.02em; text-transform:none; margin-left:.4rem; }
.mnew-hint{ color:rgba(255,255,255,.5); font-size:.78rem; margin-top:.35rem; display:block; }
.mnew-hint--center{ text-align:center; }
.mnew-block{ display:block; }

/* ----- Segmented kind toggle ----- */
.mnew-segment{ border:0; padding:0; margin:0; }
.mnew-segment legend{ padding:0; }
.mnew-segment__track{
  position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0;
  padding:.35rem; border-radius:14px;
  background:rgba(10,10,10,.85);
  border:1px solid rgba(0,255,255,.35);
  box-shadow:inset 0 0 0 1px rgba(255,0,170,.18), 0 0 18px rgba(0,255,255,.18);
}
.mnew-segment__opt{
  position:relative; z-index:2; display:flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.9rem 1rem; cursor:pointer; border-radius:10px;
  color:rgba(255,255,255,.62); font-weight:600; letter-spacing:.02em;
  transition:color .18s ease;
}
.mnew-segment__opt input{ position:absolute; opacity:0; pointer-events:none; }
.mnew-segment__opt.is-active{ color:#0a0a0a; }
.mnew-segment__ic{ font-size:1.15rem; }
.mnew-segment__glider{
  position:absolute; top:.35rem; bottom:.35rem; left:.35rem; width:calc(50% - .35rem);
  border-radius:10px; z-index:1;
  background:linear-gradient(90deg, #00ffff, #00d1ff);
  box-shadow:0 0 14px rgba(0,255,255,.6), 0 0 24px rgba(0,255,255,.35);
  transition:transform .25s cubic-bezier(.4,.0,.2,1), background .25s ease, box-shadow .25s ease;
}
[data-kind-toggle][data-active="wanted"] .mnew-segment__glider{
  transform:translateX(100%);
  background:linear-gradient(90deg, #ff00aa, #ff4dd2);
  box-shadow:0 0 14px rgba(255,0,170,.6), 0 0 24px rgba(255,0,170,.35);
}

/* ----- Floating-label fields ----- */
.mnew-field{
  position:relative;
  background:rgba(10,10,10,.78);
  border:1px solid rgba(0,255,255,.22);
  border-radius:12px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.mnew-field:focus-within{
  border-color:#00ffff;
  box-shadow:0 0 0 3px rgba(0,255,255,.18), 0 0 22px rgba(0,255,255,.25);
}
.mnew-field input, .mnew-field textarea, .mnew-field select{
  width:100%; appearance:none; background:transparent; border:0; outline:0;
  color:#fff; font:inherit; font-size:1rem;
  padding:1.4rem .9rem .6rem; border-radius:12px;
}
.mnew-field textarea{ resize:vertical; min-height:120px; }
.mnew-field label{
  position:absolute; top:.95rem; left:.95rem; pointer-events:none;
  color:rgba(255,255,255,.55); font-size:.95rem;
  transition:transform .15s ease, color .15s ease, font-size .15s ease;
  transform-origin:left top; background:transparent; padding:0;
}
.mnew-field input:focus + label,
.mnew-field input:not(:placeholder-shown) + label,
.mnew-field textarea:focus + label,
.mnew-field textarea:not(:placeholder-shown) + label{
  transform:translateY(-.55rem) scale(.78); color:#00ffff;
}
.mnew-field--select{ }
.mnew-field--select::after{
  content:"▾"; position:absolute; right:.95rem; top:50%; transform:translateY(-50%);
  color:rgba(0,255,255,.65); pointer-events:none;
}
.mnew-field--select select{ padding-right:2rem; cursor:pointer; }
.mnew-field--select label{
  transform:translateY(-.55rem) scale(.78); color:rgba(0,255,255,.85);
}
.mnew-field--select option{ background:#0a0a0a; color:#fff; }

/* ----- Price ----- */
.mnew-row{ display:grid; gap:1rem; }
.mnew-row--3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.mnew-row--price{ grid-template-columns:minmax(0, 280px); }
.mnew-field--price input{ padding-right:2.2rem; font-weight:700; }
.mnew-price-suffix{
  position:absolute; right:.9rem; top:50%; transform:translateY(-25%);
  color:#ffff00; text-shadow:0 0 10px rgba(255,255,0,.7); font-size:1.1rem; pointer-events:none;
}
.mnew-chips{
  display:flex; flex-wrap:wrap; gap:.45rem; align-items:center;
  margin-top:.6rem;
}
.mnew-chips__lbl{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.55); margin-right:.3rem;
}
.mnew-chip{
  appearance:none; border:1px solid rgba(255,255,0,.4); background:rgba(255,255,0,.06);
  color:#ffff00; padding:.4rem .75rem; border-radius:999px; cursor:pointer;
  font:600 .82rem/1 inherit; letter-spacing:.02em;
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease, color .12s ease;
}
.mnew-chip:hover{ transform:translateY(-1px); box-shadow:0 0 12px rgba(255,255,0,.4); }
.mnew-chip.is-active{ background:#ffff00; color:#0a0a0a; box-shadow:0 0 16px rgba(255,255,0,.65); }

/* ----- Category icon grid ----- */
.mnew-cats{
  display:grid; gap:.55rem;
  grid-template-columns:repeat(auto-fill, minmax(110px, 1fr));
}
.mnew-cat{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:.3rem;
  padding:.85rem .4rem; cursor:pointer;
  background:rgba(10,10,10,.78); border:1px solid rgba(0,255,255,.2); border-radius:12px;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.mnew-cat input{ position:absolute; opacity:0; pointer-events:none; }
.mnew-cat__ic{ font-size:1.6rem; filter:drop-shadow(0 0 4px rgba(0,255,255,.4)); }
.mnew-cat__lbl{ font-size:.78rem; color:rgba(255,255,255,.7); text-align:center; }
.mnew-cat:hover{ transform:translateY(-2px); border-color:rgba(0,255,255,.5); box-shadow:0 0 14px rgba(0,255,255,.25); }
.mnew-cat.is-active{
  border-color:#ff00aa;
  background:linear-gradient(180deg, rgba(255,0,170,.12), rgba(0,255,255,.08));
  box-shadow:0 0 0 1px rgba(255,0,170,.6) inset, 0 0 18px rgba(255,0,170,.35), 0 0 26px rgba(0,255,255,.2);
}
.mnew-cat.is-active .mnew-cat__lbl{ color:#fff; }

/* ----- Map ----- */
.mnew-map{
  width:100%; height:320px; min-height:280px; margin-top:.6rem;
  border-radius:14px; overflow:hidden; background:#000;
  box-shadow:
    inset 0 0 0 1px rgba(0,255,255,.3),
    0 0 22px rgba(0,255,255,.2),
    0 0 32px rgba(255,0,170,.16);
}

/* ----- Drag & drop ----- */
.mnew-drop{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem;
  padding:2.2rem 1rem; text-align:center; cursor:pointer;
  border:2px dashed rgba(0,255,255,.4); border-radius:14px;
  background:radial-gradient(80% 100% at 50% 0%, rgba(0,255,255,.08), transparent 70%), rgba(10,10,10,.6);
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.mnew-drop:hover, .mnew-drop.is-drag{
  border-color:#ff00aa;
  box-shadow:0 0 0 3px rgba(255,0,170,.15) inset, 0 0 22px rgba(255,0,170,.3);
  background:radial-gradient(80% 100% at 50% 0%, rgba(255,0,170,.12), transparent 70%), rgba(10,10,10,.7);
}
.mnew-drop__ic{ font-size:2rem; filter:drop-shadow(0 0 8px rgba(0,255,255,.6)); }
.mnew-drop__title{ color:#fff; font-weight:600; }
.mnew-drop__sub{ color:rgba(255,255,255,.55); font-size:.8rem; }

.mnew-thumbs{
  display:grid; gap:.55rem; margin-top:.7rem;
  grid-template-columns:repeat(auto-fill, minmax(96px, 1fr));
}
.mnew-thumb{
  position:relative; aspect-ratio:1/1; border-radius:10px; overflow:hidden;
  border:1px solid rgba(0,255,255,.35); box-shadow:0 0 12px rgba(0,255,255,.18);
}
.mnew-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.mnew-thumb__rm{
  position:absolute; top:.25rem; right:.25rem; width:24px; height:24px; border-radius:50%;
  border:0; background:rgba(0,0,0,.7); color:#fff; font:700 1rem/1 inherit; cursor:pointer;
  box-shadow:0 0 8px rgba(255,0,170,.5);
}
.mnew-thumb__rm:hover{ background:#ff00aa; }

/* ----- Submit ----- */
.mnew-actions{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  margin-top:.6rem; flex-wrap:wrap;
}
.mnew-back{
  color:rgba(255,255,255,.6); text-decoration:none; font-size:.9rem;
  padding:.6rem .9rem; border-radius:10px;
  transition:color .12s ease, background .12s ease;
}
.mnew-back:hover{ color:#fff; background:rgba(255,255,255,.05); }
.mnew-submit{
  display:inline-flex; align-items:center; gap:.55rem;
  appearance:none; border:0; cursor:pointer;
  padding:1rem 1.8rem; border-radius:999px;
  font:700 1.02rem/1 inherit; letter-spacing:.04em; color:#0a0a0a;
  background:linear-gradient(90deg, #00ffff, #ff00aa);
  box-shadow:0 0 22px rgba(0,255,255,.55), 0 0 32px rgba(255,0,170,.4);
  transition:transform .12s ease, box-shadow .15s ease, filter .15s ease;
  position:relative; overflow:hidden;
}
.mnew-submit::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
  transform:translateX(-100%); transition:transform .6s ease;
}
.mnew-submit:hover{ transform:translateY(-2px) scale(1.02); filter:brightness(1.1); }
.mnew-submit:hover::before{ transform:translateX(100%); }
.mnew-submit__ic{ font-size:1.15rem; }

/* ----- Live preview card ----- */
.mnew-preview-sticky{ position:sticky; top:84px; display:flex; flex-direction:column; gap:.6rem; }
.mnew-preview__eyebrow{
  font:600 .72rem/1 inherit; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.mnew-preview-card{
  background:linear-gradient(180deg, rgba(10,10,10,.85), rgba(10,10,10,.95));
  border:1px solid rgba(0,255,255,.35); border-radius:16px; overflow:hidden;
  box-shadow:0 0 24px rgba(0,255,255,.18), 0 0 38px rgba(255,0,170,.18);
}
.mnew-preview-card[data-kind="wanted"]{
  border-color:rgba(255,0,170,.45);
  box-shadow:0 0 24px rgba(255,0,170,.28), 0 0 38px rgba(0,255,255,.18);
}
.mnew-preview__thumb{
  aspect-ratio:16/10; background:#000 center/cover no-repeat;
  border-bottom:1px solid rgba(0,255,255,.2);
  display:flex; align-items:center; justify-content:center;
}
.mnew-preview__placeholder{
  font-size:3rem; opacity:.5; filter:drop-shadow(0 0 10px rgba(0,255,255,.5));
}
.mnew-preview__body{ padding:.9rem 1rem 1.1rem; display:flex; flex-direction:column; gap:.5rem; }
.mnew-preview__badges{ display:flex; gap:.4rem; flex-wrap:wrap; }
.mnew-preview__kind, .mnew-preview__cat{
  font-size:.72rem; padding:.25rem .55rem; border-radius:999px; letter-spacing:.02em;
}
.mnew-preview__kind{
  color:#00ffff; background:rgba(0,255,255,.1); border:1px solid rgba(0,255,255,.4);
}
.mnew-preview-card[data-kind="wanted"] .mnew-preview__kind{
  color:#ff00aa; background:rgba(255,0,170,.1); border-color:rgba(255,0,170,.45);
}
.mnew-preview__cat{
  color:rgba(255,255,255,.8); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15);
}
.mnew-preview__title{ margin:.15rem 0 0; font-size:1.05rem; color:#fff; }
.mnew-preview__desc{ margin:0; font-size:.85rem; color:rgba(255,255,255,.65); line-height:1.4; }
.mnew-preview__foot{ display:flex; justify-content:space-between; align-items:baseline; margin-top:.3rem; gap:.5rem; flex-wrap:wrap; }
.mnew-preview__price{
  font-weight:700; font-size:1.15rem; color:#ffff00; text-shadow:0 0 10px rgba(255,255,0,.6);
}
.mnew-preview__loc{ font-size:.8rem; color:rgba(255,255,255,.6); }
.mnew-preview__hint{ font-size:.72rem; color:rgba(255,255,255,.45); margin:0; text-align:center; }

/* ----- Responsive ----- */
@media (max-width:980px){
  .mnew-grid{ grid-template-columns:1fr; }
  .mnew-col--preview{ order:-1; }
  .mnew-preview-sticky{ position:static; }
  .mnew-preview-card{ max-width:520px; margin:0 auto; }
}
@media (max-width:640px){
  .mnew-row--3{ grid-template-columns:1fr; }
  .mnew-cats{ grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); }
  .mnew-cat__ic{ font-size:1.35rem; }
  .mnew-segment__opt{ padding:.85rem .6rem; font-size:.95rem; }
  .mnew-map{ height:260px; min-height:240px; }
  .mnew-submit{ width:100%; justify-content:center; padding:1.05rem 1rem; }
  .mnew-actions{ flex-direction:column-reverse; }
  .mnew-back{ width:100%; text-align:center; }
}
@media (prefers-reduced-motion:reduce){
  .mnew-segment__glider, .mnew-chip, .mnew-cat, .mnew-submit{ transition:none; }
  .mnew-submit::before{ display:none; }
}

/* ===== Price chips — premium pulse polish (v2) ===== */
@keyframes mnewChipPulse {
  0%   { box-shadow: 0 0 14px rgba(255,255,0,.55), 0 0 28px rgba(0,255,255,.30), 0 0 0 0 rgba(0,255,255,.55); }
  50%  { box-shadow: 0 0 22px rgba(255,255,0,.85), 0 0 44px rgba(0,255,255,.55), 0 0 0 6px rgba(0,255,255,.00); }
  100% { box-shadow: 0 0 14px rgba(255,255,0,.55), 0 0 28px rgba(0,255,255,.30), 0 0 0 0 rgba(0,255,255,.00); }
}
.mnew-chip{
  /* Override base chip with richer interaction & gradient text */
  background:rgba(255,255,0,.05) !important;
  border:1px solid rgba(255,255,0,.45) !important;
  color:#ffff00 !important;
  position:relative; overflow:hidden;
  transition:transform .15s ease, background .2s ease, box-shadow .2s ease,
             color .2s ease, filter .2s ease, border-color .2s ease !important;
}
.mnew-chip::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform:translateX(-130%); transition:transform .6s ease;
}
.mnew-chip:hover{
  transform:translateY(-2px) scale(1.06);
  filter:brightness(1.15);
  border-color:#ffff00 !important;
  background:rgba(255,255,0,.12) !important;
  box-shadow:0 0 18px rgba(255,255,0,.55), 0 0 30px rgba(0,255,255,.25) !important;
}
.mnew-chip:hover::before{ transform:translateX(130%); }
.mnew-chip:active{ transform:translateY(0) scale(1.02); }
.mnew-chip.is-active{
  color:#0a0a0a !important;
  background:linear-gradient(95deg, #ffff00 0%, #ffdd00 35%, #00ffff 100%) !important;
  border-color:transparent !important;
  animation:mnewChipPulse 2.4s ease-in-out infinite;
}
.mnew-chip.is-active:hover{ filter:brightness(1.08); transform:translateY(-2px) scale(1.06); }
@media (prefers-reduced-motion:reduce){
  .mnew-chip, .mnew-chip::before, .mnew-chip.is-active{ animation:none !important; transition:none !important; }
  .mnew-chip:hover{ transform:none; }
}

/* ===== Category cards — slightly more premium (consistent with grid above) ===== */
.mnew-cat{
  aspect-ratio:1/1;
  justify-content:center;
  padding:.6rem .35rem !important;
}
.mnew-cat__ic{ font-size:1.85rem !important; }
.mnew-cat__lbl{ font-size:.75rem !important; line-height:1.15; }
.mnew-cat.is-active .mnew-cat__ic{
  filter:drop-shadow(0 0 8px rgba(255,0,170,.7)) drop-shadow(0 0 16px rgba(0,255,255,.4)) !important;
}

/* ===== Spread — premium neon form (/spread/new, /spread/<id>/edit) =====
   Reuses .mnew-* foundation (fields, drop, thumbs, submit, preview-card),
   adds spread-specific tweaks here. */

.snew-hero{ position:relative; }
.snew-hero__title{ background:linear-gradient(90deg, #00ffff, #ff00aa 55%, #ffff00); }
.snew-autosave{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.6rem;
                padding:.35rem .7rem; border-radius:999px;
                background:rgba(10,10,10,.7); border:1px solid rgba(0,255,255,.3);
                font-size:.78rem; color:rgba(255,255,255,.7); }
.snew-autosave .dot{ width:8px; height:8px; border-radius:50%; background:#666; box-shadow:0 0 6px rgba(255,255,255,.3); }
.snew-autosave[data-state="idle"]   .dot{ background:#888; }
.snew-autosave[data-state="saving"] .dot{ background:#ffff00; box-shadow:0 0 10px rgba(255,255,0,.7); }
.snew-autosave[data-state="saved"]  .dot{ background:#00ffaa; box-shadow:0 0 10px rgba(0,255,170,.7); }
.snew-autosave[data-state="error"]  .dot{ background:#ff00aa; box-shadow:0 0 10px rgba(255,0,170,.7); }

/* Editor block — wrap EasyMDE in our neon container */
.snew-editor-block .snew-editor-wrap{
  background:rgba(10,10,10,.78);
  border:1px solid rgba(0,255,255,.22);
  border-radius:12px;
  padding:.3rem;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.snew-editor-block .snew-editor-wrap:focus-within{
  border-color:#00ffff;
  box-shadow:0 0 0 3px rgba(0,255,255,.18), 0 0 22px rgba(0,255,255,.25);
}
/* EasyMDE overrides — dark neon look */
.snew-editor-wrap .EasyMDEContainer{ background:transparent; }
.snew-editor-wrap .editor-toolbar{
  background:rgba(0,0,0,.4) !important;
  border:1px solid rgba(0,255,255,.25) !important;
  border-radius:10px !important;
  opacity:1 !important;
}
.snew-editor-wrap .editor-toolbar button{
  color:rgba(0,255,255,.85) !important;
  border:0 !important;
  transition:background .12s ease, color .12s ease, text-shadow .12s ease;
}
.snew-editor-wrap .editor-toolbar button:hover{
  background:rgba(255,0,170,.18) !important;
  color:#ffff00 !important;
  text-shadow:0 0 8px rgba(255,255,0,.7);
}
.snew-editor-wrap .editor-toolbar button.active,
.snew-editor-wrap .editor-toolbar button:focus{
  background:rgba(0,255,255,.18) !important;
  color:#ffff00 !important;
}
.snew-editor-wrap .editor-toolbar i.separator{ border-left:1px solid rgba(0,255,255,.2) !important; }
.snew-editor-wrap .CodeMirror{
  background:transparent !important;
  color:#fff !important;
  border:0 !important;
  border-radius:8px !important;
  font-size:.95rem !important;
  min-height:280px !important;
  padding:.5rem .3rem !important;
}
.snew-editor-wrap .CodeMirror-cursor{ border-color:#00ffff !important; }
.snew-editor-wrap .CodeMirror-selected{ background:rgba(255,0,170,.25) !important; }
.snew-editor-wrap .CodeMirror-placeholder{ color:rgba(255,255,255,.35) !important; }
.snew-editor-wrap .editor-statusbar{
  color:rgba(255,255,255,.45) !important; font-size:.72rem !important;
  border-top:1px solid rgba(0,255,255,.12); padding-top:.35rem;
}
.snew-editor-wrap .editor-preview, .snew-editor-wrap .editor-preview-side{
  background:#0a0a0a !important; color:#fff !important;
  border:1px solid rgba(0,255,255,.25) !important; border-radius:8px !important;
}

/* External-links trio: 3 columns desktop, stacks on small screens */
.snew-links{ display:grid; gap:.7rem; grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width:780px){ .snew-links{ grid-template-columns:1fr; } }

/* Geo row: input + 2 buttons */
.snew-geo-row{
  display:flex; gap:.55rem; align-items:stretch; flex-wrap:wrap; margin-bottom:.6rem;
}
.snew-geo-btn{
  appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:0 1rem; border-radius:12px; font:600 .85rem/1 inherit; letter-spacing:.02em;
  white-space:nowrap;
  transition:transform .12s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.snew-geo-btn--cyan{
  background:linear-gradient(95deg, #00ffff, #00d1ff);
  color:#0a0a0a; border:0;
  box-shadow:0 0 14px rgba(0,255,255,.45);
}
.snew-geo-btn--cyan:hover{ transform:translateY(-1px); box-shadow:0 0 22px rgba(0,255,255,.65); filter:brightness(1.08); }
.snew-geo-btn--ghost{
  background:rgba(10,10,10,.7);
  color:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.18);
}
.snew-geo-btn--ghost:hover{
  background:rgba(255,0,170,.12); color:#fff;
  border-color:rgba(255,0,170,.5); box-shadow:0 0 14px rgba(255,0,170,.3);
}
@media (max-width:640px){
  .snew-geo-row{ flex-direction:column; }
  .snew-geo-btn{ width:100%; justify-content:center; padding:.75rem 1rem; }
}

.snew-map{ height:340px; min-height:300px; margin-top:0; }

.snew-geo-coords{
  display:flex; justify-content:space-between; gap:.6rem; flex-wrap:wrap;
  font-size:.78rem; color:rgba(255,255,255,.55); margin-top:.5rem;
}
.snew-geo-coords #geo-coords-label{
  color:#00ffff; text-shadow:0 0 6px rgba(0,255,255,.35);
  font-family:ui-monospace, "SF Mono", Menlo, monospace;
}
.snew-geo-coords__hint{ font-style:italic; }

/* Existing images (edit mode) */
.snew-existing__grid{
  list-style:none; margin:.5rem 0 0; padding:0;
  display:grid; gap:.5rem;
  grid-template-columns:repeat(auto-fill, minmax(96px, 1fr));
}
.snew-exi{ position:relative; }
.snew-exi label{ position:relative; display:block; cursor:pointer; }
.snew-exi img{
  width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
  border-radius:10px; border:1px solid rgba(0,255,255,.35);
  box-shadow:0 0 10px rgba(0,255,255,.18);
}
.snew-exi input[type="checkbox"]{ position:absolute; opacity:0; pointer-events:none; }
.snew-exi__overlay{
  position:absolute; inset:0; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0); transition:background .15s ease;
}
.snew-exi__check, .snew-exi__remove{
  font-size:.72rem; font-weight:700; padding:.3rem .6rem; border-radius:999px;
  letter-spacing:.02em; backdrop-filter:blur(4px);
}
.snew-exi__check{
  color:#00ffaa; background:rgba(0,255,170,.15); border:1px solid rgba(0,255,170,.5);
  text-shadow:0 0 6px rgba(0,255,170,.6);
}
.snew-exi__remove{ display:none; color:#ff00aa; background:rgba(255,0,170,.15); border:1px solid rgba(255,0,170,.6); }
.snew-exi input[type="checkbox"]:not(:checked) ~ .snew-exi__overlay{
  background:rgba(0,0,0,.65);
}
.snew-exi input[type="checkbox"]:not(:checked) ~ .snew-exi__overlay .snew-exi__check{ display:none; }
.snew-exi input[type="checkbox"]:not(:checked) ~ .snew-exi__overlay .snew-exi__remove{ display:inline-block; }
.snew-exi input[type="checkbox"]:not(:checked) ~ img{
  filter:grayscale(.9) opacity(.5);
  border-color:rgba(255,0,170,.5);
}

/* Spread preview card chips */
.snew-preview-card{ border-color:rgba(0,255,255,.4); }
.snew-preview__chips{ display:flex; gap:.3rem; margin-top:.4rem; flex-wrap:wrap; }
.snew-preview__chip{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:8px; font-size:.95rem;
  border:1px solid rgba(0,255,255,.4); background:rgba(0,255,255,.08);
  box-shadow:0 0 8px rgba(0,255,255,.2);
}
.snew-preview__chip.is-yt{ border-color:rgba(255,0,170,.55); background:rgba(255,0,170,.1);
  box-shadow:0 0 10px rgba(255,0,170,.3); }
.snew-preview__chip.is-au{ border-color:rgba(255,255,0,.55); background:rgba(255,255,0,.1);
  box-shadow:0 0 10px rgba(255,255,0,.3); }
.snew-preview__chip.is-lk{ border-color:rgba(0,255,170,.55); background:rgba(0,255,170,.1);
  box-shadow:0 0 10px rgba(0,255,170,.3); }

/* ===== Spread hero — floating neon particles (CSS-only) =====
   Two pseudo layers with repeating radial-gradient dots, slowly drifting in
   opposite directions. Pointer-events:none, low opacity, contained to hero. */
.snew-hero{ position:relative; isolation:isolate; overflow:hidden;
            padding-top:1.6rem; padding-bottom:1.6rem; }
.snew-hero::before, .snew-hero::after{
  content:""; position:absolute; inset:-40% -10%;
  pointer-events:none; z-index:-1;
  opacity:.55; mix-blend-mode:screen;
  background-repeat:repeat;
}
.snew-hero::before{
  /* Cyan dots — small, sparse */
  background-image:
    radial-gradient(circle, rgba(0,255,255,.55) 0, rgba(0,255,255,.0) 60%),
    radial-gradient(circle, rgba(0,255,255,.35) 0, rgba(0,255,255,.0) 60%);
  background-size: 3px 3px, 2px 2px;
  background-position: 12px 30px, 80px 70px;
  filter:blur(.4px) drop-shadow(0 0 4px rgba(0,255,255,.6));
  /* Build a starfield via repeating bg + huge tile */
  background:
    radial-gradient(1.5px 1.5px at 12% 22%,  rgba(0,255,255,.85), transparent 60%),
    radial-gradient(1.2px 1.2px at 28% 68%,  rgba(0,255,255,.65), transparent 60%),
    radial-gradient(2px 2px   at 45% 18%,    rgba(0,255,255,.7),  transparent 60%),
    radial-gradient(1px 1px   at 62% 82%,    rgba(0,255,255,.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 36%,  rgba(0,255,255,.8),  transparent 60%),
    radial-gradient(1.2px 1.2px at 92% 58%,  rgba(0,255,255,.6),  transparent 60%),
    radial-gradient(1px 1px   at 8%  78%,    rgba(0,255,255,.45), transparent 60%),
    radial-gradient(1.8px 1.8px at 36% 44%,  rgba(0,255,255,.75), transparent 60%);
  animation: snewDrift1 38s linear infinite;
}
.snew-hero::after{
  background:
    radial-gradient(1.6px 1.6px at 18% 80%,  rgba(255,0,170,.7),  transparent 60%),
    radial-gradient(1px 1px   at 33% 12%,    rgba(255,0,170,.55), transparent 60%),
    radial-gradient(2px 2px   at 52% 56%,    rgba(255,0,170,.8),  transparent 60%),
    radial-gradient(1.2px 1.2px at 70% 24%,  rgba(255,0,170,.6),  transparent 60%),
    radial-gradient(1.4px 1.4px at 84% 70%,  rgba(255,0,170,.75), transparent 60%),
    radial-gradient(1px 1px   at 6%  40%,    rgba(255,0,170,.5),  transparent 60%),
    radial-gradient(1.8px 1.8px at 48% 90%,  rgba(255,0,170,.7),  transparent 60%);
  opacity:.45;
  animation: snewDrift2 52s linear infinite;
}
@keyframes snewDrift1 {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(-3%, 2%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes snewDrift2 {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(2.5%, -2%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@media (max-width:640px){
  .snew-hero::before, .snew-hero::after{ opacity:.32; }
}
@media (prefers-reduced-motion:reduce){
  .snew-hero::before, .snew-hero::after{ animation:none !important; }
}

/* =====================================================================
   SHERO — Emotional Spread Detail Hero (votes/loved spotlight)
   ===================================================================== */
.shero{
  position:relative;
  margin: 1.4rem auto 1.2rem;
  padding: 2rem 1.8rem 2.2rem;
  border-radius: 26px;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(255,0,170,.10), transparent 60%),
    radial-gradient(120% 90% at 80% 100%, rgba(0,255,255,.10), transparent 60%),
    linear-gradient(180deg, #0d0612 0%, #07060a 60%, #050308 100%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,0,170,.08) inset,
    0 0 60px rgba(0,255,255,.08) inset;
  isolation:isolate;
  overflow:hidden;
}
.shero__bg{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.shero__grid{
  position:absolute; inset:-2px;
  background-image:
    linear-gradient(rgba(0,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,0,170,.06) 1px, transparent 1px);
  background-size: 44px 44px, 44px 44px;
  mask-image: radial-gradient(120% 80% at 50% 30%, #000 35%, transparent 75%);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 30%, #000 35%, transparent 75%);
  opacity:.5;
}
.shero__orb{
  position:absolute; width:280px; height:280px; border-radius:50%;
  filter: blur(60px); opacity:.55; mix-blend-mode:screen;
  animation: sheroOrb 28s ease-in-out infinite;
}
.shero__orb--c{ background:#00ffff; top:-90px; left:-60px; }
.shero__orb--m{ background:#ff00aa; bottom:-110px; right:-60px; animation-delay:-9s; animation-duration:34s; }
.shero__orb--y{ background:#ffff00; top:40%;     left:48%;   width:180px; height:180px; opacity:.22; animation-delay:-15s; animation-duration:42s; }
@keyframes sheroOrb {
  0%   { transform: translate3d(0,0,0)   scale(1); }
  50%  { transform: translate3d(30px,-20px,0) scale(1.08); }
  100% { transform: translate3d(0,0,0)   scale(1); }
}
@media (prefers-reduced-motion: reduce){ .shero__orb{ animation:none !important; } }

.shero__inner{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns: 1.25fr 1fr 0.85fr;
  gap: 2rem;
  align-items:center;
}

/* ---- LEFT column ---- */
.shero__left{ display:flex; flex-direction:column; gap:1rem; min-width:0; }
.shero__eyebrow-row{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.shero__title{
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.05;
  margin:0;
  font-weight: 800;
  letter-spacing: -.01em;
  background: linear-gradient(92deg, #fff 0%, #ffff66 22%, #ff00aa 55%, #00ffff 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-shadow: 0 0 30px rgba(255,0,170,.15);
}
.shero__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.55rem;
  color: rgba(255,255,255,.72); font-size: .95rem;
}
.shero__author{
  color:#fff; text-decoration:none; font-weight:700;
  padding:.18rem .55rem; border-radius:999px;
  background: linear-gradient(135deg, rgba(255,0,170,.25), rgba(0,255,255,.18));
  border:1px solid rgba(255,255,255,.12);
  transition: box-shadow .18s ease, transform .18s ease;
}
.shero__author:hover{ box-shadow:0 0 18px rgba(255,0,170,.5); transform:translateY(-1px); }
.shero__author-at{ color:#ff00aa; }
.shero__sep{ opacity:.4; }
.shero__loc{
  padding:.18rem .55rem; border-radius:999px;
  background: rgba(0,255,255,.10); border:1px solid rgba(0,255,255,.28);
  color:#9be8ff; font-weight:600;
}
.shero__origin{ font-size:.85rem; }

/* ---- The HUGE votes counter (emotional anchor) ---- */
.shero__votes{
  position:relative;
  display:flex; align-items:center; gap:1rem;
  padding: 1rem 1.2rem;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,0,170,.12), rgba(0,255,255,.10));
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
  transition: box-shadow .35s ease, transform .25s ease;
}
.shero__votes.is-empty{
  background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-color: rgba(255,255,255,.10);
  filter: saturate(.6);
}
.shero__votes.is-pulsing{
  box-shadow:
    0 0 0 1px rgba(255,0,170,.35) inset,
    0 0 40px rgba(255,0,170,.18),
    0 0 70px rgba(0,255,255,.10);
  animation: sheroPulse 3.2s ease-in-out infinite;
}
@keyframes sheroPulse {
  0%,100% { box-shadow: 0 0 0 1px rgba(255,0,170,.35) inset, 0 0 40px rgba(255,0,170,.18), 0 0 70px rgba(0,255,255,.10); }
  50%     { box-shadow: 0 0 0 1px rgba(0,255,255,.45) inset, 0 0 60px rgba(0,255,255,.30), 0 0 110px rgba(255,0,170,.18); }
}
@media (prefers-reduced-motion: reduce){ .shero__votes.is-pulsing{ animation:none; } }
.shero__votes.is-bumped{ transform:scale(1.03); }
.shero__votes-icon{
  font-size: 2.6rem; line-height:1;
  color: #ff00aa;
  text-shadow: 0 0 18px rgba(255,0,170,.65), 0 0 32px rgba(255,0,170,.35);
}
.shero__votes.is-empty .shero__votes-icon{ color: rgba(255,255,255,.45); text-shadow:none; }
.shero__votes-body{ display:flex; flex-direction:column; line-height:1; min-width:0; }
.shero__votes-num{
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 900;
  background: linear-gradient(180deg, #fff 0%, #ff00aa 70%, #aa00ff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 0 24px rgba(255,0,170,.4);
}
.shero__votes.is-empty .shero__votes-num{
  background:none; color: rgba(255,255,255,.45); text-shadow:none;
}
.shero__votes-lbl{
  margin-top:.25rem;
  font-size:.85rem; letter-spacing:.06em; text-transform:uppercase;
  color: rgba(255,255,255,.7);
}
.shero__votes-spark{
  position:absolute; right:-30%; top:-50%; width:140%; height:200%;
  background: radial-gradient(circle at 50% 50%, rgba(255,0,170,.25), transparent 55%);
  pointer-events:none; mix-blend-mode:screen;
}
.shero__votes.is-empty .shero__votes-spark{ opacity:0; }

/* ---- Compact secondary stats row ---- */
.shero__stats{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:.6rem;
}
.shero__stat{
  display:flex; align-items:center; gap:.45rem;
  padding:.55rem .75rem; border-radius:12px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  font-size:.85rem; color: rgba(255,255,255,.85);
}
.shero__stat-icon{ font-size:1.05rem; }
.shero__stat-num{ font-weight:800; color:#fff; }
.shero__stat-lbl{ opacity:.7; }

/* ---- CENTER — animated heart + state messaging ---- */
.shero__center{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.8rem; text-align:center;
  min-height: 280px;
}
.shero__halo{
  position:absolute; width:340px; height:340px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,0,170,.35) 0%, rgba(255,0,170,0) 60%);
  filter: blur(20px);
  z-index:-1; pointer-events:none;
  animation: sheroHalo 6s ease-in-out infinite;
}
.shero--virgin .shero__halo{
  background: radial-gradient(circle, rgba(255,255,0,.40) 0%, rgba(255,170,0,.15) 35%, rgba(255,170,0,0) 65%);
}
@keyframes sheroHalo {
  0%,100% { transform: scale(1);   opacity:.85; }
  50%     { transform: scale(1.08); opacity:1;  }
}
@media (prefers-reduced-motion: reduce){ .shero__halo{ animation:none; } }
.shero__heart{
  --shero-grow: 1;
  position:relative;
  width: clamp(140px, 18vw, 200px);
  height: clamp(140px, 18vw, 200px);
  transform: scale(var(--shero-grow));
  transition: transform .6s cubic-bezier(.22,1,.36,1);
  filter: drop-shadow(0 0 24px rgba(255,0,170,.55))
          drop-shadow(0 0 48px rgba(0,255,255,.30));
  animation: sheroHeartFloat 5s ease-in-out infinite;
}
.shero--virgin .shero__heart{
  filter: drop-shadow(0 0 28px rgba(255,255,0,.70))
          drop-shadow(0 0 55px rgba(255,200,0,.40));
}
.shero__heart.is-bumped{ animation: sheroHeartBump .7s cubic-bezier(.22,1,.36,1); }
@keyframes sheroHeartFloat {
  0%,100% { transform: scale(var(--shero-grow)) translateY(0); }
  50%     { transform: scale(calc(var(--shero-grow) * 1.04)) translateY(-6px); }
}
@keyframes sheroHeartBump {
  0%   { transform: scale(var(--shero-grow)); }
  35%  { transform: scale(calc(var(--shero-grow) * 1.28)); }
  100% { transform: scale(var(--shero-grow)); }
}
@media (prefers-reduced-motion: reduce){
  .shero__heart{ animation:none; transition:none; }
}
.shero__heart-svg{ width:100%; height:100%; display:block; }
.shero--virgin .shero__heart-svg path{
  fill: url(#sheroHeartG);
  filter: hue-rotate(-50deg) saturate(1.4);
}
.shero__heart-n{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 900;
  color:#fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.6), 0 0 24px rgba(255,255,255,.5);
  pointer-events:none;
}
.shero__heart-n[data-empty="1"]{
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  color:#ffff88;
  text-shadow: 0 0 18px rgba(255,255,0,.8), 0 0 36px rgba(255,170,0,.6);
}

/* State banners — only one visible at a time based on shero modifier */
.shero__state{
  display:none;
  flex-direction:column; align-items:center; gap:.35rem;
  padding:.85rem 1.1rem;
  border-radius: 14px;
  max-width: 320px;
  font-size:.95rem;
  text-align:center;
}
.shero--virgin .shero__state--virgin{ display:flex; }
.shero--loved  .shero__state--loved{ display:flex; }
.shero__state--virgin{
  background: linear-gradient(135deg, rgba(255,255,0,.14), rgba(255,170,0,.10));
  border:1px solid rgba(255,255,0,.35);
  box-shadow: 0 0 24px rgba(255,255,0,.18), 0 0 50px rgba(255,170,0,.10);
  color:#fff5b3;
}
.shero__state--loved{
  background: linear-gradient(135deg, rgba(255,0,170,.14), rgba(0,255,255,.10));
  border:1px solid rgba(255,0,170,.35);
  box-shadow: 0 0 24px rgba(255,0,170,.20);
  color:#ffd4ec;
}
.shero__state-flash{ font-size:1.4rem; }
.shero__state-main{ font-weight:800; color:#fff; font-size:1.05rem; }
.shero__state-eve{
  font-weight:900;
  background: linear-gradient(90deg, #ffff66, #ff8800);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-size:1.15rem;
}
.shero__state-people{ opacity:.75; font-weight:500; margin-left:.15rem; }
.shero__state-sub{ margin:.2rem 0 0; font-size:.85rem; opacity:.85; }
.shero__state--loved .shero__state-sub strong{
  background: linear-gradient(90deg, #ffff66, #ff00aa);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-weight:900;
}

/* When the spread has 0 claims, paint the whole hero with a golden border */
.shero--virgin{
  border:1px solid rgba(255,200,0,.30);
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,200,0,.18) inset,
    0 0 60px rgba(255,200,0,.10) inset,
    0 0 70px rgba(255,170,0,.18);
}

/* ---- RIGHT — QR + Claim CTA ---- */
.shero__right{
  display:flex; flex-direction:column; align-items:center; gap:1rem;
}
.shero__qr{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
  padding: .8rem .8rem .9rem;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%);
  border:1px solid rgba(0,255,255,.4);
  box-shadow:
    0 0 0 2px rgba(0,255,255,.25),
    0 0 24px rgba(0,255,255,.30),
    0 14px 30px rgba(0,0,0,.5);
}
.shero__qr img{
  display:block; width: clamp(150px, 14vw, 180px); height:auto;
  image-rendering: pixelated;
}
.shero__qr-code{
  font-family: ui-monospace, "JetBrains Mono", "Fira Code", monospace;
  font-size:.78rem; color:#0a0a0a; font-weight:700;
  background:#fff; padding:.1rem .5rem; border-radius:6px;
  letter-spacing:.04em;
}
.shero__qr-hint{
  position:absolute; bottom:-1.5rem; left:50%; transform:translateX(-50%);
  white-space:nowrap; font-size:.72rem;
  color: rgba(0,255,255,.7); text-shadow:0 0 6px rgba(0,255,255,.5);
}
.shero__claim-form{ width:100%; max-width: 300px; margin-top:1.2rem; text-align:center; }
.shero__claim-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%;
  padding: 1rem 1.4rem;
  border:none; border-radius: 14px;
  font-size: 1.05rem; font-weight: 900; letter-spacing:.02em;
  color:#0a0a0a; cursor:pointer;
  background: linear-gradient(135deg, #ffff66 0%, #ff00aa 55%, #00ffff 100%);
  background-size: 200% 200%;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.25) inset,
    0 12px 30px rgba(255,0,170,.45),
    0 0 40px rgba(0,255,255,.20);
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
  transition: transform .15s ease, box-shadow .25s ease, background-position .4s ease, filter .2s ease;
  position:relative; overflow:hidden;
}
.shero__claim-btn::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s ease;
}
.shero__claim-btn:hover:not(:disabled){
  transform: translateY(-2px) scale(1.02);
  background-position: 100% 0%;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.5) inset,
    0 18px 40px rgba(255,0,170,.6),
    0 0 60px rgba(0,255,255,.35);
}
.shero__claim-btn:hover::before{ transform: translateX(120%); }
.shero__claim-btn:active{ transform: translateY(0) scale(.99); }
.shero__claim-btn.is-claimed, .shero__claim-btn.claimed, .shero__claim-btn:disabled{
  background: linear-gradient(135deg, rgba(0,255,255,.20), rgba(255,0,170,.20));
  color:#9be8ff; cursor:not-allowed;
  box-shadow: 0 0 0 1px rgba(0,255,255,.30) inset, 0 0 14px rgba(0,255,255,.20);
  text-shadow:none;
  filter: saturate(.85);
}
.shero__claim-btn--login{ text-decoration:none; }
.shero__claim-sub{
  margin: .55rem 0 0; font-size:.78rem; color: rgba(255,255,255,.6);
}
.shero--virgin .shero__claim-sub{
  color:#ffff88; text-shadow: 0 0 6px rgba(255,255,0,.4); font-weight:700;
}

/* ---- Counter "bump" animation (claimed-count) ---- */
[data-claimed-count].is-bumped{
  animation: sheroBump .6s cubic-bezier(.22,1,.36,1);
}
@keyframes sheroBump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce){ [data-claimed-count].is-bumped{ animation:none; } }

/* ---- Responsive ---- */
@media (max-width: 1100px){
  .shero__inner{ grid-template-columns: 1fr 0.9fr; }
  .shero__right{ grid-column: 1 / -1; flex-direction:row; justify-content:center; gap:2rem; flex-wrap:wrap; }
  .shero__claim-form{ margin-top:0; align-self:center; }
}
@media (max-width: 760px){
  .shero{ padding: 1.4rem 1rem 1.6rem; border-radius:18px; }
  .shero__inner{ grid-template-columns: 1fr; gap:1.4rem; }
  .shero__center{ order:-1; min-height:auto; padding-top:.5rem; }
  .shero__heart{ width:140px; height:140px; }
  .shero__halo{ width:240px; height:240px; }
  .shero__title{ font-size: 2rem; }
  .shero__votes{ padding:.8rem .9rem; }
  .shero__votes-num{ font-size: 2.4rem; }
  .shero__right{ flex-direction:column; gap:1rem; }
  .shero__claim-form{ max-width:none; }
}

/* =====================================================================
   WNEW — Premium Neon Wallet (hero / stats / sources / log)
   ===================================================================== */
.wnew-hero{
  position:relative;
  margin: 1.4rem auto 1.4rem;
  padding: 2.2rem 1.8rem;
  border-radius: 26px;
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(255,255,0,.08), transparent 60%),
    radial-gradient(120% 90% at 82% 100%, rgba(0,255,255,.10), transparent 60%),
    linear-gradient(180deg, #0c0810 0%, #07060a 60%, #050308 100%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,0,.08) inset,
    0 0 60px rgba(255,0,170,.10) inset;
  overflow:hidden; isolation:isolate;
}
.wnew-hero__bg{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.wnew-hero__grid{
  position:absolute; inset:-2px;
  background-image:
    linear-gradient(rgba(255,255,0,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,255,.06) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(120% 80% at 50% 30%, #000 35%, transparent 75%);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 30%, #000 35%, transparent 75%);
  opacity:.55;
}
.wnew-hero__orb{
  position:absolute; width:300px; height:300px; border-radius:50%;
  filter: blur(70px); opacity:.55; mix-blend-mode:screen;
  animation: wnewOrb 30s ease-in-out infinite;
}
.wnew-hero__orb--c{ background:#00ffff; top:-80px;  left:-60px; }
.wnew-hero__orb--m{ background:#ff00aa; bottom:-100px; right:-50px; animation-delay:-10s; animation-duration:36s; }
.wnew-hero__orb--y{ background:#ffff00; top:42%; left:40%; width:200px; height:200px; opacity:.25; animation-delay:-18s; animation-duration:44s; }
@keyframes wnewOrb {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50%     { transform: translate3d(28px,-22px,0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce){ .wnew-hero__orb{ animation:none !important; } }

.wnew-hero__inner{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items:center;
}
.wnew-hero__left{ display:flex; flex-direction:column; gap:1rem; min-width:0; }
.wnew-eyebrow{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color: rgba(255,255,255,.7);
  padding:.25rem .65rem; border-radius:999px;
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10);
  width: max-content;
}
.wnew-eyebrow .pulse{
  width:8px; height:8px; border-radius:50%; background:#ffff66;
  box-shadow:0 0 10px #ffff66; animation: wnewPulse 1.8s ease-in-out infinite;
}
@keyframes wnewPulse { 0%,100%{opacity:1;} 50%{opacity:.35;} }
.wnew-hero__title{
  margin:0; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight:800;
  background: linear-gradient(92deg, #fff 0%, #ffff66 25%, #ff00aa 60%, #00ffff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:-.01em;
}
.wnew-hero__sub{ margin:0; color: rgba(255,255,255,.7); font-size:.95rem; }

/* The BIG balance */
.wnew-balance{
  display:inline-flex; align-items:baseline; gap:.6rem;
  padding: .9rem 1.4rem;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,0,.12), rgba(255,0,170,.10), rgba(0,255,255,.10));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    0 0 0 1px rgba(255,255,0,.20) inset,
    0 0 50px rgba(255,255,0,.18),
    0 0 90px rgba(255,0,170,.12);
  animation: wnewBalGlow 4s ease-in-out infinite;
  max-width: max-content;
}
@keyframes wnewBalGlow {
  0%,100% { box-shadow: 0 0 0 1px rgba(255,255,0,.20) inset, 0 0 50px rgba(255,255,0,.18), 0 0 90px rgba(255,0,170,.12); }
  50%     { box-shadow: 0 0 0 1px rgba(0,255,255,.30) inset, 0 0 70px rgba(0,255,255,.30), 0 0 130px rgba(255,0,170,.20); }
}
@media (prefers-reduced-motion: reduce){ .wnew-balance{ animation:none; } }
.wnew-balance__bolt{
  font-size: 2.4rem;
  color:#ffff66; text-shadow:0 0 20px rgba(255,255,0,.7);
}
.wnew-balance__num{
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: clamp(3rem, 7vw, 5.2rem);
  font-weight: 900; line-height:1;
  background: linear-gradient(180deg, #fff 0%, #ffff66 45%, #ff8800 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 0 28px rgba(255,255,0,.35);
  font-variant-numeric: tabular-nums;
}
.wnew-balance__unit{
  font-size:.95rem; letter-spacing:.14em; text-transform:uppercase;
  color: rgba(255,255,255,.65); font-weight:700;
}

/* Earned/spent/week split chips */
.wnew-balance__split{
  display:flex; flex-wrap:wrap; gap:.55rem;
}
.wnew-balance__chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .8rem; border-radius: 12px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  font-size:.85rem;
}
.wnew-balance__chip--pos{ border-color: rgba(0,255,255,.30); background: rgba(0,255,255,.06); }
.wnew-balance__chip--neg{ border-color: rgba(255,0,170,.30); background: rgba(255,0,170,.06); }
.wnew-balance__chip--week{ border-color: rgba(255,255,0,.30); background: rgba(255,255,0,.06); }
.wnew-balance__chip-num{ font-weight:900; color:#fff; font-variant-numeric: tabular-nums; }
.wnew-balance__chip-lbl{ opacity:.75; }
.wnew-balance__chip-icon{ font-size:1rem; }

/* Quick action buttons */
.wnew-quick{
  display:flex; flex-wrap:wrap; gap:.6rem;
  margin-top: .4rem;
}
.wnew-quick__btn{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.7rem 1.1rem; border-radius:12px;
  text-decoration:none; font-weight:700; font-size:.95rem;
  color:#fff;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.wnew-quick__btn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 18px rgba(0,255,255,.25);
}
.wnew-quick__btn--primary{
  background: linear-gradient(135deg, #ffff66 0%, #ff00aa 55%, #00ffff 100%);
  color:#0a0a0a; border:none; font-weight:900;
  box-shadow: 0 10px 24px rgba(255,0,170,.35), 0 0 30px rgba(0,255,255,.20);
}
.wnew-quick__btn--primary:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 32px rgba(255,0,170,.55), 0 0 50px rgba(0,255,255,.30);
}

/* Dot mascot on the right */
.wnew-hero__right{ display:flex; align-items:center; justify-content:center; }
.wnew-dot{
  width: 180px; height: 180px;
  display:flex; align-items:center; justify-content:center;
  filter: drop-shadow(0 0 24px rgba(0,255,255,.5)) drop-shadow(0 0 48px rgba(255,0,170,.35));
}
.wnew-dot .dot-mascot{ width: 100%; height: 100%; }

/* ===== Stats grid ===== */
.wnew-stats{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1rem;
  margin: 0 0 1.6rem;
}
.wnew-stat{
  position:relative;
  padding: 1.1rem 1.2rem;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);
  transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease;
  overflow:hidden;
}
.wnew-stat::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: radial-gradient(120% 80% at 50% 0%, var(--wnew-accent, rgba(255,255,255,.10)), transparent 60%);
  opacity:.55; pointer-events:none;
}
.wnew-stat:hover{ transform: translateY(-3px); }
.wnew-stat--cyan   { --wnew-accent: rgba(0,255,255,.22); }
.wnew-stat--cyan:hover    { border-color: rgba(0,255,255,.50); box-shadow: 0 0 24px rgba(0,255,255,.25); }
.wnew-stat--magenta{ --wnew-accent: rgba(255,0,170,.22); }
.wnew-stat--magenta:hover { border-color: rgba(255,0,170,.50); box-shadow: 0 0 24px rgba(255,0,170,.25); }
.wnew-stat--yellow { --wnew-accent: rgba(255,255,0,.22); }
.wnew-stat--yellow:hover  { border-color: rgba(255,255,0,.50); box-shadow: 0 0 24px rgba(255,255,0,.25); }
.wnew-stat--violet { --wnew-accent: rgba(170,0,255,.22); }
.wnew-stat--violet:hover  { border-color: rgba(170,0,255,.50); box-shadow: 0 0 24px rgba(170,0,255,.25); }
.wnew-stat__icon{
  font-size: 1.3rem; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  width: 36px; height: 36px; border-radius:10px;
  background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10);
  margin-bottom:.6rem;
}
.wnew-stat--cyan    .wnew-stat__icon{ color:#9be8ff; text-shadow:0 0 10px rgba(0,255,255,.6); }
.wnew-stat--magenta .wnew-stat__icon{ color:#ffb3e0; text-shadow:0 0 10px rgba(255,0,170,.6); }
.wnew-stat--yellow  .wnew-stat__icon{ color:#fff7a0; text-shadow:0 0 10px rgba(255,255,0,.6); }
.wnew-stat--violet  .wnew-stat__icon{ color:#d2b3ff; text-shadow:0 0 10px rgba(170,0,255,.6); }
.wnew-stat__num{
  font-family:'Orbitron', system-ui, sans-serif;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 900;
  color:#fff;
  font-variant-numeric: tabular-nums;
  letter-spacing:-.01em;
}
.wnew-stat--cyan    .wnew-stat__num{ color:#e6ffff; text-shadow: 0 0 16px rgba(0,255,255,.45); }
.wnew-stat--magenta .wnew-stat__num{ color:#ffe6f3; text-shadow: 0 0 16px rgba(255,0,170,.45); }
.wnew-stat--yellow  .wnew-stat__num{ color:#fffce0; text-shadow: 0 0 16px rgba(255,255,0,.45); }
.wnew-stat--violet  .wnew-stat__num{ color:#f0e0ff; text-shadow: 0 0 16px rgba(170,0,255,.45); }
.wnew-stat__lbl{
  margin-top:.25rem;
  font-size:.78rem; letter-spacing:.10em; text-transform:uppercase;
  color: rgba(255,255,255,.65);
}
.wnew-stat__sub{
  display:block; margin-top:.15rem;
  font-size:.7rem; opacity:.7; letter-spacing:.04em; text-transform:none;
}

/* ===== Card wrapper ===== */
.wnew-card{
  margin: 0 0 1.6rem;
  padding: 1.4rem 1.6rem 1.6rem;
  border-radius: 20px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,0,170,.05), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.07);
  box-shadow: 0 14px 30px rgba(0,0,0,.4);
}
.wnew-card__head{ margin-bottom:1rem; }
.wnew-card__title{
  margin:0; font-size:1.2rem; font-weight:800; color:#fff;
}
.wnew-card__sub{ margin:.25rem 0 0; color: rgba(255,255,255,.6); font-size:.88rem; }

/* ===== Sources breakdown ===== */
.wnew-sources__grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .9rem;
}
.wnew-source{
  padding: .9rem 1rem;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.wnew-source:hover{
  transform: translateY(-2px);
  border-color: rgba(0,255,255,.30);
  box-shadow: 0 0 18px rgba(0,255,255,.18);
}
.wnew-source.is-neg:hover{
  border-color: rgba(255,0,170,.30);
  box-shadow: 0 0 18px rgba(255,0,170,.18);
}
.wnew-source__head{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  margin-bottom:.5rem;
}
.wnew-source__name{ font-weight:700; color:#fff; font-size:.95rem; }
.wnew-source__amt{ font-weight:900; font-variant-numeric: tabular-nums; }
.wnew-source__amt.pos{ color:#9be8ff; text-shadow:0 0 8px rgba(0,255,255,.5); }
.wnew-source__amt.neg{ color:#ffb3e0; text-shadow:0 0 8px rgba(255,0,170,.5); }
.wnew-source__bar{
  height:8px; border-radius:6px;
  background: rgba(255,255,255,.06);
  overflow:hidden;
}
.wnew-source__fill{
  height:100%; border-radius:6px;
  background: linear-gradient(90deg, #00ffff, #ff00aa);
  box-shadow: 0 0 12px rgba(255,0,170,.5);
  transition: width .6s ease;
}
.wnew-source.is-neg .wnew-source__fill{
  background: linear-gradient(90deg, #ff00aa, #aa00ff);
}
.wnew-source__meta{
  display:flex; justify-content:space-between;
  margin-top:.4rem;
  font-size:.78rem; color: rgba(255,255,255,.65);
}

/* ===== Transaction timeline ===== */
.wnew-tx{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem; }
.wnew-tx__row{
  display:grid;
  grid-template-columns: 44px 1fr auto;
  align-items:center;
  gap: 1rem;
  padding: .8rem 1rem;
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.06);
  border-left-width: 3px;
  transition: background .15s ease, border-color .2s ease, transform .12s ease;
}
.wnew-tx__row:hover{
  background: rgba(255,255,255,.05);
  transform: translateX(2px);
}
.wnew-tx__row.is-pos{ border-left-color: #00ffff; }
.wnew-tx__row.is-pos:hover{ border-color: rgba(0,255,255,.30); border-left-color:#00ffff; }
.wnew-tx__row.is-neg{ border-left-color: #ff00aa; }
.wnew-tx__row.is-neg:hover{ border-color: rgba(255,0,170,.30); border-left-color:#ff00aa; }

.wnew-tx__icon{
  width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:1.15rem;
}
.wnew-tx__row.is-pos .wnew-tx__icon{
  color:#0a0a0a;
  background: linear-gradient(135deg, #00ffff, #66ffff);
  box-shadow: 0 0 14px rgba(0,255,255,.5);
}
.wnew-tx__row.is-neg .wnew-tx__icon{
  color:#fff;
  background: linear-gradient(135deg, #ff00aa, #aa00ff);
  box-shadow: 0 0 14px rgba(255,0,170,.5);
}
.wnew-tx__body{ min-width:0; }
.wnew-tx__head{
  display:flex; align-items:center; gap:.55rem; flex-wrap:wrap;
}
.wnew-tx__name{ font-weight:700; color:#fff; font-size:.95rem; }
.wnew-tx__mult{
  display:inline-flex; align-items:center;
  padding:.1rem .45rem; border-radius:6px;
  font-size:.75rem; font-weight:700;
  color:#fff7a0; background: rgba(255,255,0,.10);
  border:1px solid rgba(255,255,0,.30);
  cursor:help;
}
.wnew-tx__note{ margin-top:.2rem; font-size:.82rem; color: rgba(255,255,255,.65); }
.wnew-tx__meta{
  display:flex; gap:.7rem; margin-top:.25rem;
  font-size:.75rem; color: rgba(255,255,255,.5);
}
.wnew-tx__amt{
  font-family:'Orbitron', system-ui, sans-serif;
  font-weight:900; font-size:1.1rem;
  font-variant-numeric: tabular-nums;
  white-space:nowrap;
}
.wnew-tx__row.is-pos .wnew-tx__amt{ color:#9be8ff; text-shadow:0 0 8px rgba(0,255,255,.5); }
.wnew-tx__row.is-neg .wnew-tx__amt{ color:#ffb3e0; text-shadow:0 0 8px rgba(255,0,170,.5); }
.wnew-tx__amt-u{
  display:block; font-size:.65rem; letter-spacing:.14em;
  text-transform:uppercase; opacity:.6; font-weight:600; margin-top:.1rem;
  text-align:right;
}

/* Empty state */
.wnew-empty{
  text-align:center; padding: 2rem 1rem;
  color: rgba(255,255,255,.7);
}
.wnew-empty__icon{
  display:block; font-size: 3rem; margin-bottom:.6rem;
  color:#ffff66; text-shadow:0 0 18px rgba(255,255,0,.5);
}
.wnew-empty p{ margin: .4rem 0 1.2rem; font-size:1rem; }

/* ===== Responsive ===== */
@media (max-width: 1100px){
  .wnew-stats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .wnew-hero__inner{ grid-template-columns: 1fr; }
  .wnew-hero__right{ display:none; }
}
@media (max-width: 700px){
  .wnew-hero{ padding: 1.4rem 1.1rem; border-radius:18px; }
  .wnew-hero__title{ font-size:1.5rem; }
  .wnew-balance{ padding:.7rem 1rem; }
  .wnew-balance__bolt{ font-size:1.8rem; }
  .wnew-quick__btn{ flex:1 0 calc(50% - .6rem); justify-content:center; }
  .wnew-card{ padding:1.1rem 1rem; border-radius:14px; }
  .wnew-tx__row{ grid-template-columns: 36px 1fr; padding:.7rem .8rem; gap:.7rem; }
  .wnew-tx__icon{ width:32px; height:32px; font-size:1rem; }
  .wnew-tx__amt{ grid-column: 2 / -1; text-align:left; font-size:1rem; margin-top:.2rem; }
  .wnew-tx__amt-u{ display:inline; text-align:left; margin-left:.3rem; }
}

/* =====================================================================
   RNEW / LNEW / BNEW — Requests, Leaderboard, Badges premium neon
   ===================================================================== */

/* ---------- Shared hero shell (reuses wnew patterns) ---------- */
.rnew-hero, .lnew-hero, .bnew-hero{
  position:relative;
  margin: 1.4rem auto;
  padding: 2rem 1.8rem;
  border-radius: 24px;
  background: linear-gradient(180deg, #0c0810 0%, #07060a 60%, #050308 100%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  overflow:hidden; isolation:isolate;
}
.rnew-hero__bg, .lnew-hero__bg, .bnew-hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.rnew-hero__grid, .lnew-hero__grid, .bnew-hero__grid{
  position:absolute; inset:-2px;
  background-image:
    linear-gradient(rgba(255,255,0,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,255,.06) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(120% 80% at 50% 30%, #000 35%, transparent 75%);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 30%, #000 35%, transparent 75%);
  opacity:.5;
}
.rnew-hero__orb, .lnew-hero__orb, .bnew-hero__orb{
  position:absolute; border-radius:50%;
  filter: blur(70px); opacity:.45; mix-blend-mode:screen;
  animation: wnewOrb 30s ease-in-out infinite;
}
.rnew-hero__orb--m{ width:300px; height:300px; background:#ff00aa; top:-80px; right:-60px; }
.rnew-hero__orb--c{ width:260px; height:260px; background:#00ffff; bottom:-100px; left:-40px; animation-delay:-10s; }
.lnew-hero__orb--y{ width:340px; height:340px; background:#ffff00; top:-100px; left:-60px; opacity:.30; }
.lnew-hero__orb--m{ width:260px; height:260px; background:#ff00aa; bottom:-80px; right:-40px; animation-delay:-12s; }
.bnew-hero__orb--y{ width:300px; height:300px; background:#ffff00; top:-80px; right:-60px; opacity:.35; }
.bnew-hero__orb--m{ width:240px; height:240px; background:#ff00aa; bottom:-80px; left:-30px; animation-delay:-10s; opacity:.30; }
.bnew-hero__orb--c{ width:200px; height:200px; background:#00ffff; top:40%; right:30%; animation-delay:-16s; opacity:.20; }

.rnew-hero__inner, .lnew-hero__inner, .bnew-hero__inner{
  position:relative; z-index:1;
  display:grid;
  gap: 1.6rem;
  align-items:center;
}
.rnew-hero__inner, .bnew-hero__inner{ grid-template-columns: 1fr auto; }

/* ===== REQUESTS HERO ===== */
.rnew-hero__left{ display:flex; flex-direction:column; gap:.9rem; min-width:0; }
.rnew-hero__title{
  margin:0;
  font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight:800;
  background: linear-gradient(92deg, #fff 0%, #ff00aa 45%, #ffff66 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:-.01em;
}
.rnew-hero__sub{ margin:0; color: rgba(255,255,255,.7); font-size:.95rem; }
.rnew-hero__stats{ display:flex; gap:.7rem; }
.rnew-stat{
  text-align:center; padding: 1rem 1.3rem; border-radius:16px;
  background: rgba(255,255,255,.04); border:1px solid rgba(255,0,170,.30);
  box-shadow: 0 0 18px rgba(255,0,170,.15);
  min-width: 110px;
}
.rnew-stat--c{ border-color: rgba(0,255,255,.30); box-shadow: 0 0 18px rgba(0,255,255,.15); }
.rnew-stat__n{
  font-family:'Orbitron', system-ui, sans-serif; font-weight:900;
  font-size: 2rem; color:#fff; line-height:1;
  text-shadow: 0 0 14px rgba(255,0,170,.5);
}
.rnew-stat--c .rnew-stat__n{ text-shadow: 0 0 14px rgba(0,255,255,.5); }
.rnew-stat__l{ margin-top:.4rem; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color: rgba(255,255,255,.65); }

/* ----- Sort bar ----- */
.rnew-sortbar{
  display:flex; justify-content:space-between; align-items:center; gap:.6rem;
  margin: 0 0 1rem;
}
.rnew-sortbar__group{ display:flex; gap:.4rem; flex-wrap:wrap; }
.rnew-sort{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.5rem 1rem; border-radius:999px;
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.75); font-size:.88rem; font-weight:600;
  text-decoration:none;
  transition: border-color .2s, background .2s, color .2s, box-shadow .2s;
}
.rnew-sort:hover{ background: rgba(255,255,255,.07); color:#fff; }
.rnew-sort.is-active{
  background: linear-gradient(135deg, rgba(255,0,170,.20), rgba(0,255,255,.15));
  border-color: rgba(255,0,170,.50); color:#fff;
  box-shadow: 0 0 18px rgba(255,0,170,.30);
}

/* ----- Hot strip ----- */
.rnew-hot__grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:.8rem;
}
.rnew-hot__card{
  position:relative;
  padding:1rem 1.2rem;
  border-radius:14px;
  background: linear-gradient(135deg, rgba(255,68,0,.10), rgba(255,0,170,.08));
  border:1px solid rgba(255,68,0,.35);
  box-shadow: 0 0 16px rgba(255,68,0,.18);
  text-decoration:none; color:#fff;
  transition: transform .15s, box-shadow .2s, border-color .2s;
}
.rnew-hot__card:hover{
  transform: translateY(-3px);
  border-color: rgba(255,68,0,.65);
  box-shadow: 0 0 28px rgba(255,68,0,.40);
}
.rnew-hot__rank{
  font-family:'Orbitron', system-ui, sans-serif; font-weight:900;
  color:#ffb060; text-shadow:0 0 10px rgba(255,68,0,.6);
  font-size:.85rem; letter-spacing:.06em;
}
.rnew-hot__title{ margin:.3rem 0 .5rem; font-weight:700; font-size:1.02rem; line-height:1.25; }
.rnew-hot__meta{ display:flex; gap:.7rem; font-size:.8rem; color: rgba(255,255,255,.7); }
.rnew-hot__score{ color:#ffff66; text-shadow:0 0 8px rgba(255,255,0,.5); font-weight:800; }

/* ----- Request list ----- */
.rnew-list{ display:flex; flex-direction:column; gap:.75rem; }
.rnew-req{
  position:relative;
  display:grid;
  grid-template-columns: 60px 1fr auto;
  gap: 1rem;
  align-items:center;
  padding: 1rem 1.2rem;
  border-radius: 14px;
  background: rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.07);
  transition: border-color .2s, background .15s, transform .12s, box-shadow .2s;
}
.rnew-req:hover{
  border-color: rgba(0,255,255,.30);
  background: rgba(255,255,255,.04);
  transform: translateX(2px);
  box-shadow: 0 0 18px rgba(0,255,255,.12);
}
.rnew-req.is-hot{
  border-color: rgba(255,68,0,.35);
  box-shadow: 0 0 16px rgba(255,68,0,.15);
}
.rnew-req.is-hot:hover{
  border-color: rgba(255,68,0,.60);
  box-shadow: 0 0 26px rgba(255,68,0,.30);
}
.rnew-req__vote{
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
}
.rnew-req__voteform{ display:contents; }
.rnew-vote{
  width:34px; height:30px; display:flex; align-items:center; justify-content:center;
  border-radius:8px; border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04); color: rgba(255,255,255,.65);
  cursor:pointer; font-weight:900; font-size:1rem;
  transition: color .15s, transform .12s, box-shadow .2s, border-color .2s;
}
.rnew-vote:hover{ transform: scale(1.1); }
.rnew-vote--up:hover, .rnew-vote--up.is-active{
  color:#0a0a0a; background: linear-gradient(135deg, #00ffff, #66ffff);
  border-color: #00ffff; box-shadow: 0 0 14px rgba(0,255,255,.50);
}
.rnew-vote--dn:hover, .rnew-vote--dn.is-active{
  color:#fff; background: linear-gradient(135deg, #ff00aa, #aa00ff);
  border-color: #ff00aa; box-shadow: 0 0 14px rgba(255,0,170,.50);
}
.rnew-vote__score{
  font-family:'Orbitron', system-ui, sans-serif;
  font-weight:900; font-size: 1.05rem;
  color:#ffff66; text-shadow: 0 0 10px rgba(255,255,0,.45);
  font-variant-numeric: tabular-nums;
}
.rnew-req__body{ min-width:0; }
.rnew-req__title{
  display:block; font-weight:800; font-size:1.05rem; color:#fff;
  text-decoration:none; line-height:1.3;
  transition: color .15s, text-shadow .2s;
}
.rnew-req__title:hover{ color:#9be8ff; text-shadow: 0 0 10px rgba(0,255,255,.5); }
.rnew-req__meta{ display:flex; gap:.5rem; flex-wrap:wrap; margin:.35rem 0 .35rem; align-items:center; }
.rnew-pill{
  display:inline-flex; align-items:center;
  padding:.15rem .55rem; border-radius:999px;
  font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.75);
}
.rnew-pill--pending  { color:#ffe080; border-color: rgba(255,224,128,.35); background: rgba(255,224,128,.08); }
.rnew-pill--approved { color:#9be8ff; border-color: rgba(0,255,255,.35); background: rgba(0,255,255,.08); }
.rnew-pill--rejected { color:#ffb3e0; border-color: rgba(255,0,170,.35); background: rgba(255,0,170,.08); }
.rnew-pill--in_production{ color:#d2b3ff; border-color: rgba(170,0,255,.35); background: rgba(170,0,255,.08); }
.rnew-pill--distributed { color:#9bffb6; border-color: rgba(0,255,128,.35); background: rgba(0,255,128,.08); }
.rnew-pill--cat{ color:#ffff66; border-color: rgba(255,255,0,.25); }
.rnew-req__author, .rnew-req__date{ font-size:.78rem; color: rgba(255,255,255,.55); }
.rnew-req__desc{
  margin:.2rem 0 0; color: rgba(255,255,255,.75);
  font-size:.92rem; line-height:1.4;
}
.rnew-req__like{ display:flex; align-items:center; }

/* ----- Empty ----- */
.rnew-empty{
  text-align:center; padding: 3rem 1rem; margin: 1.5rem 0;
  border-radius: 20px;
  background: rgba(255,255,255,.02);
  border:1px dashed rgba(255,255,255,.10);
}
.rnew-empty__icon{
  font-size: 3.5rem; margin-bottom:.6rem;
  filter: drop-shadow(0 0 18px rgba(255,255,0,.5));
}
.rnew-empty__title{
  margin: .4rem 0 .4rem; font-size: 1.3rem; color:#fff;
}
.rnew-empty__sub{ color: rgba(255,255,255,.65); margin: 0 auto 1.3rem; max-width: 480px; }

/* =====================================================================
   LNEW — Leaderboard
   ===================================================================== */
.lnew-hero__inner{ grid-template-columns: 1fr; }
.lnew-hero__title{
  margin: 0;
  font-size: clamp(1.8rem, 3.4vw, 2.4rem); font-weight:800;
  background: linear-gradient(92deg, #ffff66 0%, #ff00aa 50%, #00ffff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lnew-hero__sub{ margin:0; color: rgba(255,255,255,.7); }

/* Tabs (big) */
.lnew-tabs{ display:flex; gap:.5rem; margin-top:.6rem; flex-wrap:wrap; }
.lnew-tab{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.8rem 1.4rem;
  border-radius:14px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.85);
  font-weight:700; font-size:1rem; text-decoration:none;
  transition: border-color .2s, box-shadow .2s, transform .12s, background .2s;
}
.lnew-tab:hover{ transform: translateY(-2px); background: rgba(255,255,255,.07); }
.lnew-tab.is-active{
  background: linear-gradient(135deg, rgba(255,255,0,.18), rgba(255,0,170,.15));
  border-color: rgba(255,255,0,.55);
  color:#fff;
  box-shadow: 0 0 22px rgba(255,255,0,.30);
}

/* Period chips */
.lnew-periods{
  display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin-top:.7rem;
}
.lnew-periods__lbl{
  font-size:.78rem; letter-spacing:.10em; text-transform:uppercase;
  color: rgba(255,255,255,.55); margin-right:.2rem;
}
.lnew-chip{
  padding:.4rem .8rem; border-radius:999px;
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.75); font-size:.82rem; font-weight:600;
  text-decoration:none;
  transition: border-color .2s, background .2s, color .2s, box-shadow .2s;
}
.lnew-chip:hover{ background: rgba(255,255,255,.07); color:#fff; }
.lnew-chip.is-active{
  border-color: rgba(0,255,255,.50); color:#9be8ff;
  background: rgba(0,255,255,.08);
  box-shadow: 0 0 12px rgba(0,255,255,.25);
}

/* Podium — top-3 */
.lnew-podium{
  display:grid; grid-template-columns: 1fr 1.15fr 1fr;
  gap: 1rem; align-items:end;
  margin: 0 0 1.4rem;
}
.lnew-podium__card{
  position:relative;
  padding: 1.2rem 1.2rem 1.3rem;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.10);
  text-decoration:none; color:#fff;
  transition: transform .15s, box-shadow .25s, border-color .2s;
  opacity:0; transform: translateY(14px);
  animation: lnewIn .55s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: var(--lnew-delay, 0s);
}
@keyframes lnewIn { to { opacity:1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .lnew-podium__card, .lnew-row{ animation:none !important; opacity:1; transform:none; }
}
.lnew-podium__card:hover{ transform: translateY(-4px); }
.lnew-podium__card--1{
  padding-top: 2.3rem;
  background: linear-gradient(180deg, rgba(255,255,0,.14), rgba(255,0,170,.08));
  border-color: rgba(255,255,0,.55);
  box-shadow:
    0 0 0 1px rgba(255,255,0,.20) inset,
    0 0 36px rgba(255,255,0,.30),
    0 20px 50px rgba(255,0,170,.18);
}
.lnew-podium__card--1:hover{ box-shadow: 0 0 50px rgba(255,255,0,.45), 0 24px 60px rgba(255,0,170,.30); }
.lnew-podium__card--2{
  border-color: rgba(200,200,220,.40);
  background: linear-gradient(180deg, rgba(200,200,220,.10), rgba(255,255,255,.02));
  box-shadow: 0 0 22px rgba(200,200,220,.20);
}
.lnew-podium__card--3{
  border-color: rgba(255,138,80,.45);
  background: linear-gradient(180deg, rgba(255,138,80,.12), rgba(255,0,170,.05));
  box-shadow: 0 0 22px rgba(255,138,80,.22);
}
.lnew-podium__crown{
  position:absolute; top:-26px; left:50%; transform: translateX(-50%);
  font-size: 2.4rem;
  filter: drop-shadow(0 0 14px rgba(255,255,0,.7));
  animation: lnewCrown 3s ease-in-out infinite;
}
@keyframes lnewCrown {
  0%,100% { transform: translateX(-50%) translateY(0) rotate(-4deg); }
  50%     { transform: translateX(-50%) translateY(-4px) rotate(4deg); }
}
.lnew-podium__rank{
  font-family:'Orbitron', system-ui, sans-serif; font-weight:900;
  font-size: 1.1rem; letter-spacing:.05em;
  color:#ffff66; text-shadow: 0 0 10px rgba(255,255,0,.5);
}
.lnew-podium__card--2 .lnew-podium__rank{ color:#e8e8f0; text-shadow: 0 0 10px rgba(220,220,240,.5); }
.lnew-podium__card--3 .lnew-podium__rank{ color:#ffb080; text-shadow: 0 0 10px rgba(255,138,80,.5); }
.lnew-podium__title{
  margin:.6rem 0 .3rem; font-size:1.15rem; font-weight:800;
  line-height:1.25;
}
.lnew-podium__card--1 .lnew-podium__title{ font-size:1.3rem; }
.lnew-podium__author{ color: rgba(255,255,255,.7); font-size:.88rem; margin-bottom:.7rem; }
.lnew-podium__metrics{ display:flex; gap:.7rem; flex-wrap:wrap; font-size:.85rem; color: rgba(255,255,255,.8); }

/* Rank list (below podium) */
.lnew-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.45rem; }
.lnew-row{
  display:grid; grid-template-columns: 60px 1fr auto;
  align-items:center; gap:1rem;
  padding: .75rem 1rem;
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.06);
  transition: background .15s, border-color .2s, transform .12s, box-shadow .2s;
  opacity:0; transform: translateX(-8px);
  animation: lnewRowIn .4s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: var(--lnew-delay, 0s);
}
@keyframes lnewRowIn { to { opacity:1; transform: translateX(0); } }
.lnew-row:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(0,255,255,.30);
  transform: translateX(2px);
  box-shadow: 0 0 14px rgba(0,255,255,.15);
}
.lnew-row__rank{
  font-family:'Orbitron', system-ui, sans-serif; font-weight:900;
  font-size: 1.1rem; color:#ffff66; text-shadow:0 0 8px rgba(255,255,0,.45);
}
.lnew-row__title{
  font-weight:700; color:#fff; text-decoration:none; font-size:1rem;
}
a.lnew-row__title:hover{ color:#9be8ff; text-shadow:0 0 8px rgba(0,255,255,.5); }
.lnew-row__meta{ font-size:.78rem; color: rgba(255,255,255,.6); margin-top:.15rem; }
.lnew-row__metrics{ display:flex; gap:.5rem; flex-wrap:wrap; }
.lnew-metric{
  display:inline-flex; align-items:center; padding:.25rem .55rem;
  border-radius:8px; font-size:.82rem; font-weight:700;
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10);
  font-variant-numeric: tabular-nums;
}
.lnew-metric--c{ color:#9be8ff; border-color: rgba(0,255,255,.25); }
.lnew-metric--m{ color:#ffb3e0; border-color: rgba(255,0,170,.25); }
.lnew-metric--y{ color:#fff7a0; border-color: rgba(255,255,0,.25); }

/* =====================================================================
   BNEW — Badges
   ===================================================================== */
.bnew-hero__inner{ grid-template-columns: 1fr auto; align-items:center; }
.bnew-hero__left{ display:flex; flex-direction:column; gap:.9rem; min-width:0; }
.bnew-hero__title{
  margin:0; font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight:800;
  background: linear-gradient(92deg, #fff 0%, #ffff66 40%, #ff00aa 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.bnew-hero__sub{ margin:0; color: rgba(255,255,255,.7); }
.bnew-trophy{
  font-size: 5rem;
  filter: drop-shadow(0 0 24px rgba(255,255,0,.6)) drop-shadow(0 0 50px rgba(255,0,170,.3));
  animation: bnewTrophy 4s ease-in-out infinite;
}
@keyframes bnewTrophy {
  0%,100% { transform: rotate(-4deg) scale(1); }
  50%     { transform: rotate(4deg) scale(1.05); }
}
@media (prefers-reduced-motion: reduce){
  .bnew-trophy, .lnew-podium__crown{ animation:none !important; }
}

/* Hero progress */
.bnew-progress{ margin-top:.4rem; max-width: 480px; }
.bnew-progress__label{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:.85rem; color: rgba(255,255,255,.75);
}
.bnew-progress__count{
  font-family:'Orbitron', system-ui, sans-serif; font-weight:900;
  color:#ffff66; text-shadow: 0 0 10px rgba(255,255,0,.45);
  font-variant-numeric: tabular-nums;
}
.bnew-progress__bar{
  margin-top:.4rem; height: 12px; border-radius:8px;
  background: rgba(255,255,255,.06); overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.bnew-progress__fill{
  height:100%; border-radius:8px;
  background: linear-gradient(90deg, #ffff66, #ff00aa, #00ffff);
  box-shadow: 0 0 14px rgba(255,0,170,.50);
  transition: width .8s ease;
}
.bnew-progress__pct{ margin-top:.3rem; font-size:.78rem; color: rgba(255,255,255,.55); text-align:right; }

/* Recent timeline */
.bnew-timeline{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem; }
.bnew-timeline__row{
  display:grid; grid-template-columns: 48px 1fr auto;
  align-items:center; gap:1rem;
  padding:.7rem .9rem;
  border-radius:12px;
  background: rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.06);
  border-left: 3px solid #ffff66;
}
.bnew-timeline__icon{
  width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem;
  background: linear-gradient(135deg, rgba(255,255,0,.20), rgba(255,0,170,.15));
  border:1px solid rgba(255,255,0,.40);
  box-shadow: 0 0 14px rgba(255,255,0,.30);
}
.bnew-timeline__name{ font-weight:700; color:#fff; }
.bnew-timeline__desc{ font-size:.82rem; color: rgba(255,255,255,.65); margin-top:.1rem; }
.bnew-timeline__date{ font-size:.78rem; color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums; }

/* Next-up */
.bnew-nextup__grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .9rem;
}
.bnew-nextup__card{
  display:grid; grid-template-columns: 56px 1fr; gap:.9rem;
  padding:.9rem 1rem; border-radius:14px;
  background: rgba(255,255,255,.025);
  border:1px solid rgba(255,0,170,.20);
  transition: border-color .2s, box-shadow .2s, transform .12s;
}
.bnew-nextup__card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,0,170,.50);
  box-shadow: 0 0 18px rgba(255,0,170,.18);
}
.bnew-nextup__icon{
  width:48px; height:48px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size: 1.8rem;
  background: rgba(255,0,170,.10); border:1px solid rgba(255,0,170,.30);
  filter: grayscale(.35);
}
.bnew-nextup__body{ min-width:0; }
.bnew-nextup__name{ font-weight:700; color:#fff; }
.bnew-nextup__desc{ font-size:.8rem; color: rgba(255,255,255,.65); margin-top:.1rem; }
.bnew-nextup__bar{
  margin-top:.5rem; height:6px; border-radius:6px;
  background: rgba(255,255,255,.06); overflow:hidden;
}
.bnew-nextup__fill{
  height:100%; border-radius:6px;
  background: linear-gradient(90deg, #ff00aa, #ffff66);
  box-shadow: 0 0 10px rgba(255,0,170,.45);
  transition: width .8s ease;
}
.bnew-nextup__meta{
  display:flex; justify-content:space-between;
  margin-top:.35rem; font-size:.75rem; color: rgba(255,255,255,.65);
}

/* All-badges grid */
.bnew-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
.bnew-card{
  position:relative;
  padding: 1.2rem 1rem 1rem;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.07);
  text-align:center;
  transition: transform .18s, box-shadow .25s, border-color .2s;
  overflow:hidden;
}
.bnew-card__glow{
  position:absolute; inset:0; border-radius:inherit;
  background: radial-gradient(120% 80% at 50% 0%, var(--bnew-accent, transparent), transparent 60%);
  opacity:.7; pointer-events:none; z-index:0;
}
.bnew-card > *:not(.bnew-card__glow){ position:relative; z-index:1; }
.bnew-card.is-unlocked{
  --bnew-accent: rgba(255,255,0,.25);
  border-color: rgba(255,255,0,.45);
  box-shadow: 0 0 22px rgba(255,255,0,.20);
}
.bnew-card.is-unlocked:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,0,.75);
  box-shadow: 0 0 36px rgba(255,255,0,.45), 0 14px 30px rgba(255,0,170,.20);
}
.bnew-card.is-locked{
  --bnew-accent: rgba(255,255,255,.04);
  opacity:.7;
  filter: grayscale(.5);
}
.bnew-card.is-locked:hover{
  opacity:.95;
  border-color: rgba(0,255,255,.30);
  transform: translateY(-2px);
}
.bnew-card__icon{
  font-size: 2.4rem; line-height:1; margin-bottom:.5rem;
}
.bnew-card.is-unlocked .bnew-card__icon{
  filter: drop-shadow(0 0 12px rgba(255,255,0,.6));
  animation: bnewIconFloat 4s ease-in-out infinite;
}
@keyframes bnewIconFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce){ .bnew-card.is-unlocked .bnew-card__icon{ animation:none; } }
.bnew-card__name{ font-weight:800; color:#fff; font-size:.98rem; line-height:1.2; }
.bnew-card__desc{ margin-top:.3rem; font-size:.78rem; color: rgba(255,255,255,.65); line-height:1.35; }
.bnew-card__bar{
  margin-top:.7rem; height:5px; border-radius:5px;
  background: rgba(255,255,255,.06); overflow:hidden;
}
.bnew-card__fill{
  height:100%; border-radius:5px;
  background: linear-gradient(90deg, #00ffff, #ff00aa);
  box-shadow: 0 0 8px rgba(0,255,255,.45);
  transition: width .8s ease;
}
.bnew-card__progress{
  margin-top:.3rem; font-size:.72rem; color: rgba(255,255,255,.6);
  font-variant-numeric: tabular-nums;
}
.bnew-card__status{
  margin-top:.5rem;
  display:inline-block;
  padding:.15rem .55rem; border-radius:999px;
  font-size:.7rem; letter-spacing:.05em; font-weight:700;
  background: rgba(255,255,0,.12); border:1px solid rgba(255,255,0,.40);
  color:#fff7a0;
}

/* Responsive */
@media (max-width: 900px){
  .rnew-hero__inner, .bnew-hero__inner{ grid-template-columns: 1fr; }
  .rnew-hero__stats{ justify-content:flex-start; }
  .bnew-hero__trophy{ display:none; }
  .rnew-hot__grid{ grid-template-columns: 1fr; }
  .lnew-podium{ grid-template-columns: 1fr; }
  .lnew-podium__card--1{ order:-1; }
}
@media (max-width: 600px){
  .rnew-hero, .lnew-hero, .bnew-hero{ padding: 1.3rem 1rem; border-radius:18px; }
  .rnew-req{ grid-template-columns: 50px 1fr; padding:.85rem 1rem; }
  .rnew-req__like{ grid-column: 2 / -1; justify-content:flex-end; padding-top:.4rem; }
  .rnew-hero__title, .lnew-hero__title, .bnew-hero__title{ font-size:1.5rem; }
  .lnew-row{ grid-template-columns: 44px 1fr; padding:.6rem .8rem; }
  .lnew-row__metrics{ grid-column: 2 / -1; padding-top:.3rem; }
  .bnew-grid{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .bnew-card__icon{ font-size:2rem; }
  .bnew-timeline__row{ grid-template-columns: 40px 1fr; padding:.6rem .7rem; gap:.7rem; }
  .bnew-timeline__date{ grid-column: 2 / -1; padding-top:.2rem; }
}

/* ============================================================
   hnew-* — Premium Homepage Hero (Cyberpunk Neon "Wow" Level)
   Matches shero/wnew/mnew patterns. Append-only.
   ============================================================ */

.hnew-hero{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 4.5rem 1.5rem 3rem;
  border-radius: 28px;
  background: linear-gradient(180deg, #0c0810 0%, #07060a 50%, #050308 100%);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow:
    0 28px 80px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.02) inset;
  margin-bottom: 1.4rem;
  min-height: 560px;
}

/* ---- Background layers ---- */
.hnew-hero__bg{
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

/* Neon grid — denser, brighter, slow drift */
.hnew-hero__grid{
  position: absolute; inset: -2px;
  background-image:
    linear-gradient(rgba(0,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,0,170,.05) 1px, transparent 1px);
  background-size: 56px 56px, 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 35%, transparent 78%);
  animation: hnewGridDrift 40s linear infinite;
  opacity: .6;
}
@keyframes hnewGridDrift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 56px 56px, 56px -56px; }
}

/* Orbs — bigger + softer than wnew, more dramatic */
.hnew-hero__orb{
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  filter: blur(90px);
  mix-blend-mode: screen;
  opacity: .55;
  animation: hnewOrbFloat 32s ease-in-out infinite;
}
.hnew-hero__orb--c{
  background: radial-gradient(circle, rgba(0,255,255,.85), rgba(0,255,255,0) 70%);
  top: -120px; left: -120px;
  animation-delay: 0s;
}
.hnew-hero__orb--m{
  background: radial-gradient(circle, rgba(255,0,170,.85), rgba(255,0,170,0) 70%);
  bottom: -160px; right: -100px;
  animation-delay: -10s;
}
.hnew-hero__orb--y{
  background: radial-gradient(circle, rgba(255,255,0,.55), rgba(255,255,0,0) 70%);
  top: 40%; left: 50%;
  transform: translate(-50%, -50%);
  width: 380px; height: 380px;
  opacity: .35;
  animation-delay: -18s;
}
@keyframes hnewOrbFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(40px, -30px) scale(1.08); }
  66%     { transform: translate(-30px, 25px) scale(.95); }
}
.hnew-hero__orb--y{
  /* preserve centering during float */
  animation-name: hnewOrbFloatCenter;
}
@keyframes hnewOrbFloatCenter {
  0%,100% { transform: translate(-50%, -50%) scale(1); }
  50%     { transform: translate(-46%, -54%) scale(1.06); }
}

/* Subtle scan-line / data-flow stripe */
.hnew-hero__scan{
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    180deg,
    rgba(0,255,255,0) 0px,
    rgba(0,255,255,0) 3px,
    rgba(0,255,255,.025) 4px,
    rgba(0,255,255,0) 5px
  );
  mix-blend-mode: screen;
  opacity: .55;
  animation: hnewScanShift 8s linear infinite;
}
@keyframes hnewScanShift {
  from { background-position: 0 0; }
  to   { background-position: 0 20px; }
}

/* Particles — slow elegant rise, mixed colors */
.hnew-hero__particles{
  position: absolute; inset: 0;
  overflow: hidden;
}
.hnew-p{
  position: absolute;
  left: var(--x, 50%);
  bottom: -20px;
  width: 6px; height: 6px;
  border-radius: 50%;
  opacity: 0;
  animation: hnewParticleRise var(--dur, 22s) linear infinite;
  animation-delay: var(--d, 0s);
}
.hnew-p--c{
  background: #00ffff;
  box-shadow: 0 0 12px #00ffff, 0 0 24px rgba(0,255,255,.6);
}
.hnew-p--m{
  background: #ff00aa;
  box-shadow: 0 0 12px #ff00aa, 0 0 24px rgba(255,0,170,.6);
}
.hnew-p--y{
  background: #ffff55;
  box-shadow: 0 0 12px #ffff55, 0 0 24px rgba(255,255,0,.55);
}
@keyframes hnewParticleRise {
  0%   { transform: translate(0, 0)            scale(.6); opacity: 0; }
  12%  { opacity: .9; }
  50%  { transform: translate(-20px, -50vh)    scale(1);   opacity: .85; }
  88%  { opacity: .5; }
  100% { transform: translate(15px,  -110vh)   scale(.4); opacity: 0; }
}

/* Floating QR / brand glyphs in background */
.hnew-hero__qr{
  position: absolute;
  font-family: 'Orbitron', system-ui, sans-serif;
  font-weight: 700;
  color: rgba(0,255,255,.10);
  text-shadow: 0 0 16px rgba(0,255,255,.20);
  pointer-events: none;
  user-select: none;
  animation: hnewQrFloat 16s ease-in-out infinite;
}
.hnew-hero__qr--1{ top: 12%;  left: 6%;  font-size: 4rem; animation-delay: 0s; }
.hnew-hero__qr--2{ top: 68%;  left: 88%; font-size: 5rem; color: rgba(255,0,170,.10);
  text-shadow: 0 0 16px rgba(255,0,170,.20); animation-delay: -5s; }
.hnew-hero__qr--3{ top: 78%;  left: 12%; font-size: 3.4rem; color: rgba(255,255,0,.10);
  text-shadow: 0 0 16px rgba(255,255,0,.20); animation-delay: -9s; }
@keyframes hnewQrFloat {
  0%,100% { transform: translateY(0) rotate(-3deg); opacity: .75; }
  50%     { transform: translateY(-14px) rotate(4deg); opacity: 1; }
}

/* Radial vignette darkens edges, focuses on center */
.hnew-hero__vignette{
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 30%, rgba(0,0,0,.55) 100%),
    radial-gradient(ellipse at 50% 100%, rgba(255,0,170,.06), transparent 60%);
  pointer-events: none;
}

/* ---- Foreground content ---- */
.hnew-hero__content{
  position: relative;
  z-index: 2;
  max-width: 940px;
  margin: 0 auto;
  text-align: center;
  padding-right: clamp(0px, 8vw, 200px); /* leave space for top-right Dot */
}

/* Eyebrow pill with pulse */
.hnew-hero__eyebrow{
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: .72rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--cyan, #00ffff);
  padding: .35rem .9rem;
  border: 1px solid rgba(0,255,255,.45);
  border-radius: 999px;
  background: rgba(0,255,255,.06);
  text-shadow: 0 0 10px rgba(0,255,255,.6);
  margin-bottom: 1.4rem;
  box-shadow: 0 0 18px rgba(0,255,255,.22);
}
.hnew-hero__eyebrow-pulse{
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan, #00ffff);
  box-shadow: 0 0 8px var(--cyan, #00ffff), 0 0 18px var(--cyan, #00ffff);
  animation: hnewPulse 1.6s ease-in-out infinite;
}
@keyframes hnewPulse {
  0%,100% { transform: scale(1);   opacity: 1; }
  50%     { transform: scale(.55); opacity: .55; }
}

/* HUGE multi-gradient headline with shimmer
   (high specificity to override legacy .hero h1) */
.hero.hnew-hero h1.hnew-hero__title,
.hnew-hero h1.hnew-hero__title,
.hnew-hero__title{
  font-family: 'Orbitron', system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(2.4rem, 6.2vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0 auto .9rem;
  max-width: 18ch;
  background: linear-gradient(
    100deg,
    #00ffff 0%,
    #66ffff 18%,
    #ffffff 32%,
    #ff66cc 50%,
    #ff00aa 68%,
    #ffd866 84%,
    #ffff55 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 24px rgba(255,0,170,.35))
          drop-shadow(0 0 12px rgba(0,255,255,.25));
  animation: hnewTitleShimmer 9s ease-in-out infinite,
             hnewTitleGlow 3.6s ease-in-out infinite;
}
@keyframes hnewTitleShimmer {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
@keyframes hnewTitleGlow {
  0%,100% { filter: drop-shadow(0 0 18px rgba(255,0,170,.30))
                    drop-shadow(0 0 8px rgba(0,255,255,.20)); }
  50%     { filter: drop-shadow(0 0 28px rgba(255,0,170,.45))
                    drop-shadow(0 0 14px rgba(0,255,255,.35)); }
}

.hnew-hero__sub{
  font-size: clamp(1.05rem, 1.7vw, 1.32rem);
  color: rgba(255,255,255,.92);
  max-width: 720px;
  margin: 0 auto .8rem;
  line-height: 1.45;
  text-shadow: 0 0 18px rgba(0,0,0,.6);
}
.hnew-hero__pitch{
  font-size: .98rem;
  color: rgba(255,255,255,.72);
  max-width: 780px;
  margin: 0 auto 1.5rem;
  line-height: 1.55;
}

/* Badges — colored accents */
.hnew-hero__badges{
  display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center;
  margin-bottom: 1.8rem;
}
.hnew-hero__badge{
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .42rem .9rem;
  font-size: .85rem; font-weight: 600;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
  transition: transform .25s ease, border-color .25s, box-shadow .25s, background .25s;
}
.hnew-hero__badge--y{ border-color: rgba(255,255,0,.40); box-shadow: 0 0 14px rgba(255,255,0,.12); }
.hnew-hero__badge--c{ border-color: rgba(0,255,255,.40);  box-shadow: 0 0 14px rgba(0,255,255,.12); }
.hnew-hero__badge--m{ border-color: rgba(255,0,170,.40);  box-shadow: 0 0 14px rgba(255,0,170,.12); }
.hnew-hero__badge:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.07);
}
.hnew-hero__badge--y:hover{ box-shadow: 0 0 22px rgba(255,255,0,.32); }
.hnew-hero__badge--c:hover{ box-shadow: 0 0 22px rgba(0,255,255,.32); }
.hnew-hero__badge--m:hover{ box-shadow: 0 0 22px rgba(255,0,170,.32); }

/* CTA row */
.hnew-hero__cta{
  display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center;
  align-items: center;
}

.hnew-btn{
  position: relative;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .9rem 1.5rem;
  border-radius: 14px;
  font-family: 'Orbitron', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .03em;
  text-decoration: none;
  border: 1px solid transparent;
  overflow: hidden;
  cursor: pointer;
  transition: transform .22s ease, box-shadow .25s, border-color .25s, background .25s;
  isolation: isolate;
}
.hnew-btn:hover{ transform: translateY(-2px); }

/* PRIMARY — magenta→cyan gradient with shine sweep */
.hnew-btn--primary{
  padding: 1.05rem 2rem;
  font-size: 1.08rem;
  color: #0a0a0a;
  background: linear-gradient(135deg, #ff00aa 0%, #ff66cc 35%, #00ffff 100%);
  background-size: 180% 180%;
  border-color: rgba(255,255,255,.3);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12) inset,
    0 10px 30px rgba(255,0,170,.45),
    0 0 28px rgba(0,255,255,.30);
  animation: hnewPrimaryBreathe 4.2s ease-in-out infinite;
}
@keyframes hnewPrimaryBreathe {
  0%,100% { background-position: 0% 50%;
            box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset,
                        0 10px 30px rgba(255,0,170,.45),
                        0 0 28px rgba(0,255,255,.30); }
  50%     { background-position: 100% 50%;
            box-shadow: 0 0 0 1px rgba(255,255,255,.20) inset,
                        0 14px 40px rgba(255,0,170,.55),
                        0 0 40px rgba(0,255,255,.45); }
}
.hnew-btn--primary:hover{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.30) inset,
    0 16px 50px rgba(255,0,170,.65),
    0 0 50px rgba(0,255,255,.55);
}
.hnew-btn__icon{ font-size: 1.15em; filter: drop-shadow(0 0 6px rgba(255,255,255,.6)); }
.hnew-btn__shine{
  position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255,255,255,.55) 50%,
    transparent 80%
  );
  transform: skewX(-18deg);
  pointer-events: none;
  z-index: 1;
  animation: hnewShineSweep 3.6s ease-in-out infinite;
}
@keyframes hnewShineSweep {
  0%   { left: -120%; }
  60%  { left: 130%; }
  100% { left: 130%; }
}
.hnew-btn--primary:hover .hnew-btn__shine{ animation-duration: 1.2s; }

/* Secondary variants */
.hnew-btn--cyan{
  color: #00ffff;
  background: rgba(0,255,255,.07);
  border-color: rgba(0,255,255,.45);
  box-shadow: 0 0 14px rgba(0,255,255,.18);
}
.hnew-btn--cyan:hover{
  background: rgba(0,255,255,.14);
  box-shadow: 0 0 26px rgba(0,255,255,.45);
}
.hnew-btn--yellow{
  color: #ffff66;
  background: rgba(255,255,0,.06);
  border-color: rgba(255,255,0,.45);
  box-shadow: 0 0 14px rgba(255,255,0,.18);
}
.hnew-btn--yellow:hover{
  background: rgba(255,255,0,.13);
  box-shadow: 0 0 26px rgba(255,255,0,.40);
}
.hnew-btn--ghost{
  color: rgba(255,255,255,.85);
  background: transparent;
  border-color: rgba(255,255,255,.18);
}
.hnew-btn--ghost:hover{
  border-color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.04);
}

/* ---- Dot integrated top-right ---- */
.hnew-hero__dot{
  position: absolute;
  top: 28px; right: 28px;
  z-index: 3;
  width: 220px; height: 220px;
  pointer-events: auto;
}
.hnew-hero__dot-halo{
  position: absolute; inset: -50px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(0,255,255,.40) 0%, rgba(0,255,255,0) 60%),
    radial-gradient(circle, rgba(255,0,170,.28) 30%, rgba(255,0,170,0) 70%);
  filter: blur(8px);
  animation: hnewDotHalo 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hnewDotHalo {
  0%,100% { opacity: .65; transform: scale(1); }
  50%     { opacity: 1;   transform: scale(1.12); }
}
.hnew-hero__dot-ring{
  position: absolute; inset: -22px;
  border-radius: 50%;
  border: 1px dashed rgba(0,255,255,.35);
  animation: hnewDotRing 18s linear infinite;
  pointer-events: none;
}
@keyframes hnewDotRing {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Stronger dot mascot glow on home */
.hnew-hero__dot .dot-mascot{
  box-shadow:
    0 0 30px rgba(0,255,255,.7),
    0 0 60px rgba(0,191,255,.55),
    0 0 100px rgba(255,0,170,.30);
}

/* Scroll hint repositioned inside new hero */
.hnew-hero .scroll-hint{
  position: relative;
  z-index: 2;
  display: flex;
  margin: 2rem auto 0;
  width: max-content;
}

/* ---- Responsive ---- */
@media (max-width: 980px){
  .hnew-hero{ padding: 3.2rem 1.2rem 2.4rem; min-height: 520px; }
  .hnew-hero__content{ padding-right: 0; }
  .hnew-hero__dot{
    position: relative;
    top: auto; right: auto;
    margin: 0 auto 1.2rem;
    width: 180px; height: 180px;
    display: block;
  }
  .hnew-hero__orb{ width: 360px; height: 360px; filter: blur(70px); }
  /* Reorder so Dot appears above title */
  .hnew-hero{ display: flex; flex-direction: column; }
  .hnew-hero__bg{ order: 0; }
  .hnew-hero__dot{ order: 1; }
  .hnew-hero__content{ order: 2; }
  .hnew-hero .scroll-hint{ order: 3; }
}
@media (max-width: 640px){
  .hnew-hero{ padding: 2.4rem .9rem 2rem; border-radius: 20px; min-height: 460px; }
  .hnew-hero__title{ font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .hnew-hero__sub{ font-size: 1rem; }
  .hnew-hero__pitch{ font-size: .92rem; }
  .hnew-hero__dot{ width: 150px; height: 150px; }
  .hnew-hero__dot .dot-mascot{ width: 150px; height: 150px; }
  .hnew-hero__dot-halo{ inset: -30px; }
  .hnew-hero__dot-ring{ inset: -14px; }
  .hnew-hero__qr{ display: none; }
  .hnew-btn{ padding: .75rem 1.1rem; font-size: .9rem; }
  .hnew-btn--primary{ padding: .9rem 1.4rem; font-size: 1rem; }
  /* fewer particles on small viewports for perf */
  .hnew-p:nth-child(n+6){ display: none; }
  .hnew-hero__orb{ width: 280px; height: 280px; filter: blur(60px); opacity: .42; }
  .hnew-hero__scan{ display: none; }
}
@media (max-width: 420px){
  .hnew-hero__eyebrow{ font-size: .62rem; letter-spacing: .18em; padding: .25rem .65rem; }
  .hnew-hero__badges{ gap: .35rem; }
  .hnew-hero__badge{ font-size: .76rem; padding: .3rem .65rem; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  .hnew-hero__grid,
  .hnew-hero__scan,
  .hnew-hero__orb,
  .hnew-p,
  .hnew-hero__qr,
  .hnew-hero__eyebrow-pulse,
  .hnew-hero__title,
  .hnew-btn--primary,
  .hnew-btn__shine,
  .hnew-hero__dot-halo,
  .hnew-hero__dot-ring{
    animation: none !important;
  }
  .hnew-hero__title{
    filter: drop-shadow(0 0 12px rgba(255,0,170,.35));
  }
  .hnew-p{ opacity: 0; }
}

/* ============================================================
   hnew-hero — Final polish pass
   Tighter hierarchy, calmer composition, live-activity badge.
   ============================================================ */

/* Headline: subtle dark backplate via text-shadow stack for
   guaranteed readability over any background variant. */
.hero.hnew-hero h1.hnew-hero__title,
.hnew-hero h1.hnew-hero__title,
.hnew-hero__title{
  text-shadow:
    0 2px 18px rgba(0,0,0,.55),
    0 0 30px rgba(0,0,0,.35);
}

/* Tighter sub + pitch — better rhythm under the headline */
.hnew-hero__sub{
  margin-bottom: .55rem;
  font-weight: 500;
}
.hnew-hero__pitch{
  margin-bottom: 1.2rem;
  max-width: 680px;
}
.hnew-hero__badges{
  margin-top: .3rem;
  margin-bottom: 1.1rem;
  gap: .45rem;
}

/* Dot: smaller and better balanced on desktop */
.hnew-hero__dot{
  top: 36px; right: 36px;
  width: 184px; height: 184px;
}
.hnew-hero__dot .dot-mascot{
  width: 184px; height: 184px;
}
.hnew-hero__content{
  padding-right: clamp(0px, 7vw, 170px);
}

/* ---- Live-activity badge ---- */
.hnew-hero__live{
  display: inline-flex; align-items: center;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 0 auto 1.4rem;
  padding: .42rem .9rem .42rem .7rem;
  border-radius: 999px;
  background: rgba(0,255,255,.04);
  border: 1px solid rgba(0,255,255,.18);
  font-size: .82rem;
  color: rgba(255,255,255,.78);
  letter-spacing: .01em;
  box-shadow: 0 0 16px rgba(0,255,255,.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hnew-hero__live-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: #4fffa6;
  box-shadow: 0 0 8px #4fffa6, 0 0 16px rgba(79,255,166,.6);
  animation: hnewLivePulse 1.4s ease-in-out infinite;
  flex: 0 0 auto;
}
@keyframes hnewLivePulse {
  0%,100% { opacity: 1;   transform: scale(1); }
  50%     { opacity: .45; transform: scale(.72); }
}
.hnew-hero__live-lbl{
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #4fffa6;
  text-shadow: 0 0 8px rgba(79,255,166,.4);
}
.hnew-hero__live-stat b{
  color: #ffffff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hnew-hero__live-sep{
  color: rgba(255,255,255,.30);
}

/* ---- Mobile polish: tighter, calmer ---- */
@media (max-width: 980px){
  .hnew-hero__dot{ width: 160px; height: 160px; }
  .hnew-hero__dot .dot-mascot{ width: 160px; height: 160px; }
  .hnew-hero__orb{ opacity: .42; }
  .hnew-hero__live{ font-size: .78rem; padding: .35rem .8rem .35rem .6rem; }
}
@media (max-width: 640px){
  .hero.hnew-hero h1.hnew-hero__title,
  .hnew-hero h1.hnew-hero__title,
  .hnew-hero__title{
    font-size: clamp(1.85rem, 8.6vw, 2.5rem);
    line-height: 1.02;
    letter-spacing: -.015em;
    max-width: 14ch;
    text-shadow:
      0 2px 14px rgba(0,0,0,.70),
      0 0 24px rgba(0,0,0,.40);
  }
  .hnew-hero__sub{
    font-size: .98rem;
    line-height: 1.38;
    margin-bottom: .45rem;
  }
  .hnew-hero__pitch{
    font-size: .88rem;
    line-height: 1.5;
    margin-bottom: .9rem;
  }
  .hnew-hero__badges{ margin-bottom: .9rem; gap: .35rem; }
  .hnew-hero__live{
    font-size: .74rem;
    gap: .4rem;
    padding: .32rem .7rem .32rem .55rem;
    margin-bottom: 1rem;
  }
  .hnew-hero__live-lbl{ font-size: .62rem; letter-spacing: .18em; }
  /* Calmer atmosphere — drop more particles + lower orb opacity */
  .hnew-p:nth-child(n+5){ display: none; }
  .hnew-hero__orb{ opacity: .30; }
  .hnew-hero__orb--y{ display: none; }
}
@media (max-width: 420px){
  .hnew-hero__live-stat:nth-of-type(3),
  .hnew-hero__live-sep:nth-of-type(2){ display: none; }
}

/* Reduced motion — live dot stays calm */
@media (prefers-reduced-motion: reduce){
  .hnew-hero__live-dot{ animation: none !important; }
}

/* ============================================================
   shero — POWER-DASHBOARD stats (4 fat neon cards)
   Overrides the old .shero__stats / .shero__stat compact row.
   Votes + EVE are XL anchors. Scans + Shares are MD.
   All JS hooks (data-shero-votes, data-cheer-count, data-vote-label,
   is-empty / is-pulsing / is-bumped) work on the Votes card.
   ============================================================ */

.shero__stats.shero__stats--dash{
  display: grid;
  grid-template-columns: 1.25fr 1.25fr;
  grid-auto-rows: auto;
  gap: .9rem;
  margin-top: 1rem;
}

/* Base card */
.shero-stat{
  position: relative;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  gap: .35rem;
  padding: 1.25rem 1.35rem;
  border-radius: 20px;
  background:
    linear-gradient(160deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.015) 60%),
    rgba(10,10,10,.55);
  border: 1.5px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .28s ease, border-color .28s ease;
  isolation: isolate;
}
.shero-stat:hover{
  transform: translateY(-3px);
}
.shero-stat__icon{
  font-size: 1.6rem; line-height: 1;
  filter: drop-shadow(0 0 8px currentColor);
}
.shero-stat__num{
  font-family: 'Orbitron', 'Inter', system-ui, sans-serif;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: #fff;
  letter-spacing: -.01em;
}
.shero-stat__lbl{
  font-family: 'Orbitron', 'Inter', system-ui, sans-serif;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  font-weight: 600;
}
.shero-stat__glow{
  position: absolute; inset: -40% -20% auto auto;
  width: 80%; height: 180%;
  background: radial-gradient(circle at 50% 50%, currentColor, transparent 60%);
  opacity: .22;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: -1;
  filter: blur(8px);
}

/* ---- XL cards (Votes + EVE) — biggest, most dominant ---- */
.shero-stat--xl{
  padding: 1.6rem 1.6rem 1.4rem;
  border-radius: 22px;
  min-height: 152px;
}
.shero-stat--xl .shero-stat__icon{ font-size: 2rem; margin-bottom: .15rem; }
.shero-stat--xl .shero-stat__num{
  font-size: clamp(2.6rem, 5.2vw, 3.8rem);
}
.shero-stat--xl .shero-stat__lbl{ font-size: .78rem; }

/* ---- MD cards (Scans + Shares) — secondary tier ---- */
.shero-stat--md{
  padding: 1.15rem 1.25rem;
  min-height: 110px;
}
.shero-stat--md .shero-stat__icon{ font-size: 1.45rem; }
.shero-stat--md .shero-stat__num{
  font-size: clamp(1.9rem, 3.4vw, 2.4rem);
}

/* ---- Votes — MAGENTA neon (the loudest one) ---- */
.shero-stat--votes{
  color: #ff00aa;
  border-color: rgba(255,0,170,.45);
  background:
    linear-gradient(160deg, rgba(255,0,170,.16) 0%, rgba(170,0,255,.08) 55%, rgba(0,255,255,.06) 100%),
    rgba(10,0,10,.55);
  box-shadow:
    0 0 0 1px rgba(255,0,170,.30) inset,
    0 0 28px rgba(255,0,170,.28),
    0 0 60px rgba(255,0,170,.14);
}
.shero-stat--votes .shero-stat__icon{
  color: #ff00aa;
  text-shadow: 0 0 18px rgba(255,0,170,.85), 0 0 36px rgba(255,0,170,.55);
  font-size: 2.4rem;
}
.shero-stat--votes .shero-stat__num{
  background: linear-gradient(180deg, #ffffff 0%, #ff66cc 45%, #ff00aa 80%, #aa00ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 32px rgba(255,0,170,.55);
  font-size: clamp(3rem, 6vw, 4.4rem);
}
.shero-stat--votes .shero-stat__lbl{ color: #ffb3e6; }
.shero-stat--votes:hover{
  border-color: rgba(255,0,170,.7);
  box-shadow:
    0 0 0 1px rgba(255,0,170,.55) inset,
    0 0 42px rgba(255,0,170,.45),
    0 0 90px rgba(255,0,170,.22);
}
.shero-stat--votes.is-pulsing{
  animation: sheroStatPulse 3.2s ease-in-out infinite;
}
.shero-stat--votes.is-empty{
  filter: saturate(.5);
  background:
    linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
    rgba(10,10,10,.55);
  border-color: rgba(255,255,255,.12);
  box-shadow: none;
  color: rgba(255,255,255,.45);
}
.shero-stat--votes.is-empty .shero-stat__icon{
  color: rgba(255,255,255,.45); text-shadow: none;
}
.shero-stat--votes.is-empty .shero-stat__num{
  background: none; color: rgba(255,255,255,.45); text-shadow: none;
}
.shero-stat--votes.is-empty .shero-stat__glow{ opacity: 0; }
.shero-stat--votes.is-bumped{
  animation: sheroStatBump .55s cubic-bezier(.34,1.56,.64,1);
}
@keyframes sheroStatPulse {
  0%,100% {
    box-shadow:
      0 0 0 1px rgba(255,0,170,.30) inset,
      0 0 28px rgba(255,0,170,.28),
      0 0 60px rgba(255,0,170,.14);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(0,255,255,.45) inset,
      0 0 44px rgba(0,255,255,.32),
      0 0 100px rgba(255,0,170,.22);
  }
}
@keyframes sheroStatBump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* ---- EVE — YELLOW × CYAN neon ---- */
.shero-stat--eve{
  color: #ffff00;
  border-color: rgba(255,255,0,.42);
  background:
    linear-gradient(160deg, rgba(255,255,0,.14) 0%, rgba(0,255,255,.12) 55%, rgba(0,170,255,.08) 100%),
    rgba(10,10,0,.55);
  box-shadow:
    0 0 0 1px rgba(255,255,0,.28) inset,
    0 0 28px rgba(255,255,0,.25),
    0 0 60px rgba(0,255,255,.18);
}
.shero-stat--eve .shero-stat__icon{
  color: #ffff00;
  text-shadow: 0 0 18px rgba(255,255,0,.85), 0 0 36px rgba(0,255,255,.55);
  font-size: 2.2rem;
}
.shero-stat--eve .shero-stat__num{
  background: linear-gradient(180deg, #ffffff 0%, #ffff00 50%, #00ffff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 28px rgba(255,255,0,.5);
}
.shero-stat--eve .shero-stat__lbl{ color: #fff5a3; }
.shero-stat--eve:hover{
  border-color: rgba(255,255,0,.7);
  box-shadow:
    0 0 0 1px rgba(255,255,0,.5) inset,
    0 0 42px rgba(255,255,0,.4),
    0 0 90px rgba(0,255,255,.28);
}

/* ---- Scans — CYAN neon ---- */
.shero-stat--scans{
  color: #00ffff;
  border-color: rgba(0,255,255,.40);
  background:
    linear-gradient(160deg, rgba(0,255,255,.13) 0%, rgba(0,170,255,.06) 100%),
    rgba(0,10,15,.55);
  box-shadow:
    0 0 0 1px rgba(0,255,255,.25) inset,
    0 0 22px rgba(0,255,255,.22),
    0 0 45px rgba(0,255,255,.12);
}
.shero-stat--scans .shero-stat__icon{
  color: #00ffff;
  text-shadow: 0 0 14px rgba(0,255,255,.85), 0 0 28px rgba(0,255,255,.4);
}
.shero-stat--scans .shero-stat__num{
  background: linear-gradient(180deg, #ffffff 0%, #9fffff 50%, #00ffff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 22px rgba(0,255,255,.45);
}
.shero-stat--scans .shero-stat__lbl{ color: #b3f5ff; }
.shero-stat--scans:hover{
  border-color: rgba(0,255,255,.65);
  box-shadow:
    0 0 0 1px rgba(0,255,255,.5) inset,
    0 0 36px rgba(0,255,255,.4),
    0 0 75px rgba(0,255,255,.22);
}

/* ---- Shares — BLUE / electric ---- */
.shero-stat--shares{
  color: #4fa8ff;
  border-color: rgba(79,168,255,.40);
  background:
    linear-gradient(160deg, rgba(79,168,255,.13) 0%, rgba(170,0,255,.06) 100%),
    rgba(0,5,18,.55);
  box-shadow:
    0 0 0 1px rgba(79,168,255,.25) inset,
    0 0 22px rgba(79,168,255,.22),
    0 0 45px rgba(170,0,255,.10);
}
.shero-stat--shares .shero-stat__icon{
  color: #4fa8ff;
  text-shadow: 0 0 14px rgba(79,168,255,.85), 0 0 28px rgba(170,0,255,.4);
}
.shero-stat--shares .shero-stat__num{
  background: linear-gradient(180deg, #ffffff 0%, #a9d6ff 50%, #4fa8ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 22px rgba(79,168,255,.45);
}
.shero-stat--shares .shero-stat__lbl{ color: #c7e3ff; }
.shero-stat--shares:hover{
  border-color: rgba(79,168,255,.65);
  box-shadow:
    0 0 0 1px rgba(79,168,255,.5) inset,
    0 0 36px rgba(79,168,255,.4),
    0 0 75px rgba(170,0,255,.22);
}

/* ---- Responsive: stack nicely ---- */
@media (max-width: 760px){
  .shero__stats.shero__stats--dash{
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
  }
  .shero-stat--xl{
    grid-column: 1 / -1;          /* Votes + EVE each get full width row */
    min-height: 132px;
    padding: 1.3rem 1.35rem 1.2rem;
  }
  .shero-stat--xl .shero-stat__num{ font-size: clamp(2.6rem, 11vw, 3.4rem); }
  .shero-stat--md{ min-height: 96px; padding: 1rem 1.1rem; }
  .shero-stat--md .shero-stat__num{ font-size: clamp(1.7rem, 7vw, 2.1rem); }
}
@media (max-width: 420px){
  .shero__stats.shero__stats--dash{ gap: .55rem; }
  .shero-stat--xl .shero-stat__icon{ font-size: 1.7rem; }
  .shero-stat--xl .shero-stat__num{ font-size: clamp(2.3rem, 10vw, 3rem); }
  .shero-stat__lbl{ font-size: .66rem; letter-spacing: .14em; }
}

/* Reduced motion — no pulse, no bump */
@media (prefers-reduced-motion: reduce){
  .shero-stat--votes.is-pulsing,
  .shero-stat--votes.is-bumped{ animation: none !important; }
  .shero-stat:hover{ transform: none; }
}

/* ============================================================
   shero — POWER-DASHBOARD v2 (fatter, louder, more expensive)
   Layered on top of v1. Same .shero-stat__* hooks, no HTML change.
   ============================================================ */

/* Grid: a bit more breathing room between cards */
.shero__stats.shero__stats--dash{
  gap: 1.1rem;
  margin-top: 1.15rem;
}

/* Base card — thicker border, deeper inner glass, faint scan-grid */
.shero-stat{
  padding: 1.5rem 1.6rem;
  border-radius: 22px;
  border-width: 2px;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 5px,
      rgba(255,255,255,.018) 5px,
      rgba(255,255,255,.018) 6px
    ),
    linear-gradient(160deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 60%),
    rgba(8,8,12,.62);
}
.shero-stat:hover{ transform: translateY(-4px); }

/* Inner energy-line — horizontal scan beam sweeping behind the number */
.shero-stat::before{
  content:"";
  position: absolute;
  left: -10%; right: -10%;
  top: 58%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    currentColor 35%,
    currentColor 65%,
    transparent 100%);
  opacity: .22;
  filter: blur(.4px);
  pointer-events: none;
  z-index: -1;
}
.shero-stat::after{
  content:"";
  position: absolute;
  left: 8%; right: 60%;
  top: 58%;
  height: 2px;
  background: currentColor;
  filter: blur(2px);
  opacity: .35;
  pointer-events: none;
  z-index: -1;
  animation: sheroStatScan 6s ease-in-out infinite;
}
@keyframes sheroStatScan {
  0%   { left: -5%;  right: 80%; opacity: .15; }
  50%  { left: 60%;  right: -5%; opacity: .45; }
  100% { left: -5%;  right: 80%; opacity: .15; }
}
@media (prefers-reduced-motion: reduce){
  .shero-stat::after{ animation: none; }
}

/* Stronger glow layer */
.shero-stat__glow{
  inset: -55% -25% auto auto;
  width: 90%; height: 220%;
  opacity: .32;
  filter: blur(10px);
}

/* Bolder labels */
.shero-stat__lbl{
  font-weight: 700;
  letter-spacing: .2em;
}

/* ---- XL cards (Votes + EVE) — even more dominant ---- */
.shero-stat--xl{
  padding: 1.9rem 1.8rem 1.7rem;
  border-radius: 24px;
  min-height: 178px;
  border-width: 2.5px;
}
.shero-stat--xl .shero-stat__icon{
  font-size: 2.4rem;
  margin-bottom: .25rem;
}
.shero-stat--xl .shero-stat__num{
  font-size: clamp(3.2rem, 6vw, 4.8rem);
  margin: .1rem 0 .15rem;
}
.shero-stat--xl .shero-stat__lbl{ font-size: .82rem; }

/* ---- MD cards (Scans + Shares) — bigger than v1 ---- */
.shero-stat--md{
  padding: 1.4rem 1.5rem;
  min-height: 138px;
  border-width: 2px;
}
.shero-stat--md .shero-stat__icon{ font-size: 1.8rem; }
.shero-stat--md .shero-stat__num{
  font-size: clamp(2.4rem, 4.2vw, 3rem);
  margin: .1rem 0 .15rem;
}
.shero-stat--md .shero-stat__lbl{ font-size: .74rem; }

/* ---- Votes — XXL MAGENTA, the hero ---- */
.shero-stat--votes{
  border-color: rgba(255,0,170,.65);
  background:
    repeating-linear-gradient(
      0deg, transparent 0, transparent 5px,
      rgba(255,0,170,.025) 5px, rgba(255,0,170,.025) 6px
    ),
    linear-gradient(160deg,
      rgba(255,0,170,.22) 0%,
      rgba(170,0,255,.12) 55%,
      rgba(0,255,255,.08) 100%),
    rgba(15,0,12,.6);
  box-shadow:
    0 0 0 1.5px rgba(255,0,170,.45) inset,
    0 0 38px rgba(255,0,170,.42),
    0 0 90px rgba(255,0,170,.22),
    0 0 140px rgba(170,0,255,.12);
}
.shero-stat--votes .shero-stat__icon{
  font-size: 2.9rem;
  text-shadow:
    0 0 22px rgba(255,0,170,1),
    0 0 44px rgba(255,0,170,.7),
    0 0 80px rgba(170,0,255,.4);
}
.shero-stat--votes .shero-stat__num{
  font-size: clamp(3.6rem, 7vw, 5.2rem);
  text-shadow:
    0 0 36px rgba(255,0,170,.7),
    0 0 70px rgba(255,0,170,.4);
}
.shero-stat--votes:hover{
  border-color: rgba(255,0,170,.9);
  box-shadow:
    0 0 0 2px rgba(255,0,170,.7) inset,
    0 0 56px rgba(255,0,170,.6),
    0 0 130px rgba(255,0,170,.3),
    0 0 180px rgba(170,0,255,.18);
}
.shero-stat--votes.is-empty{ filter: saturate(.4); }

/* ---- EVE — almost as big as Votes ---- */
.shero-stat--eve{
  border-color: rgba(255,255,0,.6);
  background:
    repeating-linear-gradient(
      0deg, transparent 0, transparent 5px,
      rgba(255,255,0,.022) 5px, rgba(255,255,0,.022) 6px
    ),
    linear-gradient(160deg,
      rgba(255,255,0,.20) 0%,
      rgba(0,255,255,.16) 55%,
      rgba(0,170,255,.10) 100%),
    rgba(12,12,0,.6);
  box-shadow:
    0 0 0 1.5px rgba(255,255,0,.42) inset,
    0 0 38px rgba(255,255,0,.38),
    0 0 90px rgba(0,255,255,.25),
    0 0 140px rgba(255,255,0,.10);
}
.shero-stat--eve .shero-stat__icon{
  font-size: 2.7rem;
  text-shadow:
    0 0 22px rgba(255,255,0,1),
    0 0 44px rgba(0,255,255,.7),
    0 0 80px rgba(0,255,255,.35);
}
.shero-stat--eve .shero-stat__num{
  font-size: clamp(3.4rem, 6.6vw, 4.8rem);
  text-shadow:
    0 0 32px rgba(255,255,0,.65),
    0 0 64px rgba(0,255,255,.4);
}
.shero-stat--eve:hover{
  border-color: rgba(255,255,0,.9);
  box-shadow:
    0 0 0 2px rgba(255,255,0,.7) inset,
    0 0 56px rgba(255,255,0,.55),
    0 0 130px rgba(0,255,255,.4),
    0 0 180px rgba(255,255,0,.18);
}

/* ---- Scans — stronger cyan ---- */
.shero-stat--scans{
  border-color: rgba(0,255,255,.6);
  background:
    repeating-linear-gradient(
      0deg, transparent 0, transparent 5px,
      rgba(0,255,255,.022) 5px, rgba(0,255,255,.022) 6px
    ),
    linear-gradient(160deg, rgba(0,255,255,.20) 0%, rgba(0,170,255,.10) 100%),
    rgba(0,10,16,.6);
  box-shadow:
    0 0 0 1.5px rgba(0,255,255,.4) inset,
    0 0 30px rgba(0,255,255,.35),
    0 0 70px rgba(0,255,255,.18);
}
.shero-stat--scans .shero-stat__icon{
  text-shadow:
    0 0 18px rgba(0,255,255,1),
    0 0 36px rgba(0,255,255,.6);
}
.shero-stat--scans .shero-stat__num{
  text-shadow:
    0 0 26px rgba(0,255,255,.6),
    0 0 50px rgba(0,255,255,.3);
}
.shero-stat--scans:hover{
  border-color: rgba(0,255,255,.95);
  box-shadow:
    0 0 0 2px rgba(0,255,255,.7) inset,
    0 0 48px rgba(0,255,255,.55),
    0 0 110px rgba(0,255,255,.3);
}

/* ---- Shares — stronger electric blue ---- */
.shero-stat--shares{
  border-color: rgba(79,168,255,.6);
  background:
    repeating-linear-gradient(
      0deg, transparent 0, transparent 5px,
      rgba(79,168,255,.022) 5px, rgba(79,168,255,.022) 6px
    ),
    linear-gradient(160deg, rgba(79,168,255,.20) 0%, rgba(170,0,255,.10) 100%),
    rgba(0,5,20,.6);
  box-shadow:
    0 0 0 1.5px rgba(79,168,255,.4) inset,
    0 0 30px rgba(79,168,255,.35),
    0 0 70px rgba(170,0,255,.16);
}
.shero-stat--shares .shero-stat__icon{
  text-shadow:
    0 0 18px rgba(79,168,255,1),
    0 0 36px rgba(170,0,255,.55);
}
.shero-stat--shares .shero-stat__num{
  text-shadow:
    0 0 26px rgba(79,168,255,.6),
    0 0 50px rgba(170,0,255,.3);
}
.shero-stat--shares:hover{
  border-color: rgba(79,168,255,.95);
  box-shadow:
    0 0 0 2px rgba(79,168,255,.7) inset,
    0 0 48px rgba(79,168,255,.55),
    0 0 110px rgba(170,0,255,.32);
}

/* ---- Responsive v2 — keep XL dominant on mobile ---- */
@media (max-width: 760px){
  .shero__stats.shero__stats--dash{ gap: .8rem; }
  .shero-stat--xl{
    grid-column: 1 / -1;
    min-height: 150px;
    padding: 1.5rem 1.5rem 1.35rem;
  }
  .shero-stat--xl .shero-stat__icon{ font-size: 2.1rem; }
  .shero-stat--xl .shero-stat__num{ font-size: clamp(3rem, 12vw, 4rem); }
  .shero-stat--md{ min-height: 118px; padding: 1.2rem 1.25rem; }
  .shero-stat--md .shero-stat__icon{ font-size: 1.55rem; }
  .shero-stat--md .shero-stat__num{ font-size: clamp(2rem, 8vw, 2.5rem); }
}
@media (max-width: 420px){
  .shero-stat--xl{ min-height: 134px; padding: 1.3rem 1.25rem 1.15rem; }
  .shero-stat--xl .shero-stat__icon{ font-size: 1.85rem; }
  .shero-stat--xl .shero-stat__num{ font-size: clamp(2.6rem, 11vw, 3.4rem); }
  .shero-stat--md{ min-height: 104px; padding: 1rem 1.05rem; }
}

/* ============================================================
   shero — POWER-DASHBOARD v3 (FINAL polish: extreme neon)
   Append-only overrides on top of v1+v2. HTML/JS unchanged.
   ============================================================ */

/* Dashboard grid: more separation between cards */
.shero__stats.shero__stats--dash{
  gap: 1.35rem;
  margin-top: 1.3rem;
}

/* Base card v3: thicker border, stronger glass, denser scan-grid */
.shero-stat{
  padding: 1.7rem 1.8rem;
  border-radius: 24px;
  border-width: 2.5px;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0, transparent 4px,
      rgba(255,255,255,.025) 4px, rgba(255,255,255,.025) 5px
    ),
    linear-gradient(160deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.025) 60%),
    rgba(6,6,10,.7);
  transition:
    transform .25s cubic-bezier(.34,1.56,.64,1),
    box-shadow .35s ease,
    border-color .3s ease;
}
.shero-stat:hover{ transform: translateY(-6px) scale(1.015); }

/* Second inner energy line + thicker primary line */
.shero-stat__glow{
  inset: -65% -30% auto auto;
  width: 100%; height: 240%;
  opacity: .42;
  filter: blur(14px);
}
.shero-stat::before{
  height: 1.5px;
  opacity: .32;
  top: 56%;
}
.shero-stat::after{
  height: 3px;
  filter: blur(2.5px);
  opacity: .5;
}

/* Stronger labels */
.shero-stat__lbl{
  font-weight: 800;
  letter-spacing: .22em;
}

/* ---- XL cards: EXTREME (Votes + EVE) ---- */
.shero-stat--xl{
  padding: 2.1rem 2rem 1.9rem;
  border-radius: 26px;
  min-height: 204px;
  border-width: 3px;
}
.shero-stat--xl .shero-stat__icon{
  font-size: 2.7rem;
  margin-bottom: .3rem;
}
.shero-stat--xl .shero-stat__num{
  font-size: clamp(3.6rem, 6.6vw, 5.3rem);
  margin: .15rem 0 .2rem;
}
.shero-stat--xl .shero-stat__lbl{ font-size: .86rem; }

/* ---- MD cards: also fatter ---- */
.shero-stat--md{
  padding: 1.55rem 1.65rem;
  min-height: 158px;
  border-width: 2.5px;
}
.shero-stat--md .shero-stat__icon{ font-size: 2rem; }
.shero-stat--md .shero-stat__num{
  font-size: clamp(2.6rem, 4.6vw, 3.3rem);
  margin: .15rem 0 .2rem;
}
.shero-stat--md .shero-stat__lbl{ font-size: .76rem; }

/* ============ VOTES — XXL MAGENTA HERO (the loudest card) ============ */
.shero-stat--votes{
  border-color: rgba(255,0,170,.78);
  background:
    repeating-linear-gradient(
      0deg, transparent 0, transparent 4px,
      rgba(255,0,170,.035) 4px, rgba(255,0,170,.035) 5px
    ),
    linear-gradient(160deg,
      rgba(255,0,170,.28) 0%,
      rgba(170,0,255,.16) 55%,
      rgba(0,255,255,.10) 100%),
    rgba(18,0,14,.62);
  box-shadow:
    0 0 0 2px rgba(255,0,170,.55) inset,
    0 0 22px rgba(255,0,170,.45) inset,
    0 0 0 4px rgba(255,0,170,.18),
    0 0 46px rgba(255,0,170,.55),
    0 0 110px rgba(255,0,170,.30),
    0 0 180px rgba(170,0,255,.16);
}
.shero-stat--votes .shero-stat__icon{
  font-size: 3.2rem;
  text-shadow:
    0 0 24px rgba(255,0,170,1),
    0 0 50px rgba(255,0,170,.85),
    0 0 100px rgba(170,0,255,.5);
}
.shero-stat--votes .shero-stat__num{
  font-size: clamp(4rem, 7.4vw, 5.5rem);
  text-shadow:
    0 0 40px rgba(255,0,170,.8),
    0 0 80px rgba(255,0,170,.5),
    0 0 130px rgba(170,0,255,.3);
}
.shero-stat--votes:hover{
  border-color: rgba(255,0,170,1);
  box-shadow:
    0 0 0 2.5px rgba(255,0,170,.85) inset,
    0 0 32px rgba(255,0,170,.6) inset,
    0 0 0 6px rgba(255,0,170,.3),
    0 0 68px rgba(255,0,170,.75),
    0 0 150px rgba(255,0,170,.4),
    0 0 220px rgba(170,0,255,.22);
}
.shero-stat--votes.is-empty{
  filter: saturate(.35);
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,.12) inset,
    0 0 18px rgba(255,255,255,.05);
}

/* ============ EVE — almost as loud, YELLOW × CYAN ============ */
.shero-stat--eve{
  border-color: rgba(255,255,0,.72);
  background:
    repeating-linear-gradient(
      0deg, transparent 0, transparent 4px,
      rgba(255,255,0,.03) 4px, rgba(255,255,0,.03) 5px
    ),
    linear-gradient(160deg,
      rgba(255,255,0,.24) 0%,
      rgba(0,255,255,.20) 55%,
      rgba(0,170,255,.12) 100%),
    rgba(14,14,0,.62);
  box-shadow:
    0 0 0 2px rgba(255,255,0,.5) inset,
    0 0 0 4px rgba(255,255,0,.15),
    0 0 46px rgba(255,255,0,.48),
    0 0 110px rgba(0,255,255,.32),
    0 0 180px rgba(255,255,0,.14);
}
.shero-stat--eve .shero-stat__icon{
  font-size: 3rem;
  text-shadow:
    0 0 24px rgba(255,255,0,1),
    0 0 50px rgba(0,255,255,.8),
    0 0 100px rgba(0,255,255,.4);
}
.shero-stat--eve .shero-stat__num{
  font-size: clamp(3.8rem, 7vw, 5.1rem);
  text-shadow:
    0 0 36px rgba(255,255,0,.75),
    0 0 72px rgba(0,255,255,.5),
    0 0 120px rgba(255,255,0,.3);
}
.shero-stat--eve:hover{
  border-color: rgba(255,255,0,1);
  box-shadow:
    0 0 0 2.5px rgba(255,255,0,.85) inset,
    0 0 0 6px rgba(255,255,0,.28),
    0 0 68px rgba(255,255,0,.7),
    0 0 150px rgba(0,255,255,.5),
    0 0 220px rgba(255,255,0,.22);
}

/* ============ SCANS — heavy CYAN ============ */
.shero-stat--scans{
  border-color: rgba(0,255,255,.72);
  background:
    repeating-linear-gradient(
      0deg, transparent 0, transparent 4px,
      rgba(0,255,255,.03) 4px, rgba(0,255,255,.03) 5px
    ),
    linear-gradient(160deg, rgba(0,255,255,.24) 0%, rgba(0,170,255,.12) 100%),
    rgba(0,12,18,.62);
  box-shadow:
    0 0 0 2px rgba(0,255,255,.5) inset,
    0 0 0 4px rgba(0,255,255,.15),
    0 0 36px rgba(0,255,255,.45),
    0 0 90px rgba(0,255,255,.24);
}
.shero-stat--scans .shero-stat__icon{
  font-size: 2.15rem;
  text-shadow:
    0 0 22px rgba(0,255,255,1),
    0 0 44px rgba(0,255,255,.75),
    0 0 80px rgba(0,170,255,.4);
}
.shero-stat--scans .shero-stat__num{
  text-shadow:
    0 0 30px rgba(0,255,255,.7),
    0 0 60px rgba(0,255,255,.4);
}
.shero-stat--scans:hover{
  border-color: rgba(0,255,255,1);
  box-shadow:
    0 0 0 2.5px rgba(0,255,255,.85) inset,
    0 0 0 6px rgba(0,255,255,.28),
    0 0 56px rgba(0,255,255,.65),
    0 0 130px rgba(0,255,255,.38);
}

/* ============ SHARES — heavy ELECTRIC BLUE / VIOLET ============ */
.shero-stat--shares{
  border-color: rgba(79,168,255,.72);
  background:
    repeating-linear-gradient(
      0deg, transparent 0, transparent 4px,
      rgba(79,168,255,.03) 4px, rgba(79,168,255,.03) 5px
    ),
    linear-gradient(160deg, rgba(79,168,255,.24) 0%, rgba(170,0,255,.14) 100%),
    rgba(0,6,22,.62);
  box-shadow:
    0 0 0 2px rgba(79,168,255,.5) inset,
    0 0 0 4px rgba(79,168,255,.15),
    0 0 36px rgba(79,168,255,.45),
    0 0 90px rgba(170,0,255,.22);
}
.shero-stat--shares .shero-stat__icon{
  font-size: 2.15rem;
  text-shadow:
    0 0 22px rgba(79,168,255,1),
    0 0 44px rgba(170,0,255,.7),
    0 0 80px rgba(170,0,255,.35);
}
.shero-stat--shares .shero-stat__num{
  text-shadow:
    0 0 30px rgba(79,168,255,.7),
    0 0 60px rgba(170,0,255,.38);
}
.shero-stat--shares:hover{
  border-color: rgba(79,168,255,1);
  box-shadow:
    0 0 0 2.5px rgba(79,168,255,.85) inset,
    0 0 0 6px rgba(79,168,255,.28),
    0 0 56px rgba(79,168,255,.65),
    0 0 130px rgba(170,0,255,.4);
}

/* ---- Responsive v3 ---- */
@media (max-width: 760px){
  .shero__stats.shero__stats--dash{ gap: .9rem; margin-top: 1rem; }
  .shero-stat--xl{
    grid-column: 1 / -1;
    min-height: 168px;
    padding: 1.7rem 1.6rem 1.5rem;
    border-width: 2.5px;
  }
  .shero-stat--xl .shero-stat__icon{ font-size: 2.3rem; }
  .shero-stat--xl .shero-stat__num{ font-size: clamp(3.2rem, 13vw, 4.4rem); }
  .shero-stat--votes .shero-stat__icon{ font-size: 2.6rem; }
  .shero-stat--votes .shero-stat__num{ font-size: clamp(3.4rem, 14vw, 4.6rem); }
  .shero-stat--eve   .shero-stat__num{ font-size: clamp(3.2rem, 13vw, 4.3rem); }
  .shero-stat--md{ min-height: 132px; padding: 1.3rem 1.35rem; border-width: 2px; }
  .shero-stat--md .shero-stat__icon{ font-size: 1.75rem; }
  .shero-stat--md .shero-stat__num{ font-size: clamp(2.2rem, 8.4vw, 2.8rem); }
}
@media (max-width: 420px){
  .shero-stat--xl{ min-height: 148px; padding: 1.4rem 1.3rem 1.25rem; }
  .shero-stat--xl .shero-stat__icon{ font-size: 2rem; }
  .shero-stat--xl .shero-stat__num{ font-size: clamp(2.8rem, 12vw, 3.6rem); }
  .shero-stat--md { min-height: 116px; padding: 1.1rem 1.15rem; }
  .shero-stat--md .shero-stat__num{ font-size: clamp(1.9rem, 8vw, 2.4rem); }
}

/* Reduced motion — no lift, no bump */
@media (prefers-reduced-motion: reduce){
  .shero-stat:hover{ transform: none; }
}

/* ============================================================
   hnew-hero — FINAL refinement pass
   "Elegant cyberpunk power": less noise, stronger focus,
   cleaner hierarchy, more magnetic CTA. Append-only overrides.
   ============================================================ */

/* === Atmosphere: calmer, more refined === */
.hnew-hero__orb{ filter: blur(95px); }
.hnew-hero__orb--c{ opacity: .42; width: 480px; height: 480px; }
.hnew-hero__orb--m{ opacity: .38; width: 440px; height: 440px; }
.hnew-hero__orb--y{ opacity: .26; width: 360px; height: 360px; }
.hnew-hero__scan{ opacity: .35; }
.hnew-hero__grid{ opacity: .50; }
.hnew-p{ opacity: .55; }
.hnew-hero__qr{ opacity: .65; font-size: 3.4rem; color: rgba(0,255,255,.07); }
.hnew-hero__qr--2{ top: 72%; left: 86%; font-size: 4rem; }
.hnew-hero__vignette{
  background: radial-gradient(ellipse at center,
    transparent 38%, rgba(0,0,0,.45) 80%, rgba(0,0,0,.78) 100%);
}

/* === Content: more breathing room around the focal point === */
.hnew-hero__content{
  padding-right: clamp(0px, 8vw, 200px);
}

/* Eyebrow: smaller + tighter to look like a refined chip */
.hnew-hero__eyebrow{
  font-size: .68rem;
  letter-spacing: .26em;
  padding: .35rem .85rem;
  margin-bottom: 1.35rem;
  background: rgba(0,255,255,.04);
  border-color: rgba(0,255,255,.30);
  backdrop-filter: blur(6px);
}

/* === Headline: cleaner shadow, stronger focus === */
.hero.hnew-hero h1.hnew-hero__title,
.hnew-hero h1.hnew-hero__title,
.hnew-hero__title{
  margin-bottom: .9rem;
  letter-spacing: -.02em;
  line-height: 1.04;
  text-shadow:
    0 1px 2px rgba(0,0,0,.55),
    0 4px 22px rgba(0,0,0,.45);
}

/* Sub: bolder, brighter — clear secondary anchor */
.hnew-hero__sub{
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.4;
  font-weight: 600;
  color: rgba(255,255,255,.94);
  margin-bottom: .7rem;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
  max-width: 620px;
}

/* Pitch: slightly bigger, calmer, max-width tighter for rhythm */
.hnew-hero__pitch{
  font-size: clamp(.95rem, 1.15vw, 1.05rem);
  line-height: 1.6;
  color: rgba(255,255,255,.72);
  margin-bottom: 1.35rem;
  max-width: 580px;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* Badges: more refined, smaller, lighter borders */
.hnew-hero__badges{
  gap: .5rem;
  margin-bottom: 1.15rem;
}
.hnew-hero__badge{
  font-size: .78rem;
  padding: .42rem .85rem;
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(6px);
}

/* === Live-strip: even more whisper-quiet === */
.hnew-hero__live{
  font-size: .76rem;
  padding: .38rem .85rem .38rem .7rem;
  margin-bottom: 1.5rem;
  background: rgba(0,255,255,.025);
  border-color: rgba(0,255,255,.13);
  box-shadow: 0 0 10px rgba(0,255,255,.06);
  color: rgba(255,255,255,.7);
}
.hnew-hero__live-lbl{
  font-size: .64rem;
  letter-spacing: .24em;
  color: rgba(79,255,166,.85);
  text-shadow: 0 0 6px rgba(79,255,166,.3);
}
.hnew-hero__live-dot{
  width: 7px; height: 7px;
  box-shadow: 0 0 6px #4fffa6, 0 0 12px rgba(79,255,166,.5);
}
.hnew-hero__live-sep{ color: rgba(255,255,255,.22); }

/* === CTA: stronger magnetism on primary, calmer secondaries === */
.hnew-hero__cta{
  gap: .65rem;
  margin-top: .25rem;
}
.hnew-btn--primary{
  padding: 1.1rem 1.8rem;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: .01em;
  border-radius: 16px;
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,.15) inset,
    0 8px 30px rgba(255,0,170,.45),
    0 0 50px rgba(255,0,170,.30),
    0 0 90px rgba(170,0,255,.18);
  animation: hnewBtnBreathe 3.6s ease-in-out infinite;
}
.hnew-btn--primary:hover{
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,.25) inset,
    0 12px 42px rgba(255,0,170,.6),
    0 0 70px rgba(255,0,170,.45),
    0 0 130px rgba(170,0,255,.28);
}
.hnew-btn--primary .hnew-btn__icon{
  font-size: 1.25em;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.85));
}
@keyframes hnewBtnBreathe {
  0%,100% { filter: brightness(1); }
  50%     { filter: brightness(1.08); }
}
@media (prefers-reduced-motion: reduce){
  .hnew-btn--primary{ animation: none; }
}
/* Secondaries — calmer borders so primary leads the eye */
.hnew-btn--cyan,
.hnew-btn--yellow,
.hnew-btn--ghost{
  font-size: .92rem;
  padding: .82rem 1.2rem;
}

/* === Dot: smaller, more breathing room, calmer ring === */
.hnew-hero__dot{
  top: 42px;
  right: 42px;
  width: 164px;
  height: 164px;
}
.hnew-hero__dot .dot-mascot{ width: 164px; height: 164px; }
.hnew-hero__dot-halo{
  inset: -36px;
  opacity: .72;
}
.hnew-hero__dot-ring{
  inset: -18px;
  opacity: .55;
  border-style: dashed;
}

/* === Mobile: even cleaner stacking === */
@media (max-width: 980px){
  .hnew-hero__content{ padding-right: 0; }
  .hnew-hero__dot{ width: 148px; height: 148px; top: 24px; right: 24px; }
  .hnew-hero__dot .dot-mascot{ width: 148px; height: 148px; }
  .hnew-hero__orb--c{ width: 360px; height: 360px; opacity: .36; }
  .hnew-hero__orb--m{ width: 320px; height: 320px; opacity: .32; }
  .hnew-hero__orb--y{ display: none; }
  .hnew-hero__qr{ display: none; }
  .hnew-p:nth-child(n+4){ display: none; }   /* keep only 3 particles */
}
@media (max-width: 640px){
  .hero.hnew-hero h1.hnew-hero__title,
  .hnew-hero h1.hnew-hero__title,
  .hnew-hero__title{
    font-size: clamp(1.95rem, 8.2vw, 2.6rem);
    line-height: 1.04;
    letter-spacing: -.018em;
    max-width: 16ch;
    text-shadow:
      0 1px 2px rgba(0,0,0,.65),
      0 3px 14px rgba(0,0,0,.5);
  }
  .hnew-hero__sub{ font-size: 1rem; margin-bottom: .55rem; }
  .hnew-hero__pitch{ font-size: .9rem; margin-bottom: 1.05rem; line-height: 1.52; }
  .hnew-hero__badges{ margin-bottom: 1rem; }
  .hnew-hero__badge{ font-size: .72rem; padding: .35rem .7rem; }
  .hnew-hero__live{
    font-size: .72rem;
    padding: .3rem .65rem .3rem .5rem;
    margin-bottom: 1.1rem;
  }
  .hnew-hero__live-lbl{ font-size: .6rem; letter-spacing: .2em; }
  .hnew-btn--primary{
    padding: .95rem 1.4rem;
    font-size: 1rem;
    box-shadow:
      0 0 0 1.5px rgba(255,255,255,.15) inset,
      0 6px 22px rgba(255,0,170,.38),
      0 0 36px rgba(255,0,170,.22);
  }
  .hnew-hero__orb{ opacity: .26 !important; }
  .hnew-p:nth-child(n+3){ display: none; }   /* keep 2 particles on phone */
}
@media (max-width: 420px){
  .hnew-hero__dot{ width: 128px; height: 128px; top: 20px; right: 18px; }
  .hnew-hero__dot .dot-mascot{ width: 128px; height: 128px; }
  .hnew-hero__live-stat:nth-of-type(3),
  .hnew-hero__live-sep:nth-of-type(2){ display: none; }
}

/* ============================================================
   shero-stats v4 — clear hierarchy pass
   Order: Votes (#1) → EVE (#2) → Scans (#3) → Shares (#4)
   Goal: Votes is the unambiguous hero metric; EVE clearly second;
   Scans/Shares balanced sidekicks. Append-only overrides.
   ============================================================ */

/* === Stronger separation between cards === */
.shero__stats.shero__stats--dash{
  gap: 1.55rem;
  margin-top: 1.6rem;
}

/* === VOTES (#1) — push noticeably above EVE === */
.shero-stat--votes{
  border-width: 3.5px;
  border-radius: 28px;
  min-height: 224px;
  padding: 2.25rem 2.15rem 2rem;
  position: relative;
}
.shero-stat--votes .shero-stat__icon{
  font-size: 3.7rem;
  margin-bottom: .35rem;
  filter: drop-shadow(0 0 18px rgba(255,0,170,.85));
}
.shero-stat--votes .shero-stat__num{
  font-size: clamp(4.6rem, 8.4vw, 6.2rem);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: .98;
}
.shero-stat--votes .shero-stat__lbl{
  font-size: .92rem;
  letter-spacing: .28em;
  font-weight: 800;
  color: rgba(255,200,235,.95);
  text-shadow: 0 0 10px rgba(255,0,170,.6);
}
/* Faint "01" rank marker (top-left) — pure decoration */
.shero-stat--votes::before{
  content: "01";
  position: absolute;
  top: 14px; left: 18px;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .22em;
  color: rgba(255,0,170,.55);
  text-shadow: 0 0 8px rgba(255,0,170,.4);
  pointer-events: none;
  z-index: 2;
}

/* === EVE (#2) — clearly second tier === */
.shero-stat--eve{
  border-width: 2.5px;
  min-height: 188px;
  padding: 1.85rem 1.85rem 1.7rem;
  position: relative;
}
.shero-stat--eve .shero-stat__icon{ font-size: 2.7rem; }
.shero-stat--eve .shero-stat__num{
  font-size: clamp(3.3rem, 5.8vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -.015em;
}
.shero-stat--eve .shero-stat__lbl{
  font-size: .8rem;
  letter-spacing: .24em;
  color: rgba(255,255,210,.88);
}
.shero-stat--eve::before{
  content: "02";
  position: absolute;
  top: 12px; left: 16px;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: .64rem; font-weight: 800; letter-spacing: .22em;
  color: rgba(255,255,0,.5);
  text-shadow: 0 0 6px rgba(255,255,0,.35);
  pointer-events: none;
}

/* === SCANS (#3) + SHARES (#4) — balanced supporting metrics === */
.shero-stat--scans,
.shero-stat--shares{
  min-height: 152px;
  padding: 1.55rem 1.55rem 1.4rem;
  border-width: 2px;
  position: relative;
}
.shero-stat--scans .shero-stat__num,
.shero-stat--shares .shero-stat__num{
  font-size: clamp(2.4rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -.01em;
}
.shero-stat--scans .shero-stat__lbl,
.shero-stat--shares .shero-stat__lbl{
  font-size: .72rem;
  letter-spacing: .22em;
}
.shero-stat--scans::before{
  content: "03";
  position: absolute; top: 10px; left: 14px;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: .6rem; font-weight: 800; letter-spacing: .22em;
  color: rgba(0,255,255,.5);
  text-shadow: 0 0 6px rgba(0,255,255,.35);
  pointer-events: none;
}
.shero-stat--shares::before{
  content: "04";
  position: absolute; top: 10px; left: 14px;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: .6rem; font-weight: 800; letter-spacing: .22em;
  color: rgba(79,168,255,.55);
  text-shadow: 0 0 6px rgba(79,168,255,.35);
  pointer-events: none;
}

/* === Desktop grid: Votes leads, others follow ===
   2 col layout where Votes takes both columns,
   EVE takes both columns, Scans + Shares share row 3.
   Cleaner than 4-equal columns and respects the rank order. */
@media (min-width: 761px){
  .shero__stats.shero__stats--dash{
    grid-template-columns: 1fr 1fr;
  }
  .shero-stat--votes{ grid-column: 1 / -1; }
  .shero-stat--eve  { grid-column: 1 / -1; }
  .shero-stat--scans{ grid-column: 1 / 2; }
  .shero-stat--shares{ grid-column: 2 / 3; }
}
@media (min-width: 1100px){
  /* On wide desktop go to a smart 3-row layout that highlights Votes:
     Row 1: Votes (full width, hero)
     Row 2: EVE (3/5) + Scans (2/5)
     Row 3: Shares full width — actually keep Shares beside Scans.
     We use a 6-col grid for proportional control. */
  .shero__stats.shero__stats--dash{
    grid-template-columns: repeat(6, 1fr);
    gap: 1.4rem;
  }
  .shero-stat--votes { grid-column: 1 / -1; }
  .shero-stat--eve   { grid-column: 1 / 4; }
  .shero-stat--scans { grid-column: 4 / 6; }
  .shero-stat--shares{ grid-column: 6 / 7; }
}
/* Safety: above 1100 the 1-col Shares can feel cramped, so on very wide
   screens fall back to even split for the secondary row. */
@media (min-width: 1380px){
  .shero__stats.shero__stats--dash{
    grid-template-columns: repeat(4, 1fr);
  }
  .shero-stat--votes { grid-column: 1 / -1; }
  .shero-stat--eve   { grid-column: 1 / 3; }
  .shero-stat--scans { grid-column: 3 / 4; }
  .shero-stat--shares{ grid-column: 4 / 5; }
}

/* === Mobile: Votes full row → EVE full row → Scans+Shares 2-col === */
@media (max-width: 760px){
  .shero__stats.shero__stats--dash{
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  .shero-stat--votes { grid-column: 1 / -1; min-height: 184px; padding: 1.8rem 1.6rem 1.5rem; border-width: 3px; }
  .shero-stat--eve   { grid-column: 1 / -1; min-height: 148px; padding: 1.5rem 1.5rem 1.3rem; }
  .shero-stat--scans { grid-column: 1 / 2;  min-height: 120px; padding: 1.15rem 1.1rem 1rem; }
  .shero-stat--shares{ grid-column: 2 / 3;  min-height: 120px; padding: 1.15rem 1.1rem 1rem; }
  .shero-stat--votes .shero-stat__num{ font-size: clamp(3.6rem, 15vw, 5rem); }
  .shero-stat--votes .shero-stat__icon{ font-size: 2.8rem; }
  .shero-stat--votes .shero-stat__lbl{ font-size: .8rem; letter-spacing: .22em; }
  .shero-stat--eve   .shero-stat__num{ font-size: clamp(2.8rem, 11vw, 3.6rem); }
  .shero-stat--eve   .shero-stat__icon{ font-size: 2.1rem; }
  .shero-stat--scans .shero-stat__num,
  .shero-stat--shares .shero-stat__num{ font-size: clamp(1.9rem, 8.4vw, 2.5rem); }
  .shero-stat--scans .shero-stat__icon,
  .shero-stat--shares .shero-stat__icon{ font-size: 1.55rem; }
  .shero-stat--scans .shero-stat__lbl,
  .shero-stat--shares .shero-stat__lbl{ font-size: .66rem; letter-spacing: .2em; }
  .shero-stat--votes::before { font-size: .62rem; top: 10px; left: 14px; }
  .shero-stat--eve::before   { font-size: .58rem; top: 9px;  left: 12px; }
  .shero-stat--scans::before,
  .shero-stat--shares::before{ font-size: .55rem; top: 8px;  left: 10px; }
}
@media (max-width: 420px){
  .shero-stat--votes { min-height: 160px; padding: 1.5rem 1.3rem 1.25rem; }
  .shero-stat--votes .shero-stat__num{ font-size: clamp(3rem, 13.5vw, 4rem); }
  .shero-stat--votes .shero-stat__icon{ font-size: 2.3rem; }
  .shero-stat--eve   { min-height: 128px; padding: 1.25rem 1.2rem 1.1rem; }
  .shero-stat--eve   .shero-stat__num{ font-size: clamp(2.4rem, 10vw, 3rem); }
  .shero-stat--scans, .shero-stat--shares{ min-height: 106px; padding: 1rem .95rem .85rem; }
  .shero-stat--scans .shero-stat__num,
  .shero-stat--shares .shero-stat__num{ font-size: clamp(1.7rem, 7.8vw, 2.2rem); }
}

/* ============================================================
   shero-stats v5 — spacious & premium breathing pass
   Goal: generous padding, 4-digit safe, perfectly balanced grid,
   tabular-nums everywhere, no wrap/overflow. Append-only.
   ============================================================ */

/* === Grid: stronger separation, generous gap === */
.shero__stats.shero__stats--dash{
  gap: 1.85rem;
  margin-top: 1.85rem;
}

/* === All cards: tabular-nums, no wrap, consistent rhythm === */
.shero-stat{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .35rem;
  overflow: hidden;
}
.shero-stat__num{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  white-space: nowrap;
  line-height: .96;
  min-width: 0;
  max-width: 100%;
  word-break: keep-all;
  overflow-wrap: normal;
  text-overflow: clip;
}
.shero-stat__lbl{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.shero-stat__icon{ line-height: 1; }

/* === VOTES (#1) — most breathing room === */
.shero-stat--votes{
  min-height: 248px;
  padding: 2.6rem 2.4rem 2.3rem;
  border-radius: 30px;
  gap: .5rem;
}
.shero-stat--votes .shero-stat__icon{
  font-size: 3.4rem;
  margin-bottom: .5rem;
}
.shero-stat--votes .shero-stat__num{
  font-size: clamp(4.2rem, 7.6vw, 5.8rem);
  letter-spacing: -.025em;
  line-height: .94;
  padding-top: .1rem;
  padding-bottom: .15rem;
}
.shero-stat--votes .shero-stat__lbl{
  margin-top: .25rem;
  font-size: .88rem;
  letter-spacing: .26em;
}

/* === EVE (#2) — generous, slightly tighter than Votes === */
.shero-stat--eve{
  min-height: 208px;
  padding: 2.15rem 2.15rem 2rem;
  border-radius: 26px;
  gap: .4rem;
}
.shero-stat--eve .shero-stat__icon{
  font-size: 2.6rem;
  margin-bottom: .4rem;
}
.shero-stat--eve .shero-stat__num{
  font-size: clamp(3.1rem, 5.4vw, 4.2rem);
  letter-spacing: -.018em;
  line-height: .96;
  padding-top: .08rem;
  padding-bottom: .12rem;
}
.shero-stat--eve .shero-stat__lbl{
  margin-top: .2rem;
  font-size: .78rem;
  letter-spacing: .24em;
}

/* === SCANS (#3) + SHARES (#4) — calm twins === */
.shero-stat--scans,
.shero-stat--shares{
  min-height: 172px;
  padding: 1.8rem 1.75rem 1.65rem;
  border-radius: 22px;
  gap: .35rem;
}
.shero-stat--scans .shero-stat__icon,
.shero-stat--shares .shero-stat__icon{
  font-size: 2.05rem;
  margin-bottom: .35rem;
}
.shero-stat--scans .shero-stat__num,
.shero-stat--shares .shero-stat__num{
  font-size: clamp(2.3rem, 3.8vw, 2.9rem);
  letter-spacing: -.012em;
  line-height: .98;
  padding-bottom: .08rem;
}
.shero-stat--scans .shero-stat__lbl,
.shero-stat--shares .shero-stat__lbl{
  margin-top: .15rem;
  font-size: .72rem;
  letter-spacing: .22em;
}

/* === Rank markers slightly nudged so they don't crowd padding === */
.shero-stat--votes::before { top: 18px; left: 22px; font-size: .7rem; }
.shero-stat--eve::before   { top: 16px; left: 20px; font-size: .66rem; }
.shero-stat--scans::before,
.shero-stat--shares::before{ top: 12px; left: 16px; font-size: .62rem; }

/* === Desktop grid: Votes full → EVE full → Scans + Shares 2-col ===
   Single clean layout across all desktop widths — no more 3-tier
   1100/1380 reshuffles. Predictable, balanced, breathable. */
@media (min-width: 761px){
  .shero__stats.shero__stats--dash{
    grid-template-columns: 1fr 1fr;
    gap: 1.85rem;
  }
  .shero-stat--votes  { grid-column: 1 / -1; }
  .shero-stat--eve    { grid-column: 1 / -1; }
  .shero-stat--scans  { grid-column: 1 / 2; }
  .shero-stat--shares { grid-column: 2 / 3; }
}

/* === Mobile (≤760): same order, generous vertical spacing === */
@media (max-width: 760px){
  .shero__stats.shero__stats--dash{
    grid-template-columns: 1fr 1fr;
    gap: 1.3rem;
    margin-top: 1.4rem;
  }
  .shero-stat--votes  { grid-column: 1 / -1; min-height: 208px; padding: 2.1rem 1.85rem 1.85rem; border-radius: 26px; }
  .shero-stat--eve    { grid-column: 1 / -1; min-height: 172px; padding: 1.7rem 1.7rem 1.55rem; border-radius: 22px; }
  .shero-stat--scans  { grid-column: 1 / 2;  min-height: 140px; padding: 1.35rem 1.25rem 1.2rem;  border-radius: 18px; }
  .shero-stat--shares { grid-column: 2 / 3;  min-height: 140px; padding: 1.35rem 1.25rem 1.2rem;  border-radius: 18px; }

  .shero-stat--votes  .shero-stat__icon{ font-size: 2.6rem; margin-bottom: .35rem; }
  .shero-stat--votes  .shero-stat__num { font-size: clamp(3.4rem, 13.5vw, 4.6rem); }
  .shero-stat--votes  .shero-stat__lbl { font-size: .78rem; letter-spacing: .22em; }

  .shero-stat--eve    .shero-stat__icon{ font-size: 2.1rem; margin-bottom: .3rem; }
  .shero-stat--eve    .shero-stat__num { font-size: clamp(2.7rem, 10.5vw, 3.5rem); }
  .shero-stat--eve    .shero-stat__lbl { font-size: .72rem; letter-spacing: .2em; }

  .shero-stat--scans  .shero-stat__icon,
  .shero-stat--shares .shero-stat__icon{ font-size: 1.55rem; margin-bottom: .25rem; }
  .shero-stat--scans  .shero-stat__num,
  .shero-stat--shares .shero-stat__num{ font-size: clamp(1.85rem, 7.8vw, 2.4rem); }
  .shero-stat--scans  .shero-stat__lbl,
  .shero-stat--shares .shero-stat__lbl{ font-size: .64rem; letter-spacing: .2em; }
}

/* === Phone (≤420): keep 4-digit safety — drop to 1-col ===
   Below this width, even tight 2-col gets pressed.
   Stack everything to give each card the full screen. */
@media (max-width: 420px){
  .shero__stats.shero__stats--dash{
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }
  .shero-stat--votes,
  .shero-stat--eve,
  .shero-stat--scans,
  .shero-stat--shares{ grid-column: 1 / -1; }

  .shero-stat--votes { min-height: 184px; padding: 1.75rem 1.55rem 1.5rem; }
  .shero-stat--votes .shero-stat__num{ font-size: clamp(3rem, 13vw, 4rem); }
  .shero-stat--votes .shero-stat__icon{ font-size: 2.3rem; }

  .shero-stat--eve   { min-height: 152px; padding: 1.45rem 1.45rem 1.3rem; }
  .shero-stat--eve   .shero-stat__num{ font-size: clamp(2.4rem, 10vw, 3rem); }

  .shero-stat--scans, .shero-stat--shares{ min-height: 124px; padding: 1.2rem 1.2rem 1.05rem; }
  .shero-stat--scans .shero-stat__num,
  .shero-stat--shares .shero-stat__num{ font-size: clamp(1.85rem, 7.6vw, 2.3rem); }
}

/* ============================================================
   shero-stats v6 — mobile label-wrap fix
   v5 forced nowrap+ellipsis which clipped long DE strings like
   "EVE gesammelt", "Bereits geliebt von …", "Stimmen abgegeben".
   v6: allow wrapping on mobile + give labels their own breathing
   block, slightly trim icon/num where needed. Append-only.
   ============================================================ */

/* ---------- Tablet & phone (≤760) ---------- */
@media (max-width: 760px){
  /* Labels: 2-line friendly, balanced wrapping, no ellipsis cut */
  .shero-stat__lbl{
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
    -webkit-hyphens: auto;
    line-height: 1.18;
    text-wrap: balance;
    max-width: 100%;
    display: block;
  }
  /* Allow card to grow vertically if label wraps */
  .shero-stat{
    overflow: visible;
    height: auto;
  }
  /* Cap inner number so a long label has room — uses min() of clamp-fit */
  .shero-stat__num{
    max-width: 100%;
  }

  /* Votes: comfy label block */
  .shero-stat--votes{ padding-bottom: 1.95rem; }
  .shero-stat--votes .shero-stat__lbl{
    font-size: .74rem;
    letter-spacing: .2em;
    margin-top: .45rem;
    line-height: 1.22;
  }
  .shero-stat--votes .shero-stat__icon{ font-size: 2.4rem; }
  .shero-stat--votes .shero-stat__num{
    font-size: clamp(3.1rem, 12.5vw, 4.3rem);
    line-height: .96;
  }

  /* EVE: slightly smaller label, allowed wrap */
  .shero-stat--eve{ padding-bottom: 1.65rem; }
  .shero-stat--eve .shero-stat__lbl{
    font-size: .68rem;
    letter-spacing: .18em;
    margin-top: .4rem;
    line-height: 1.22;
  }
  .shero-stat--eve .shero-stat__icon{ font-size: 1.95rem; }
  .shero-stat--eve .shero-stat__num{
    font-size: clamp(2.5rem, 10vw, 3.3rem);
    line-height: .98;
  }

  /* Scans + Shares: short labels but still wrap-safe */
  .shero-stat--scans,
  .shero-stat--shares{
    padding-bottom: 1.3rem;
    min-height: 148px;
  }
  .shero-stat--scans .shero-stat__lbl,
  .shero-stat--shares .shero-stat__lbl{
    font-size: .62rem;
    letter-spacing: .18em;
    margin-top: .35rem;
    line-height: 1.22;
  }
  .shero-stat--scans .shero-stat__icon,
  .shero-stat--shares .shero-stat__icon{ font-size: 1.5rem; }
  .shero-stat--scans .shero-stat__num,
  .shero-stat--shares .shero-stat__num{
    font-size: clamp(1.7rem, 7.2vw, 2.2rem);
    line-height: .98;
  }
}

/* ---------- Phone (≤420) — single column, max breathing ---------- */
@media (max-width: 420px){
  .shero-stat--votes{
    min-height: 200px;
    padding: 1.7rem 1.5rem 1.65rem;
  }
  .shero-stat--votes .shero-stat__num{
    font-size: clamp(2.8rem, 12vw, 3.8rem);
  }
  .shero-stat--votes .shero-stat__icon{ font-size: 2.1rem; }
  .shero-stat--votes .shero-stat__lbl{
    font-size: .72rem;
    letter-spacing: .18em;
    line-height: 1.25;
  }

  .shero-stat--eve{
    min-height: 168px;
    padding: 1.4rem 1.4rem 1.4rem;
  }
  .shero-stat--eve .shero-stat__num{
    font-size: clamp(2.2rem, 9vw, 2.8rem);
  }
  .shero-stat--eve .shero-stat__icon{ font-size: 1.8rem; }
  .shero-stat--eve .shero-stat__lbl{
    font-size: .66rem;
    letter-spacing: .16em;
    line-height: 1.25;
  }

  .shero-stat--scans,
  .shero-stat--shares{
    min-height: 134px;
    padding: 1.15rem 1.15rem 1.1rem;
  }
  .shero-stat--scans .shero-stat__num,
  .shero-stat--shares .shero-stat__num{
    font-size: clamp(1.65rem, 7vw, 2.1rem);
  }
  .shero-stat--scans .shero-stat__icon,
  .shero-stat--shares .shero-stat__icon{ font-size: 1.4rem; }
  .shero-stat--scans .shero-stat__lbl,
  .shero-stat--shares .shero-stat__lbl{
    font-size: .6rem;
    letter-spacing: .16em;
    line-height: 1.22;
  }

  /* Rank markers: tighter to corners so they don't push into the label */
  .shero-stat--votes::before  { top: 12px; left: 16px; font-size: .58rem; }
  .shero-stat--eve::before    { top: 10px; left: 14px; font-size: .54rem; }
  .shero-stat--scans::before,
  .shero-stat--shares::before { top: 8px;  left: 12px; font-size: .5rem; }
}

/* ============================================================
   spread-desc — mobile readability + Show more toggle
   Fixes truncation of long descriptions, prevents word/URL
   overflow, and adds a collapsible state for very long bodies.
   Append-only.
   ============================================================ */

.spread-desc-wrap{
  position: relative;
  margin-top: 1rem;
  width: 100%;
  max-width: 100%;
  overflow: hidden;  /* clip only during collapsed state */
}
.spread-desc-wrap.is-expanded,
.spread-desc-wrap:not(.is-collapsible){
  overflow: visible;
}

/* The actual markdown body */
.spread-desc{
  width: 100%;
  max-width: 100%;
  color: rgba(232,232,242,.96);
  line-height: 1.72;
  font-size: 1rem;
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.spread-desc p{
  margin: 0 0 .9rem;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.spread-desc a{
  word-break: break-all;        /* long URLs never overflow */
  overflow-wrap: anywhere;
}
.spread-desc img,
.spread-desc video,
.spread-desc iframe,
.spread-desc pre,
.spread-desc table{
  max-width: 100%;
  height: auto;
  overflow-x: auto;
}
.spread-desc pre{
  white-space: pre-wrap;
  word-break: break-word;
}

/* Collapsed state — desktop */
.spread-desc-wrap.is-collapsible.is-collapsed .spread-desc{
  max-height: 360px;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 0, #000 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 78%, transparent 100%);
}
.spread-desc-wrap.is-expanded .spread-desc{
  max-height: none;
  mask-image: none;
  -webkit-mask-image: none;
}

/* Bottom fade gradient (extra layer for safari/older browsers) */
.spread-desc__fade{
  position: absolute;
  left: 0; right: 0; bottom: 52px;
  height: 90px;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(10,10,14,.55) 60%,
    rgba(10,10,14,.92) 100%);
  pointer-events: none;
  opacity: 1;
  transition: opacity .25s ease;
}
.spread-desc-wrap.is-expanded .spread-desc__fade{ opacity: 0; }

/* Show more / Show less toggle button */
.spread-desc__toggle{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: .75rem 0 .25rem;
  padding: .65rem 1.2rem;
  background:
    linear-gradient(135deg,
      rgba(0,255,255,.10) 0%,
      rgba(255,0,170,.10) 100%),
    rgba(10,10,14,.6);
  border: 1.5px solid rgba(0,255,255,.4);
  border-radius: 12px;
  color: rgba(225,250,255,.95);
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(0,255,255,.15) inset,
    0 0 16px rgba(0,255,255,.18),
    0 6px 18px rgba(0,0,0,.4);
  transition: all .22s ease;
  position: relative;
  z-index: 2;
}
.spread-desc__toggle:hover{
  border-color: rgba(0,255,255,.7);
  background:
    linear-gradient(135deg,
      rgba(0,255,255,.18) 0%,
      rgba(255,0,170,.18) 100%),
    rgba(10,10,14,.6);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(0,255,255,.25) inset,
    0 0 28px rgba(0,255,255,.35),
    0 8px 24px rgba(255,0,170,.18);
  transform: translateY(-1px);
}
.spread-desc__toggle:focus-visible{
  outline: 2px solid rgba(0,255,255,.7);
  outline-offset: 2px;
}
.spread-desc__toggle-arrow{
  display: inline-block;
  transition: transform .25s ease;
  font-size: .9em;
  line-height: 1;
}
.spread-desc-wrap.is-expanded .spread-desc__toggle-arrow{
  transform: rotate(180deg);
}

/* Toggle button sits below the fade, so push it under the desc */
.spread-desc-wrap.is-collapsible .spread-desc__toggle{
  margin-top: .85rem;
}

/* ----- Mobile (≤760): more breathing room, tighter fade, full-width btn ----- */
@media (max-width: 760px){
  .spread-desc-wrap{ margin-top: 1.2rem; }
  .spread-desc{
    font-size: .98rem;
    line-height: 1.78;
  }
  .spread-desc p{ margin: 0 0 1rem; }
  .spread-desc-wrap.is-collapsible.is-collapsed .spread-desc{
    max-height: 280px;
  }
  .spread-desc__fade{
    bottom: 56px;
    height: 80px;
  }
  .spread-desc__toggle{
    display: flex;
    width: 100%;
    justify-content: center;
    padding: .85rem 1.1rem;
    font-size: .76rem;
    letter-spacing: .16em;
  }
  /* Markdown elements: prevent any overflow */
  .spread-desc h1{ font-size: 1.45rem; line-height: 1.25; }
  .spread-desc h2{ font-size: 1.2rem;  line-height: 1.28; }
  .spread-desc h3{ font-size: 1.05rem; line-height: 1.32; }
  .spread-desc ul,
  .spread-desc ol{ padding-left: 1.2rem; }
  .spread-desc blockquote{
    padding: .7rem .9rem;
    margin: .9rem 0;
    font-size: .96rem;
  }
}

/* ----- Phone (≤420): even more comfort ----- */
@media (max-width: 420px){
  .spread-desc{
    font-size: .96rem;
    line-height: 1.8;
  }
  .spread-desc-wrap.is-collapsible.is-collapsed .spread-desc{
    max-height: 240px;
  }
  .spread-desc__fade{
    bottom: 58px;
    height: 70px;
  }
  .spread-desc__toggle{
    padding: .9rem 1rem;
    font-size: .72rem;
    letter-spacing: .14em;
  }
}

/* Reduced motion: no transform/arrow rotation flair */
@media (prefers-reduced-motion: reduce){
  .spread-desc__toggle,
  .spread-desc__toggle-arrow,
  .spread-desc__fade{ transition: none; }
}

/* ============================================================
   SPREAD DETAIL — Comprehensive Mobile Responsiveness Pass
   Targets right-side cutoff, claim/format button overflow,
   QR hint absolute pos, owner-tools, respread/share/feature
   blocks. Append-only; preserves all existing JS hooks and
   neon styling. Mobile-first overrides at 760 / 480 / 380.
   ============================================================ */

/* ---- Page-level overflow safety (prevents any rogue child from
        creating a horizontal scrollbar on mobile) ---- */
html, body{
  max-width: 100%;
  overflow-x: hidden;
}

/* ---- Universal long-word safety inside the spread card chrome ---- */
.shero, .magic-hero, .flyer-picker, .respread-block,
.share-block, .feature-active-banner, .comments-section{
  max-width: 100%;
}
.shero *, .magic-hero *, .flyer-picker *, .respread-block *,
.share-block *, .feature-active-banner *{
  min-width: 0;
}
.shero__title, .shero-stat__lbl, .shero-stat__num,
.shero__qr-code, .qr-flyer__name, .flyer-tile__name,
.flyer-tile__desc, .respread-title, .share-title{
  overflow-wrap: anywhere;
  word-break: normal;
}

/* ----- Mobile ≤760 ----- */
@media (max-width: 760px){

  /* SHERO outer breathing + title scaling for long German titles */
  .shero{
    margin: 1rem .5rem 1.2rem;
    padding: 1.2rem .95rem 1.5rem;
    border-radius: 18px;
  }
  .shero__title{
    font-size: clamp(1.55rem, 7vw, 2.1rem) !important;
    line-height: 1.12;
    overflow-wrap: anywhere;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
  .shero__meta{ font-size: .88rem; gap: .4rem; }
  .shero__meta .shero__author,
  .shero__meta .shero__loc,
  .shero__meta .shero__origin{
    font-size: .82rem;
    padding: .14rem .5rem;
  }
  .shero__meta .origin-label{ display: inline; }

  /* QR hint was absolute → would clip outside container on small viewports */
  .shero__qr{ padding: .65rem .65rem .75rem; }
  .shero__qr img{ width: 140px !important; max-width: 60vw; height: auto; }
  .shero__qr-hint{
    position: static;
    transform: none;
    white-space: normal;
    margin-top: .35rem;
    font-size: .7rem;
    text-align: center;
  }

  /* Claim CTA — long DE labels were forcing horizontal overflow */
  .shero__claim-form{ width: 100%; max-width: 100%; margin-top: .8rem; }
  .shero__claim-btn{
    font-size: .95rem;
    padding: .95rem 1rem;
    letter-spacing: 0;
    width: 100%;
    max-width: 100%;
    white-space: normal;
    line-height: 1.18;
    word-break: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  .shero__claim-sub{ font-size: .72rem; }

  /* CENTER heart sized down so it doesn't dominate vertical flow */
  .shero__heart{ width: 120px !important; height: 120px !important; }
  .shero__halo{ width: 200px !important; height: 200px !important; }
  .shero__state{ max-width: 100%; font-size: .9rem; padding: .7rem .85rem; }
  .shero__state-main{ font-size: .98rem; }
  .shero__state-eve{ font-size: 1.05rem; }

  /* MAGIC HERO container — already 1-col under 820, but tighten paddings */
  .magic-hero{
    padding: 1rem .85rem 1.2rem;
    margin: .8rem .5rem 1.2rem;
    border-radius: 18px;
  }
  .magic-hero__grid{ gap: 14px; }
  .magic-side{ width: 100%; min-width: 0; }
  .magic-side .qr-block{ padding: 14px; }
  .magic-side .qr-block img{ max-width: 100%; height: auto; }

  /* Premium FORMAT (flyer) tile grid — was overflowing right */
  .qr-flyers{
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  .qr-flyer{
    min-height: 48px;
    padding: .55rem .35rem;
    font-size: .72rem;
    text-align: center;
  }
  .qr-flyer__name{ font-size: .72rem; }

  .flyer-picker{
    padding: 1rem .85rem;
    margin: .8rem .5rem;
    border-radius: 16px;
  }
  .flyer-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .7rem !important;
  }
  .flyer-tile{
    min-width: 0;
    padding: .8rem .7rem;
    font-size: .85rem;
  }
  .flyer-tile__name{ font-size: .92rem; }
  .flyer-tile__desc{ font-size: .76rem; }

  /* Owner tools — chips wrap full-width 2-up */
  .owner-tools{
    gap: 8px;
    flex-wrap: wrap;
    justify-content: stretch;
  }
  .owner-tools > *{
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    text-align: center;
    padding: .75rem .65rem;
    font-size: .85rem;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Cheer / voters card */
  .cheer-card{ padding: .9rem .85rem; border-radius: 14px; }
  .cheer-card__head{ flex-wrap: wrap; gap: .4rem; }
  .cheer-btn{
    width: 100%;
    padding: .85rem .8rem;
    font-size: .92rem;
    white-space: normal;
    line-height: 1.2;
  }
  .voter-chip{ font-size: .8rem; }
  .voter-chip__name{ max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Re-Spread block */
  .respread-block{
    padding: 1rem .9rem;
    margin: .8rem .5rem;
    border-radius: 14px;
  }
  .respread-head{ flex-wrap: wrap; gap: .35rem; }
  .respread-btn, .respread-block .btn-yellow, .respread-block .btn-ghost{
    width: 100%;
    padding: .85rem .8rem;
    font-size: .9rem;
    white-space: normal;
    line-height: 1.2;
  }

  /* Share block */
  .share-block{
    padding: 1rem .9rem;
    margin: .8rem .5rem;
    border-radius: 14px;
  }
  .share-buttons{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .5rem !important;
  }
  .share-btn{
    padding: .65rem .35rem;
    min-width: 0;
    font-size: .72rem;
    flex-direction: column;
    gap: .15rem;
    text-align: center;
    white-space: normal;
    line-height: 1.15;
  }
  .share-btn .ic{ font-size: 1.05rem; }
  .share-btn .lbl{ font-size: .68rem; overflow-wrap: anywhere; }

  /* Featured banner + feature CTA */
  .feature-active-banner{
    padding: .8rem .9rem;
    font-size: .85rem;
    line-height: 1.35;
    border-radius: 12px;
    margin: .8rem .5rem;
    overflow-wrap: anywhere;
  }
  .btn-featured{
    width: 100%;
    padding: .85rem .8rem;
    font-size: .92rem;
    white-space: normal;
    line-height: 1.2;
  }

  /* Status-set select row was inline-flex with overflow */
  form select{ max-width: 100%; }
  /* spread_set_status inline form: allow wrapping at narrow widths */
  form[action*="set-status"], form[action*="set_status"]{
    flex-wrap: wrap !important;
    gap: .5rem !important;
  }
  form[action*="set-status"] select,
  form[action*="set_status"] select{ flex: 1 1 auto; min-width: 0; }

  /* Media: keep iframes/audio/maps inside */
  .media-frame, .audio-frame, .pos-map{
    max-width: 100%;
    overflow: hidden;
    border-radius: 14px;
  }
  .media-frame iframe{ width: 100%; height: auto; aspect-ratio: 16/9; }
  .pos-map{ height: 220px; }

  /* Gallery: 2-up at this width */
  .magic-gallery{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .5rem !important;
  }
  .magic-gallery img{ width: 100%; height: auto; display: block; border-radius: 10px; }

  /* Featured image */
  .featured-img-block{ border-radius: 14px; }
  .featured-img-block img{ width: 100%; height: auto; display: block; }
}

/* ----- Phone ≤480 — even tighter ----- */
@media (max-width: 480px){
  .shero{ margin: .8rem .35rem 1rem; padding: 1.1rem .8rem 1.3rem; }
  .shero__title{ font-size: clamp(1.4rem, 7.5vw, 1.85rem) !important; }
  .shero__heart{ width: 100px !important; height: 100px !important; }
  .shero__halo{ width: 160px !important; height: 160px !important; }
  .shero__halo{ filter: blur(14px); }

  /* Stats: single column for ultimate clarity at phone widths */
  .shero__stats.shero__stats--dash{
    grid-template-columns: 1fr !important;
    gap: .55rem !important;
  }
  .shero-stat--md{
    grid-column: 1 / -1;
    min-height: 86px;
    padding: .9rem 1rem;
  }
  .shero-stat--xl{ min-height: 118px; padding: 1.1rem 1.1rem 1rem; }
  .shero-stat--xl .shero-stat__num{ font-size: clamp(2.2rem, 12vw, 3rem); }
  .shero-stat--md  .shero-stat__num{ font-size: clamp(1.6rem, 9vw, 2rem); }

  .magic-hero{ margin: .7rem .35rem 1rem; padding: .9rem .75rem 1.1rem; }
  .flyer-picker, .respread-block, .share-block, .feature-active-banner{
    margin-left: .35rem;
    margin-right: .35rem;
  }
  .qr-flyers{ grid-template-columns: repeat(3, 1fr) !important; }
  .flyer-grid{ grid-template-columns: 1fr !important; }
  .share-buttons{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .magic-gallery{ grid-template-columns: 1fr !important; }

  .owner-tools > *{ flex: 1 1 100%; }

  .voter-chip__name{ max-width: 7rem; }

  .pos-map{ height: 180px; }
}

/* ----- Very small ≤380 (older iPhones / SE 1st gen) ----- */
@media (max-width: 380px){
  .shero{ padding: 1rem .7rem 1.2rem; }
  .shero__title{ font-size: 1.35rem !important; }
  .shero__claim-btn{ font-size: .88rem; padding: .85rem .75rem; }
  .qr-flyers{ grid-template-columns: repeat(2, 1fr) !important; }
  .qr-flyer__name{ font-size: .68rem; }
}

/* ----- Reduced motion: nothing extra to do ----- */

/* =====================================================================
   ★ CLEAN DEMO LOOK — wikey.cc Spread Detail Style Reset
   Globally removes the bg-video, dot-matrix grid, grain overlay and
   heavy hero halos in favor of a clean flat near-black background
   with a single subtle cyan radial vignette (matching spread-demo).
   Append-only — overrides all previous bg / shero / magic-hero chrome.
   ===================================================================== */

/* ---------- Page background: flat dark + subtle cyan radial ---------- */
html, body{
  background: #050507 !important;
  color: #e8e8f2;
}
body{
  background-image:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(0,255,255,.06), transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(255,0,170,.04), transparent 60%) !important;
  background-attachment: fixed !important;
  background-color: #050507 !important;
}
html[data-theme="light"], html[data-theme="light"] body{
  background: #f5f7fb !important;
  color: #0a0a0a;
  background-image:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(0,180,200,.10), transparent 60%) !important;
}

/* ---------- Kill every legacy background layer (defense in depth) ---------- */
.bg-video,
.bg-video__src,
.bg-video__veil,
.bg-video__dots,
.bg-video__grain{
  display: none !important;
}

/* Hide floating page-corner dot mascot to keep header dot as the only one */
.companion-dot{ display: none !important; }

/* ---------- TOPBAR: flatter, cleaner panel ---------- */
.topbar{
  background: rgba(8,8,12,.78) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 1px 0 rgba(0,255,255,.04);
}

/* ---------- BRAND DOT MASCOT (header) — happy blue Dot beside the logo ---- */
.brand{ gap: .55rem; }
.brand-dot-mascot{
  position: relative;
  display: inline-block;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #88e6ff 0%, #2ea1ff 55%, #0a6494 100%);
  box-shadow:
    0 0 10px rgba(46,161,255,.55),
    0 0 22px rgba(46,161,255,.28),
    inset 0 -4px 8px rgba(0,0,0,.35);
  flex-shrink: 0;
  animation: brandDotBob 4.5s ease-in-out infinite;
}
.brand-dot-eye{
  position: absolute; top: 36%;
  width: 4px; height: 5px;
  background: #fff;
  border-radius: 50%;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.2);
}
.brand-dot-eye--l{ left: 28%; }
.brand-dot-eye--r{ right: 28%; }
.brand-dot-eye::after{
  content:""; position:absolute; top: 30%; left: 25%;
  width: 1.5px; height: 1.5px; background: #0a0a18; border-radius: 50%;
}
.brand-dot-smile{
  position: absolute; bottom: 22%; left: 50%;
  transform: translateX(-50%);
  width: 11px; height: 5px;
  border: 1.5px solid #0a1a3a;
  border-top: none;
  border-radius: 0 0 11px 11px;
}
.brand-dot-shine{
  position: absolute; top: 14%; left: 22%;
  width: 6px; height: 4px;
  background: rgba(255,255,255,.6);
  border-radius: 50%;
  filter: blur(.5px);
}
@keyframes brandDotBob{
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce){
  .brand-dot-mascot{ animation: none; }
}
@media (max-width: 480px){
  .brand-dot-mascot{ width: 22px; height: 22px; }
  .brand-dot-eye{ width: 3px; height: 4px; }
  .brand-dot-smile{ width: 8px; height: 4px; }
}

/* ---------- SHERO: kill heavy chrome, keep elegant flat panel ---------- */
.shero{
  background:
    linear-gradient(180deg, rgba(17,17,22,.85) 0%, rgba(10,10,14,.92) 100%) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow:
    0 12px 40px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}
.shero--virgin{ border-color: rgba(255,200,0,.20) !important; }
/* Hide noisy bg layers inside shero */
.shero__bg,
.shero__grid,
.shero__orb,
.shero__halo{ display: none !important; }
/* Slim the center column — hide the giant heart/halo chrome but keep the
   first-claim / loved-by messaging as a small inline block so engagement
   context is preserved. */
.shero__halo,
.shero__heart{ display: none !important; }
.shero__center{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  min-height: 0 !important;
  padding: .25rem 0 !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
}
.shero__state{
  background: rgba(10,10,14,.55) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
  padding: .75rem 1rem !important;
  box-shadow: none !important;
  text-align: center;
  font-size: .9rem;
}
.shero__state--virgin{ border-color: rgba(255,217,102,.32) !important; }
.shero__state--loved { border-color: rgba(255,0,170,.28) !important; }
.shero__state-flash{ font-size: 1.2rem; margin-right: .35rem; }
.shero__state-eve{ color: #ffe066; font-weight: 800; margin-left: .35rem; }
.shero__state-sub{ margin: .25rem 0 0; font-size: .8rem; opacity: .8; }
/* Force 3-col layout: left content + slim center state + right QR/CTA */
.shero__inner{
  grid-template-columns: 1.3fr .9fr 1fr !important;
  gap: 1.25rem !important;
}
@media (max-width: 1100px){
  .shero__inner{ grid-template-columns: 1fr 1fr !important; }
  .shero__center{ grid-column: 1 / -1 !important; order: 3; }
}
@media (max-width: 760px){
  .shero__inner{ grid-template-columns: 1fr !important; }
  .shero__center{ order: 2; }
}

/* ---------- MAGIC-HERO panel: flat, no radial orbs ---------- */
.magic-hero,
.magic-hero.magic-hero--noir{
  background:
    linear-gradient(180deg, rgba(17,17,22,.85) 0%, rgba(10,10,14,.92) 100%) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow:
    0 12px 40px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
  border-radius: 20px !important;
}
.magic-hero::before,
.magic-hero::after,
.magic-hero--noir::before,
.magic-hero--noir::after{ display: none !important; }

/* ---------- All other neon panels share the clean look ---------- */
.flyer-picker,
.respread-block,
.share-block,
.cheer-card,
.feature-active-banner,
.comments-section,
.qr-block,
.qr-block--v2,
.admin-card,
.snew-hero,
.wnew-hero{
  background:
    linear-gradient(180deg, rgba(17,17,22,.85) 0%, rgba(10,10,14,.92) 100%) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow:
    0 8px 28px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.03) !important;
  border-radius: 18px !important;
}
.qr-block--v2{
  background: linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%) !important;
  border: 1px solid rgba(0,255,255,.35) !important;
  box-shadow:
    0 0 0 2px rgba(0,255,255,.18),
    0 8px 24px rgba(0,0,0,.4) !important;
}

/* ---------- STAT cards: cleaner outlined boxes (demo-style) ---------- */
.shero__stats.shero__stats--dash{
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: .7rem !important;
}
.shero-stat{
  background: rgba(10,10,14,.6) !important;
  border-width: 1px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  padding: 1.1rem 1rem .9rem !important;
  min-height: 0 !important;
  border-radius: 14px !important;
}
.shero-stat__glow{ display: none !important; }
.shero-stat__lbl{
  font-size: .68rem !important;
  letter-spacing: .2em !important;
  opacity: .7;
  margin-bottom: .25rem;
}
.shero-stat__num{
  font-size: clamp(1.8rem, 3vw, 2.6rem) !important;
}
.shero-stat__icon{ display: none !important; }
/* Color-only borders for each stat (demo accent style) */
.shero-stat--votes{ border-color: rgba(255,0,170,.35) !important; }
.shero-stat--eve  { border-color: rgba(255,255,0,.32) !important; }
.shero-stat--scans{ border-color: rgba(0,255,255,.30) !important; }
.shero-stat--shares{ border-color: rgba(139,92,246,.32) !important; }
.shero-stat--votes .shero-stat__num,
.shero-stat--eve   .shero-stat__num,
.shero-stat--scans .shero-stat__num,
.shero-stat--shares .shero-stat__num{
  background: none !important;
  -webkit-text-fill-color: initial !important;
  text-shadow: 0 0 12px currentColor;
  font-family: 'Orbitron', 'Inter', system-ui, sans-serif;
}
.shero-stat--votes .shero-stat__num { color: #ff00aa; }
.shero-stat--eve   .shero-stat__num { color: #ffff00; }
.shero-stat--scans .shero-stat__num { color: #00ffff; }
.shero-stat--shares .shero-stat__num{ color: #b692ff; }
.shero-stat--votes.is-empty .shero-stat__num{ color: rgba(255,255,255,.45); text-shadow:none; }
.shero-stat--votes.is-pulsing{ animation: none !important; }

@media (max-width: 760px){
  .shero__stats.shero__stats--dash{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .shero-stat--xl{ grid-column: auto !important; min-height: 0 !important; }
}
@media (max-width: 420px){
  .shero__stats.shero__stats--dash{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ---------- CHEER card: hero pill button like demo's "Vote +5 EVE" ---- */
.cheer-card{ padding: 1.1rem 1.3rem !important; }
.cheer-btn{
  width: 100%;
  padding: 1.1rem 1.4rem !important;
  font-size: 1.1rem !important;
  border-radius: 14px !important;
  border: 1.5px solid rgba(0,255,255,.55) !important;
  background: rgba(0,255,255,.06) !important;
  color: #aef9ff !important;
  box-shadow:
    0 0 0 1px rgba(0,255,255,.15) inset,
    0 0 24px rgba(0,255,255,.18) !important;
  letter-spacing: .02em;
  font-weight: 800;
  transition: all .22s ease;
}
.cheer-btn:hover:not(:disabled){
  background: rgba(0,255,255,.12) !important;
  border-color: rgba(0,255,255,.8) !important;
  box-shadow:
    0 0 0 1px rgba(0,255,255,.3) inset,
    0 0 36px rgba(0,255,255,.35) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* ---------- SHARE buttons: clean outlined chip grid like demo ---------- */
.share-buttons{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: .55rem !important;
}
@media (max-width: 640px){
  .share-buttons{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .5rem !important; }
}
.share-btn{
  background: rgba(15,15,20,.7) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 10px !important;
  color: #d0d0e0 !important;
  padding: .75rem .55rem !important;
  font-size: .85rem !important;
  text-align: center !important;
  flex-direction: column;
  gap: .25rem;
  min-height: 44px;
  box-shadow: none !important;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.share-btn:hover{
  background: rgba(0,255,255,.06) !important;
  border-color: rgba(0,255,255,.4) !important;
  color: #fff !important;
}
.share-btn .ic{ font-size: 1.1rem; }

/* ---------- QR-FLYER tiles in side panel: cleaner outline ---------- */
.magic-hero--noir .qr-flyer{
  background: rgba(15,15,20,.7) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #d0d0e0 !important;
}
.magic-hero--noir .qr-flyer:hover{
  border-color: rgba(0,255,255,.4) !important;
  color: #fff !important;
}
.magic-hero--noir .qr-flyer--premium{
  border-color: rgba(255,217,102,.35) !important;
}

/* ---------- Buttons (generic): cleaner ---------- */
.btn-yellow, .btn-ghost{
  border-radius: 10px;
}

/* ---------- Light theme tuning: keep clean panel look ---------- */
html[data-theme="light"] .shero,
html[data-theme="light"] .magic-hero,
html[data-theme="light"] .flyer-picker,
html[data-theme="light"] .respread-block,
html[data-theme="light"] .share-block,
html[data-theme="light"] .cheer-card,
html[data-theme="light"] .feature-active-banner,
html[data-theme="light"] .comments-section{
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%) !important;
  border-color: rgba(0,0,0,.08) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.08) !important;
  color: #0a0a0a;
}
html[data-theme="light"] .shero-stat{ background: rgba(255,255,255,.7) !important; }
html[data-theme="light"] .topbar{ background: rgba(255,255,255,.85) !important; }

/* ---------- Light-theme contrast fixes (post clean redesign) ---------- */
html[data-theme="light"] .snew-hero__title,
html[data-theme="light"] .wnew-hero__title{
  background: linear-gradient(92deg, #0066aa 0%, #aa0066 55%, #008866 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}
html[data-theme="light"] .shero-stat__lbl{ color: #444; opacity: 1; }
html[data-theme="light"] .shero-stat--votes .shero-stat__num { color: #cc0088; text-shadow: 0 0 6px rgba(255,0,170,.25); }
html[data-theme="light"] .shero-stat--eve   .shero-stat__num { color: #b08800; text-shadow: 0 0 6px rgba(255,200,0,.25); }
html[data-theme="light"] .shero-stat--scans .shero-stat__num { color: #008899; text-shadow: 0 0 6px rgba(0,200,220,.25); }
html[data-theme="light"] .shero-stat--shares .shero-stat__num{ color: #6a3fd8; text-shadow: 0 0 6px rgba(139,92,246,.25); }
html[data-theme="light"] .cheer-btn{
  background: rgba(0,180,200,.08) !important;
  border-color: rgba(0,180,200,.55) !important;
  color: #006a78 !important;
}
html[data-theme="light"] .cheer-btn:hover:not(:disabled){
  background: rgba(0,180,200,.15) !important;
  color: #003a44 !important;
}
html[data-theme="light"] .share-btn{ background: rgba(255,255,255,.7) !important; color: #222 !important; border-color: rgba(0,0,0,.1) !important; }
html[data-theme="light"] .magic-hero--noir .qr-flyer{ background: rgba(255,255,255,.7) !important; color: #222 !important; border-color: rgba(0,0,0,.1) !important; }

/* =====================================================================
   ★ NEON-LOOSE PASS — Studio · Requests · Maps · Landing
   Reduces panel-frame chrome on heroes/forms so the neon vibe
   feels open and atmospheric instead of boxed-in. Brightens
   picker-maps for readability. Append-only.
   ===================================================================== */

/* ---------- MAPS: brighter, readable tiles for pickers + popups -------- */
.wikey-tile-bright{ filter: brightness(1.06) saturate(1.05) contrast(1.02); }
[data-theme="light"] .wikey-tile-bright{ filter: none; }

/* Soften the heavy dim filter on big interactive maps so labels show */
.live-map{
  border: 1px solid rgba(0,255,255,.22) !important;
  box-shadow: 0 0 18px rgba(0,255,255,.10) !important;
  background: #0e1014 !important;
}
.wikey-tile{
  filter: grayscale(.20) brightness(.92) contrast(1.02) !important;
}
[data-theme="light"] .wikey-tile{ filter: none !important; }

/* Picker-maps (Studio + Market + Profile): bright, glass border, no dim */
.geo-map, .snew-map, .loc-map, .pos-map,
#geo-map, #locMap{
  border: 1px solid rgba(0,255,255,.28) !important;
  box-shadow:
    0 0 0 1px rgba(0,255,255,.08) inset,
    0 8px 30px rgba(0,0,0,.45),
    0 0 22px rgba(0,255,255,.12) !important;
  background: #14171c !important;
  filter: none !important;
}
.geo-map .leaflet-tile, .snew-map .leaflet-tile,
.loc-map .leaflet-tile, .pos-map .leaflet-tile,
#geo-map .leaflet-tile, #locMap .leaflet-tile{
  filter: brightness(1.04) saturate(1.05) !important;
}
.leaflet-control-attribution{
  background: rgba(10,10,14,.55) !important;
  color: #cfd5e0 !important;
}
.leaflet-control-attribution a{ color: #6ed6ff !important; }
.leaflet-control-zoom a{
  background: rgba(10,10,14,.85) !important;
  color: #aef9ff !important;
  border: 1px solid rgba(0,255,255,.3) !important;
}

/* ---------- LOOSE-NEON HEROES — remove panel frames on key heroes ----- */
.hnew-hero,
.snew-hero, .mnew-hero,
.wnew-hero,
.req-new-hero{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding-top: 2.4rem !important;
  padding-bottom: 1.6rem !important;
}
.snew-hero, .mnew-hero, .req-new-hero{
  text-align: center;
  position: relative;
}

/* Soft cyan halo behind hero titles (atmospheric, no frame) */
.snew-hero::before, .mnew-hero::before, .req-new-hero::before{
  content: "";
  position: absolute; inset: -10% -20% auto -20%;
  height: 240px; pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(0,255,255,.10), transparent 60%),
    radial-gradient(ellipse at 70% 50%, rgba(255,0,170,.08), transparent 60%);
  filter: blur(8px);
  z-index: -1;
}

/* Studio eyebrow chip — glowy, NOT framed */
.mnew-hero__eyebrow, .snew-hero__eyebrow{
  display: inline-block;
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: .72rem;
  letter-spacing: .35em;
  color: #aef9ff;
  text-shadow: 0 0 14px rgba(0,255,255,.6), 0 0 28px rgba(0,255,255,.3);
  padding: .35rem 1rem;
  background: rgba(0,255,255,.06);
  border: 1px solid rgba(0,255,255,.3);
  border-radius: 999px;
  margin-bottom: .9rem;
}

/* Big atmospheric Studio title — gradient + glow, no frame */
.mnew-hero__title, .snew-hero__title,
.req-new-hero__title{
  font-family: 'Orbitron', 'Inter', system-ui, sans-serif !important;
  font-size: clamp(1.9rem, 4.5vw, 3.4rem) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  margin: .2rem 0 .5rem !important;
  background: linear-gradient(92deg, #00ffff 0%, #ff00aa 55%, #ffe066 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 0 38px rgba(255,0,170,.22);
  letter-spacing: -.01em;
}
.mnew-hero__sub, .snew-hero__sub,
.req-new-hero__sub{
  color: #b6b9c8 !important;
  font-size: 1.05rem !important;
  margin: 0 auto !important;
  max-width: 640px;
}

/* Request hero icon — make the bulb a glowing accent, not a card */
.req-new-hero{ display: block !important; padding-top: 2.6rem !important; }
.req-new-hero__inner{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: .4rem !important;
  text-align: center;
}
.req-new-hero__icon{
  width: 64px; height: 64px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #ffe066 !important;
  background: radial-gradient(circle, rgba(255,224,102,.18), transparent 65%);
  filter: drop-shadow(0 0 18px rgba(255,224,102,.55));
  margin-bottom: .4rem;
  border: none !important;
}

/* Autosave pill keeps a subtle glass treatment */
.snew-autosave, .autosave-pill{
  position: relative; top: .3rem;
  background: rgba(10,10,14,.6);
  border: 1px solid rgba(255,255,255,.08);
  padding: .25rem .7rem; border-radius: 999px;
  font-size: .78rem; color: #cfd5e0;
  display: inline-flex; align-items: center; gap: .4rem;
}

/* ---------- STUDIO FORM: airy, neon-loose fields (no heavy boxes) ----- */
.mnew-grid, .snew-grid{
  display: grid !important;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr) !important;
  gap: 2rem !important;
  max-width: 1280px;
  margin: 0 auto;
}
@media (max-width: 1000px){
  .mnew-grid, .snew-grid{ grid-template-columns: 1fr !important; }
}
.mnew-col--main{ display: flex; flex-direction: column; gap: 1.6rem; }

.mnew-block, .snew-editor-block{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.mnew-label{
  display: block;
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #d2d8ea;
  margin-bottom: .55rem;
  text-shadow: 0 0 10px rgba(0,255,255,.18);
}
.mnew-label__hint{
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: none;
  color: #8b8b95;
  margin-left: .35rem;
  text-shadow: none;
}

/* Floating-label fields — glowing underline instead of full border box */
.mnew-field{
  position: relative;
  margin-bottom: 0;
}
.mnew-field input,
.mnew-field textarea{
  width: 100%;
  background: rgba(10,10,14,.55) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-bottom: 1.5px solid rgba(0,255,255,.35) !important;
  border-radius: 12px !important;
  color: #fff !important;
  padding: 1.1rem 1rem .55rem !important;
  font-size: 1rem !important;
  transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.mnew-field input:focus,
.mnew-field textarea:focus{
  outline: none !important;
  border-color: rgba(0,255,255,.5) !important;
  border-bottom-color: #00ffff !important;
  background: rgba(0,255,255,.04) !important;
  box-shadow:
    0 0 0 1px rgba(0,255,255,.25),
    0 0 24px rgba(0,255,255,.18) !important;
}
.mnew-field label{
  position: absolute;
  left: 1rem; top: 1rem;
  color: #888;
  font-size: 1rem;
  pointer-events: none;
  transition: top .18s ease, font-size .18s ease, color .18s ease;
  background: transparent !important;
  padding: 0 !important;
}
.mnew-field input:focus + label,
.mnew-field input:not(:placeholder-shown) + label,
.mnew-field textarea:focus + label,
.mnew-field textarea:not(:placeholder-shown) + label{
  top: .25rem;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #aef9ff;
}

/* Links trio: a horizontal row of glowing fields, no card */
.snew-links{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: .9rem !important;
}
@media (max-width: 760px){
  .snew-links{ grid-template-columns: 1fr !important; }
}

/* Drop-zone — dashed neon, NOT a solid panel */
.mnew-drop{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .4rem;
  padding: 2rem 1rem !important;
  background:
    radial-gradient(ellipse at center, rgba(0,255,255,.05), transparent 70%) !important;
  border: 2px dashed rgba(0,255,255,.32) !important;
  border-radius: 14px !important;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.mnew-drop:hover, .mnew-drop.is-drag{
  border-color: rgba(0,255,255,.7) !important;
  background:
    radial-gradient(ellipse at center, rgba(0,255,255,.10), transparent 70%) !important;
}
.mnew-drop__ic{ font-size: 2rem; filter: drop-shadow(0 0 12px rgba(0,255,255,.5)); }
.mnew-drop__title{ font-weight: 700; color: #e6e8f0; }
.mnew-drop__sub{ font-size: .82rem; color: #8b8b95; }

.mnew-thumbs{ display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .7rem; }

/* Geo row */
.snew-geo-row{
  display: flex; flex-wrap: wrap; gap: .55rem; align-items: stretch;
  margin-bottom: .7rem;
}
.snew-geo-btn{
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .8rem 1rem !important;
  background: rgba(10,10,14,.6) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 12px !important;
  color: #d0d0e0 !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.snew-geo-btn--cyan{
  border-color: rgba(0,255,255,.4) !important;
  color: #aef9ff !important;
  background: rgba(0,255,255,.05) !important;
}
.snew-geo-btn--cyan:hover{
  border-color: rgba(0,255,255,.7) !important;
  background: rgba(0,255,255,.10) !important;
}
.snew-geo-btn--ghost:hover{ border-color: rgba(255,0,170,.4) !important; color: #ff8fcd !important; }
.snew-geo-coords{
  display: flex; justify-content: space-between; align-items: center;
  margin-top: .5rem; font-size: .8rem; color: #8b8b95;
}

/* Submit row — big neon CTA, hero-pill style */
.mnew-actions{
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem;
  margin-top: 1rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.06);
}
.mnew-back{
  color: #8b8b95; text-decoration: none;
  font-weight: 600;
  transition: color .2s ease;
}
.mnew-back:hover{ color: #ff8fcd; }
.mnew-submit{
  display: inline-flex; align-items: center; gap: .55rem;
  padding: 1rem 2.2rem !important;
  background: linear-gradient(92deg, rgba(0,255,255,.16), rgba(255,0,170,.16)) !important;
  border: 1.5px solid rgba(0,255,255,.55) !important;
  border-radius: 14px !important;
  color: #fff !important;
  font-family: 'Orbitron', system-ui, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(0,255,255,.15) inset,
    0 0 32px rgba(0,255,255,.25),
    0 8px 24px rgba(255,0,170,.18) !important;
  transition: all .22s ease;
}
.mnew-submit:hover{
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(0,255,255,.3) inset,
    0 0 44px rgba(0,255,255,.4),
    0 12px 32px rgba(255,0,170,.28) !important;
}
.mnew-submit__ic{ font-size: 1.2rem; filter: drop-shadow(0 0 10px currentColor); }

/* Preview card sticky on the right */
.mnew-preview-sticky{
  position: sticky; top: 88px;
  display: flex; flex-direction: column; gap: .8rem;
}
.mnew-preview__eyebrow{
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: .72rem; letter-spacing: .25em;
  color: #aef9ff;
  text-shadow: 0 0 12px rgba(0,255,255,.4);
}
.mnew-preview-card, .snew-preview-card{
  background: linear-gradient(180deg, rgba(17,17,22,.85), rgba(10,10,14,.92)) !important;
  border: 1px solid rgba(0,255,255,.20) !important;
  border-radius: 16px !important;
  box-shadow:
    0 0 0 1px rgba(0,255,255,.06) inset,
    0 12px 36px rgba(0,0,0,.5),
    0 0 28px rgba(0,255,255,.10) !important;
  overflow: hidden;
}
.mnew-preview__thumb{
  height: 180px;
  background: linear-gradient(135deg, rgba(0,255,255,.06), rgba(255,0,170,.06));
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
}
.mnew-preview__placeholder{ font-size: 3rem; filter: drop-shadow(0 0 18px rgba(0,255,255,.5)); }
.mnew-preview__body{ padding: 1rem 1.1rem 1.2rem; }
.mnew-preview__title{ margin: .4rem 0 .25rem; color: #fff; font-size: 1.1rem; }
.mnew-preview__desc{ color: #b6b9c8; font-size: .88rem; margin: 0; }
.mnew-preview__hint{ font-size: .76rem; color: #8b8b95; text-align: center; }

/* ---------- REQUESTS NEW: matching loose-neon polish ----------------- */
.req-new-grid{
  display: grid !important;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr) !important;
  gap: 2rem !important;
  max-width: 1280px;
  margin: 1.2rem auto 0 !important;
}
@media (max-width: 1000px){
  .req-new-grid{ grid-template-columns: 1fr !important; }
}
.req-new-form{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: flex; flex-direction: column; gap: 1.4rem;
}
.rn-label{
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #d2d8ea;
  margin-bottom: .5rem;
}
.rn-label__hint{
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: none;
  color: #8b8b95;
}
.rn-input{
  width: 100%;
  background: rgba(10,10,14,.55) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-bottom: 1.5px solid rgba(255,0,170,.32) !important;
  border-radius: 12px !important;
  color: #fff !important;
  padding: .9rem 1rem !important;
  font-size: 1rem !important;
  transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.rn-input--lg{ font-size: 1.15rem !important; padding: 1.1rem 1.2rem !important; }
.rn-input:focus{
  outline: none !important;
  border-color: rgba(255,0,170,.5) !important;
  border-bottom-color: #ff00aa !important;
  background: rgba(255,0,170,.04) !important;
  box-shadow:
    0 0 0 1px rgba(255,0,170,.25),
    0 0 24px rgba(255,0,170,.18) !important;
}
.rn-textarea{ min-height: 180px; resize: vertical; }
.rn-editor__toolbar{
  display: flex; flex-wrap: wrap; gap: .35rem;
  margin-bottom: .55rem;
}
.rn-chip{
  background: rgba(10,10,14,.6);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: .25rem .65rem;
  font-size: .72rem;
  color: #8b8b95;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.rn-row{
  display: grid; grid-template-columns: 1.5fr 1fr;
  gap: 1rem;
}
@media (max-width: 600px){ .rn-row{ grid-template-columns: 1fr; } }
.rn-stepper{
  display: flex; align-items: stretch; gap: .35rem;
}
.rn-stepper__btn{
  width: 44px;
  background: rgba(10,10,14,.6) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 10px;
  color: #aef9ff;
  font-size: 1.4rem; font-weight: 800;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.rn-stepper__btn:hover{ border-color: rgba(0,255,255,.5) !important; background: rgba(0,255,255,.08) !important; }
.rn-stepper__input{ text-align: center; }

.rn-drop{
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: 2rem 1rem;
  background: radial-gradient(ellipse at center, rgba(255,0,170,.05), transparent 70%);
  border: 2px dashed rgba(255,0,170,.32);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.rn-drop:hover, .rn-drop.is-drag{
  border-color: rgba(255,0,170,.7);
  background: radial-gradient(ellipse at center, rgba(255,0,170,.10), transparent 70%);
}
.rn-drop__file{ display: none; }
.rn-drop__icon{ color: #ff8fcd; filter: drop-shadow(0 0 12px rgba(255,0,170,.5)); }
.rn-drop__text strong{ display: block; color: #e6e8f0; }
.rn-drop__text span{ font-size: .82rem; color: #8b8b95; }
.rn-drop__preview{ display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .7rem; }
.rn-drop__tile{
  width: 90px; height: 90px;
  background: rgba(10,10,14,.6);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  overflow: hidden; position: relative;
}
.rn-drop__tile img{ width: 100%; height: 100%; object-fit: cover; }
.rn-drop__tile span{
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.7); color: #fff;
  font-size: .65rem; padding: .15rem .25rem; text-align: center;
}

.rn-submit{
  display: flex; flex-direction: column; align-items: center;
  gap: .7rem; margin-top: .8rem;
  padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.06);
}
.rn-submit__btn{
  display: inline-flex; align-items: center; gap: .55rem;
  padding: 1rem 2.4rem !important;
  background: linear-gradient(92deg, rgba(255,0,170,.18), rgba(255,224,102,.18)) !important;
  border: 1.5px solid rgba(255,0,170,.55) !important;
  border-radius: 14px !important;
  color: #fff !important;
  font-family: 'Orbitron', system-ui, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(255,0,170,.15) inset,
    0 0 32px rgba(255,0,170,.25),
    0 8px 24px rgba(255,224,102,.18) !important;
  transition: all .22s ease;
}
.rn-submit__btn:hover{
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255,0,170,.3) inset,
    0 0 44px rgba(255,0,170,.4),
    0 12px 32px rgba(255,224,102,.28) !important;
}
.rn-submit__bolt{ font-size: 1.2rem; filter: drop-shadow(0 0 10px rgba(255,224,102,.8)); }
.rn-submit__note{ color: #8b8b95; font-size: .85rem; text-align: center; max-width: 460px; margin: 0; }

.rn-tips{
  display: flex; flex-direction: column; gap: .8rem;
  position: sticky; top: 88px; align-self: flex-start;
}
.rn-tip{
  background: linear-gradient(180deg, rgba(17,17,22,.85), rgba(10,10,14,.92));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  box-shadow: 0 6px 22px rgba(0,0,0,.4);
}
.rn-tip__icon{
  font-size: 1.4rem; color: #aef9ff;
  text-shadow: 0 0 12px rgba(0,255,255,.5);
  margin-bottom: .25rem;
}
.rn-tip h3{ margin: .15rem 0 .4rem; font-size: 1rem; color: #fff; }
.rn-tip p{ margin: 0; font-size: .85rem; color: #b6b9c8; }
.rn-tip--accent{ border-color: rgba(255,0,170,.32); }
.rn-tip--accent .rn-tip__icon{ color: #ff8fcd; text-shadow: 0 0 12px rgba(255,0,170,.5); }

/* ---------- LANDING: keep the hnew-hero atmospheric (no frame) -------- */
.hero, .hero-xl{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* But re-enable the rich atmospheric layers (we hid bg-video earlier;
   hnew-hero layers are local to the hero, keep them ON). */
.hnew-hero__bg,
.hnew-hero__grid,
.hnew-hero__orb,
.hnew-hero__scan,
.hnew-hero__particles,
.hnew-hero__vignette{ display: block !important; }

/* Light-theme tuning for studio + requests */
html[data-theme="light"] .mnew-hero__title,
html[data-theme="light"] .snew-hero__title,
html[data-theme="light"] .req-new-hero__title{
  background: linear-gradient(92deg, #006a78 0%, #aa0066 55%, #b08800 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}
html[data-theme="light"] .mnew-field input,
html[data-theme="light"] .mnew-field textarea,
html[data-theme="light"] .rn-input{
  background: rgba(255,255,255,.85) !important;
  color: #0a0a0a !important;
  border-color: rgba(0,0,0,.12) !important;
}
html[data-theme="light"] .mnew-field label{ color: #555; }
html[data-theme="light"] .rn-tip{
  background: linear-gradient(180deg, #ffffff, #f7f8fc);
  color: #0a0a0a;
}
html[data-theme="light"] .rn-tip h3{ color: #0a0a0a; }
html[data-theme="light"] .rn-tip p{ color: #444; }

/* Late overrides after NEON-LOOSE PASS — fix cascade regressions */
@media (max-width: 900px){
  .rn-tips{ position: static !important; top: auto !important; }
}
@media (prefers-reduced-motion: reduce){
  .mnew-submit, .rn-submit__btn{ transition: none !important; }
  .mnew-submit:hover, .rn-submit__btn:hover{ transform: none !important; }
}

/* OpenTopoMap is already a light terrain — undo the OSM-era dim filter */
.wikey-tile{ filter: none !important; }
.wikey-tile-bright{ filter: saturate(1.04) brightness(1.02) !important; }
[data-theme="light"] .wikey-tile-bright{ filter: saturate(1.02) !important; }
/* ===== Spread-Detail prominent map hero (moved above content) ===== */
.spread-map-hero{
  margin: 1.4rem 0 1.8rem;
  padding: 1.1rem 1.2rem 1.3rem;
  border-radius: 22px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(0,255,255,.08), transparent 55%),
    radial-gradient(120% 80% at 100% 100%, rgba(255,0,170,.10), transparent 55%),
    linear-gradient(180deg, rgba(10,10,10,.55), rgba(10,10,10,.78));
  border: 1px solid rgba(0,255,255,.32);
  box-shadow:
    0 0 0 1px rgba(255,0,170,.18),
    0 10px 40px rgba(0,255,255,.10),
    0 0 60px rgba(255,0,170,.10),
    inset 0 0 30px rgba(0,0,0,.45);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
}
.spread-map-hero .live-sub{ margin: .2rem 0 0; }
.spread-map-hero .live-grid{
  grid-template-columns: 1fr 280px;
  gap: 1.1rem;
  margin-top: 1rem;
}
.spread-map-hero .live-map{
  height: 460px;
  border-radius: 16px;
  border: 1px solid rgba(0,255,255,.45);
  box-shadow:
    0 0 32px rgba(0,255,255,.22),
    0 0 80px rgba(255,0,170,.12),
    inset 0 0 24px rgba(0,0,0,.55);
}
.spread-map-hero .live-map-wrap{ min-height: 460px; }
.spread-map-hero .live-side{
  background: rgba(10,10,10,.55);
  border: 1px solid rgba(255,0,170,.22);
  border-radius: 14px;
  padding: .9rem .85rem;
  max-height: 460px;
  overflow-y: auto;
}
@media (max-width: 900px){
  .spread-map-hero .live-grid{ grid-template-columns: 1fr; }
  .spread-map-hero .live-map,
  .spread-map-hero .live-map-wrap{ height: 360px; min-height: 360px; }
  .spread-map-hero .live-side{ max-height: none; }
}
@media (max-width: 560px){
  .spread-map-hero{ padding: .9rem .9rem 1rem; border-radius: 18px; }
  .spread-map-hero .live-map,
  .spread-map-hero .live-map-wrap{ height: 300px; min-height: 300px; }
}

/* Extra breathing room between the new top-stack and the content block */
.spread-map-hero + .magic-hero,
.spread-stage + .magic-hero{ margin-top: 1.8rem; }

/* ===== Slim centered hero banner (above the stage) ===== */
.shero--banner .shero__inner--banner{
  display: block;
  padding: 2.4rem 1.5rem 1.6rem;
  text-align: center;
  max-width: 1080px;
  margin: 0 auto;
}
.shero--banner .shero__banner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
}
.shero--banner .shero__eyebrow-row{
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .55rem; margin-bottom: .2rem;
}
.shero__title--xl{
  font-size: clamp(2.4rem, 5.2vw, 4.2rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -.01em !important;
  margin: .1rem 0 .4rem !important;
  text-align: center !important;
  max-width: 22ch;
}
.shero__meta--center{
  justify-content: center !important;
  flex-wrap: wrap;
  gap: .55rem .85rem !important;
  font-size: 1.02rem !important;
}
.shero__meta--center .shero__loc{
  font-size: 1.05rem; font-weight: 600;
  color: #00ffff; text-shadow: 0 0 10px rgba(0,255,255,.5);
}
@media (max-width: 640px){
  .shero--banner .shero__inner--banner{ padding: 1.6rem 1rem 1.2rem; }
}

/* ===== Spread Stage — 2-col grid (map left, side rail right) ===== */
.spread-stage{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.4rem;
  margin: 0 auto 1.8rem;
  max-width: 1280px;
}
@media (min-width: 1024px){
  .spread-stage{
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 1.6rem;
  }
}
@media (min-width: 1280px){
  .spread-stage{ grid-template-columns: minmax(0, 1fr) 380px; }
}

/* The map hero, when used inside the stage, owns the full left column.
   Layout: map on top, live-notifications list below (fills empty space
   created by the taller side rail on desktop). */
.spread-stage .spread-map-hero{ margin: 0; display: flex; flex-direction: column; }
.spread-stage .spread-map-hero .live-grid{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1; min-height: 0;
}
.spread-stage .spread-map-hero .live-map-wrap{ flex: 0 0 auto; }
.spread-stage .spread-map-hero .live-side{
  display: flex;
  flex-direction: column;
  max-height: none;
  background: linear-gradient(180deg, rgba(10,10,10,.55), rgba(10,10,10,.30));
  border: 1px solid rgba(0,255,255,.22);
  border-radius: 14px;
  padding: .85rem 1rem 1rem;
  box-shadow: inset 0 0 22px rgba(0,255,255,.06);
}
@media (min-width: 1024px){
  .spread-stage .spread-map-hero{ padding: 1.4rem 1.5rem 1.6rem; }
  .spread-stage .spread-map-hero .live-map,
  .spread-stage .spread-map-hero .live-map-wrap{
    height: 460px; min-height: 460px;
  }
  /* Premium "live dashboard" feel: subtle inner glow ties map + notifications
     together as one unified panel. */
  .spread-stage .spread-map-hero{
    background:
      radial-gradient(140% 90% at 0% 0%, rgba(0,255,255,.10), transparent 55%),
      radial-gradient(140% 90% at 100% 100%, rgba(255,0,170,.12), transparent 55%),
      linear-gradient(180deg, rgba(10,10,10,.62), rgba(10,10,10,.82));
    box-shadow:
      0 0 0 1px rgba(255,0,170,.24),
      0 14px 50px rgba(0,255,255,.18),
      0 0 90px rgba(255,0,170,.18),
      inset 0 0 70px rgba(0,255,255,.09),
      inset 0 0 140px rgba(255,0,170,.07),
      inset 0 0 36px rgba(0,0,0,.50);
  }
  /* Inside the stage, the notifications list grows to fill remaining vertical space */
  .spread-stage{ align-items: stretch; }
  .spread-stage .spread-map-hero{
    height: 100%;
    align-self: stretch;
    /* Adaptive: tall enough on standard desktops, never absurdly tall on
       mid-laptop viewports. Right rail stretches the row; we don't need
       a hard floor. */
    min-height: clamp(560px, 68vh, 780px);
  }
  .spread-stage .spread-map-hero .live-side{
    flex: 1 1 auto;
    min-height: 220px;
    max-height: none;
  }
  .spread-stage .spread-map-hero .live-list{ max-height: 100%; }
}

/* ===== Side rail (right column) ===== */
.stage-side{
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-width: 0;
}
.stage-card{
  background: linear-gradient(180deg, rgba(10,10,10,.72), rgba(10,10,10,.85));
  border: 1px solid rgba(0,255,255,.28);
  border-radius: 18px;
  padding: 1.1rem 1.1rem 1.2rem;
  box-shadow:
    0 0 24px rgba(0,255,255,.12),
    0 0 40px rgba(255,0,170,.08),
    inset 0 0 18px rgba(0,0,0,.4);
  backdrop-filter: blur(5px) saturate(140%);
  -webkit-backdrop-filter: blur(5px) saturate(140%);
}
.stage-card__title{
  margin: 0 0 .85rem;
  font-size: .92rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ffdd00;
  text-shadow: 0 0 10px rgba(255,221,0,.4);
}

/* QR card */
.stage-card--qr{ text-align: center; padding-bottom: 1rem; }
.stage-qr__head{
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: .8rem; font-size: .8rem; letter-spacing: .1em;
}
.stage-qr__eyebrow{
  color: #00ffff;
  text-shadow: 0 0 8px rgba(0,255,255,.5);
  font-weight: 700;
}
.stage-qr__short{
  color: #ff00aa;
  background: rgba(255,0,170,.10);
  border: 1px solid rgba(255,0,170,.35);
  border-radius: 999px;
  padding: .2rem .7rem;
  font-weight: 600;
}
.stage-qr__media{
  background: #fff;
  border-radius: 14px;
  padding: .65rem;
  display: inline-block;
  box-shadow:
    0 0 24px rgba(0,255,255,.35),
    0 0 50px rgba(255,0,170,.25);
}
.stage-qr__media img{ display: block; width: 100%; max-width: 220px; height: auto; }
.stage-qr__hint{ margin: .65rem 0 .7rem; font-size: .82rem; color: rgba(255,255,255,.65); }
.stage-qr__copy{ width: 100%; justify-content: center; }

/* Claim CTA card — uses existing .shero__claim-btn glow but at full width */
.stage-card--claim{ padding: 1rem; }
.stage-claim__form{ width: 100%; max-width: none; margin-top: 0; }
.stage-claim__btn{ width: 100%; font-size: 1rem; padding: .95rem 1.2rem; }
.stage-claim__sub{ font-size: .8rem; margin-top: .6rem; opacity: .8; }

/* Stats card — vertical stack of 4 stat rows */
.stage-stats{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
}
.stage-stat{
  display: flex; flex-direction: column; align-items: center;
  gap: .15rem;
  padding: .7rem .5rem;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  text-align: center;
  position: relative;
}
.stage-stat__icon{ font-size: 1rem; opacity: .85; }
.stage-stat__num{
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: 1.45rem; font-weight: 800; line-height: 1;
}
.stage-stat__lbl{
  font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; opacity: .75;
}
.stage-stat--votes .stage-stat__num,
.stage-stat--votes .stage-stat__icon{ color: #ff00aa; text-shadow: 0 0 12px rgba(255,0,170,.6); }
.stage-stat--votes{ border-color: rgba(255,0,170,.35); }
.stage-stat--eve .stage-stat__num,
.stage-stat--eve .stage-stat__icon{ color: #ffdd00; text-shadow: 0 0 12px rgba(255,221,0,.6); }
.stage-stat--eve{ border-color: rgba(255,221,0,.35); }
.stage-stat--scans .stage-stat__num,
.stage-stat--scans .stage-stat__icon{ color: #00ffff; text-shadow: 0 0 12px rgba(0,255,255,.6); }
.stage-stat--scans{ border-color: rgba(0,255,255,.35); }
.stage-stat--shares .stage-stat__num,
.stage-stat--shares .stage-stat__icon{ color: #66ccff; text-shadow: 0 0 10px rgba(102,204,255,.5); }
.stage-stat--shares{ border-color: rgba(102,204,255,.30); }
.stage-stat.is-pulsing::after{
  content:''; position: absolute; inset: -2px; border-radius: 13px;
  border: 1px solid rgba(255,0,170,.55);
  animation: stageStatPulse 2.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes stageStatPulse{
  0%,100%{ opacity:.55; transform: scale(1); }
  50%    { opacity: 0;   transform: scale(1.06); }
}

/* Claimed counter inside stats card */
.stage-claimed{
  display: flex; align-items: center; gap: .55rem;
  margin-top: .9rem;
  padding: .7rem .85rem;
  background: linear-gradient(90deg, rgba(255,0,170,.10), rgba(255,221,0,.08));
  border: 1px solid rgba(255,0,170,.30);
  border-radius: 12px;
  font-size: .88rem;
}
.stage-claimed__heart{ font-size: 1.2rem; filter: drop-shadow(0 0 8px rgba(255,0,170,.7)); }
.stage-claimed__n{
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: 1.25rem; font-weight: 800; color: #ff00aa;
  text-shadow: 0 0 10px rgba(255,0,170,.6);
  min-width: 1.5ch; text-align: center;
}
.stage-claimed__lbl{ color: rgba(255,255,255,.78); }
.stage-claimed__lbl strong{ color: #fff; }

/* First-Claimer badge inside side rail (override magic-hero positioning) */
.stage-card--first{
  background: linear-gradient(135deg, rgba(255,221,0,.16), rgba(255,0,170,.10));
  border: 1px solid rgba(255,221,0,.45);
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  text-align: center;
}
.stage-card--first .first-claimer-badge{
  font-size: .82rem; padding: .55rem 1rem;
}
.stage-card--first .first-claimer-note{ font-size: .85rem; margin: 0; opacity: .9; }

/* Dot mascot watermark inside the map (top-right corner) — subtle, non-distracting */
.map-dot-watermark{
  position: absolute; top: .85rem; right: .85rem;
  z-index: 500; pointer-events: none;
  opacity: .15;
  filter: drop-shadow(0 0 10px rgba(0,255,255,.4));
  transition: opacity .35s ease;
}
.spread-map-hero:hover .map-dot-watermark{ opacity: .35; }
.map-dot-watermark .dot-mascot{
  width: 56px; height: 56px;
  box-shadow:
    0 0 14px var(--cyan),
    0 0 28px rgba(0,191,255,.55),
    inset -4px -8px 16px rgba(0,0,0,.35);
  border: 2px solid rgba(255,255,255,.85);
}
/* Re-scale eyes/pupils/smile so they're clearly visible at small size.
   The default mascot is sized for 200px; override for the 56px watermark. */
.map-dot-watermark .dot-mascot::before,
.map-dot-watermark .dot-mascot::after{
  width: 11px; height: 13px; top: 30%;
  background: #fff;
  box-shadow: inset -2px -2px 0 #d8e6ee, 0 0 4px rgba(0,255,255,.5);
}
.map-dot-watermark .dot-mascot::before{ left: 23%; }
.map-dot-watermark .dot-mascot::after { right: 23%; }
.map-dot-watermark .dot-pupil-l,
.map-dot-watermark .dot-pupil-r{
  width: 5px; height: 7px; top: 38%;
  background: #0a0a0a;
  box-shadow: inset 1px 1px 0 #444, 0 0 3px rgba(0,0,0,.6);
}
.map-dot-watermark .dot-pupil-l{ left: 27%; }
.map-dot-watermark .dot-pupil-r{ right: 27%; }
.map-dot-watermark .dot-smile{
  width: 22px; height: 11px; top: 58%;
  border-bottom: 2.5px solid #0a0a0a;
  border-radius: 0 0 22px 22px;
}
.map-dot-watermark .dot-shine{
  width: 12px; height: 7px; top: 16%; left: 22%;
  background: rgba(255,255,255,.7);
}
.map-dot-watermark .dot-cheek-l,
.map-dot-watermark .dot-cheek-r{ display: none; }
@media (max-width: 560px){
  .map-dot-watermark{ top: .55rem; right: .55rem; }
  .map-dot-watermark .dot-mascot{ width: 44px; height: 44px; }
  .map-dot-watermark .dot-mascot::before,
  .map-dot-watermark .dot-mascot::after{ width: 9px; height: 11px; }
  .map-dot-watermark .dot-pupil-l,
  .map-dot-watermark .dot-pupil-r{ width: 4px; height: 5px; }
  .map-dot-watermark .dot-smile{ width: 18px; height: 9px; }
}

/* Magic-hero, when used solo (no aside), should span full width */
.magic-hero--solo .magic-hero__grid{
  grid-template-columns: 1fr !important;
}
.magic-hero--solo .magic-side{ display: none; }

/* Extra breathing room on mobile between top blocks */
@media (max-width: 1023px){
  .shero--banner{ margin-bottom: 1rem; }
  .spread-stage{ gap: 1.2rem; margin-bottom: 1.4rem; }
  .stage-side{ gap: .9rem; }
}

.live-map .leaflet-tile, .heatmap-map .leaflet-tile{
  filter: saturate(1.04) brightness(1.02) !important;
}

/* ===== Neon flag-pins on the global live heatmap (heatmap.js) ============
   Pins/clusters are intentionally subtle so the heatmap stays dominant.
   They gain presence as the user zooms in (see .wikey-zoom-* classes). */
.wikey-flag{ pointer-events:auto; transition: opacity .25s ease, transform .25s ease; }
.wikey-flag .wf-pole{
  position:absolute; left:2px; top:8px; width:2px; height:22px;
  background:linear-gradient(180deg,#fff,#9ef);
  box-shadow:0 0 4px rgba(0,255,255,.55);
  border-radius:1px;
}
.wikey-flag .wf-flag{
  position:absolute; left:4px; top:0;
  width:18px; height:13px;
  background:var(--wf-c,#00ffff);
  clip-path:polygon(0 0, 100% 0, 78% 50%, 100% 100%, 0 100%);
  box-shadow:0 0 6px color-mix(in srgb, var(--wf-c,#00ffff) 60%, transparent);
  display:flex; align-items:center; justify-content:flex-start;
  padding-left:3px;
  animation:wfWave 3.6s ease-in-out infinite;
  transform-origin:left center;
}
.wikey-flag .wf-dot{
  width:6px; height:6px; border-radius:50%;
  background:#fff;
  box-shadow:0 0 4px #fff;
}
.wikey-flag:hover{ transform: scale(1.15); }
.wikey-flag:hover .wf-flag{
  box-shadow:0 0 12px var(--wf-c,#00ffff),
             0 0 22px color-mix(in srgb, var(--wf-c,#00ffff) 80%, transparent);
}

/* Zoom-aware visibility: at wide-angle, pins recede to let the heatmap shine.
   The .wikey-zoom-* classes are toggled on the Leaflet container by JS. */
.wikey-zoom-far .wikey-flag,
.wikey-zoom-far .wikey-flag-cluster{
  opacity: .18;
  transform: scale(.6);
  transform-origin: center bottom;
  filter: saturate(.7);
}
.wikey-zoom-far .wikey-flag .wf-flag{ animation: none; box-shadow: none; }
.wikey-zoom-far .wikey-flag .wf-pole{ box-shadow: none; }
.wikey-zoom-far .wikey-flag-cluster .wfc-bg{ box-shadow: none; }
.wikey-zoom-mid .wikey-flag,
.wikey-zoom-mid .wikey-flag-cluster{
  opacity: .7;
  transform: scale(.88);
  transform-origin: center bottom;
}
.wikey-zoom-near .wikey-flag,
.wikey-zoom-near .wikey-flag-cluster{
  opacity: 1;
  transform: scale(1);
}
@keyframes wfWave{
  0%,100%{ transform:skewY(0deg) scaleX(1); }
  50%    { transform:skewY(-6deg) scaleX(.94); }
}
@media (prefers-reduced-motion: reduce){
  .wikey-flag .wf-flag{ animation:none; }
}

/* Cluster bubbles for the flag-pin layer — quieter so the heatmap dominates */
.wikey-flag-cluster{ position:relative; transition: opacity .25s ease, transform .25s ease; }
.wikey-flag-cluster .wfc-bg{
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(0,255,255,.85) 0%, rgba(255,0,170,.85) 70%);
  box-shadow:0 0 8px rgba(0,255,255,.4), 0 0 14px rgba(255,0,170,.3);
  border:1px solid rgba(255,255,255,.65);
}
.wikey-flag-cluster .wfc-n{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  color:#0a0a0a; font-weight:800; font-size:.88rem;
  text-shadow:0 0 4px rgba(255,255,255,.55);
}

/* Tooltip for flag-pins */
.leaflet-tooltip.wikey-flag-tt{
  background:rgba(10,10,10,.92);
  color:#eaffff;
  border:1px solid rgba(0,255,255,.55);
  box-shadow:0 0 14px rgba(0,255,255,.35), 0 0 28px rgba(255,0,170,.25);
  border-radius:10px; padding:.5rem .7rem;
  font-size:.82rem; line-height:1.35;
  max-width:240px; white-space:normal;
}
.leaflet-tooltip.wikey-flag-tt::before{ display:none; } /* hide leaflet arrow */
.wf-tip__title{
  display:block; color:#fff; font-weight:700; text-decoration:none;
  margin-bottom:.15rem;
}
.wf-tip__title:hover{ color:#00ffff; }
.wf-tip__owner{ color:#ff00aa; font-size:.74rem; margin-bottom:.2rem; }
.wf-tip__meta{ color:rgba(255,255,255,.78); font-size:.74rem; }
.wf-tip__foot{
  display:flex; gap:.4rem; align-items:center;
  margin-top:.3rem; padding-top:.3rem;
  border-top:1px dashed rgba(255,255,255,.18);
  font-size:.74rem;
}
.wf-tip__eve{
  color:#ffdd00; font-weight:700;
  text-shadow:0 0 6px rgba(255,221,0,.55);
}
.wf-tip__ago{ color:rgba(255,255,255,.55); }

/* ============================================================
   hnew-hero — "Open Hero" pass (v=wnew8-openhero)
   Removes the boxed container, lets the hero breathe full-bleed
   with stronger neon ambience, bigger title, larger open stats.
   ============================================================ */

/* ============================================================
   hnew-hero — "Neon Beam" pass (v=wnew9-beam)
   Pure black full-bleed canvas, Dot prominent on the right,
   CMYK neon-beam headline. Free-breathing, energetic.
   ============================================================ */

/* Pitch-black full-bleed stage with grid layout: content left, Dot right. */
.hnew-hero.hnew-hero--bleed{
  background: #000;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;
  margin-bottom: 2.4rem;
  padding: 6.5rem clamp(1.4rem, 6vw, 7rem) 5.5rem;
  min-height: min(86vh, 820px);
  overflow: hidden;

  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr);
  grid-template-areas:
    "content dot"
    "scroll  scroll";
  column-gap: clamp(1.5rem, 5vw, 4rem);
  row-gap: 2rem;
  align-items: center;
}

/* Subtle CMY ambient — strong glow pockets on pure black */
.hnew-hero.hnew-hero--bleed::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 55% 50% at 15% 25%, rgba(0,255,255,.20), transparent 70%),
    radial-gradient(ellipse 60% 55% at 88% 70%, rgba(255,0,170,.24), transparent 72%),
    radial-gradient(ellipse 45% 40% at 60% 95%, rgba(255,255,0,.10), transparent 72%);
  pointer-events: none;
}

/* Soften the vignette to almost nothing — black bg already does the job */
.hnew-hero--bleed .hnew-hero__vignette{
  background:
    radial-gradient(ellipse at 50% 50%, transparent 70%, rgba(0,0,0,.55) 100%);
}

/* Brighter orbs anchored to corners for cosmic depth */
.hnew-hero--bleed .hnew-hero__orb{
  width: 620px; height: 620px;
  filter: blur(120px);
  opacity: .78;
}
.hnew-hero--bleed .hnew-hero__orb--c{ top: -200px; left: -180px; }
.hnew-hero--bleed .hnew-hero__orb--m{ bottom: -240px; right: -180px; }
.hnew-hero--bleed .hnew-hero__orb--y{
  width: 480px; height: 480px; opacity: .42;
}

/* Quieter grid so the black reads as deep space */
.hnew-hero--bleed .hnew-hero__grid{
  mask-image: radial-gradient(ellipse at 50% 50%, #000 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 20%, transparent 70%);
  opacity: .35;
}

/* ---- Content (left column) ---- */
.hnew-hero--bleed .hnew-hero__content{
  grid-area: content;
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0;
  text-align: left;
  padding-right: 0;
  padding-top: 0;
  width: 100%;
}
.hnew-hero--bleed .hnew-hero__eyebrow{
  margin-bottom: 1.8rem;
  padding: .42rem 1.1rem;
  font-size: .76rem;
}

/* NEON-BEAM TITLE: bright CMY gradient + heavy multi-layer text-shadow glow.
   We render the title twice — gradient fill on top, white-ink layer underneath
   carries the glow halos because background-clip: text strips text-shadow. */
.hero.hnew-hero.hnew-hero--bleed h1.hnew-hero__title,
.hnew-hero.hnew-hero--bleed h1.hnew-hero__title,
.hnew-hero--bleed .hnew-hero__title{
  position: relative;
  font-size: clamp(2.8rem, 7.5vw, 5.6rem);
  line-height: 1.02;
  max-width: 14ch;
  margin: 0 0 1.4rem;
  background: linear-gradient(
    100deg,
    #00ffff 0%,
    #66ffff 18%,
    #ffffff 38%,
    #ff66cc 56%,
    #ff00aa 70%,
    #ffee55 88%,
    #ffff00 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 0 6px rgba(255,255,255,.85))
    drop-shadow(0 0 18px rgba(0,255,255,.75))
    drop-shadow(0 0 32px rgba(255,0,170,.70))
    drop-shadow(0 0 48px rgba(255,255,0,.45));
  text-shadow: none;
}

.hnew-hero--bleed .hnew-hero__sub{
  font-size: clamp(1.15rem, 1.85vw, 1.45rem);
  margin: 0 0 1rem;
  max-width: 620px;
  color: #fff;
  text-shadow:
    0 0 6px rgba(0,255,255,.45),
    0 0 14px rgba(0,255,255,.30),
    0 0 22px rgba(255,0,170,.20);
}
.hnew-hero--bleed .hnew-hero__pitch{
  margin: 0 0 1.8rem;
  max-width: 600px;
  text-align: left;
  color: rgba(255,255,255,.78);
}
.hnew-hero--bleed .hnew-hero__badges{
  justify-content: flex-start;
  margin: 0 0 2rem;
  gap: .55rem;
}
.hnew-hero--bleed .hnew-hero__live{
  margin: 0 0 1.4rem;
}
.hnew-hero--bleed .hnew-hero__cta{
  justify-content: flex-start;
  margin-top: .3rem;
  gap: .9rem;
}

/* ---- Dot mascot — prominent right column, big & glowing ---- */
.hnew-hero--bleed .hnew-hero__dot{
  grid-area: dot;
  position: relative;
  top: auto; right: auto;
  margin: 0 auto;
  width: clamp(220px, 26vw, 320px);
  height: clamp(220px, 26vw, 320px);
  justify-self: center;
}
.hnew-hero--bleed .hnew-hero__dot .dot-mascot{
  width: 100%; height: 100%;
  box-shadow:
    0 0 50px rgba(0,255,255,.85),
    0 0 110px rgba(0,191,255,.65),
    0 0 180px rgba(255,0,170,.40),
    0 0 240px rgba(255,255,0,.18);
}
.hnew-hero--bleed .hnew-hero__dot-halo{
  inset: -90px;
  background:
    radial-gradient(circle, rgba(0,255,255,.55) 0%, rgba(0,255,255,0) 60%),
    radial-gradient(circle, rgba(255,0,170,.40) 30%, rgba(255,0,170,0) 72%),
    radial-gradient(circle, rgba(255,255,0,.18) 50%, rgba(255,255,0,0) 75%);
  filter: blur(14px);
}
.hnew-hero--bleed .hnew-hero__dot-ring{
  inset: -36px;
  border-color: rgba(0,255,255,.45);
}

/* Scroll hint spans full width on its own row */
.hnew-hero--bleed .scroll-hint{ grid-area: scroll; margin: 1rem auto 0; }

/* ---- Open Stats strip (no box, big neon numbers) ---- */
.trust-strip.trust-strip--open{
  background: transparent;
  border: 0;
  border-radius: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 2.4rem 1rem 3.2rem;
  margin: 1rem 0 3.4rem;
  gap: 2rem;
  position: relative;
}
.trust-strip.trust-strip--open::before{
  content: "";
  position: absolute;
  left: 12%; right: 12%; top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(0,255,255,.5), rgba(255,0,170,.5), rgba(255,255,0,.4), transparent);
  opacity: .85;
}
.trust-strip.trust-strip--open .trust-stat{ gap: .55rem; }
.trust-strip.trust-strip--open .ts-num{
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  background: linear-gradient(140deg, #00ffff 0%, #ff00aa 50%, #ffff00 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,.55))
    drop-shadow(0 0 18px rgba(0,255,255,.45))
    drop-shadow(0 0 26px rgba(255,0,170,.40));
  letter-spacing: -.01em;
}
.trust-strip.trust-strip--open .ts-lbl{
  font-size: .95rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  text-shadow: 0 0 6px rgba(0,255,255,.25);
}

/* ---- Responsive ---- */
@media (max-width: 980px){
  .hnew-hero.hnew-hero--bleed{
    padding: 3.6rem 1.2rem 3.2rem;
    min-height: auto;
    grid-template-columns: 1fr;
    grid-template-areas:
      "dot"
      "content"
      "scroll";
    row-gap: 1.6rem;
    text-align: center;
  }
  .hnew-hero--bleed .hnew-hero__content{
    text-align: center;
    margin: 0 auto;
  }
  .hnew-hero--bleed .hnew-hero__title{
    max-width: 18ch;
    margin-left: auto; margin-right: auto;
  }
  .hnew-hero--bleed .hnew-hero__sub,
  .hnew-hero--bleed .hnew-hero__pitch{
    margin-left: auto; margin-right: auto;
    text-align: center;
  }
  .hnew-hero--bleed .hnew-hero__badges,
  .hnew-hero--bleed .hnew-hero__cta{ justify-content: center; }
  .hnew-hero--bleed .hnew-hero__dot{
    width: 200px; height: 200px;
  }
  .trust-strip.trust-strip--open{ padding: 1.8rem .6rem 2.4rem; gap: 1.4rem; }
}
@media (max-width: 640px){
  .hnew-hero.hnew-hero--bleed{ padding: 2.8rem 1rem 2.6rem; }
  .hnew-hero--bleed .hnew-hero__title{
    font-size: clamp(2.1rem, 9vw, 3.2rem);
  }
  .hnew-hero--bleed .hnew-hero__dot{ width: 160px; height: 160px; }
  .hnew-hero--bleed .hnew-hero__dot-halo{ inset: -40px; }
  .hnew-hero--bleed .hnew-hero__dot-ring{ inset: -18px; }
  .trust-strip.trust-strip--open .ts-num{ font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .trust-strip.trust-strip--open .ts-lbl{ font-size: .78rem; letter-spacing: .1em; }
}

/* ============================================================
   hnew-hero — "MAX OVERDRIVE" pass (v=wnewA-max)
   Holy-fuck-mode: dramatic CMY backdrop, brutal title beam,
   huge pulsing Dot. Loud, proud, unapologetically neon.
   ============================================================ */

/* Backdrop: deep black with a dramatic diagonal CMY gradient,
   wide cyan→magenta→pink wash, plus moving aurora streak.    */
.hnew-hero.hnew-hero--bleed{
  background:
    radial-gradient(ellipse 90% 70% at 15% 100%, rgba(255,0,170,.55), transparent 65%),
    radial-gradient(ellipse 80% 60% at 90% 0%,  rgba(0,255,255,.45), transparent 65%),
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255,0,255,.18), transparent 70%),
    linear-gradient(135deg, #000000 0%, #050008 40%, #08000c 60%, #000000 100%);
  padding-top: 8rem;
  padding-bottom: 7rem;
  min-height: min(92vh, 920px);
}

/* Animated aurora sweep behind everything */
.hnew-hero.hnew-hero--bleed::after{
  content:"";
  position:absolute; inset:-10%;
  z-index:0; pointer-events:none;
  background:
    conic-gradient(from 180deg at 50% 50%,
      rgba(0,255,255,.22)   0deg,
      rgba(255,0,170,.28)  90deg,
      rgba(255,0,255,.22) 180deg,
      rgba(255,255,0,.14) 250deg,
      rgba(0,255,255,.22) 360deg);
  filter: blur(110px);
  opacity: .55;
  mix-blend-mode: screen;
  animation: maxAuroraSpin 38s linear infinite;
}
@keyframes maxAuroraSpin {
  from { transform: rotate(0deg)   scale(1.05); }
  to   { transform: rotate(360deg) scale(1.05); }
}

/* Visible scan lines — wide-spaced, faint cyan stripes drifting up */
.hnew-hero--bleed .hnew-hero__scan{
  background: repeating-linear-gradient(
    180deg,
    rgba(0,255,255,0)   0px,
    rgba(0,255,255,0)   5px,
    rgba(0,255,255,.10) 6px,
    rgba(0,255,255,0)   7px
  );
  opacity: .9;
  animation-duration: 5s;
}

/* Orbs bigger + more saturated for the overdrive look */
.hnew-hero--bleed .hnew-hero__orb{
  width: 760px; height: 760px;
  filter: blur(130px);
  opacity: .85;
}
.hnew-hero--bleed .hnew-hero__orb--c{
  top: -240px; left: -220px;
  background: radial-gradient(circle, rgba(0,255,255,.95), rgba(0,255,255,0) 70%);
}
.hnew-hero--bleed .hnew-hero__orb--m{
  bottom: -280px; right: -220px;
  background: radial-gradient(circle, rgba(255,0,170,.95), rgba(255,0,170,0) 70%);
}
.hnew-hero--bleed .hnew-hero__orb--y{
  width: 560px; height: 560px; opacity: .55;
  background: radial-gradient(circle, rgba(255,255,0,.75), rgba(255,255,0,0) 70%);
}

/* More floating particles, brighter */
.hnew-hero--bleed .hnew-p{
  width: 8px; height: 8px;
}
.hnew-hero--bleed .hnew-p--c{
  box-shadow: 0 0 16px #00ffff, 0 0 32px rgba(0,255,255,.85), 0 0 60px rgba(0,255,255,.45);
}
.hnew-hero--bleed .hnew-p--m{
  box-shadow: 0 0 16px #ff00aa, 0 0 32px rgba(255,0,170,.85), 0 0 60px rgba(255,0,170,.45);
}
.hnew-hero--bleed .hnew-p--y{
  box-shadow: 0 0 16px #ffff55, 0 0 32px rgba(255,255,0,.80), 0 0 60px rgba(255,255,0,.40);
}

/* ---- BRUTAL NEON-BEAM TITLE ----
   Yellow/white hot core, magenta+pink mid burst, cyan outer halo.
   Multiple drop-shadow layers stacked → text feels lit from inside. */
.hero.hnew-hero.hnew-hero--bleed h1.hnew-hero__title,
.hnew-hero.hnew-hero--bleed h1.hnew-hero__title,
.hnew-hero--bleed .hnew-hero__title{
  font-size: clamp(3rem, 8.5vw, 6.6rem);
  line-height: .98;
  max-width: 13ch;
  margin: .4rem 0 1.8rem;
  letter-spacing: -.015em;
  background: linear-gradient(
    100deg,
    #ffffff  0%,
    #ffff66  18%,
    #ff66cc  38%,
    #ff00aa  55%,
    #ff33ff  72%,
    #00ffff  92%,
    #ffffff 100%
  );
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 0  2px rgba(255,255,255,1))
    drop-shadow(0 0  8px rgba(255,255,255,.95))
    drop-shadow(0 0 18px rgba(255,255,0,.85))
    drop-shadow(0 0 32px rgba(255,0,170,.90))
    drop-shadow(0 0 52px rgba(255,0,255,.75))
    drop-shadow(0 0 80px rgba(0,255,255,.65));
  animation:
    hnewTitleShimmer 7s ease-in-out infinite,
    maxTitlePulse 2.6s ease-in-out infinite;
}
@keyframes maxTitlePulse{
  0%,100%{
    filter:
      drop-shadow(0 0  2px rgba(255,255,255,1))
      drop-shadow(0 0  8px rgba(255,255,255,.95))
      drop-shadow(0 0 18px rgba(255,255,0,.85))
      drop-shadow(0 0 32px rgba(255,0,170,.90))
      drop-shadow(0 0 52px rgba(255,0,255,.75))
      drop-shadow(0 0 80px rgba(0,255,255,.65));
  }
  50%{
    filter:
      drop-shadow(0 0  3px rgba(255,255,255,1))
      drop-shadow(0 0 14px rgba(255,255,255,1))
      drop-shadow(0 0 28px rgba(255,255,0,1))
      drop-shadow(0 0 48px rgba(255,0,170,1))
      drop-shadow(0 0 80px rgba(255,0,255,.95))
      drop-shadow(0 0 130px rgba(0,255,255,.85));
  }
}

/* Sub-headline gets a brighter cyan beam too */
.hnew-hero--bleed .hnew-hero__sub{
  color: #ffffff;
  font-weight: 600;
  text-shadow:
    0 0  4px rgba(255,255,255,.85),
    0 0 12px rgba(0,255,255,.75),
    0 0 24px rgba(0,255,255,.55),
    0 0 40px rgba(255,0,170,.40);
}

/* Eyebrow pulse pill: punchier */
.hnew-hero--bleed .hnew-hero__eyebrow{
  border-color: rgba(0,255,255,.7);
  background: rgba(0,255,255,.10);
  box-shadow:
    0 0 14px rgba(0,255,255,.4),
    0 0 32px rgba(0,255,255,.25);
  text-shadow: 0 0 14px rgba(0,255,255,.9);
}

/* ---- HUGE PULSING DOT (eyecatcher) ---- */
.hnew-hero--bleed .hnew-hero__dot{
  width: clamp(120px, 13vw, 168px);
  height: clamp(120px, 13vw, 168px);
  animation: maxDotFloat 5.5s ease-in-out infinite;
}
@keyframes maxDotFloat{
  0%,100%{ transform: translateY(0)    rotate(-1deg); }
  50%    { transform: translateY(-14px) rotate( 1deg); }
}
.hnew-hero--bleed .hnew-hero__dot .dot-mascot{
  width: 100%; height: 100%;
  box-shadow:
    0 0  40px rgba(255,255,255,.55),
    0 0  80px rgba(0,255,255,1),
    0 0 160px rgba(0,191,255,.85),
    0 0 240px rgba(255,0,170,.65),
    0 0 320px rgba(255,0,255,.45),
    0 0 420px rgba(255,255,0,.28);
  animation: maxDotPulse 2.2s ease-in-out infinite;
}
@keyframes maxDotPulse{
  0%,100%{
    box-shadow:
      0 0  40px rgba(255,255,255,.55),
      0 0  80px rgba(0,255,255,1),
      0 0 160px rgba(0,191,255,.85),
      0 0 240px rgba(255,0,170,.65),
      0 0 320px rgba(255,0,255,.45),
      0 0 420px rgba(255,255,0,.28);
  }
  50%{
    box-shadow:
      0 0  56px rgba(255,255,255,.85),
      0 0 110px rgba(0,255,255,1),
      0 0 200px rgba(0,191,255,1),
      0 0 300px rgba(255,0,170,.9),
      0 0 400px rgba(255,0,255,.75),
      0 0 520px rgba(255,255,0,.50);
  }
}

/* Brighter eyes/pupils on the home Dot — almost glowing white-hot */
.hnew-hero--bleed .hnew-hero__dot .dot-pupil-l,
.hnew-hero--bleed .hnew-hero__dot .dot-pupil-r{
  background: #ffffff;
  box-shadow:
    0 0 10px #ffffff,
    0 0 20px rgba(0,255,255,.9),
    0 0 32px rgba(0,255,255,.55);
  animation: maxEyePulse 1.8s ease-in-out infinite;
}
@keyframes maxEyePulse{
  0%,100%{ filter: brightness(1); }
  50%    { filter: brightness(1.6); }
}

/* Aggressive multi-ring halo */
.hnew-hero--bleed .hnew-hero__dot-halo{
  inset: -130px;
  background:
    radial-gradient(circle, rgba(0,255,255,.75) 0%,  rgba(0,255,255,0) 55%),
    radial-gradient(circle, rgba(255,0,170,.60) 25%, rgba(255,0,170,0) 72%),
    radial-gradient(circle, rgba(255,0,255,.40) 45%, rgba(255,0,255,0) 78%),
    radial-gradient(circle, rgba(255,255,0,.25) 60%, rgba(255,255,0,0) 82%);
  filter: blur(18px);
  animation: maxHalo 3.4s ease-in-out infinite;
}
@keyframes maxHalo{
  0%,100%{ opacity: .85; transform: scale(1); }
  50%    { opacity: 1;   transform: scale(1.18); }
}
.hnew-hero--bleed .hnew-hero__dot-ring{
  inset: -50px;
  border: 2px dashed rgba(0,255,255,.7);
  box-shadow:
    0 0 24px rgba(0,255,255,.55),
    inset 0 0 24px rgba(255,0,170,.35);
  animation: hnewDotRing 14s linear infinite;
}

/* Live-now & badges get a tiny glow bump for cohesion */
.hnew-hero--bleed .hnew-hero__badge{
  text-shadow: 0 0 8px rgba(255,255,255,.35);
}

/* Vertical breathing room — bigger gap title→sub→pitch */
.hnew-hero--bleed .hnew-hero__pitch{ margin-bottom: 2.4rem; }
.hnew-hero--bleed .hnew-hero__badges{ margin-bottom: 2.4rem; }

/* Responsive: don't let the giant Dot overflow on mobile */
@media (max-width: 980px){
  .hnew-hero.hnew-hero--bleed{
    padding-top: 4.4rem; padding-bottom: 4rem;
  }
  .hnew-hero--bleed .hnew-hero__dot{
    width: clamp(220px, 56vw, 320px);
    height: clamp(220px, 56vw, 320px);
  }
  .hnew-hero--bleed .hnew-hero__dot-halo{ inset: -70px; }
  .hnew-hero--bleed .hnew-hero__dot-ring{ inset: -28px; }
}
@media (max-width: 640px){
  .hnew-hero--bleed .hnew-hero__dot{
    width: 200px; height: 200px;
  }
  .hnew-hero--bleed .hnew-hero__dot-halo{ inset: -44px; }
  .hnew-hero--bleed .hnew-hero__dot-ring{ inset: -18px; }
  .hnew-hero--bleed .hnew-hero__title{
    font-size: clamp(2.2rem, 9.5vw, 3.4rem);
  }
}

@media (prefers-reduced-motion: reduce){
  .hnew-hero.hnew-hero--bleed::after,
  .hnew-hero--bleed .hnew-hero__dot,
  .hnew-hero--bleed .hnew-hero__dot .dot-mascot,
  .hnew-hero--bleed .hnew-hero__dot-halo,
  .hnew-hero--bleed .hnew-hero__dot .dot-pupil-l,
  .hnew-hero--bleed .hnew-hero__dot .dot-pupil-r,
  .hnew-hero--bleed .hnew-hero__title{
    animation: none !important;
  }
}

/* ============================================================
   live-scans--home — Big global heatmap on the landing page.
   Same neon glass aesthetic as the spread-detail live map,
   but taller and without the side-rail.
   ============================================================ */
.live-scans.live-scans--home{
  margin: 2.4rem 0 3.2rem;
  padding: 1.2rem 1.2rem 1.4rem;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(0,255,255,.05), rgba(255,0,170,.04));
  border: 1px solid rgba(0,255,255,.25);
  box-shadow:
    0 0 28px rgba(0,255,255,.18),
    0 0 60px rgba(255,0,170,.14),
    inset 0 0 40px rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.live-scans.live-scans--home .live-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  flex-wrap: wrap; gap: .6rem;
  margin: 0 .2rem .8rem;
}
.live-scans.live-scans--home .live-sub{ margin:.2rem 0 0; }
.live-scans.live-scans--home .live-map-wrap{
  height: clamp(560px, 62vh, 680px);
  min-height: 560px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,255,255,.30);
  box-shadow:
    0 0 22px rgba(0,255,255,.30),
    0 0 50px rgba(255,0,170,.18),
    inset 0 0 30px rgba(0,0,0,.55);
}
.live-scans.live-scans--home .live-map{
  height: 100%; width: 100%;
}
@media (max-width: 760px){
  .live-scans.live-scans--home .live-map-wrap{
    height: 440px; min-height: 440px;
  }
}
@media (max-width: 480px){
  .live-scans.live-scans--home{ padding:.8rem .8rem 1rem; border-radius:16px; }
  .live-scans.live-scans--home .live-map-wrap{
    height: 360px; min-height: 360px; border-radius: 12px;
  }
}

/* ============================================================
   live-scans--home — POLISH pass (wnewC).
   Bigger, more prominent, neon-knall, with intro fade-in
   and a hero-sized CTA button beneath the map.
   ============================================================ */
.live-scans.live-scans--home{
  margin: 3.6rem 0 4.2rem;                /* more breathing room */
  padding: 1.6rem 1.4rem 1.8rem;
  border-radius: 26px;
  border-color: rgba(0,255,255,.45);
  /* stronger multi-color neon ring around the glass frame */
  box-shadow:
    0 0 36px rgba(0,255,255,.42),
    0 0 80px rgba(255,0,170,.32),
    0 0 140px rgba(255,170,0,.18),
    inset 0 0 50px rgba(0,0,0,.55);
  animation: liveMapFadeIn 1.1s cubic-bezier(.2,.7,.2,1) both;
}
.live-scans.live-scans--home .live-map-wrap{
  height: clamp(620px, 70vh, 760px);      /* taller, more imposing */
  min-height: 620px;
  border-radius: 18px;
  border-color: rgba(0,255,255,.45);
  box-shadow:
    0 0 30px rgba(0,255,255,.45),
    0 0 70px rgba(255,0,170,.30),
    0 0 110px rgba(255,170,0,.16),
    inset 0 0 36px rgba(0,0,0,.6);
  animation: liveMapFadeInMap 1.4s .15s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes liveMapFadeIn{
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes liveMapFadeInMap{
  from { opacity: 0; transform: scale(.985); filter: blur(6px); }
  to   { opacity: 1; transform: scale(1);    filter: blur(0); }
}

/* CTA — big, neon, gradient-filled, pulsing glow */
.live-scans.live-scans--home .live-map-cta-wrap{
  text-align: center;
  margin: 1.6rem 0 .4rem;
}
.btn-live-map-cta{
  display: inline-block;
  padding: 1rem 2.4rem;
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  color: #0a0a0a;
  background: linear-gradient(95deg, #00ffff 0%, #ff00aa 55%, #ffaa00 100%);
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 999px;
  box-shadow:
    0 0 22px rgba(0,255,255,.65),
    0 0 50px rgba(255,0,170,.50),
    0 0 90px rgba(255,170,0,.30),
    inset 0 0 14px rgba(255,255,255,.45);
  transition: transform .2s ease, box-shadow .25s ease, filter .25s ease;
  animation: liveCtaPulse 2.6s ease-in-out infinite;
  will-change: transform, box-shadow;
}
.btn-live-map-cta:hover,
.btn-live-map-cta:focus-visible{
  transform: translateY(-2px) scale(1.04);
  filter: brightness(1.08) saturate(1.15);
  box-shadow:
    0 0 32px rgba(0,255,255,.85),
    0 0 70px rgba(255,0,170,.65),
    0 0 130px rgba(255,170,0,.45),
    inset 0 0 18px rgba(255,255,255,.55);
  outline: none;
}
@keyframes liveCtaPulse{
  0%,100%{
    box-shadow:
      0 0 22px rgba(0,255,255,.65),
      0 0 50px rgba(255,0,170,.50),
      0 0 90px rgba(255,170,0,.30),
      inset 0 0 14px rgba(255,255,255,.45);
  }
  50%{
    box-shadow:
      0 0 30px rgba(0,255,255,.85),
      0 0 70px rgba(255,0,170,.65),
      0 0 120px rgba(255,170,0,.45),
      inset 0 0 18px rgba(255,255,255,.55);
  }
}

@media (max-width: 760px){
  .live-scans.live-scans--home{ margin: 2.4rem 0 3rem; }
  .live-scans.live-scans--home .live-map-wrap{
    height: 480px; min-height: 480px;
  }
  .btn-live-map-cta{ padding: .9rem 1.8rem; font-size: 1.04rem; }
}
@media (max-width: 480px){
  .live-scans.live-scans--home .live-map-wrap{
    height: 380px; min-height: 380px;
  }
}
@media (prefers-reduced-motion: reduce){
  .live-scans.live-scans--home,
  .live-scans.live-scans--home .live-map-wrap,
  .btn-live-map-cta{ animation: none !important; }
}

/* ============================================================
   live-scans--home — REFINE pass (wnewD).
   More elegant: less imposing height, softer CTA pulse,
   more breathing room above, bigger neon-beam title.
   ============================================================ */
.live-scans.live-scans--home{
  margin: 5.6rem 0 4.2rem;                 /* breathing room above */
}
.live-scans.live-scans--home .live-map-wrap{
  height: clamp(520px, 62vh, 680px);
  min-height: 520px;
}
@media (max-width: 760px){
  .live-scans.live-scans--home{ margin: 4rem 0 3rem; }
  .live-scans.live-scans--home .live-map-wrap{
    height: 420px; min-height: 420px;
  }
}
@media (max-width: 480px){
  .live-scans.live-scans--home .live-map-wrap{
    height: 360px; min-height: 360px;
  }
}

/* Bigger, beam-glow heading scoped to the home live-map section */
.live-scans.live-scans--home .live-head h2{
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: .01em;
  background: linear-gradient(95deg, #00ffff 0%, #ff00aa 55%, #ffaa00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 18px rgba(0,255,255,.55),
    0 0 38px rgba(255,0,170,.45),
    0 0 70px rgba(255,170,0,.30);
  filter: drop-shadow(0 0 14px rgba(0,255,255,.35));
}
.live-scans.live-scans--home .live-sub{
  font-size: 1.02rem;
  opacity: .9;
}

/* Calmer, more elegant CTA */
.btn-live-map-cta{
  padding: .85rem 2rem;
  font-size: 1.05rem;
  letter-spacing: .06em;
  border-width: 1.5px;
  border-color: rgba(255,255,255,.7);
  box-shadow:
    0 0 14px rgba(0,255,255,.42),
    0 0 32px rgba(255,0,170,.28),
    inset 0 0 10px rgba(255,255,255,.30);
  animation: liveCtaPulseSoft 4.2s ease-in-out infinite;
}
.btn-live-map-cta:hover,
.btn-live-map-cta:focus-visible{
  transform: translateY(-1px) scale(1.025);
  box-shadow:
    0 0 20px rgba(0,255,255,.60),
    0 0 48px rgba(255,0,170,.42),
    0 0 80px rgba(255,170,0,.22),
    inset 0 0 12px rgba(255,255,255,.40);
}
@keyframes liveCtaPulseSoft{
  0%,100%{
    box-shadow:
      0 0 14px rgba(0,255,255,.42),
      0 0 32px rgba(255,0,170,.28),
      inset 0 0 10px rgba(255,255,255,.30);
  }
  50%{
    box-shadow:
      0 0 20px rgba(0,255,255,.55),
      0 0 44px rgba(255,0,170,.38),
      inset 0 0 12px rgba(255,255,255,.38);
  }
}

/* ============================================================
   Holy-Shit pass (wnewE) — unify hero + live-map glow energy,
   pump the dot, add subtle neon dividers between sections,
   crank background contrast.
   ============================================================ */

/* Tiefschwarzer Grund — keine grauen Fallbacks zwischen Sections */
html, body{ background:#000 !important; }
body{
  background-image:
    radial-gradient(1200px 600px at 50% -10%, rgba(255,0,170,.10), transparent 60%),
    radial-gradient(1000px 700px at 50% 105%, rgba(0,255,255,.10), transparent 60%);
  background-attachment: fixed;
}

/* === HERO: Glow auf Map-Niveau anziehen === */
.hnew-hero.hnew-hero--bleed{
  box-shadow:
    inset 0 -1px 0 rgba(0,255,255,.18),
    0 0 80px rgba(255,0,170,.18);
}
/* Stärkere Orbs */
.hnew-hero__orb{ filter: blur(60px) saturate(1.25) !important; opacity: .95 !important; }
.hnew-hero__orb--c{ box-shadow: 0 0 220px 80px rgba(0,255,255,.55) !important; }
.hnew-hero__orb--m{ box-shadow: 0 0 240px 100px rgba(255,0,170,.55) !important; }
.hnew-hero__orb--y{ box-shadow: 0 0 200px 80px rgba(255,170,0,.45) !important; }

/* === DOT: größer, leuchtender (matched die Map-Aura) === */
.hero-dot .dot-mascot,
.hnew-hero__dot .dot-mascot{
  width: clamp(120px, 13vw, 168px) !important;
  height: clamp(120px, 13vw, 168px) !important;
  box-shadow:
    0 0 30px rgba(0,255,255,.70),
    0 0 64px rgba(0,191,255,.42),
    inset 0 0 26px rgba(255,255,255,.30) !important;
  animation: bob 3s ease-in-out infinite !important;
}
@keyframes dotMegaPulse{
  0%,100%{ filter: drop-shadow(0 0 30px rgba(0,255,255,.55)) saturate(1.15); }
  50%    { filter: drop-shadow(0 0 60px rgba(255,0,170,.70)) saturate(1.35); }
}

/* === Section-Dividers: subtile vertikale Neon-Linie + radialer Glow === */
.section-divider{
  position: relative;
  height: 120px;
  margin: 0;
  pointer-events: none;
}
.section-divider::before{
  content:"";
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:2px; height:100%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0,255,255,.0) 5%,
    rgba(0,255,255,.55) 35%,
    rgba(255,0,170,.55) 65%,
    rgba(0,255,255,.0) 95%,
    transparent 100%);
  box-shadow:
    0 0 12px rgba(0,255,255,.6),
    0 0 28px rgba(255,0,170,.4);
  filter: blur(.4px);
}
.section-divider::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:480px; height:280px;
  transform:translate(-50%,-50%);
  background: radial-gradient(ellipse at center,
    rgba(255,0,170,.12) 0%,
    rgba(0,255,255,.08) 35%,
    transparent 70%);
  filter: blur(20px);
}

/* === Live-Map: Glow exakt auf Hero-Energie matchen === */
.live-scans.live-scans--home{
  box-shadow:
    0 0 60px rgba(0,255,255,.42),
    0 0 120px rgba(255,0,170,.32),
    0 0 220px rgba(255,170,0,.18),
    inset 0 0 50px rgba(0,0,0,.65) !important;
}
.live-scans.live-scans--home .live-map-wrap{
  box-shadow:
    0 0 40px rgba(0,255,255,.55),
    0 0 90px rgba(255,0,170,.38),
    0 0 160px rgba(255,170,0,.22),
    inset 0 0 36px rgba(0,0,0,.7) !important;
}

@media (max-width: 760px){
  .section-divider{ height: 80px; }
  .section-divider::after{ width:300px; height:200px; }
  .hero-dot .dot-mascot,
  .hnew-hero__dot .dot-mascot{
    width: 150px !important; height: 150px !important;
  }
}
@media (prefers-reduced-motion: reduce){
  .hero-dot .dot-mascot, .hnew-hero__dot .dot-mascot{ animation: none !important; }
}

/* ============================================================
   wnewF — MAX-OVERDRIVE-RELOADED.
   Bigger dot, harder pulse, brutal title beam, animated bg radials,
   more hero air, stronger neon divider.
   ============================================================ */

/* === HERO breathing room === */
.hnew-hero.hnew-hero--bleed{
  padding-top: clamp(2.6rem, 5vw, 4.8rem) !important;
  padding-bottom: clamp(2.6rem, 5vw, 4.8rem) !important;
  min-height: clamp(640px, 86vh, 880px) !important;
}
.hnew-hero__content{ padding-top: 1rem !important; padding-bottom: 1rem !important; }

/* === DOT: nochmal größer + aggressiver Puls === */
.hero-dot .dot-mascot,
.hnew-hero__dot .dot-mascot{
  width: clamp(120px, 13vw, 168px) !important;
  height: clamp(120px, 13vw, 168px) !important;
  box-shadow:
    0 0 30px rgba(0,255,255,.70),
    0 0 64px rgba(0,191,255,.42),
    inset 0 0 26px rgba(255,255,255,.30) !important;
  animation: bob 3s ease-in-out infinite !important;
}
@keyframes dotBruisePulse{
  0%, 100%{
    filter: drop-shadow(0 0 40px rgba(0,255,255,.95))
            drop-shadow(0 0 80px rgba(0,191,255,.65))
            saturate(1.2) hue-rotate(0deg);
    transform: scale(1);
  }
  35%{
    filter: drop-shadow(0 0 60px rgba(255,0,170,.95))
            drop-shadow(0 0 110px rgba(255,0,170,.70))
            saturate(1.55) hue-rotate(-25deg);
    transform: scale(1.04);
  }
  65%{
    filter: drop-shadow(0 0 55px rgba(255,170,0,.85))
            drop-shadow(0 0 100px rgba(255,0,170,.60))
            saturate(1.5) hue-rotate(15deg);
    transform: scale(1.03);
  }
}
@media (max-width: 760px){
  .hero-dot .dot-mascot,
  .hnew-hero__dot .dot-mascot{
    width: 150px !important; height: 150px !important;
  }
}

/* === TITLE: 5-layer brutal beam === */
.hnew-hero__title{
  text-shadow:
    0 0 14px rgba(255,0,170,.95),
    0 0 32px rgba(255,0,170,.85),
    0 0 70px rgba(255,0,170,.65),
    0 0 130px rgba(0,255,255,.55),
    0 0 220px rgba(255,170,0,.40) !important;
  filter:
    drop-shadow(0 0 18px rgba(255,0,170,.75))
    drop-shadow(0 0 50px rgba(0,255,255,.45)) !important;
  animation: titleBeamPulse 4.2s ease-in-out infinite !important;
}
@keyframes titleBeamPulse{
  0%,100%{
    text-shadow:
      0 0 14px rgba(255,0,170,.95),
      0 0 32px rgba(255,0,170,.85),
      0 0 70px rgba(255,0,170,.65),
      0 0 130px rgba(0,255,255,.55),
      0 0 220px rgba(255,170,0,.40);
  }
  50%{
    text-shadow:
      0 0 18px rgba(0,255,255,.95),
      0 0 42px rgba(255,0,170,.95),
      0 0 90px rgba(255,170,0,.75),
      0 0 160px rgba(0,255,255,.65),
      0 0 260px rgba(255,0,170,.50);
  }
}

/* === Animated background radials === */
body{
  background-image:
    radial-gradient(1400px 700px at 50% -10%, rgba(255,0,170,.18), transparent 60%),
    radial-gradient(1200px 800px at 50% 105%, rgba(0,255,255,.18), transparent 60%),
    radial-gradient(900px 700px at 15% 40%, rgba(255,170,0,.10), transparent 65%),
    radial-gradient(900px 700px at 85% 60%, rgba(0,255,255,.10), transparent 65%) !important;
  background-attachment: fixed !important;
  animation: bgBreathe 22s ease-in-out infinite !important;
}
@keyframes bgBreathe{
  0%,100%{
    background-position: 0 0, 0 0, 0 0, 0 0;
    filter: hue-rotate(0deg) saturate(1);
  }
  50%{
    background-position: 0 -30px, 0 30px, 20px 0, -20px 0;
    filter: hue-rotate(-12deg) saturate(1.15);
  }
}

/* === Divider: kräftiger leuchten === */
.section-divider{ height: 160px !important; }
.section-divider::before{
  width: 3px !important;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0,255,255,.85) 30%,
    rgba(255,0,170,.95) 55%,
    rgba(255,170,0,.75) 75%,
    transparent 100%) !important;
  box-shadow:
    0 0 22px rgba(0,255,255,.95),
    0 0 50px rgba(255,0,170,.75),
    0 0 90px rgba(255,170,0,.40) !important;
  animation: dividerPulse 3.4s ease-in-out infinite;
}
.section-divider::after{
  width: 640px !important; height: 380px !important;
  background: radial-gradient(ellipse at center,
    rgba(255,0,170,.22) 0%,
    rgba(0,255,255,.16) 30%,
    rgba(255,170,0,.08) 55%,
    transparent 75%) !important;
  filter: blur(28px) !important;
  animation: dividerHaloPulse 5s ease-in-out infinite;
}
@keyframes dividerPulse{
  0%,100%{ opacity: .85; }
  50%    { opacity: 1; box-shadow:
    0 0 32px rgba(0,255,255,1),
    0 0 70px rgba(255,0,170,.95),
    0 0 120px rgba(255,170,0,.55); }
}
@keyframes dividerHaloPulse{
  0%,100%{ transform: translate(-50%,-50%) scale(1); opacity: .9; }
  50%    { transform: translate(-50%,-50%) scale(1.08); opacity: 1; }
}

@media (prefers-reduced-motion: reduce){
  .hnew-hero__title, body, .section-divider::before, .section-divider::after,
  .hero-dot .dot-mascot, .hnew-hero__dot .dot-mascot{ animation: none !important; }
}

/* ============================================================
   wnewG-portal1 — Request-New page overdrive
   Mirror landing's holy-shit hero into the request flow.
   ============================================================ */
.rnnew-hero{
  position: relative;
  margin: 0 0 0;
  padding: clamp(2.6rem, 5vw, 4.8rem) clamp(1.4rem, 4vw, 3rem);
  min-height: clamp(540px, 70vh, 760px);
  border-radius: 28px;
  overflow: hidden;
  background: #060608;
  box-shadow:
    0 30px 90px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.04);
  isolation: isolate;
}
.rnnew-hero__bg{
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(255,0,170,.22), transparent 60%),
    radial-gradient(900px 700px at 100% 110%, rgba(0,255,255,.20), transparent 60%),
    radial-gradient(800px 700px at 0% 50%, rgba(255,170,0,.14), transparent 65%);
  animation: rnnewBgBreathe 22s ease-in-out infinite;
}
@keyframes rnnewBgBreathe{
  0%,100%{ filter: hue-rotate(0deg) saturate(1); transform: translate3d(0,0,0); }
  50%   { filter: hue-rotate(-14deg) saturate(1.18); transform: translate3d(0,-12px,0); }
}
.rnnew-hero__radial{
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55;
  animation: rnnewOrbit 28s ease-in-out infinite;
}
.rnnew-hero__radial--a{ width: 480px; height: 480px; left: -120px; top: -120px;
  background: radial-gradient(circle, rgba(0,255,255,.55), transparent 70%); }
.rnnew-hero__radial--b{ width: 560px; height: 560px; right: -160px; bottom: -160px;
  background: radial-gradient(circle, rgba(255,0,170,.55), transparent 70%);
  animation-delay: -9s; }
.rnnew-hero__radial--c{ width: 380px; height: 380px; right: 30%; top: 20%;
  background: radial-gradient(circle, rgba(255,170,0,.40), transparent 70%);
  animation-delay: -18s; }
@keyframes rnnewOrbit{
  0%,100%{ transform: translate3d(0,0,0) scale(1); opacity: .55; }
  50%   { transform: translate3d(40px,-30px,0) scale(1.08); opacity: .8; }
}

.rnnew-hero__inner{
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr);
  gap: clamp(2rem, 4vw, 4rem); align-items: center;
  max-width: 1240px; margin: 0 auto;
}
.rnnew-hero__copy{ display: flex; flex-direction: column; gap: 1.1rem; }
.rnnew-hero__kicker{
  align-self: flex-start;
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  padding: 8px 16px; border-radius: 999px;
  color: var(--cyan);
  background: rgba(0,255,255,.07);
  border: 1px solid rgba(0,255,255,.35);
  box-shadow: 0 0 18px rgba(0,255,255,.30), inset 0 0 12px rgba(0,255,255,.10);
}
.rnnew-hero__title{
  margin: 0;
  font-family: 'Orbitron', 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(2.4rem, 5.4vw + .4rem, 5.6rem);
  line-height: 1.02; letter-spacing: -.01em;
  background: linear-gradient(90deg, #fff 0%, var(--cyan) 35%, var(--magenta) 70%, #ffaa00 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow:
    0 0 14px rgba(255,0,170,.85),
    0 0 32px rgba(255,0,170,.70),
    0 0 70px rgba(0,255,255,.55),
    0 0 130px rgba(255,170,0,.40),
    0 0 220px rgba(255,0,170,.30);
  filter:
    drop-shadow(0 0 16px rgba(255,0,170,.65))
    drop-shadow(0 0 44px rgba(0,255,255,.35));
  animation: rnnewTitleBeam 4.2s ease-in-out infinite;
}
@keyframes rnnewTitleBeam{
  0%,100%{ filter: drop-shadow(0 0 16px rgba(255,0,170,.65)) drop-shadow(0 0 44px rgba(0,255,255,.35)); }
  50%   { filter: drop-shadow(0 0 26px rgba(0,255,255,.85)) drop-shadow(0 0 70px rgba(255,170,0,.55)); }
}
.rnnew-hero__sub{
  margin: 0; max-width: 60ch;
  font-size: clamp(1.02rem, 1.05vw + .5rem, 1.22rem);
  line-height: 1.55; color: #cfd0e0;
}
.rnnew-hero__chips{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: .4rem; }
.rnnew-chip{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  font-size: .82rem; color: #f1f1f7;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 0 16px rgba(0,255,255,.10);
}
.rnnew-hero__dot{
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.rnnew-hero__dot .dot-mascot{
  width: clamp(240px, 26vw, 340px) !important;
  height: clamp(240px, 26vw, 340px) !important;
  box-shadow:
    0 0 60px rgba(0,191,255,1),
    0 0 130px rgba(0,255,255,.85),
    0 0 240px rgba(255,0,170,.65),
    0 0 380px rgba(255,170,0,.35),
    inset 0 0 36px rgba(255,255,255,.40) !important;
  animation: dotBruisePulse 2.6s ease-in-out infinite,
             dotBounce 2.4s ease-in-out infinite !important;
}
@media (max-width: 880px){
  .rnnew-hero__inner{ grid-template-columns: 1fr; text-align: center; }
  .rnnew-hero__kicker{ align-self: center; }
  .rnnew-hero__chips{ justify-content: center; }
  .rnnew-hero__dot .dot-mascot{ width: 220px !important; height: 220px !important; }
}

/* ----- Geo picker section ----- */
.rnnew-geo{ max-width: 1240px; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem); }
.rnnew-section-head{ text-align: center; margin: 0 auto 1.2rem; max-width: 720px; }
.rnnew-section-title{
  margin: 0 0 .4rem;
  font-family: 'Orbitron', sans-serif; font-weight: 800;
  font-size: clamp(1.6rem, 2.4vw + .6rem, 2.6rem);
  background: linear-gradient(90deg, #fff, var(--cyan) 50%, var(--magenta));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 18px rgba(0,255,255,.45), 0 0 42px rgba(255,0,170,.35);
}
.rnnew-section-sub{ margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.55; }

.rnnew-geo__frame{
  position: relative;
  margin-top: 1.4rem;
  border-radius: 24px;
  overflow: hidden;
  background: #060608;
  border: 1px solid rgba(0,255,255,.30);
  box-shadow:
    0 0 0 1px rgba(255,0,170,.15),
    0 0 50px rgba(0,255,255,.30),
    0 0 100px rgba(255,0,170,.25),
    0 30px 80px rgba(0,0,0,.65);
}
.rnnew-geo__map{
  width: 100%;
  height: clamp(420px, 58vh, 640px);
  background: #060608;
}
.rnnew-geo__map .leaflet-tile.wikey-tile-bright{
  filter: invert(.92) hue-rotate(180deg) brightness(1.05) saturate(1.4) contrast(1.05);
}
.rnnew-geo__overlay{
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; justify-content: space-between;
  pointer-events: none; z-index: 500;
}
.rnnew-geo__pill, .rnnew-geo__btn{ pointer-events: auto; }
.rnnew-geo__pill{
  padding: 10px 16px;
  border-radius: 999px;
  font-size: .9rem; font-weight: 600; color: #fff;
  background: rgba(6,6,8,.78);
  border: 1px solid rgba(0,255,255,.45);
  box-shadow: 0 0 18px rgba(0,255,255,.35);
  backdrop-filter: blur(6px);
}
.rnnew-geo__actions{ display: flex; gap: 8px; flex-wrap: wrap; }
.rnnew-geo__btn{
  padding: 10px 16px; border-radius: 999px;
  font-size: .85rem; font-weight: 700;
  background: linear-gradient(90deg, var(--magenta), var(--cyan));
  color: #0a0a0a; border: none; cursor: pointer;
  box-shadow: 0 0 18px rgba(255,0,170,.45), 0 0 36px rgba(0,255,255,.25);
  transition: transform .15s, box-shadow .15s;
}
.rnnew-geo__btn:hover{ transform: translateY(-1px); box-shadow: 0 0 26px rgba(255,0,170,.65), 0 0 50px rgba(0,255,255,.40); }
.rnnew-geo__btn--ghost{
  background: rgba(6,6,8,.78); color: #fff;
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 0 14px rgba(255,255,255,.10);
}

/* ----- Form section ----- */
.rnnew-form-section{ max-width: 1240px; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem) 3rem; }
.rnnew-grid{ margin-top: 1.4rem; }

.rnnew-form{
  position: relative;
  background: linear-gradient(180deg, #0c0c10 0%, #08080b 100%) !important;
  border: 1px solid rgba(0,255,255,.22) !important;
  border-radius: 24px !important;
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.4rem, 3vw, 2.4rem) !important;
  box-shadow:
    0 0 0 1px rgba(255,0,170,.10),
    0 0 40px rgba(0,255,255,.18),
    0 0 80px rgba(255,0,170,.14),
    0 30px 80px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
  overflow: hidden;
}
.rnnew-form__watermark{
  position: absolute; right: -30px; bottom: -30px;
  width: 220px; height: 220px;
  opacity: .12; pointer-events: none;
  filter: drop-shadow(0 0 30px rgba(0,255,255,.6)) drop-shadow(0 0 50px rgba(255,0,170,.4));
  z-index: 0;
}
.rnnew-form__watermark .dot-mascot{
  width: 220px !important; height: 220px !important;
  animation: dotBruisePulse 4s ease-in-out infinite !important;
}
.rnnew-form > *{ position: relative; z-index: 1; }

.rnnew-form .rn-input:focus,
.rnnew-form .rn-editor:focus-within{
  border-color: var(--cyan) !important;
  box-shadow:
    0 0 0 3px rgba(0,255,255,.22),
    0 0 28px rgba(0,255,255,.35),
    0 0 60px rgba(255,0,170,.20) !important;
}

.rnnew-drop{
  padding: 32px 26px !important;
  border: 2px dashed rgba(0,255,255,.45) !important;
  background: linear-gradient(135deg, rgba(0,255,255,.04), rgba(255,0,170,.04)) !important;
  box-shadow: inset 0 0 30px rgba(0,255,255,.10);
  transition: all .2s;
}
.rnnew-drop:hover{
  border-color: var(--magenta) !important;
  box-shadow: inset 0 0 40px rgba(255,0,170,.18), 0 0 30px rgba(255,0,170,.30);
}
.rnnew-drop.is-drag{
  border-color: #ffaa00 !important; border-style: solid !important;
  box-shadow: inset 0 0 50px rgba(255,170,0,.25), 0 0 50px rgba(255,170,0,.50) !important;
}

.rnnew-submit__btn{
  padding: 20px 40px !important;
  font-size: 1.18rem !important;
  border-radius: 999px !important;
  letter-spacing: .03em !important;
  background: linear-gradient(90deg, var(--magenta) 0%, #ff44cc 40%, var(--cyan) 100%) !important;
  box-shadow:
    0 0 30px rgba(255,0,170,.65),
    0 0 60px rgba(0,255,255,.45),
    0 0 100px rgba(255,170,0,.25) !important;
  animation: rnnewSubmitPulse 3s ease-in-out infinite;
}
.rnnew-submit__btn:hover{
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 0 40px rgba(255,0,170,.85),
    0 0 80px rgba(0,255,255,.60),
    0 0 140px rgba(255,170,0,.40) !important;
}
@keyframes rnnewSubmitPulse{
  0%,100%{ box-shadow:
    0 0 30px rgba(255,0,170,.65),
    0 0 60px rgba(0,255,255,.45),
    0 0 100px rgba(255,170,0,.25); }
  50%   { box-shadow:
    0 0 38px rgba(0,255,255,.80),
    0 0 76px rgba(255,0,170,.55),
    0 0 130px rgba(255,170,0,.35); }
}

.rnnew-tips .rn-tip{
  background: linear-gradient(180deg, rgba(20,20,26,.95), rgba(10,10,14,.95)) !important;
  border: 1px solid rgba(0,255,255,.18) !important;
  box-shadow: 0 0 18px rgba(0,255,255,.10), 0 12px 30px rgba(0,0,0,.45) !important;
  transition: transform .15s, box-shadow .15s;
}
.rnnew-tips .rn-tip:hover{
  transform: translateY(-2px);
  border-color: rgba(0,255,255,.40) !important;
  box-shadow: 0 0 26px rgba(0,255,255,.30), 0 16px 40px rgba(0,0,0,.55) !important;
}
.rnnew-tips .rn-tip--accent{
  border-color: rgba(255,0,170,.40) !important;
  box-shadow: 0 0 22px rgba(255,0,170,.30), 0 12px 30px rgba(0,0,0,.45) !important;
}

@media (prefers-reduced-motion: reduce){
  .rnnew-hero__bg, .rnnew-hero__radial, .rnnew-hero__title,
  .rnnew-hero__dot .dot-mascot, .rnnew-form__watermark .dot-mascot,
  .rnnew-submit__btn{ animation: none !important; }
}

/* ============================================================
   wnewG-portal2 — Geo status banner + button spinner
   ============================================================ */
.rnnew-geo__btn{ position: relative; display: inline-flex; align-items: center; gap: .55rem; }
.rnnew-geo__btn[disabled]{ cursor: progress; opacity: .85; }
.rnnew-geo__btn-spinner{
  display: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25);
  border-top-color: #00ffff;
  box-shadow: 0 0 10px rgba(0,255,255,.6);
  animation: rnnewSpin .85s linear infinite;
}
.rnnew-geo__btn.is-loading .rnnew-geo__btn-spinner{ display: inline-block; }
.rnnew-geo__btn.is-loading .rnnew-geo__btn-label{ opacity: .75; }
@keyframes rnnewSpin{ to { transform: rotate(360deg); } }

.rnnew-geo__why{
  margin: 14px auto 0;
  max-width: 1180px;
  padding: 12px 18px;
  display: flex; align-items: flex-start; gap: 10px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(0,255,255,.06), rgba(255,0,170,.04));
  border: 1px solid rgba(0,255,255,.28);
  color: #d8f6ff;
  font-size: 13.5px; line-height: 1.5;
  box-shadow: 0 0 18px rgba(0,255,255,.12), inset 0 0 22px rgba(0,255,255,.05);
  transition: border-color .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
}
.rnnew-geo__why-icon{
  flex: 0 0 auto;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(0,255,255,.16);
  color: #00ffff;
  font-weight: 700;
  font-size: 13px;
  text-shadow: 0 0 8px rgba(0,255,255,.8);
}
.rnnew-geo__why-text{ flex: 1 1 auto; }

.rnnew-geo__why.is-loading{
  border-color: rgba(0,255,255,.55);
  background: linear-gradient(180deg, rgba(0,255,255,.12), rgba(0,255,255,.04));
  box-shadow: 0 0 26px rgba(0,255,255,.28), inset 0 0 28px rgba(0,255,255,.08);
  animation: rnnewBannerPulse 1.6s ease-in-out infinite;
}
.rnnew-geo__why.is-ok{
  border-color: rgba(0,255,140,.55);
  background: linear-gradient(180deg, rgba(0,255,140,.12), rgba(0,255,140,.04));
  color: #d4ffe6;
  box-shadow: 0 0 26px rgba(0,255,140,.28);
}
.rnnew-geo__why.is-ok .rnnew-geo__why-icon{
  background: rgba(0,255,140,.18); color: #5dff9e;
  text-shadow: 0 0 8px rgba(0,255,140,.9);
}
.rnnew-geo__why.is-warn{
  border-color: rgba(255,170,0,.55);
  background: linear-gradient(180deg, rgba(255,170,0,.12), rgba(255,0,170,.05));
  color: #ffe8c2;
  box-shadow: 0 0 26px rgba(255,170,0,.22);
}
.rnnew-geo__why.is-warn .rnnew-geo__why-icon{
  background: rgba(255,170,0,.20); color: #ffcf6b;
  text-shadow: 0 0 8px rgba(255,170,0,.9);
}
.rnnew-geo__why.is-err{
  border-color: rgba(255,0,80,.55);
  background: linear-gradient(180deg, rgba(255,0,80,.14), rgba(255,0,170,.05));
  color: #ffd6e3;
  box-shadow: 0 0 28px rgba(255,0,80,.30);
}
.rnnew-geo__why.is-err .rnnew-geo__why-icon{
  background: rgba(255,0,80,.20); color: #ff6b9b;
  text-shadow: 0 0 8px rgba(255,0,80,.9);
}
@keyframes rnnewBannerPulse{
  0%,100%{ box-shadow: 0 0 22px rgba(0,255,255,.24), inset 0 0 22px rgba(0,255,255,.06); }
  50%   { box-shadow: 0 0 36px rgba(0,255,255,.42), inset 0 0 32px rgba(0,255,255,.12); }
}

/* Light mode */
body.light .rnnew-geo__why{
  background: linear-gradient(180deg, rgba(0,150,180,.10), rgba(255,0,170,.06));
  border-color: rgba(0,150,180,.45);
  color: #1a2330;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
body.light .rnnew-geo__why-icon{
  background: rgba(0,150,180,.18); color: #00838f;
  text-shadow: none;
}
body.light .rnnew-geo__why.is-ok    { border-color: rgba(0,170,90,.5); color: #0a3d20; }
body.light .rnnew-geo__why.is-warn  { border-color: rgba(220,130,0,.55); color: #4a2d00; }
body.light .rnnew-geo__why.is-err   { border-color: rgba(200,30,80,.55); color: #4a0820; }

@media (prefers-reduced-motion: reduce){
  .rnnew-geo__btn-spinner{ animation: none; }
  .rnnew-geo__why.is-loading{ animation: none; }
}

/* ============================================================
   LIVE PULSE FEED (home) — global real-time activity stream
   ============================================================ */
.livefeed{ max-width: 1100px; margin: 2.4rem auto 1.2rem; padding: 0 1rem; }
.livefeed__head{ text-align:center; margin-bottom:1.1rem; }
.livefeed__titlerow{
  display:flex; align-items:center; justify-content:center; gap:.7rem; flex-wrap:wrap;
}
.livefeed__title{ margin:0; }
.livefeed__live{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:800; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:#ff0044; padding:.3rem .6rem; border-radius:999px;
  border:1px solid rgba(255,0,68,.5);
  background:rgba(255,0,68,.08);
  box-shadow:0 0 14px rgba(255,0,68,.35), inset 0 0 10px rgba(255,0,68,.12);
}
.livefeed__live-dot{
  width:8px; height:8px; border-radius:50%; background:#ff0044;
  box-shadow:0 0 8px #ff0044, 0 0 16px #ff0044;
  animation: lfpulse 1.3s ease-in-out infinite;
}
@keyframes lfpulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.7); } }
.livefeed__sub{ max-width:640px; margin:.5rem auto 0; }

.livefeed__legend{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-top:1rem; }
.lf-chip{
  --lf:#00ffff;
  display:inline-flex; align-items:center; gap:.45rem;
  font-weight:700; font-size:.82rem; line-height:1;
  color:#cfeff2; cursor:pointer;
  padding:.45rem .8rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  transition:.18s ease;
}
.lf-chip:hover{ border-color:var(--lf); color:#fff; box-shadow:0 0 12px color-mix(in srgb, var(--lf) 55%, transparent); }
.lf-chip.is-on{ color:#0a0a0a; background:var(--lf); border-color:var(--lf); box-shadow:0 0 16px color-mix(in srgb, var(--lf) 70%, transparent); }
.lf-chip--all.is-on{ color:#0a0a0a; background:#fff; border-color:#fff; box-shadow:0 0 16px rgba(255,255,255,.6); }
/* Non-color cue for the active pulse chip (color-blind safe): checkmark + bold underline — matches map legend pattern */
.lf-chip.is-on::before{ content:"\2713"; font-weight:900; font-size:.9em; line-height:1; }
.lf-chip.is-on .lf-chip__txt{ font-weight:800; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:2px; }
.lf-chip__ic{ font-size:.95rem; }
.lf-chip__n{
  font-weight:800; font-size:.72rem; min-width:1.2em; text-align:center;
  padding:.05rem .35rem; border-radius:999px; background:rgba(0,0,0,.28);
}
.lf-chip.is-on .lf-chip__n{ background:rgba(0,0,0,.18); }

.livefeed__list{
  list-style:none; margin:1.1rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.6rem;
}
.lf-row{ --lf:#00ffff; }
.lf-row__link{
  display:flex; align-items:center; gap:.75rem;
  padding:.7rem .85rem; border-radius:14px;
  text-decoration:none; color:inherit;
  background:linear-gradient(100deg, color-mix(in srgb, var(--lf) 12%, rgba(10,10,12,.85)), rgba(10,10,12,.85));
  border:1px solid color-mix(in srgb, var(--lf) 38%, transparent);
  transition:.18s ease; position:relative; overflow:hidden;
}
.lf-row__link::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--lf); box-shadow:0 0 12px var(--lf);
}
.lf-row__link:hover{
  transform:translateY(-2px); border-color:var(--lf);
  box-shadow:0 6px 22px color-mix(in srgb, var(--lf) 35%, transparent);
}
.lf-row__ic{
  flex:0 0 auto; font-size:1.15rem; width:2rem; height:2rem;
  display:grid; place-items:center; border-radius:10px;
  background:color-mix(in srgb, var(--lf) 18%, rgba(0,0,0,.4));
  box-shadow:0 0 10px color-mix(in srgb, var(--lf) 45%, transparent);
}
.lf-row__body{ flex:1 1 auto; min-width:0; }
.lf-row__top{ display:flex; align-items:center; gap:.45rem; }
.lf-row__tag{
  flex:0 0 auto; font-weight:800; font-size:.6rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--lf); padding:.2rem .4rem; border-radius:6px;
  border:1px solid color-mix(in srgb, var(--lf) 45%, transparent);
}
.lf-row__title{
  font-weight:700; font-size:.9rem; color:#f4f7f8;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lf-row__sub{
  display:block; margin-top:.2rem; font-size:.76rem; color:#9fb2b6;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lf-row__time{
  flex:0 0 auto; font-weight:700; font-size:.72rem; color:var(--lf);
  opacity:.9; white-space:nowrap;
}
.livefeed__empty{ text-align:center; padding:1.6rem 0; }

@media (max-width: 720px){ .livefeed__list{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){
  .livefeed__live-dot{ animation:none; }
  .lf-row__link:hover{ transform:none; }
}

/* ===================================================================
   Live-Puls map — clustered neon markers, shares legend with the list
   =================================================================== */
.livefeed__maphead{ text-align:center; margin: 26px auto 14px; }
.livefeed__maptitle{
  font-family: var(--font-display, inherit);
  font-size: clamp(1.15rem, 1rem + 1vw, 1.7rem);
  margin: 0 0 4px; color: var(--text);
  text-shadow: 0 0 14px rgba(0,255,255,.35);
}
.livefeed__mapsub{ margin:0; font-size:.92rem; }
.livefeed__mapwrap{
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cyan, #00ffff) 28%, transparent);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.4),
    0 0 36px color-mix(in srgb, var(--cyan, #00ffff) 16%, transparent),
    inset 0 0 60px rgba(0,0,0,.5);
  background: #07111a;
}
.lf-map{ height: 480px; width:100%; background:#07111a; }
@media (max-width: 768px){ .lf-map{ height: 360px; } }
.lf-map .leaflet-container{ background:#07111a; font: inherit; }
.livefeed__mapcta{ text-align:center; margin: 16px auto 4px; }

/* --- per-type neon pin --- */
.lf-pin{ position: relative; }
.lf-pin__halo{
  position:absolute; inset:-6px; border-radius:50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--lf) 55%, transparent) 0%, transparent 68%);
  animation: lfPulse 2.4s ease-in-out infinite;
}
.lf-pin__dot{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  font-size:15px; line-height:1;
  background: radial-gradient(circle at 35% 30%, rgba(10,12,18,.92), rgba(8,10,16,.98));
  border: 2px solid var(--lf);
  box-shadow: 0 0 12px var(--lf), 0 0 22px color-mix(in srgb, var(--lf) 60%, transparent);
}
@keyframes lfPulse{
  0%,100%{ transform:scale(.85); opacity:.55; }
  50%{ transform:scale(1.15); opacity:.95; }
}

/* --- cluster bubble, colored by dominant type --- */
.lf-cluster{ position:relative; cursor:pointer; transition: transform .16s ease; }
.lf-cluster__bg{
  position:absolute; inset:0; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--lf) 55%, #0a0a0a), color-mix(in srgb, var(--lf) 24%, #0a0a0a));
  border: 2px solid var(--lf);
  box-shadow: 0 0 16px var(--lf), 0 0 30px color-mix(in srgb, var(--lf) 55%, transparent);
  transition: box-shadow .16s ease, border-color .16s ease;
}
/* Hover affordance: lift + brighter neon glow so the cluster reads as tappable. */
.lf-cluster:hover{ transform: scale(1.08); z-index: 1000; }
.lf-cluster:hover .lf-cluster__bg{
  box-shadow: 0 0 22px var(--lf), 0 0 44px color-mix(in srgb, var(--lf) 75%, transparent);
  border-color: color-mix(in srgb, var(--lf) 85%, #fff);
}
.lf-cluster__n{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; font-weight:800; font-size:.95rem; color:#fff;
  text-shadow: 0 0 6px rgba(0,0,0,.8);
}

/* --- map tooltip --- */
.lf-tip-tt.leaflet-tooltip{
  background: rgba(10,12,18,.96); border: 1px solid var(--lf, #00ffff);
  border-radius: 12px; padding: 9px 12px; color: var(--text, #fff);
  box-shadow: 0 0 18px color-mix(in srgb, var(--lf, #00ffff) 45%, transparent);
}
.lf-tip-tt.leaflet-tooltip::before{ display:none; }
.lf-tip__title{
  display:block; font-weight:800; color:#fff; text-decoration:none;
  max-width: 220px;
}
.lf-tip__title:hover{ text-decoration:underline; }
.lf-tip__sub{ font-size:.82rem; opacity:.78; margin-top:2px; }
.lf-tip__tag{
  display:inline-block; margin-top:6px; padding:1px 8px; border-radius:999px;
  font-size:.66rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color: var(--lf); border:1px solid color-mix(in srgb, var(--lf) 55%, transparent);
  background: color-mix(in srgb, var(--lf) 14%, transparent);
}
@media (prefers-reduced-motion: reduce){
  .lf-pin__halo{ animation:none; }
}

/* ============================================================
   Live-map symbol legend (home #lf-map overlay)
   ============================================================ */
.lf-maplegend{
  position:absolute; top:.7rem; left:.7rem; z-index:600;
  min-width:172px; padding:.6rem .7rem .55rem;
  background:rgba(8,8,14,.72); backdrop-filter:blur(9px);
  border:1px solid rgba(0,255,255,.28); border-radius:14px;
  box-shadow:0 6px 26px rgba(0,0,0,.5), 0 0 18px rgba(0,255,255,.10);
  font-size:.8rem; pointer-events:none;
}
.lf-maplegend__head{
  display:flex; align-items:center; gap:.4rem;
  font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  font-size:.66rem; color:#bff; margin-bottom:.45rem;
}
.lf-maplegend__live{
  width:8px; height:8px; border-radius:50%;
  background:#00ff9c; box-shadow:0 0 8px #00ff9c;
  animation:lf-mlpulse 1.5s ease-in-out infinite;
}
@keyframes lf-mlpulse{ 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.35; transform:scale(.7);} }
.lf-maplegend__list{ list-style:none; margin:0; padding:0; display:grid; gap:.28rem; }
.lf-maplegend__item{
  display:grid; grid-template-columns:1.2rem 1fr auto; align-items:center; gap:.45rem;
}
.lf-maplegend__ic{ font-size:.95rem; line-height:1; filter:drop-shadow(0 0 5px var(--lf)); }
.lf-maplegend__lbl{ color:#e8f6ff; }
.lf-maplegend__n{
  font-variant-numeric:tabular-nums; font-weight:800; color:var(--lf);
  text-shadow:0 0 8px color-mix(in srgb, var(--lf) 55%, transparent);
  min-width:1.4rem; text-align:right;
}
.lf-maplegend__foot{
  margin-top:.5rem; padding-top:.4rem; border-top:1px dashed rgba(255,255,255,.16);
  font-size:.68rem; color:#9fb3c8; text-align:center;
}
.lf-maplegend__foot b{ color:#fff; font-variant-numeric:tabular-nums; }
@media (max-width:560px){
  .lf-maplegend{ min-width:0; top:.45rem; left:.45rem; padding:.45rem .5rem; font-size:.72rem; }
  .lf-maplegend__lbl{ display:none; }
  .lf-maplegend__item{ grid-template-columns:1.1rem auto; }
}

/* ============================================================
   Spreads index — redesigned layout (.spreadx-*)
   ============================================================ */
.spreadx-hero{
  display:flex; justify-content:space-between; align-items:flex-end; gap:1.2rem;
  flex-wrap:wrap; margin:.4rem 0 1.1rem;
  padding-bottom:1rem; border-bottom:1px solid rgba(255,255,255,.08);
}
.spreadx-hero__title{
  margin:0; font-size:clamp(1.7rem,4vw,2.5rem); line-height:1.05; font-weight:900;
  background:linear-gradient(92deg,#00ffff,#ff00aa 70%); -webkit-background-clip:text;
  background-clip:text; color:transparent;
  filter:drop-shadow(0 0 18px rgba(255,0,170,.25));
}
.spreadx-hero__sub{ margin:.45rem 0 0; max-width:46ch; color:#9fb3c8; font-size:.92rem; }
.spreadx-hero__actions{ flex-shrink:0; }

.spreadx-filterbar{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  margin:0 0 1.4rem; padding:.7rem .8rem;
  background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
}
.spreadx-search{ display:flex; align-items:center; gap:.5rem; flex:1 1 260px; position:relative; }
.spreadx-search__ic{ position:absolute; left:.7rem; opacity:.55; font-size:.9rem; pointer-events:none; }
.spreadx-search input[type=text]{
  flex:1; padding:.6rem .7rem .6rem 2.1rem; border-radius:11px;
  background:rgba(0,0,0,.35); border:1px solid rgba(0,255,255,.22); color:#eaffff;
}
.spreadx-search input[type=text]:focus{ outline:none; border-color:#00ffff; box-shadow:0 0 0 3px rgba(0,255,255,.12); }
.spreadx-search__btn{ flex-shrink:0; }
.spreadx-pills{ display:flex; gap:.4rem; flex-wrap:wrap; }
.spreadx-pill{
  padding:.42rem .85rem; border-radius:999px; font-size:.82rem; font-weight:700;
  text-decoration:none; color:#cfe; letter-spacing:.01em;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.spreadx-pill:hover{ transform:translateY(-1px); border-color:rgba(0,255,255,.5); }
.spreadx-pill.is-on{
  color:#04121a; background:linear-gradient(92deg,#00ffff,#7df9ff);
  border-color:transparent; box-shadow:0 0 16px rgba(0,255,255,.35);
}
.spreadx-pill--active.is-on{ background:linear-gradient(92deg,#00ff9c,#00ffff); }
.spreadx-pill--completed.is-on{ background:linear-gradient(92deg,#ffd23f,#ffff00); }
.spreadx-pill--successful.is-on{ background:linear-gradient(92deg,#ff00aa,#ff7ad9); color:#fff; }
.spreadx-pill--region.is-on{ background:linear-gradient(92deg,#ff00aa,#00ffff); color:#04121a; box-shadow:0 0 16px rgba(255,0,170,.4); }
/* Non-color cue for the active status pill: checkmark + bold underline (matches .lf-chip pattern) */
.spreadx-pill.is-on:not(.spreadx-pill--region){ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:2px; }
.spreadx-pill.is-on:not(.spreadx-pill--region)::before{ content:"\2713"; font-weight:900; font-size:.9em; margin-right:.35em; line-height:1; }
.spreadx-count{ margin-left:auto; font-size:.8rem; color:#8fa3b8; font-variant-numeric:tabular-nums; white-space:nowrap; }

.spreadx-layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:1.6rem; align-items:start; }
.spreadx-main{ min-width:0; }
.spreadx-aside{ position:sticky; top:1rem; display:grid; gap:1rem; }
.spreadx-aside .lb-grid{ grid-template-columns:1fr; gap:1rem; }
.spreadx-aside .lb-card{ margin:0; }
.spreadx-asidehead{
  margin:0 0 .2rem; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  font-weight:800; color:#7fd8e8;
}
@media (max-width:900px){
  .spreadx-layout{ grid-template-columns:1fr; }
  .spreadx-aside{ position:static; }
  .spreadx-aside .lb-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .spreadx-aside .lb-grid{ grid-template-columns:1fr; }
  .spreadx-count{ margin-left:0; }
}

.spreadx-maps{ margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.08); }
.spreadx-maps > .section{ margin-bottom:1.1rem; }

.spreadx-empty{
  text-align:center; padding:3rem 1rem; border:1px dashed rgba(255,255,255,.14);
  border-radius:18px; background:rgba(255,255,255,.02);
}
.spreadx-empty__emoji{ font-size:2.4rem; filter:drop-shadow(0 0 14px rgba(0,255,255,.4)); }
.spreadx-empty__title{ margin:.5rem 0 .25rem; font-weight:800; }
.spreadx-empty__sub{ margin:0 auto; max-width:40ch; color:#9fb3c8; font-size:.9rem; }

/* ============================================================
   Spread Origin Map — detailed per-spread map (origin + scans + market)
   Lives at the very top of the detail page, above the live-scan map.
   ============================================================ */
.origin-map{
  margin:0 0 1.25rem;
  padding:1.1rem 1.1rem 1.25rem;
  border:1px solid rgba(255,0,170,.28);
  border-radius:20px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255,0,170,.10), transparent 55%),
    radial-gradient(120% 120% at 100% 100%, rgba(0,255,255,.08), transparent 55%),
    rgba(8,10,18,.72);
  box-shadow:0 0 28px rgba(255,0,170,.12), inset 0 0 40px rgba(0,0,0,.35);
}
.origin-map__head{ margin:0 0 .7rem; }
.origin-map__head .section{ margin:0; }
.origin-map__sub{ margin:.2rem 0 0; font-size:.9rem; }
.origin-map__wrap{ position:relative; }
.origin-map__canvas{
  height:380px; width:100%;
  border-radius:14px; overflow:hidden;
  border:1px solid rgba(0,255,255,.18);
  background:#06121c;
  box-shadow:0 0 22px rgba(0,255,255,.10) inset;
}
.origin-map__empty{
  position:absolute; inset:auto 0 0 0; top:50%; transform:translateY(-50%);
  text-align:center; color:#9fb3c8; font-size:.95rem; pointer-events:none;
  text-shadow:0 1px 4px #000;
}

/* --- Intelligent legend overlay --- */
.om-legend{
  position:absolute; top:12px; left:12px; z-index:600;
  min-width:172px; padding:.6rem .7rem;
  border:1px solid rgba(255,255,255,.14);
  border-radius:13px;
  background:rgba(6,10,18,.82);
  backdrop-filter:blur(7px);
  box-shadow:0 6px 22px rgba(0,0,0,.5);
  font-size:.82rem; color:#e8f0f8;
}
.om-legend__title{
  font-weight:800; letter-spacing:.02em; text-transform:uppercase;
  font-size:.66rem; color:#9fb3c8; margin:0 0 .45rem;
}
.om-legend__row{
  display:flex; align-items:center; gap:.5rem; padding:.16rem 0;
}
.om-legend__row.is-zero{ opacity:.42; }
.om-legend__sw{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; flex:0 0 22px; border-radius:7px;
  font-size:.8rem; line-height:1;
  background:color-mix(in srgb, var(--c) 22%, transparent);
  border:1px solid var(--c);
  box-shadow:0 0 10px color-mix(in srgb, var(--c) 60%, transparent);
}
.om-legend__lbl{ flex:1 1 auto; }
.om-legend__n{ font-weight:800; font-variant-numeric:tabular-nums; }
.om-legend__foot{
  margin-top:.5rem; padding-top:.45rem;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:.72rem; color:#9fb3c8;
}
.om-legend__foot strong{ color:#fff; }

/* --- Origin marker (magenta pulsing star) --- */
.om-origin{ position:relative; }
.om-origin__star{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#ff00aa; font-size:22px; line-height:1;
  text-shadow:0 0 8px #ff00aa, 0 0 16px #ff00aa;
}
.om-origin__pulse{
  position:absolute; inset:6px; border-radius:50%;
  border:2px solid #ff00aa;
  box-shadow:0 0 12px #ff00aa;
  animation:omPulse 1.8s ease-out infinite;
}
@keyframes omPulse{
  0%{ transform:scale(.5); opacity:.9; }
  100%{ transform:scale(1.9); opacity:0; }
}

/* --- Scan markers (cyan dots, sized by count) --- */
.om-scan{ position:relative; }
.om-scan__dot{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:10px; height:10px; border-radius:50%;
  background:#00ffff; box-shadow:0 0 8px #00ffff;
}
.om-scan__ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(0,255,255,.55);
}
.om-scan--md .om-scan__dot{ width:14px; height:14px; }
.om-scan--lg .om-scan__dot{ width:18px; height:18px; background:#7dfcff; }
.om-scan__n{
  position:absolute; top:-8px; right:-8px;
  min-width:16px; height:16px; padding:0 3px;
  display:flex; align-items:center; justify-content:center;
  border-radius:9px; background:#003b44; color:#7dfcff;
  font-size:.62rem; font-weight:800; border:1px solid #00ffff;
  box-shadow:0 0 6px rgba(0,255,255,.6);
}

/* --- Market markers (gold pins) --- */
.om-market__pin{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50% 50% 50% 2px;
  transform:rotate(45deg);
  background:rgba(255,170,0,.18); border:1.5px solid #ffaa00;
  box-shadow:0 0 10px rgba(255,170,0,.6);
  font-size:13px;
}
.om-market__pin > *{ transform:rotate(-45deg); }
.om-market--wanted .om-market__pin{
  border-color:#ffdd00; box-shadow:0 0 10px rgba(255,221,0,.6);
}

/* --- Popups --- */
.om-pop{ min-width:140px; }
.om-pop__tag{
  display:inline-block; margin-bottom:.25rem; padding:.1rem .45rem;
  border-radius:6px; font-size:.62rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.03em; background:rgba(255,255,255,.08); color:#cfe;
}
.om-pop--origin .om-pop__tag{ background:rgba(255,0,170,.18); color:#ff7ad1; }
.om-pop--scan   .om-pop__tag{ background:rgba(0,255,255,.16); color:#7dfcff; }
.om-pop--market .om-pop__tag{ background:rgba(255,170,0,.18); color:#ffd27a; }
.om-pop__title{ font-weight:800; color:#00ffff; text-decoration:none; }
.om-pop__title:hover{ text-decoration:underline; }
.om-pop__loc{ font-size:.78rem; color:#9fb3c8; margin-top:.15rem; }
.om-pop__price{ font-size:.8rem; font-weight:800; color:#ffd27a; margin-top:.15rem; }

@media (max-width:560px){
  .origin-map__canvas{ height:320px; }
  .om-legend{ min-width:150px; font-size:.76rem; top:8px; left:8px; }
}

/* ── Market item detail map (legend + tooltip + colored pin) ───────────── */
.md-map-wrap{ position:relative; }
.md-map-wrap .loc-map.md-map{ height:320px; }
.md-map-legend{
  position:absolute; top:10px; left:10px; z-index:500;
  background:rgba(10,10,10,.82); backdrop-filter:blur(6px);
  border:1px solid var(--border); border-radius:10px;
  padding:.5rem .65rem; min-width:140px; max-width:60%;
  box-shadow:0 4px 18px rgba(0,0,0,.45);
  font-size:.8rem; line-height:1.3; pointer-events:none;
}
.md-map-legend__title{
  font-weight:700; letter-spacing:.03em; margin-bottom:.35rem;
  color:var(--text); text-transform:uppercase; font-size:.7rem; opacity:.85;
}
.md-map-legend__row{ display:flex; align-items:center; gap:.4rem; }
.md-map-legend__sw{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:6px; font-size:.85rem;
  border:1px solid var(--border);
}
.md-map-legend__sw--offer{ background:rgba(255,170,0,.18); box-shadow:0 0 8px rgba(255,170,0,.55); }
.md-map-legend__sw--wanted{ background:rgba(0,255,255,.16); box-shadow:0 0 8px rgba(0,255,255,.5); }
.md-map-legend__lbl{ font-weight:600; color:var(--text); }
.md-map-legend__loc{ margin-top:.35rem; color:var(--muted); font-size:.76rem; }

/* Custom market marker pin */
.md-mk{ background:none; border:none; }
.md-mk__pin{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50% 50% 50% 0;
  transform:rotate(-45deg); background:var(--bg-2);
  border:2px solid var(--c); line-height:1; font-size:1rem;
  box-shadow:0 0 12px var(--c), 0 3px 8px rgba(0,0,0,.5);
}
/* counter-rotate the emoji so it sits upright inside the teardrop */
.md-mk__pin span{ transform:rotate(45deg); }

/* Permanent location tooltip */
.leaflet-tooltip.md-mk-tt{
  background:rgba(10,10,10,.9); color:var(--text);
  border:1px solid var(--c, var(--border)); border-radius:8px;
  font-weight:600; font-size:.78rem; padding:.3rem .5rem;
  box-shadow:0 0 10px rgba(255,0,170,.35);
}
.leaflet-tooltip.md-mk-tt::before{ border-top-color:rgba(10,10,10,.9); }

/* Popup card */
.md-mk-pop{ min-width:120px; }
.md-mk-pop__tag{
  display:inline-block; font-weight:700; font-size:.74rem;
  padding:.12rem .45rem; border-radius:6px; border:1px solid var(--c);
  box-shadow:0 0 8px var(--c); margin-bottom:.3rem;
}
.md-mk-pop__loc{ color:var(--muted); font-size:.8rem; }

@media (max-width:768px){
  .md-map-wrap .loc-map.md-map{ height:260px; }
  .md-map-legend{ font-size:.74rem; min-width:120px; }
}

/* ============================================================
   HOLY-SHIT FINAL pass (v=hs-final)
   1) Magical onboarding modal  2) Dot pulse cyan↔magenta +
   mobile sizing  3) Launch-ready banner.
   ============================================================ */

/* ---- 1) Magical onboarding modal ---- */
.ob-backdrop{
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 1.2rem;
  background: radial-gradient(ellipse at 50% 40%, rgba(10,0,16,.78), rgba(0,0,0,.92));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: obFadeIn .4s ease both;
}
.ob-backdrop.hidden{ display: none; }
@keyframes obFadeIn { from { opacity: 0; } to { opacity: 1; } }

.ob-card{
  position: relative;
  width: min(540px, 94vw);
  text-align: center;
  padding: 3.4rem 1.9rem 2.2rem;
  border-radius: 26px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,255,255,.16), transparent 70%),
    radial-gradient(ellipse 70% 55% at 50% 100%, rgba(255,0,170,.18), transparent 72%),
    linear-gradient(180deg, #0c0810 0%, #080509 100%);
  border: 1px solid rgba(0,255,255,.35);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 24px 80px rgba(0,0,0,.65),
    0 0 50px rgba(0,255,255,.30),
    0 0 90px rgba(255,0,170,.22);
  animation: obPop .5s cubic-bezier(.2,.9,.3,1.5) both;
}
@keyframes obPop {
  0%   { transform: translateY(18px) scale(.94); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.ob-close{
  position: absolute; top: 12px; right: 14px;
  width: 36px; height: 36px;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.75);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  transition: background .2s, color .2s, transform .2s;
}
.ob-close:hover{ background: rgba(255,0,170,.25); color: #fff; transform: rotate(90deg); }

/* Big waving Dot */
.ob-dot-wrap{
  position: relative;
  width: 150px; height: 150px;
  margin: 0 auto 1.2rem;
}
.ob-dot-halo{
  position: absolute; inset: -34px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(0,255,255,.55) 0%, rgba(0,255,255,0) 60%),
    radial-gradient(circle, rgba(255,0,170,.40) 35%, rgba(255,0,170,0) 74%);
  filter: blur(10px);
  animation: obHalo 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes obHalo {
  0%,100% { opacity: .7; transform: scale(1); }
  50%     { opacity: 1;  transform: scale(1.14); }
}
.ob-dot{ position: absolute; inset: 0; }
.ob-dot .dot-mascot{
  width: 150px; height: 150px;
  box-shadow:
    0 0 36px rgba(0,255,255,.9),
    0 0 80px rgba(0,191,255,.6),
    0 0 130px rgba(255,0,170,.4);
}
.ob-dot .dot-mascot.ob-wave{
  animation: obDotWave 2.4s ease-in-out infinite, dotBreathe 4.8s ease-in-out infinite;
  transform-origin: 50% 90%;
}
@keyframes obDotWave {
  0%,100% { transform: rotate(-6deg); }
  25%     { transform: rotate(6deg); }
  50%     { transform: rotate(-4deg); }
  75%     { transform: rotate(5deg); }
}
.ob-wave-hand{
  position: absolute; right: -6px; bottom: 6px;
  font-size: 2.2rem;
  filter: drop-shadow(0 0 8px rgba(255,255,0,.6));
  animation: obHand 1.6s ease-in-out infinite;
  transform-origin: 70% 80%;
}
@keyframes obHand {
  0%,100% { transform: rotate(-12deg); }
  50%     { transform: rotate(18deg); }
}

.ob-eyebrow{
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: .72rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--cyan, #00ffff);
  text-shadow: 0 0 12px rgba(0,255,255,.6);
  margin: 0 0 .4rem;
}
.ob-title{
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  margin: 0 0 1rem;
  background: linear-gradient(100deg, #00ffff, #ffffff 45%, #ff66cc 70%, #ff00aa);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(255,0,170,.4)) drop-shadow(0 0 8px rgba(0,255,255,.3));
}
.ob-gift{
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: 1.15rem; font-weight: 800;
  color: var(--yellow, #ffff00);
  padding: .5rem 1.3rem; margin: 0 0 1.2rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,0,.5);
  background: rgba(255,255,0,.07);
  text-shadow: 0 0 14px rgba(255,255,0,.7);
  box-shadow: 0 0 22px rgba(255,255,0,.25);
  animation: obGiftPulse 2.4s ease-in-out infinite;
}
@keyframes obGiftPulse {
  0%,100% { box-shadow: 0 0 22px rgba(255,255,0,.25); transform: scale(1); }
  50%     { box-shadow: 0 0 38px rgba(255,255,0,.5); transform: scale(1.04); }
}
.ob-gift-spark{ font-size: 1rem; filter: drop-shadow(0 0 6px rgba(255,255,0,.7)); }
.ob-body{
  font-size: 1rem; line-height: 1.6;
  color: rgba(255,255,255,.85);
  max-width: 440px; margin: 0 auto 1rem;
}
.ob-nudge{
  font-size: 1.02rem; font-weight: 600;
  color: #fff; margin: 0 0 1.6rem;
  text-shadow: 0 0 12px rgba(0,255,255,.4);
}
.ob-actions{
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
}
.ob-cta{
  display: inline-flex; align-items: center; gap: .5rem;
  padding: 1.05rem 2rem;
  font-family: 'Orbitron', system-ui, sans-serif;
  font-weight: 800; font-size: 1.08rem;
  text-decoration: none; color: #0a0a0a;
  border-radius: 14px;
  background: linear-gradient(135deg, #ff00aa 0%, #ff66cc 35%, #00ffff 100%);
  background-size: 180% 180%;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.15) inset,
    0 10px 30px rgba(255,0,170,.5),
    0 0 30px rgba(0,255,255,.35);
  transition: transform .2s, box-shadow .25s;
  animation: obCtaBreathe 3.6s ease-in-out infinite;
}
@keyframes obCtaBreathe {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
.ob-cta:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.3) inset,
    0 16px 46px rgba(255,0,170,.65),
    0 0 50px rgba(0,255,255,.55);
}
.ob-later{
  border: 0; background: none; cursor: pointer;
  color: rgba(255,255,255,.6);
  font-size: .92rem; padding: .3rem .6rem;
  transition: color .2s;
}
.ob-later:hover{ color: rgba(255,255,255,.95); text-decoration: underline; }

@media (max-width: 480px){
  .ob-card{ padding: 2.8rem 1.2rem 1.8rem; }
  .ob-dot-wrap, .ob-dot .dot-mascot{ width: 120px; height: 120px; }
}

/* ---- 2) Home Dot — explicit cyan↔magenta glow cycle + mobile 220-260 ---- */
.hnew-hero--bleed .hnew-hero__dot-halo{
  animation: maxHalo 3.4s ease-in-out infinite, obDotHueShift 6s ease-in-out infinite;
}
@keyframes obDotHueShift {
  0%,100% { filter: blur(18px) hue-rotate(0deg); }
  50%     { filter: blur(22px) hue-rotate(60deg); }
}
@media (max-width: 980px){
  .hnew-hero--bleed .hnew-hero__dot{
    width: clamp(132px, 26vw, 168px);
    height: clamp(132px, 26vw, 168px);
  }
}
@media (max-width: 640px){
  .hnew-hero--bleed .hnew-hero__dot{ width: 150px; height: 150px; }
  .hnew-hero--bleed .hnew-hero__dot-halo{ inset: -32px; }
}
@media (prefers-reduced-motion: reduce){
  .ob-backdrop, .ob-card, .ob-dot-halo, .ob-dot .dot-mascot.ob-wave,
  .ob-wave-hand, .ob-gift, .ob-cta,
  .hnew-hero--bleed .hnew-hero__dot-halo{
    animation: none !important;
  }
}

/* ---- 3) Launch-ready banner (homepage) ---- */
.launch-banner{
  text-align: center;
  margin: 0 auto 2.6rem;
  padding: 1.6rem 1.2rem;
  max-width: 880px;
  position: relative;
}
.launch-banner::before{
  content: "";
  position: absolute; left: 14%; right: 14%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,255,255,.6),
    rgba(255,0,170,.6), rgba(255,255,0,.45), transparent);
}
.launch-banner__title{
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: clamp(1.3rem, 3.4vw, 2rem);
  font-weight: 800; margin: .4rem 0 .7rem;
  background: linear-gradient(100deg, #00ffff, #ffffff 40%, #ff66cc 65%, #ff00aa);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(255,0,170,.4)) drop-shadow(0 0 8px rgba(0,255,255,.3));
}
.launch-banner__tag{
  font-size: clamp(1rem, 2vw, 1.18rem);
  line-height: 1.6; color: rgba(255,255,255,.86);
  max-width: 640px; margin: 0 auto;
  text-shadow: 0 0 14px rgba(0,255,255,.2);
}

/* ============================================================
   HOLY-SHIT  ·  MAX OVERDRIVE  (v=hs-max)
   Homepage hero + Dot cranked to "wait, what IS this?!" level.
   Append-only override block — wins by cascade order.
   Colours: cyan #00f2fe · magenta #ff00ff · pink #ff2db5 · yellow #ffff00
   Only targets .hnew-hero--bleed so the rest of the site is untouched.
   Every animation is killed under prefers-reduced-motion at the end.
   ============================================================ */

/* ---- Deepest-black stage + stronger vignette ---- */
.hnew-hero--bleed{
  background: #000000 !important;
}
.hnew-hero--bleed .hnew-hero__vignette{
  background:
    radial-gradient(ellipse at 50% 42%, transparent 24%, rgba(0,0,0,.72) 92%),
    radial-gradient(ellipse at 50% 100%, rgba(255,0,255,.10), transparent 58%),
    radial-gradient(ellipse at 50% 0%,   rgba(0,242,254,.10), transparent 58%);
}

/* ---- Slow cosmic dust drifting in the background ---- */
.hnew-hero--bleed .hnew-hero__cosmos{
  position: absolute; inset: -10%;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(0,242,254,.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 14%, rgba(255,0,255,.85), transparent 60%),
    radial-gradient(1px 1px   at 36% 68%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 62% 82%, rgba(255,45,181,.85), transparent 60%),
    radial-gradient(1px 1px   at 88% 56%, rgba(255,255,0,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 24% 88%, rgba(0,242,254,.8), transparent 60%),
    radial-gradient(1px 1px   at 52% 30%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 92% 80%, rgba(255,0,255,.75), transparent 60%);
  background-repeat: no-repeat;
  opacity: .55;
  animation: hsMaxCosmos 90s linear infinite;
  will-change: transform;
}
@keyframes hsMaxCosmos{
  0%   { transform: translate3d(0,0,0); }
  50%  { transform: translate3d(-24px,-30px,0); }
  100% { transform: translate3d(0,0,0); }
}

/* ---- Subtle radial energy pulse breathing out from centre ---- */
.hnew-hero--bleed .hnew-hero__pulse{
  position: absolute; inset: 0;
  pointer-events: none; mix-blend-mode: screen;
  background:
    radial-gradient(circle at 50% 44%, rgba(0,242,254,.16) 0%, rgba(0,242,254,0) 42%),
    radial-gradient(circle at 50% 44%, rgba(255,0,255,.12) 0%, rgba(255,0,255,0) 56%);
  animation: hsMaxPulse 7.5s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes hsMaxPulse{
  0%,100% { transform: scale(.92); opacity: .55; }
  50%     { transform: scale(1.12); opacity: 1; }
}

/* Brighter, more aggressive orbs */
.hnew-hero--bleed .hnew-hero__orb--c{
  background: radial-gradient(circle, rgba(0,242,254,.95), rgba(0,242,254,0) 70%);
  opacity: .62;
}
.hnew-hero--bleed .hnew-hero__orb--m{
  background: radial-gradient(circle, rgba(255,0,255,.95), rgba(255,0,255,0) 70%);
  opacity: .60;
}
.hnew-hero--bleed .hnew-hero__orb--y{
  background: radial-gradient(circle, rgba(255,255,0,.7), rgba(255,255,0,0) 70%);
  opacity: .45;
}

/* Fatter, brighter rising particles */
.hnew-hero--bleed .hnew-p{ width: 7px; height: 7px; }
.hnew-hero--bleed .hnew-p--c{
  background: #00f2fe;
  box-shadow: 0 0 14px #00f2fe, 0 0 30px rgba(0,242,254,.75);
}
.hnew-hero--bleed .hnew-p--m{
  background: #ff00ff;
  box-shadow: 0 0 14px #ff00ff, 0 0 30px rgba(255,0,255,.75);
}
.hnew-hero--bleed .hnew-p--y{
  background: #ffff00;
  box-shadow: 0 0 14px #ffff00, 0 0 30px rgba(255,255,0,.7);
}

/* ============================================================
   HEADLINE — brutal 7-layer neon beam + stroke + energy scan
   ============================================================ */
.hero.hnew-hero.hnew-hero--bleed h1.hnew-hero__title,
.hnew-hero.hnew-hero--bleed h1.hnew-hero__title,
.hnew-hero--bleed .hnew-hero__title{
  position: relative;
  background: linear-gradient(
    100deg,
    #00f2fe 0%,
    #5ffbff 16%,
    #ffffff 30%,
    #ff2db5 48%,
    #ff00ff 64%,
    #ffff00 82%,
    #00f2fe 100%
  );
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.6px rgba(255,255,255,.14);
  text-shadow:
    0 0 6px   rgba(255,255,255,.45),
    0 0 18px  rgba(0,242,254,.85),
    0 0 34px  rgba(255,0,255,.75),
    0 0 60px  rgba(255,45,181,.6),
    0 0 90px  rgba(0,242,254,.45),
    0 0 130px rgba(255,0,255,.4),
    0 2px 10px rgba(0,0,0,.6);
  filter:
    drop-shadow(0 0 26px rgba(255,0,255,.5))
    drop-shadow(0 0 16px rgba(0,242,254,.4));
  animation:
    hnewTitleShimmer 7s ease-in-out infinite,
    hsMaxTitleGlow 3s ease-in-out infinite;
}
@keyframes hsMaxTitleGlow{
  0%,100% {
    filter: drop-shadow(0 0 22px rgba(255,0,255,.45)) drop-shadow(0 0 12px rgba(0,242,254,.35));
  }
  50% {
    filter: drop-shadow(0 0 40px rgba(255,0,255,.7)) drop-shadow(0 0 24px rgba(0,242,254,.6));
  }
}
/* Energy scan-line sweeping across the headline */
.hnew-hero--bleed .hnew-hero__title::after{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 38%,
    rgba(255,255,255,.55) 48%,
    rgba(0,242,254,.5) 52%,
    transparent 62%,
    transparent 100%
  );
  mix-blend-mode: screen;
  background-size: 260% 100%;
  -webkit-mask: linear-gradient(#000, #000);
  animation: hsMaxScan 4.5s ease-in-out infinite;
}
@keyframes hsMaxScan{
  0%   { background-position: 180% 0; opacity: 0; }
  35%  { opacity: 1; }
  65%  { opacity: 1; }
  100% { background-position: -60% 0; opacity: 0; }
}

/* Sub + pitch — bigger, multi-colour glow */
.hnew-hero--bleed .hnew-hero__sub{
  font-size: clamp(1.18rem, 2vw, 1.5rem);
  color: #ffffff;
  text-shadow:
    0 0 10px rgba(0,242,254,.55),
    0 0 22px rgba(255,0,255,.35),
    0 2px 14px rgba(0,0,0,.7);
}
.hnew-hero--bleed .hnew-hero__pitch{
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  color: rgba(255,255,255,.86);
  text-shadow: 0 0 14px rgba(255,45,181,.4), 0 0 6px rgba(0,242,254,.3);
}

/* CTAs — more intense glow + faster shine on hover */
.hnew-hero--bleed .hnew-btn--primary{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18) inset,
    0 10px 34px rgba(255,0,255,.55),
    0 0 30px rgba(0,242,254,.45);
}
.hnew-hero--bleed .hnew-btn--primary:hover{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.35) inset,
    0 16px 52px rgba(255,0,255,.7),
    0 0 60px rgba(0,242,254,.65),
    0 0 100px rgba(255,45,181,.45);
}
.hnew-hero--bleed .hnew-btn--cyan:hover{
  box-shadow: 0 0 34px rgba(0,242,254,.7), 0 0 60px rgba(0,242,254,.4);
}
.hnew-hero--bleed .hnew-btn--yellow:hover{
  box-shadow: 0 0 34px rgba(255,255,0,.6), 0 0 60px rgba(255,255,0,.35);
}

/* ============================================================
   DOT MASCOT — MAX OVERDRIVE
   420–460px desktop · hue-cycle pulse · brutal multi-layer halo
   ============================================================ */
.hnew-hero--bleed .hnew-hero__dot{
  width: clamp(120px, 13vw, 168px);
  height: clamp(120px, 13vw, 168px);
  top: 8px; right: 8px;
}
.hnew-hero--bleed .hnew-hero__dot .dot-mascot{
  width: 100%; height: 100%;
  animation:
    dotBreathe 4.2s ease-in-out infinite,
    hsMaxDotHue 6s linear infinite;
  box-shadow:
    0 0 30px rgba(0,255,255,.70),
    0 0 64px rgba(0,191,255,.42);
  will-change: filter, transform;
}
@keyframes hsMaxDotHue{
  0%   { filter: hue-rotate(0deg)   saturate(1.25) brightness(1.06); }
  50%  { filter: hue-rotate(80deg)  saturate(1.5)  brightness(1.16); }
  100% { filter: hue-rotate(0deg)   saturate(1.25) brightness(1.06); }
}

/* Shinier eyes — glow ONLY. No transform animation here: dot.js drives the
   pupils via inline transform:translate() for cursor eye-tracking, and a CSS
   animation on the same element would override (freeze) that movement. The
   happy blink is handled separately by dot.js toggling .dot-mascot.blink. */
.hnew-hero--bleed .hnew-hero__dot .dot-pupil-l,
.hnew-hero--bleed .hnew-hero__dot .dot-pupil-r{
  box-shadow: 0 0 10px rgba(255,255,255,.9), 0 0 18px rgba(0,242,254,.7);
}

/* Multi-layer pulsing halo + hue shift */
.hnew-hero--bleed .hnew-hero__dot-halo{
  inset: -70px;
  background:
    radial-gradient(circle, rgba(0,242,254,.55) 0%, rgba(0,242,254,0) 58%),
    radial-gradient(circle, rgba(255,0,255,.42) 28%, rgba(255,0,255,0) 70%),
    radial-gradient(circle, rgba(255,45,181,.3) 44%, rgba(255,45,181,0) 80%);
  filter: blur(10px);
  animation: hsMaxHalo 3s ease-in-out infinite, hsMaxHaloHue 6s linear infinite;
}
@keyframes hsMaxHalo{
  0%,100% { opacity: .7; transform: scale(1); }
  50%     { opacity: 1;  transform: scale(1.18); }
}
@keyframes hsMaxHaloHue{
  0%   { filter: blur(10px) hue-rotate(0deg); }
  50%  { filter: blur(14px) hue-rotate(70deg); }
  100% { filter: blur(10px) hue-rotate(0deg); }
}
.hnew-hero--bleed .hnew-hero__dot-ring{
  inset: -34px;
  border-color: rgba(0,242,254,.5);
  box-shadow: 0 0 18px rgba(0,242,254,.3), inset 0 0 18px rgba(255,0,255,.2);
}

/* Brighter, slightly faster orbit sparks */
.hnew-hero--bleed .hnew-hero__dot .orbit-spark{
  box-shadow: 0 0 14px currentColor, 0 0 26px currentColor;
}

/* ---- Responsive: keep the Dot dominant but sane ---- */
@media (max-width: 980px){
  /* Centered Dot on mobile — clip horizontally so the wide pulsing halo
     never triggers a sideways scrollbar on narrow screens. */
  .hnew-hero--bleed{ overflow-x: hidden; overflow-x: clip; }
  .hnew-hero--bleed .hnew-hero__dot{
    width: clamp(132px, 30vw, 168px);
    height: clamp(132px, 30vw, 168px);
    top: auto; right: auto;
  }
  .hnew-hero--bleed .hnew-hero__pulse,
  .hnew-hero--bleed .hnew-hero__cosmos{ opacity: .5; }
}
@media (max-width: 640px){
  .hnew-hero--bleed .hnew-hero__dot{ width: 150px; height: 150px; }
  .hnew-hero--bleed .hnew-hero__dot-halo{ inset: -30px; }
  .hnew-hero--bleed .hnew-hero__dot-ring{ inset: -15px; }
  .hnew-hero--bleed .hnew-hero__title{ -webkit-text-stroke-width: 1px; }
  /* trim particle count further for small-device perf */
  .hnew-hero--bleed .hnew-p:nth-child(n+6){ display: none; }
  .hnew-hero--bleed .hnew-hero__cosmos{ opacity: .4; }
}
@media (max-width: 400px){
  .hnew-hero--bleed .hnew-hero__dot{ width: 140px; height: 140px; }
  .hnew-hero--bleed .hnew-hero__dot-halo{ inset: -28px; }
}

/* ---- Reduced motion: freeze everything loud ---- */
@media (prefers-reduced-motion: reduce){
  .hnew-hero--bleed .hnew-hero__cosmos,
  .hnew-hero--bleed .hnew-hero__pulse,
  .hnew-hero--bleed .hnew-hero__title,
  .hnew-hero--bleed .hnew-hero__title::after,
  .hnew-hero--bleed .hnew-hero__dot .dot-mascot,
  .hnew-hero--bleed .hnew-hero__dot .dot-pupil-l,
  .hnew-hero--bleed .hnew-hero__dot .dot-pupil-r,
  .hnew-hero--bleed .hnew-hero__dot-halo{
    animation: none !important;
  }
  .hnew-hero--bleed .hnew-hero__title::after{ opacity: 0; }
  .hnew-hero--bleed .hnew-hero__dot .dot-mascot{
    filter: saturate(1.25) brightness(1.06);
  }
}

/* ===== Map touch-guard (anti scroll-trap on mobile) — append-only ===== */
.map-touch-guard{
  position:absolute; inset:0; z-index:600;
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:14px;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,.28) 100%);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:opacity .2s ease;
}
.map-touch-guard.is-active{ opacity:0; pointer-events:none; }
.map-touch-guard__hint{
  font-size:.8rem; font-weight:700; letter-spacing:.3px;
  color:#eafaff; padding:7px 14px; border-radius:999px;
  background:rgba(4,18,26,.78); backdrop-filter:blur(6px);
  border:1px solid rgba(0,242,254,.45);
  box-shadow:0 0 16px rgba(0,242,254,.35);
}
@media (prefers-reduced-motion: reduce){
  .map-touch-guard{ transition:none; }
}

/* ===== First-claimer modal — golden "you were FIRST" treatment ===== */
.claim-modal.is-first .claim-modal__card{
  border-color: rgba(255,215,0,.65);
  box-shadow: 0 0 40px rgba(255,215,0,.45), 0 0 90px rgba(255,45,181,.35),
              inset 0 0 24px rgba(255,215,0,.18);
}
.claim-modal.is-first .claim-modal__halo{
  background: radial-gradient(circle, rgba(255,215,0,.5) 0%, rgba(255,45,181,0) 65%);
}
.claim-modal.is-first .claim-modal__icon{
  animation: firstClaimPop .7s cubic-bezier(.2,1.4,.4,1) both;
}
.claim-modal.is-first .claim-modal__title{
  background: linear-gradient(90deg,#ffd700,#ff2db5 55%,#00f2fe);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 22px rgba(255,215,0,.4);
}
@keyframes firstClaimPop{
  0%{ transform: scale(.3) rotate(-18deg); opacity:0; }
  100%{ transform: scale(1) rotate(0); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .claim-modal.is-first .claim-modal__icon{ animation: none; }
}

/* ============================================================
   Phase B — Streak widget (wallet), Request category chips,
   Live-Puls full page. Append-only; brand neon tokens.
   ============================================================ */

/* ---- Wallet streak card ---- */
.wnew-streak{
  display:flex; flex-direction:column; gap:.85rem;
  padding:1.25rem 1.5rem; margin:0 0 1.5rem;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(20,8,24,.92), rgba(8,8,14,.92));
  border:1px solid rgba(255,0,170,.28);
  box-shadow:0 0 28px rgba(255,0,170,.12), inset 0 0 40px rgba(0,255,255,.04);
}
.wnew-streak.streak-card--active{
  border-color:rgba(255,138,0,.45);
  box-shadow:0 0 34px rgba(255,138,0,.22), inset 0 0 44px rgba(255,138,0,.06);
}
.wnew-streak .streak-card__head{ display:flex; align-items:center; gap:.6rem; }
.wnew-streak .streak-card__icon{ font-size:1.6rem; filter:drop-shadow(0 0 8px currentColor); }
.wnew-streak .streak-card__title{
  font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  font-size:.95rem; color:#fff;
}
.wnew-streak .streak-card__body{ display:flex; gap:2.5rem; flex-wrap:wrap; }
.wnew-streak .streak-stat__n{
  font-size:2.2rem; font-weight:900; line-height:1;
  color:#ff8a00; text-shadow:0 0 14px rgba(255,138,0,.5);
}
.streak-card--idle .streak-stat__n{ color:#8a8a9a; text-shadow:none; }
.wnew-streak .streak-stat__l{ font-size:.78rem; color:#a9a9bd; margin-top:.3rem; }
.wnew-streak .streak-card__hint{ font-size:.82rem; margin:0; }

/* ---- Requests category filter chips ---- */
.rnew-catbar{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin:0 0 1.4rem; padding:.2rem 0;
}
.rnew-catchip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .8rem; border-radius:999px;
  font-size:.82rem; font-weight:700; text-decoration:none;
  color:#cfd0e6;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(0,242,254,.18);
  transition:all .18s ease;
}
.rnew-catchip:hover{
  color:#fff; border-color:rgba(0,242,254,.5);
  box-shadow:0 0 16px rgba(0,242,254,.22);
  transform:translateY(-1px);
}
.rnew-catchip.is-active{
  color:#06121a; background:linear-gradient(135deg,#00f2fe,#00ffff);
  border-color:#00f2fe; box-shadow:0 0 20px rgba(0,242,254,.45);
}
.rnew-catchip__n{
  font-size:.72rem; opacity:.75; font-weight:800;
  padding:0 .3rem; min-width:1.1em; text-align:center;
}
.rnew-catchip.is-active .rnew-catchip__n{ opacity:.9; }

/* ---- Live-Puls full page ---- */
.pulse-hero{ position:relative; overflow:hidden; padding:3rem 1.5rem 2.2rem; margin-bottom:1.4rem; }
.pulse-hero__bg{ position:absolute; inset:0; z-index:0; }
.pulse-hero__grid{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(0,242,254,.06) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(0,242,254,.06) 1px, transparent 1px);
  background-size:42px 42px; mask-image:radial-gradient(ellipse at 50% 0%, #000 30%, transparent 75%);
}
.pulse-hero__orb{ position:absolute; width:340px; height:340px; border-radius:50%; filter:blur(80px); opacity:.4; }
.pulse-hero__orb--c{ top:-140px; left:-80px; background:#00f2fe; }
.pulse-hero__orb--m{ top:-100px; right:-60px; background:#ff00ff; }
.pulse-hero__inner{ position:relative; z-index:1; max-width:760px; margin:0 auto; text-align:center; }
.pulse-hero__title{
  font-size:clamp(2rem,5vw,3rem); font-weight:900; margin:.5rem 0 .6rem;
  color:#fff; text-shadow:0 0 24px rgba(0,242,254,.4);
}
.pulse-hero__sub{ color:#b6b7cf; max-width:620px; margin:0 auto; line-height:1.6; }

.pulse-wrap{ max-width:760px; margin:0 auto 3rem; padding:0 1rem; }
.pulse-legend{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-bottom:1.3rem; }

.pulse-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.pulse-row{
  border-radius:14px; overflow:hidden;
  background:linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.07);
  border-left:3px solid var(--lf,#00ffff);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  animation:pulseRowIn .35s ease both;
}
@keyframes pulseRowIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.pulse-row:hover{ transform:translateX(3px); box-shadow:0 0 20px color-mix(in srgb, var(--lf) 30%, transparent); }
.pulse-row__link{
  display:flex; align-items:center; gap:.9rem;
  padding:.85rem 1.1rem; text-decoration:none; color:inherit;
}
.pulse-row__icon{
  font-size:1.35rem; flex:0 0 auto;
  filter:drop-shadow(0 0 6px var(--lf));
}
.pulse-row__main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:.15rem; }
.pulse-row__title{
  font-weight:700; color:#fff; font-size:.95rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pulse-row__sub{ font-size:.78rem; color:#9a9bb2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pulse-row__side{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:.25rem; }
.pulse-row__tag{
  font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  padding:.15rem .5rem; border-radius:999px;
  color:var(--lf); border:1px solid color-mix(in srgb, var(--lf) 40%, transparent);
  background:color-mix(in srgb, var(--lf) 10%, transparent);
}
.pulse-row__time{ font-size:.72rem; color:#7d7e96; font-variant-numeric:tabular-nums; }

.pulse-empty{ text-align:center; padding:3rem 1rem; color:#9a9bb2; }
.pulse-empty__icon{ font-size:3rem; margin-bottom:.6rem; filter:drop-shadow(0 0 12px rgba(0,242,254,.4)); }

@media (max-width:560px){
  .pulse-row__sub{ display:none; }
  .wnew-streak .streak-card__body{ gap:1.6rem; }
}
@media (prefers-reduced-motion: reduce){
  .pulse-row{ animation:none; }
  .pulse-row:hover{ transform:none; }
}

/* ============================================================
   Live SSE counters — count-up + neon pulse (append-only)
   Mirrors the EVE reward animation feel on platform-wide stats.
   ============================================================ */
@keyframes liveBump {
  0%   { transform: scale(1); }
  28%  { transform: scale(1.16); }
  60%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}
.is-bumped { animation: liveBump .85s cubic-bezier(.2,.85,.25,1); will-change: transform; }
.is-bumped--up .ts-num,
.is-bumped--up .stage-stat__num,
.is-bumped--up .shero-stat__num,
.is-bumped--up.ts-num {
  color: #00ffff;
  text-shadow: 0 0 10px #00ffff, 0 0 26px rgba(0,255,255,.65);
}
.is-bumped--down .ts-num,
.is-bumped--down .stage-stat__num,
.is-bumped--down .shero-stat__num,
.is-bumped--down.ts-num {
  color: #ff00aa;
  text-shadow: 0 0 10px #ff00aa, 0 0 26px rgba(255,0,170,.6);
}
[data-live] { transition: color .2s ease, text-shadow .2s ease; }
@media (prefers-reduced-motion: reduce) {
  .is-bumped { animation: none; }
}

/* ===================================================================
   Live-pulse feed — mobile overflow fix
   Long titles must truncate with ellipsis instead of spilling off-screen.
   Flex items need explicit min-width:0 for text-overflow to apply.
   =================================================================== */
.lf-row__top{ min-width:0; }
.lf-row__title{ flex:1 1 auto; min-width:0; }

/* Mobile: single column must allow 0 min-width so long titles ellipsis
   instead of forcing the grid track (and card) wider than the viewport.
   Plain `1fr` resolves to minmax(auto,1fr) → min-content blows out. */
@media (max-width: 720px){
  .livefeed__list{ grid-template-columns:minmax(0,1fr); }
}

/* ===================================================================
   Hero title — mobile anti-flicker (append-only)
   Animating `filter` on a background-clip:text headline plus a
   mix-blend-mode:screen scan overlay forces the clipped text to
   re-rasterize every frame → wild flicker + unreadable text on mobile
   GPUs. On small screens freeze the filter pulse and the scan sweep;
   keep a stable static glow + the gentle gradient shimmer (which only
   shifts background-position and does not flicker).
   =================================================================== */
@media (max-width: 768px){
  .hero.hnew-hero.hnew-hero--bleed h1.hnew-hero__title,
  .hnew-hero.hnew-hero--bleed h1.hnew-hero__title,
  .hnew-hero--bleed .hnew-hero__title{
    animation: hnewTitleShimmer 9s ease-in-out infinite;
    filter:
      drop-shadow(0 0 16px rgba(255,0,255,.42))
      drop-shadow(0 0 9px rgba(0,242,254,.32));
  }
  .hnew-hero--bleed .hnew-hero__title::after{
    animation: none;
    opacity: 0;
  }
}

/* ===================================================================
   Spread-of-the-Day banner — mobile anti-flicker (append-only)
   sotdPulse animates box-shadow (outer + inset, semi-transparent) which
   repaints every frame over the moving background video → flicker on
   mobile. Freeze the pulse on small screens; the static glow + the
   GPU-cheap star spin (transform) stay.
   =================================================================== */
@media (max-width: 768px){
  .sotd-banner{ animation: none; }
}

/* ===================================================================
   Hero — comprehensive mobile anti-flicker (append-only)
   Root cause: the hero stacks many animated decorative layers that are
   heavily blurred (orbs blur 60–95px) and/or use mix-blend-mode:screen
   (scan sweep). Animating blurred/blended layers forces a full GPU
   recomposite every frame, which flickers badly on mobile and bleeds
   into the whole top area. Freeze the loud decoration on small screens;
   the static neon glow + gradient stay. Transform-only motion that is
   cheap (dot bounce) is left intact above.
   =================================================================== */
@media (max-width: 768px){
  .hnew-hero__cosmos,
  .hnew-hero__pulse,
  .hnew-hero__grid,
  .hnew-hero__orb,
  .hnew-hero__scan,
  .hnew-hero__qr,
  .hnew-p,
  .hnew-hero__dot-halo,
  .hnew-hero__dot-ring,
  .hnew-hero__eyebrow-pulse,
  .hnew-hero__live-dot,
  .hnew-btn,
  .hnew-btn--primary,
  .hnew-btn__shine{
    animation: none !important;
  }
  /* neutralise the blend-mode scan sweep (flicker-prone overlay) */
  .hnew-hero--bleed .hnew-hero__scan{ mix-blend-mode: normal; opacity: .22; }
}

/* ===================================================================
   Hero — clean mobile background (append-only, user-chosen)
   On mobile, drop ALL atmospheric deco layers (cosmos/pulse/grid/orbs/
   scan/particles/qr + dot halo/ring) and the animated aurora sweep.
   The section keeps its rich static neon gradient (radial magenta/cyan
   + linear dark) and the Dot mascot with its own glow. Result: calm,
   crisp, guaranteed flicker-free.
   =================================================================== */
@media (max-width: 768px){
  .hnew-hero--bleed .hnew-hero__cosmos,
  .hnew-hero--bleed .hnew-hero__pulse,
  .hnew-hero--bleed .hnew-hero__grid,
  .hnew-hero--bleed .hnew-hero__orb,
  .hnew-hero--bleed .hnew-hero__scan,
  .hnew-hero--bleed .hnew-hero__particles,
  .hnew-hero--bleed .hnew-hero__qr,
  .hnew-hero--bleed .hnew-hero__dot-halo,
  .hnew-hero--bleed .hnew-hero__dot-ring{
    display: none !important;
  }
  .hnew-hero.hnew-hero--bleed::after{ animation: none !important; opacity: .5 !important; }
}

/* ============================================================
   Example / Demo badge — marks all seeded demo content
   (spreads w/ "demo-" shortcode, market items & requests w/
   a seed_key) so live visitors know it's explorable example
   content, not a real booking. Violet accent stands apart from
   the cyan/yellow/magenta status badges. Append-only.
   ============================================================ */
.badge-example {
  background: rgba(170, 120, 255, 0.16);
  color: #c8a8ff;
  border: 1px solid #aa78ff;
  box-shadow: 0 0 10px rgba(170, 120, 255, 0.45);
}
.mcard-kind.example {
  background: #aa78ff;
  color: #160a2e;
  box-shadow: var(--glow) rgba(170, 120, 255, 0.6);
}
.rnew-pill--example {
  background: rgba(170, 120, 255, 0.18);
  color: #c8a8ff;
  border: 1px solid #aa78ff;
}

/* ===================================================================
   Live map promoted above the pulse feed — hero treatment
   =================================================================== */
.livefeed__maphead--hero{ margin-top: 6px; }
.livefeed__maphead--hero .livefeed__maptitle{
  font-size: clamp(1.4rem, 1.05rem + 1.6vw, 2.1rem);
  text-shadow: 0 0 22px rgba(0,255,255,.45), 0 0 48px rgba(0,255,255,.18);
}
.livefeed__maphead--hero + .livefeed__mapwrap{
  box-shadow:
    0 0 0 1px rgba(0,0,0,.4),
    0 0 52px color-mix(in srgb, var(--cyan, #00ffff) 24%, transparent),
    inset 0 0 60px rgba(0,0,0,.5);
}
/* separate the promoted map from the pulse feed header that now follows it */
.livefeed__mapcta + .livefeed__head{
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid color-mix(in srgb, var(--cyan, #00ffff) 14%, transparent);
}

/* ============================================================== */
/*  Spread-Detail Redesign (adopted from "Spread Detail Demo")    */
/*  APPEND-ONLY override block. Uses sd-* prefix to avoid the      */
/*  global .card collision. Wired markup keeps all original hooks. */
/* ============================================================== */

/* ---- Shimmer headline ---- */
.shimmer-text{
  background:linear-gradient(90deg,#00ffff 0%,#ff00aa 35%,#8b5cf6 65%,#00ffff 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:sd-shimmer 8s linear infinite;
}
@keyframes sd-shimmer{to{background-position:200% 0;}}
@media (prefers-reduced-motion: reduce){ .shimmer-text{animation:none;} }

/* ---- Hero card ---- */
.sd-hero{
  position:relative;
  margin:0 0 18px;
  padding:30px 30px 26px;
  border-radius:20px;
  overflow:hidden;
  background:
    radial-gradient(120% 120% at 10% -10%, rgba(0,255,255,.10), transparent 55%),
    radial-gradient(120% 120% at 110% 0%, rgba(255,0,170,.10), transparent 55%),
    linear-gradient(180deg,#121214 0%,#0a0a0a 100%);
  border:1px solid var(--line,#2a2a32);
  box-shadow:inset 0 0 0 1px rgba(0,255,255,.04), 0 0 40px rgba(0,0,0,.5);
}
.sd-hero__inner{position:relative;z-index:2;}
.sd-hero__badges{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px;}
.sd-hero__title{
  font-size:clamp(28px,4.4vw,46px);
  line-height:1.05;font-weight:900;letter-spacing:-.01em;
  margin:.1em 0 .5em;
}
.sd-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 11px;border-radius:9999px;
  font-size:11px;font-weight:600;letter-spacing:.04em;
  background:#16161c;border:1px solid var(--line,#2a2a32);
  color:#c8c8d0;text-decoration:none;
  transition:border-color .2s,color .2s,background .2s;
}
.sd-pill:hover{border-color:rgba(0,255,255,.45);color:var(--cyan,#00ffff);}
.sd-pill--cat{border-color:rgba(139,92,246,.4);color:#c4b5fd;}

.sd-hero__author{display:flex;align-items:center;gap:12px;margin-top:6px;}
.sd-avatar{
  width:44px;height:44px;border-radius:9999px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;overflow:hidden;
  border:1px solid var(--line,#2a2a32);
  box-shadow:0 0 14px rgba(0,255,255,.35);
  text-decoration:none;
}
.sd-avatar img{width:100%;height:100%;object-fit:cover;}
.sd-avatar__fallback{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#00ffff,#8b5cf6);color:#050507;
  font-weight:800;font-size:16px;
}
.sd-hero__authormeta{display:flex;flex-direction:column;gap:2px;min-width:0;}
.sd-hero__authorname{color:#e5e7eb;font-weight:700;text-decoration:none;}
.sd-hero__authorname:hover{color:var(--cyan,#00ffff);}
.sd-hero__authorsub{color:var(--muted,#8a8a99);font-size:12px;}

/* ---- Metric tiles ---- */
.sd-metrics{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 18px;
}
.sd-metric{
  position:relative;padding:18px 14px 16px;border-radius:14px;
  background:#111113;border:1px solid var(--line,#2a2a32);
  text-align:center;overflow:hidden;
}
.sd-metric::after{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:var(--accent,#00ffff);opacity:.55;
}
.sd-metric__icon{display:block;font-size:18px;margin-bottom:6px;opacity:.85;}
.sd-metric__label{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted,#8a8a99);margin:0 0 6px;
}
.sd-metric__value{
  font-weight:900;font-size:clamp(24px,3.4vw,34px);line-height:1;margin:0;
  color:var(--accent,#00ffff);
  text-shadow:0 0 16px var(--accent-glow,rgba(0,255,255,.55));
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}

/* ---- Vote hero (full width) ---- */
.sd-votewrap{margin:0 0 20px;}
.sd-votehero{max-width:none;}

/* ---- Two-column grid ---- */
.sd-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start;
}
.sd-main{min-width:0;display:flex;flex-direction:column;gap:18px;}
.sd-side{
  display:flex;flex-direction:column;gap:16px;
  position:sticky;top:84px;align-self:start;
}

/* ---- Generic card (sd-prefixed to dodge global .card) ---- */
.sd-card{
  background:#111113;border:1px solid var(--line,#2a2a32);
  border-radius:16px;padding:18px 18px;
}
.sd-card__title{
  display:flex;align-items:center;gap:10px;
  font-size:14px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;
  color:#e5e7eb;margin:0 0 14px;
}
.sd-bar{display:inline-block;width:4px;height:18px;border-radius:3px;background:var(--cyan,#00ffff);box-shadow:0 0 10px currentColor;}
.sd-bar--cyan{background:#00ffff;color:#00ffff;}
.sd-bar--pink{background:#ff00aa;color:#ff00aa;}
.sd-bar--yellow{background:#ffff00;color:#ffff00;}

/* Featured image keeps magic-hero parallax hook but no card chrome */
.sd-featured.magic-hero{display:block;padding:0;border:none;background:transparent;margin:0;}
.sd-featured .featured-img-block{border-radius:16px;overflow:hidden;}

/* ---- Claim card ---- */
.sd-claimcard{
  position:relative;padding:22px 18px 18px;border-radius:16px;text-align:center;
  overflow:hidden;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,0,170,.20), transparent 60%),
    linear-gradient(180deg,#1a0612 0%,#0a0408 100%);
  border:1px solid rgba(255,0,170,.45);
  box-shadow:0 0 0 1px rgba(255,0,170,.25),0 0 28px rgba(255,0,170,.18),inset 0 0 28px rgba(255,0,170,.10);
}
.sd-claimcard__eyebrow{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:#ff8fd0;margin:0 0 8px;
}
.sd-claimcard__amount{display:flex;align-items:baseline;justify-content:center;gap:6px;margin-bottom:6px;}
.sd-claimcard__amount .n{
  font-weight:900;font-size:44px;line-height:1;color:#ffd0e8;
  text-shadow:0 0 18px rgba(255,0,170,.8),0 0 36px rgba(255,0,170,.5);
}
.sd-claimcard__amount .u{font-weight:700;font-size:13px;color:#ff00aa;letter-spacing:.18em;}
.sd-claimcard__hint{font-size:11px;color:#c0a8b8;letter-spacing:.06em;margin:12px 0 0;}
.sd-claimcard__form{margin:0;}
.sd-btn-claim{
  position:relative;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 16px;border-radius:12px;
  background:linear-gradient(90deg,#ff00aa 0%,#8b5cf6 100%);
  color:#fff;font-weight:800;font-size:14px;letter-spacing:.03em;
  border:1px solid rgba(255,255,255,.15);cursor:pointer;text-decoration:none;
  transition:transform .2s,box-shadow .25s,filter .25s;
  box-shadow:0 0 24px rgba(255,0,170,.45);
}
.sd-btn-claim:hover:not(.claimed):not([disabled]){
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 0 36px rgba(255,0,170,.75),0 0 80px rgba(139,92,246,.4);
}
.sd-btn-claim.claimed,.sd-btn-claim[disabled]{
  background:linear-gradient(90deg,#2a2a36 0%,#1c1c26 100%);
  color:#8b8b95;box-shadow:none;cursor:default;border-color:#2a2a32;
}
.sd-claimed{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:14px;flex-wrap:wrap;font-size:12px;color:#c0a8b8;}
.sd-claimed__heart{filter:drop-shadow(0 0 6px rgba(255,0,170,.6));}
.sd-claimed__n{font-weight:900;color:#ffd0e8;}

/* ---- QR card tweaks within sidebar ---- */
.sd-qr{text-align:center;}
.sd-ownerbox{display:flex;flex-direction:column;gap:.5rem;}

/* ---- GPS consent banner ---- */
.gps-consent{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:0 0 16px;padding:14px 18px;border-radius:14px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(0,255,255,.12), transparent 60%),
    linear-gradient(180deg,#0a1a1f 0%,#0a0a0a 100%);
  border:1px solid rgba(0,255,255,.4);
  box-shadow:0 0 24px rgba(0,255,255,.14),inset 0 0 24px rgba(0,255,255,.06);
  transition:opacity .4s ease, transform .4s ease;
}
.gps-consent.is-gone{opacity:0;transform:translateY(-8px);}
.gps-consent.is-done{border-color:rgba(0,255,170,.5);}
.gps-consent__icon{font-size:26px;filter:drop-shadow(0 0 10px rgba(0,255,255,.6));}
.gps-consent__body{flex:1 1 220px;min-width:0;}
.gps-consent__title{display:block;color:#eafdff;font-size:14px;margin-bottom:2px;}
.gps-consent__text{margin:0;color:var(--muted,#8a8a99);font-size:12.5px;line-height:1.4;}
.gps-consent__actions{display:flex;gap:8px;flex-shrink:0;}
.gps-consent__allow,.gps-consent__deny{
  padding:9px 16px;border-radius:10px;font-weight:700;font-size:13px;cursor:pointer;
  border:1px solid transparent;transition:transform .2s,box-shadow .25s,filter .2s;
}
.gps-consent__allow{
  background:linear-gradient(90deg,#00ffff,#00aaff);color:#031016;
  box-shadow:0 0 20px rgba(0,255,255,.4);
}
.gps-consent__allow:hover:not([disabled]){transform:translateY(-1px);box-shadow:0 0 30px rgba(0,255,255,.7);}
.gps-consent__allow.is-loading{opacity:.6;cursor:wait;}
.gps-consent__deny{background:transparent;border-color:var(--line,#2a2a32);color:var(--muted,#8a8a99);}
.gps-consent__deny:hover{color:#e5e7eb;border-color:#3a3a44;}

/* ---- Responsive ---- */
@media (max-width: 900px){
  .sd-grid{grid-template-columns:1fr;}
  .sd-side{position:static;top:auto;}
  .sd-metrics{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 480px){
  .sd-hero{padding:22px 18px;}
  .sd-metric__value{font-size:26px;}
}

/* ============================================================== */
/*  Spread-Detail Redesign — Vote/Cheer hero layout fix           */
/*  The original cheer-card layout rules are scoped to            */
/*  .magic-hero--noir; in the new sd-votewrap context they don't  */
/*  apply, so the login link stayed inline and collided with the  */
/*  voters list. Re-establish a clean flex-column order here.     */
/* ============================================================== */
.sd-votehero{
  display:flex;flex-direction:column;gap:14px;
  border-radius:16px;
}
.sd-votehero .cheer-card__head{
  display:flex;align-items:center;justify-content:space-between;
  gap:.6rem;flex-wrap:wrap;margin:0;
}
.sd-votehero .cheer-card__title{
  display:inline-flex;align-items:center;gap:8px;
  font:800 .98rem/1 'Orbitron',system-ui,sans-serif;
  letter-spacing:.12em;color:#6ecbff;
  text-shadow:0 0 10px rgba(110,203,255,.4);
  margin:0;
}
.sd-votehero .cheer-card__count{
  display:inline-flex;align-items:baseline;gap:6px;
  padding:5px 13px;border-radius:999px;
  background:rgba(110,203,255,.08);
  border:1px solid rgba(110,203,255,.24);
  font-size:.78rem;color:#9fd9ff;letter-spacing:.04em;white-space:nowrap;
}
.sd-votehero .cheer-card__count-label{text-transform:uppercase;opacity:.8;}
.sd-votehero .cheer-card__count-num{
  font-weight:800;color:#fff;font-size:.95rem;
  text-shadow:0 0 8px rgba(110,203,255,.5);font-variant-numeric:tabular-nums;
}
.sd-votehero .cheer-card__hint{
  margin:0;font-size:.9rem;color:var(--muted,#8a99ad);line-height:1.5;
}
.sd-votehero .streak-chip{align-self:flex-start;margin:0;}
/* Button: force block-level full width even when it's an <a> (login) */
.sd-votehero .cheer-btn{
  display:inline-flex !important;align-items:center;justify-content:center;gap:8px;
  width:100%;box-sizing:border-box;text-decoration:none;text-align:center;
  min-height:50px;
}
.sd-votehero #cheerForm{margin:0;}
/* Top-Voters list: clear separation below the button */
.sd-votehero .voters-list{
  margin:2px 0 0;padding-top:14px;
  border-top:1px dashed rgba(110,203,255,.18);
}
.sd-votehero .voters-list__head{
  display:flex;align-items:center;justify-content:space-between;margin:0 0 10px;
}
.sd-votehero .voters-list__title{
  font:700 .76rem/1 'Orbitron',system-ui,sans-serif;
  letter-spacing:.14em;color:#6ecbff;text-transform:uppercase;margin:0;
}
.sd-votehero .voters-list__more{
  font-size:.76rem;color:#9fd9ff;text-decoration:underline dotted;cursor:pointer;
}
.sd-votehero .voters-list__items{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px;
}
.sd-votehero .voters-list__empty{
  font-size:.85rem;color:#6e7a8d;font-style:italic;margin:0;
}
.sd-votehero .voter-chip__link{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 9px 4px 4px;border-radius:999px;
  background:rgba(79,182,255,.08);border:1px solid rgba(79,182,255,.22);
  color:#cfe9ff;text-decoration:none;font-size:.78rem;line-height:1;
  transition:background .15s ease,transform .12s ease;
}
.sd-votehero .voter-chip__link:hover{background:rgba(79,182,255,.18);transform:translateY(-1px);}
.sd-votehero .voter-chip__avatar{
  width:22px;height:22px;border-radius:50%;object-fit:cover;flex:0 0 22px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#1d2a3e,#2a3e58);
  font-weight:800;font-size:.7rem;color:#9fd9ff;text-transform:uppercase;
}
.sd-votehero .voter-chip__name{font-weight:600;color:#e6f4ff;}
.sd-votehero .voter-chip__amount{font-weight:800;color:#5fffa6;text-shadow:0 0 6px rgba(95,255,166,.35);}

/* Light-theme parity for the vote hero */
html[data-theme="light"] .sd-votehero .cheer-card__title{color:#0a7aa0;text-shadow:none;}
html[data-theme="light"] .sd-votehero .voters-list__title{color:#0a7aa0;}
html[data-theme="light"] .sd-votehero .cheer-card__count{background:rgba(0,140,170,.08);border-color:rgba(0,140,170,.3);color:#06647a;}
html[data-theme="light"] .sd-votehero .cheer-card__count-num{color:#003a44;text-shadow:none;}

/* ============================================================== */
/*  Spread-Detail — SCANS metric tile prominence + count-up pop   */
/*  User request: make the SCANS tile stand out (neon-animated).  */
/* ============================================================== */
.sd-metric--scans{
  border-color:rgba(0,255,255,.55);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(0,255,255,.12), transparent 62%),
    #111113;
  box-shadow:
    0 0 0 1px rgba(0,255,255,.18),
    0 0 26px rgba(0,255,255,.18),
    inset 0 0 22px rgba(0,255,255,.06);
}
.sd-metric--scans::after{ height:2px; animation:sdScanBar 2.6s ease-in-out infinite; }
@keyframes sdScanBar{ 0%,100%{opacity:.5;} 50%{opacity:1;box-shadow:0 0 14px #00ffff;} }
.sd-metric--scans .sd-metric__value{
  text-shadow:0 0 18px rgba(0,255,255,.8), 0 0 38px rgba(0,255,255,.4);
}
.sd-metric--scans .sd-metric__icon{ animation:sdScanPing 2.6s ease-in-out infinite; }
@keyframes sdScanPing{ 0%,100%{opacity:.75;transform:translateY(0);} 50%{opacity:1;transform:translateY(-2px);} }

/* Live pulse dot top-right of the SCANS tile */
.sd-metric__live{
  position:absolute;top:11px;right:12px;width:8px;height:8px;border-radius:50%;
  background:#00ffff;box-shadow:0 0 10px #00ffff;z-index:2;
}
.sd-metric__live::after{
  content:"";position:absolute;inset:0;border-radius:50%;background:#00ffff;
  animation:sdLivePulse 1.9s ease-out infinite;
}
@keyframes sdLivePulse{ 0%{transform:scale(1);opacity:.7;} 100%{transform:scale(2.8);opacity:0;} }

/* Count-up completion pop (applied briefly to each tile) */
.sd-metric--pop .sd-metric__value{ animation:sdMetricPop .55s ease; }
@keyframes sdMetricPop{ 0%{transform:scale(1);} 40%{transform:scale(1.14);} 100%{transform:scale(1);} }

@media (prefers-reduced-motion: reduce){
  .sd-metric--scans::after,
  .sd-metric--scans .sd-metric__icon,
  .sd-metric__live::after,
  .sd-metric--pop .sd-metric__value{ animation:none !important; }
}

/* ============================================================== */
/*  Spread-Detail — PREMIUM POLISH PASS                           */
/*  Glassmorphism + ambient particles + golden EVE + delightful   */
/*  micro-interactions. Append-only, no JS hooks touched.         */
/*  Palette: brand neon kept; proposal's blue/purple/gold mapped  */
/*  onto cyan / violet (#8b5cf6) / a warm-gold EVE accent.        */
/* ============================================================== */

/* ---- Glass hero ---- */
.sd-hero{
  padding:40px 38px 34px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(130% 130% at 8% -12%, rgba(0,255,255,.13), transparent 52%),
    radial-gradient(130% 130% at 112% 0%, rgba(255,0,170,.12), transparent 52%),
    radial-gradient(100% 150% at 50% 130%, rgba(139,92,246,.16), transparent 60%),
    linear-gradient(180deg, rgba(18,18,24,.74), rgba(10,10,13,.82));
  -webkit-backdrop-filter:blur(10px) saturate(1.15);
  backdrop-filter:blur(10px) saturate(1.15);
  box-shadow:0 24px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}

/* ---- Ambient floating particles inside the hero ---- */
.sd-particles{
  position:absolute;inset:-15%;z-index:1;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(0,255,255,.8), transparent),
    radial-gradient(1.5px 1.5px at 72% 58%, rgba(255,0,170,.7), transparent),
    radial-gradient(2px 2px at 42% 82%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 86% 24%, rgba(139,92,246,.7), transparent),
    radial-gradient(1px 1px at 55% 14%, rgba(0,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 12% 68%, rgba(255,214,90,.55), transparent),
    radial-gradient(1px 1px at 92% 78%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 33% 48%, rgba(255,0,170,.5), transparent),
    radial-gradient(1px 1px at 64% 36%, rgba(0,255,255,.5), transparent);
  background-repeat:no-repeat;
  animation:sdParticleFloat 18s ease-in-out infinite alternate;
}
@keyframes sdParticleFloat{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(10px,-16px,0);}
}

/* ---- Glass cards (translucent + blur; stay dark in both themes) ---- */
.sd-card{
  background:linear-gradient(180deg, rgba(21,21,28,.72), rgba(12,12,16,.78));
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;
  padding:22px;
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 12px 42px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.sd-card:hover{
  border-color:rgba(0,255,255,.16);
  box-shadow:0 16px 50px rgba(0,0,0,.5), 0 0 28px rgba(0,255,255,.08), inset 0 1px 0 rgba(255,255,255,.06);
}

/* ---- Metric tiles: glass + delightful hover lift + glow ---- */
.sd-metrics{gap:16px;margin-bottom:26px;}
.sd-metric{
  padding:22px 16px 20px;border-radius:18px;
  background:linear-gradient(180deg, rgba(21,21,28,.62), rgba(12,12,16,.72));
  border:1px solid rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(12px) saturate(1.15);
  backdrop-filter:blur(12px) saturate(1.15);
  box-shadow:0 10px 32px rgba(0,0,0,.4);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.sd-metric:hover{
  transform:translateY(-6px) scale(1.025);
  border-color:var(--accent,#00ffff);
  box-shadow:0 18px 48px rgba(0,0,0,.5), 0 0 34px var(--accent-glow,rgba(0,255,255,.4));
}
.sd-metric__icon{font-size:20px;transition:transform .3s ease;}
.sd-metric:hover .sd-metric__icon{transform:scale(1.15) translateY(-1px);}

/* Re-assert the SCANS tile's signature cyan glow (must win over the
   generic glass background defined just above). */
.sd-metric--scans{
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(0,255,255,.16), transparent 62%),
    linear-gradient(180deg, rgba(15,24,28,.7), rgba(8,12,14,.78));
  border-color:rgba(0,255,255,.5);
  box-shadow:0 0 0 1px rgba(0,255,255,.18), 0 12px 38px rgba(0,0,0,.45), 0 0 30px rgba(0,255,255,.18);
}

/* ---- Golden EVE tile (warm, glowing, sparkle) ---- */
.sd-metric--eve{
  border-color:rgba(255,200,70,.4);
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(255,200,70,.18), transparent 60%),
    linear-gradient(180deg, rgba(28,23,9,.74), rgba(15,12,4,.8));
  box-shadow:0 0 0 1px rgba(255,200,70,.18), 0 12px 38px rgba(0,0,0,.45), 0 0 30px rgba(255,190,40,.16);
}
.sd-metric--eve::after{ background:#ffce4a; opacity:.7; box-shadow:0 0 12px rgba(255,200,70,.8); }
.sd-metric--eve .sd-metric__label{ color:#e9cf8e; }
.sd-metric--eve .sd-metric__value{
  color:#ffd76a;
  text-shadow:0 0 18px rgba(255,190,40,.85), 0 0 42px rgba(255,160,20,.45);
}
.sd-metric--eve .sd-metric__icon{ color:#ffd76a; filter:drop-shadow(0 0 10px rgba(255,190,40,.75)); }
.sd-metric--eve:hover{
  border-color:#ffce4a;
  box-shadow:0 18px 48px rgba(0,0,0,.5), 0 0 38px rgba(255,190,40,.4);
}
.sd-metric--eve::before{
  content:"\2726";position:absolute;top:9px;left:12px;font-size:12px;color:#ffe6a3;
  text-shadow:0 0 8px rgba(255,200,70,.9);
  opacity:0;animation:sdSparkle 3.4s ease-in-out infinite;
}
@keyframes sdSparkle{
  0%,100%{opacity:0;transform:scale(.5) rotate(0deg);}
  50%{opacity:1;transform:scale(1.1) rotate(25deg);}
}

/* ---- Premium framing for the two live maps ---- */
.origin-map__canvas, .live-map{
  border-radius:18px;
  box-shadow:0 16px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(0,255,255,.12), 0 0 32px rgba(0,255,255,.08);
}

/* ---- Flyer tiles: luxurious hover lift ---- */
.flyer-grid{gap:16px;}
.flyer-tile{transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;}
.flyer-tile:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 20px 52px rgba(0,0,0,.55), 0 0 30px rgba(0,255,255,.18);
}

/* ---- Generous breathing room between full-width sections ---- */
#flyer-picker, #origin-map, #live-scans{ margin-top:36px; }

/* ---- Mobile: tighten premium paddings, keep effects light ---- */
@media (max-width: 600px){
  .sd-hero{padding:26px 20px 24px;border-radius:20px;}
  .sd-card{padding:18px;}
  .sd-metric{padding:18px 12px 16px;}
}

/* ---- Respect reduced-motion preferences ---- */
@media (prefers-reduced-motion: reduce){
  .sd-particles{animation:none;}
  .sd-metric--eve::before{animation:none;opacity:0;}
  .sd-metric:hover,
  .sd-card:hover,
  .flyer-tile:hover{transform:none;}
}

/* ============================================================== */
/*  Spread-Detail v5 — Geo cluster relocation + votes-zero fix    */
/*  Maps moved out of the page bottom into the main content       */
/*  column (after the message, before comments). Tidy the loose   */
/*  zero in the claim card's "loved by" line.                     */
/* ============================================================== */

/* --- Section lead that introduces the in-column geo cluster --- */
.sd-sectionlead{ margin:6px 0 2px; }
.sd-sectionlead__title{
  display:flex;align-items:center;gap:10px;margin:0;
  font-size:18px;font-weight:900;letter-spacing:.01em;color:#eaf2ff;
  text-shadow:0 0 18px rgba(0,255,255,.28);
}
.sd-sectionlead__sub{
  margin:.35rem 0 0;color:#9fb0c4;font-size:.92rem;line-height:1.45;
}

/* Maps now live inside .sd-main (a flex column with gap). Drop their
   own outer margins so the column gap controls the rhythm, and undo the
   full-width breathing-room rule from the previous pass. */
.sd-main > .origin-map,
.sd-main > .live-scans{ margin:0 !important; }
.sd-main > .origin-map,
.sd-main > .live-scans{ width:100%; }

/* The live-scans map+list split needs a touch less room inside the
   narrower content column; keep it readable, stack a bit earlier. */
@media (max-width: 1100px){
  .sd-main > .live-scans .live-grid{ grid-template-columns:1fr; }
  .sd-main > .live-scans .live-side{ max-height:none; }
}

/* --- Votes/claim "loose zero" fix ---
   When nobody has claimed yet, hide the bare 0 and show an inviting
   empty label instead. The claim JS removes data-empty on success, which
   auto-swaps to the filled "loved by N" label via these sibling rules. */
.sd-claimed__n[data-empty]{ display:none; }
.sd-claimed__n[data-empty] ~ .sd-claimed__lbl--filled{ display:none; }
.sd-claimed__n:not([data-empty]) ~ .sd-claimed__lbl--empty{ display:none; }
.sd-claimed__lbl--empty{ color:#ff9ed6;font-weight:600;letter-spacing:.02em; }

/* ============================================================== */
/*  Spread-Detail v6 — full reflow into a single floating column  */
/*  Order: title · Reach&Origin map · counts · image+QR+share ·   */
/*  claim · vote/feature · description · location · live · flyer · */
/*  comments. Frameless ("bleeding"): drop card borders/shadows    */
/*  so all content floats on the neon background.                  */
/* ============================================================== */

.sd-flow{ display:flex; flex-direction:column; gap:40px; }
.sd-flow > .sd-sectionlead{ margin-bottom:-18px; }

/* ---- Frameless: remove the boxy chrome so content floats ---- */
.sd-flow .sd-card,
.sd-flow .cheer-card,
.sd-flow .share-block,
.sd-flow .sd-qr,
.sd-flow .respread-block,
.sd-flow #origin-map,
.sd-flow #live-scans,
.sd-flow .comments-section{
  border:none !important;
  box-shadow:none !important;
  outline:none !important;
}
/* text-only blocks: fully transparent, float on the page */
.sd-flow .sd-card{
  background:transparent !important;
  padding:0 !important;
  border-radius:0 !important;
}
/* maps + media keep a soft, borderless backing for legibility */
.sd-flow #origin-map,
.sd-flow #live-scans,
.sd-flow .cheer-card,
.sd-flow .share-block,
.sd-flow .sd-qr,
.sd-flow .respread-block{
  background:rgba(10,10,16,.34) !important;
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  border-radius:22px;
}
/* body copy gets a touch more contrast now that frames are gone */
.sd-flow .spread-body,
.sd-flow .comment-card__body,
.sd-flow .sd-card__title,
.sd-flow .sd-sectionlead__title,
.sd-flow .sd-sectionlead__sub{
  text-shadow:0 2px 14px rgba(0,0,0,.55);
}

/* ---- 1 · Reach & Origin map as the top hero ---- */
.sd-flow #origin-map{ padding:18px 18px 10px; }
.sd-flow #origin-map .origin-map__canvas{ min-height:440px; }
@media (max-width:768px){
  .sd-flow #origin-map .origin-map__canvas{ min-height:320px; }
}

/* ---- 3 · Content row: featured image | QR + share ---- */
.sd-flow .sd-contentrow{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(280px,30%,350px);
  gap:28px; align-items:start;
}
.sd-flow .sd-contentrow--noimg{ grid-template-columns:1fr; }
.sd-flow .sd-contentrow__media{ min-width:0; }
.sd-flow .sd-contentrow__side{ display:flex; flex-direction:column; gap:22px; }
.sd-flow .sd-contentrow__side .sd-qr,
.sd-flow .sd-contentrow__side .share-block{ margin:0; padding:18px; }
@media (max-width:900px){
  .sd-flow .sd-contentrow{ grid-template-columns:1fr; }
}

/* ---- 4 · Claim prominent, centered ---- */
.sd-flow .sd-claimzone{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  width:100%; max-width:600px; margin:4px auto;
}
.sd-flow .sd-claimzone .sd-claimcard{ width:100%; transform:none; }
.sd-flow .sd-claimzone .first-claimer-wrap{ width:100%; }

/* ---- 5 · Vote / feature / respread sit centered, readable ---- */
.sd-flow .sd-votewrap{ width:100%; max-width:720px; margin:0 auto; }
.sd-flow .respread-block{ max-width:720px; margin-left:auto; margin-right:auto; padding:18px 20px; }

/* ---- spacing for relocated maps inside the flow ---- */
.sd-flow #live-scans{ padding:18px; }

/* v6 fixes — keep the hidden vote-label shim hidden (a .shero__stats
   rule was overriding the [hidden] UA default and leaking a stray box),
   and finish the frameless look on the title hero + counts tiles. */
.sd-flow [hidden]{ display:none !important; }

/* title hero floats — drop the bordered container, keep the glow art */
.sd-flow .sd-hero{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* counts bar: soft translucent tiles, no hard frame */
.sd-flow .sd-metric{
  border:none !important;
  box-shadow:none !important;
  background:rgba(10,10,16,.34) !important;
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
}

/* ============================================================================
   NEON GEILER LAYER  (append-only, highest priority)
   Punchier CMYK neon: living neon dot-field backdrop (#bg-field, drawn by
   neon_fx.js), animated button sheen, juicier card hovers, neon nav underline,
   breathing glows. Dot mascot + CMYK print colors untouched.
   ============================================================================ */
#bg-field{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:-1; pointer-events:none;
}

/* Buttons: light sweep + stronger neon bloom on hover. */
.btn-neon, .btn-cyan, .btn-yellow{ position:relative; overflow:hidden; }
.btn-neon::after, .btn-cyan::after, .btn-yellow::after{
  content:""; position:absolute; top:0; left:-130%; width:55%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
  transform:skewX(-18deg); pointer-events:none;
}
.btn-neon:hover::after, .btn-cyan:hover::after, .btn-yellow:hover::after{
  animation:neon-sheen .7s ease;
}
@keyframes neon-sheen{ from{ left:-130%; } to{ left:150%; } }
.btn-neon:hover, .btn-cyan:hover, .btn-yellow:hover{
  transform:translateY(-2px) scale(1.02);
  filter:brightness(1.12) saturate(1.15);
}

/* Cards: lift + neon edge bloom on hover. */
.card, .mcard, .market-card, .stat{
  transition:transform .18s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover, .mcard:hover, .market-card:hover{
  transform:translateY(-4px);
  border-color:var(--magenta);
  box-shadow:0 0 0 1px rgba(255,0,170,.5),
             0 18px 50px -18px rgba(255,0,170,.55),
             0 0 40px -10px rgba(0,255,255,.35);
}

/* Nav: neon underline grow on hover. */
.mainnav a::after{
  content:""; position:absolute; left:.5rem; right:.5rem; bottom:0; height:2px;
  background:linear-gradient(90deg, var(--magenta), var(--cyan), var(--yellow));
  transform:scaleX(0); transform-origin:left;
  transition:transform .22s ease; border-radius:2px; opacity:.9;
}
.mainnav a:hover::after{ transform:scaleX(1); }

/* Breathing neon glow for hero pills / badges (harmless if absent). */
@keyframes neon-float-glow{
  0%,100%{ filter:drop-shadow(0 0 8px rgba(0,255,255,.45)); }
  50%{ filter:drop-shadow(0 0 18px rgba(255,0,170,.6)); }
}
.hero-badge, .req-badge, .pill-neon, .hero-kicker{
  animation:neon-float-glow 4.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce){
  .btn-neon:hover::after, .btn-cyan:hover::after, .btn-yellow:hover::after{ animation:none; }
  .hero-badge, .req-badge, .pill-neon, .hero-kicker{ animation:none; }
  #bg-field{ opacity:.6; }
}

/* ============================================================
   Live-map legend — interactive (clickable category filter +
   smooth fly-to-zoom + heat-field toggle). Overrides the static
   pointer-events:none rule above (append wins).
   ============================================================ */
.lf-maplegend{ pointer-events:auto; }
.lf-maplegend__list{ gap:.2rem; }
.lf-maplegend__item{
  width:100%; cursor:pointer; -webkit-appearance:none; appearance:none;
  background:transparent; border:1px solid transparent; border-radius:9px;
  padding:.22rem .38rem; color:inherit; font:inherit; text-align:left;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.lf-maplegend__item:hover{
  background:color-mix(in srgb, var(--lf) 14%, transparent);
  border-color:color-mix(in srgb, var(--lf) 45%, transparent);
}
.lf-maplegend__item:active{ transform:scale(.97); }
.lf-maplegend__item.is-on{
  background:color-mix(in srgb, var(--lf) 20%, transparent);
  border-color:var(--lf);
  box-shadow:0 0 12px color-mix(in srgb, var(--lf) 45%, transparent),
             inset 0 0 8px color-mix(in srgb, var(--lf) 22%, transparent);
}
.lf-maplegend__item:focus-visible{ outline:2px solid var(--lf); outline-offset:2px; }
/* Non-color cue for the active filter (color-blind safe): checkmark + bold underline */
.lf-maplegend__item.is-on .lf-maplegend__ic::after{
  content:"\2713"; margin-left:.18rem; font-size:.62em; font-weight:900; color:inherit;
}
.lf-maplegend__item.is-on .lf-maplegend__lbl{
  font-weight:800; text-decoration:underline;
  text-decoration-thickness:2px; text-underline-offset:2px;
}
.lf-maplegend__shownow{
  margin-top:.4rem; font-size:.62rem; font-weight:700; letter-spacing:.03em;
  color:#bfe9ff; text-align:center;
}
.lf-maplegend__shownow .lf-maplegend__shownowlbl{ opacity:.72; text-transform:uppercase; }
.lf-maplegend__shownow b{ color:#fff; text-transform:uppercase; }
.lf-maplegend__heat{
  margin-top:.55rem; width:100%; cursor:pointer; -webkit-appearance:none; appearance:none;
  display:flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.34rem .4rem; border-radius:10px; font:inherit; font-size:.7rem; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase;
  color:#ffd0ec; background:rgba(255,0,170,.10);
  border:1px solid rgba(255,0,170,.4);
  transition:background .15s ease, box-shadow .15s ease, color .15s ease, transform .12s ease;
}
.lf-maplegend__heat:hover{ background:rgba(255,0,170,.2); }
.lf-maplegend__heat:active{ transform:scale(.97); }
.lf-maplegend__heat:focus-visible{ outline:2px solid #ff00aa; outline-offset:2px; }
.lf-maplegend__heat:not(.is-on){ opacity:.66; }
.lf-maplegend__heat.is-on{
  color:#fff;
  background:linear-gradient(92deg, rgba(0,255,255,.22), rgba(255,0,170,.30) 70%, rgba(255,255,0,.22));
  border-color:#ff00aa;
  box-shadow:0 0 14px rgba(255,0,170,.45), inset 0 0 8px rgba(255,255,255,.12);
}
.lf-maplegend__heatic{ filter:drop-shadow(0 0 6px #ff8a00); }
.lf-maplegend__range{
  margin-top:.4rem; display:grid; grid-template-columns:repeat(3,1fr); gap:.28rem;
}
.lf-maplegend__rangebtn{
  cursor:pointer; -webkit-appearance:none; appearance:none;
  padding:.26rem .2rem; border-radius:8px; font:inherit; font-size:.64rem; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; text-align:center;
  color:#bfe9ff; background:rgba(0,255,255,.08);
  border:1px solid rgba(0,255,255,.32);
  transition:background .15s ease, box-shadow .15s ease, color .15s ease, transform .12s ease;
}
.lf-maplegend__rangebtn:hover{ background:rgba(0,255,255,.18); }
.lf-maplegend__rangebtn:active{ transform:scale(.96); }
.lf-maplegend__rangebtn:focus-visible{ outline:2px solid #00ffff; outline-offset:2px; }
.lf-maplegend__rangebtn.is-on{
  color:#001016;
  background:linear-gradient(92deg, #00ffff, #00b3ff);
  border-color:#00ffff;
  box-shadow:0 0 12px rgba(0,255,255,.45), inset 0 0 6px rgba(255,255,255,.18), inset 0 -3px 0 #001016;
}
.lf-maplegend__rangebtn.is-on::before{ content:"\2713\00a0"; font-weight:900; }
.lf-maplegend__rangenow{
  margin-top:.32rem; font-size:.62rem; font-weight:700; letter-spacing:.03em;
  color:#bfe9ff; text-align:center;
}
.lf-maplegend__rangenow .lf-maplegend__rangenowlbl{ opacity:.72; text-transform:uppercase; }
.lf-maplegend__rangenow b{ color:#00ffff; text-transform:uppercase; }
@media (max-width:560px){
  .lf-maplegend__heat span:not(.lf-maplegend__heatic){ display:none; }
}

/* ============================================================
   Shared spread-map legend — interactive (clickable region
   filter + smooth fly-to-cover + heat-field toggle), mirrors
   the home live-map legend. Append-only.
   ============================================================ */
.spread-map-legend__btn{
  display:inline-flex; align-items:center; gap:.35rem;
  cursor:pointer; -webkit-appearance:none; appearance:none;
  background:transparent; border:1px solid transparent; border-radius:9px;
  padding:.2rem .5rem; color:inherit; font:inherit; font-size:.85rem; line-height:1.2;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.spread-map-legend__btn:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.18);
}
.spread-map-legend__btn:active{ transform:scale(.97); }
.spread-map-legend__btn.is-on{
  background:rgba(0,255,255,.12);
  border-color:rgba(0,255,255,.7);
  box-shadow:0 0 12px rgba(0,255,255,.35), inset 0 0 8px rgba(0,255,255,.14);
}
.spread-map-legend__btn:focus-visible{ outline:2px solid var(--cyan,#00ffff); outline-offset:2px; }
.spread-map-legend__heatli{ margin-left:auto; }
.spread-map-legend__heat{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  cursor:pointer; -webkit-appearance:none; appearance:none;
  padding:.28rem .6rem; border-radius:10px; font:inherit; font-size:.7rem; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase;
  color:#ffd0ec; background:rgba(255,0,170,.10);
  border:1px solid rgba(255,0,170,.4);
  transition:background .15s ease, box-shadow .15s ease, color .15s ease, transform .12s ease;
}
.spread-map-legend__heat:hover{ background:rgba(255,0,170,.2); }
.spread-map-legend__heat:active{ transform:scale(.97); }
.spread-map-legend__heat:focus-visible{ outline:2px solid #ff00aa; outline-offset:2px; }
.spread-map-legend__heat:not(.is-on){ opacity:.66; }
.spread-map-legend__heat.is-on{
  color:#fff;
  background:linear-gradient(92deg, rgba(0,255,255,.22), rgba(255,0,170,.30) 70%, rgba(255,255,0,.22));
  border-color:#ff00aa;
  box-shadow:0 0 14px rgba(255,0,170,.45), inset 0 0 8px rgba(255,255,255,.12);
}
.spread-map-legend__heatic{ filter:drop-shadow(0 0 6px #ff8a00); }
@media (max-width:560px){
  .spread-map-legend__heat span:not(.spread-map-legend__heatic){ display:none; }
}

/* ── Creator Impact Map: Top-Regions insight panel ─────────────────── */
.cim-regions{ margin-top:.85rem; }
.cim-regions:empty{ display:none; }
.cim-regions__title{
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.5rem; font-weight:700;
}
.cim-regions__row{
  display:grid; grid-template-columns:1.4rem minmax(5.5rem,10rem) 1fr 2.2rem;
  align-items:center; gap:.55rem; padding:.18rem 0;
}
.cim-regions__rank{
  font-weight:800; color:var(--muted); text-align:center; font-size:.8rem;
}
.cim-regions__lbl{
  font-weight:700; color:var(--c,#00ffff); font-size:.84rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow:0 0 8px color-mix(in srgb, var(--c,#00ffff) 55%, transparent);
}
.cim-regions__bar{
  height:.55rem; border-radius:999px; background:rgba(255,255,255,.07);
  overflow:hidden;
}
.cim-regions__fill{
  display:block; height:100%; border-radius:999px;
  background:var(--c,#00ffff);
  box-shadow:0 0 10px color-mix(in srgb, var(--c,#00ffff) 70%, transparent);
}
.cim-regions__n{ font-weight:800; text-align:right; font-size:.82rem; }
.cim-regions__hint{
  margin-top:.6rem; font-size:.78rem; color:var(--muted); line-height:1.4;
}
@media (max-width:560px){
  .cim-regions__row{ grid-template-columns:1.2rem minmax(4rem,7rem) 1fr 1.9rem; }
}

/* ===== Explore (/map) — dedicated full-screen live activity map ===== */
.explore{ max-width:1180px; margin:0 auto; padding:1.4rem 1rem 3rem; }
.explore__head{ text-align:center; margin:0 auto 1.2rem; max-width:760px; }
.explore__title{
  font-size:clamp(1.8rem,4vw,2.7rem); margin:.35rem 0 .5rem;
  text-shadow:0 0 18px rgba(0,255,255,.35), 0 0 34px rgba(255,0,170,.2);
}
.explore__sub{ font-size:.98rem; line-height:1.55; }
.explore-legend{
  display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center;
  margin:0 auto 1.1rem; max-width:820px;
}
.explore-grid{ display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); gap:1.1rem; align-items:start; }
.explore-mapwrap{ position:relative; }
.lf-map--xl{ height:620px; }
.explore-side{ position:sticky; top:.8rem; }
.explore-side__title{ margin:.1rem 0 .7rem; }
.explore-list{ max-height:600px; overflow-y:auto; padding-right:.25rem; }
.explore-list .pulse-row{ flex:0 0 auto; }
.explore-list::-webkit-scrollbar{ width:8px; }
.explore-list::-webkit-scrollbar-thumb{ background:rgba(0,255,255,.25); border-radius:6px; }
@media (max-width:900px){
  .explore-grid{ grid-template-columns:1fr; }
  .lf-map--xl{ height:460px; }
  .explore-side{ position:static; max-height:none; }
  .explore-list{ max-height:520px; }
}
@media (max-width:560px){
  .lf-map--xl{ height:380px; }
}

/* ===================================================================
   SPREAD-DEMO PARITY  ·  (v=neon14)
   Brings the spread-demo's clean, colourful neon language to the home:
   - evenly multi-coloured cyan -> violet -> magenta headline (readable)
   - demo-style stat cards (dark panel, coloured top accent, glow number)
   Append-only; wins by cascade order. CMYK brand kept + intensified.
   =================================================================== */

/* ---- Headline: crisp CMYK diagonal magenta->cyan->yellow like the screenshot.
   MUST keep !important on text-shadow/animation/filter — rule ~12839 sets a heavy
   magenta text-shadow + titleBeamPulse with !important; without !important here it
   paints through the transparent letters and the headline looks solid pink. ---- */
.hero.hnew-hero.hnew-hero--bleed h1.hnew-hero__title,
.hnew-hero.hnew-hero--bleed h1.hnew-hero__title,
.hnew-hero--bleed .hnew-hero__title{
  background: linear-gradient(
    135deg,
    #ff00aa 0%,
    #ff4dc4 13%,
    #00ffff 50%,
    #5ffbff 62%,
    #ffff00 100%
  ) !important;
  background-size: 100% 100% !important;
  background-position: 0% 50% !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 1px rgba(255,255,255,.12) !important;
  text-shadow: none !important;
  filter:
    drop-shadow(0 0 16px rgba(0,255,255,.30))
    drop-shadow(0 0 26px rgba(255,0,170,.24)) !important;
  animation: demoTitleGlow 6s ease-in-out infinite !important;
}
@keyframes demoTitleGlow{
  0%,100% { filter: drop-shadow(0 0 16px rgba(0,255,255,.30)) drop-shadow(0 0 26px rgba(255,0,170,.24)); }
  50%     { filter: drop-shadow(0 0 26px rgba(0,255,255,.45)) drop-shadow(0 0 40px rgba(255,0,170,.38)); }
}
/* keep the headline crisp — retire the heavy scan-sweep overlay */
.hnew-hero--bleed .hnew-hero__title::after{ opacity: 0 !important; animation: none !important; }
@media (prefers-reduced-motion: reduce){
  .hnew-hero--bleed .hnew-hero__title{
    animation: none !important;
    filter:
      drop-shadow(0 0 16px rgba(0,255,255,.30))
      drop-shadow(0 0 26px rgba(255,0,170,.24)) !important;
  }
}

/* ---- Stat strip -> demo-style stat cards ---- */
.trust-strip.trust-strip--open,
.trust-strip{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  max-width: 1040px;
  margin: 0 auto 2.8rem;
  padding: 0 1rem;
}
@media (max-width: 760px){
  .trust-strip.trust-strip--open,
  .trust-strip{ grid-template-columns: repeat(2, 1fr); }
}
.trust-strip .trust-stat{
  position: relative;
  text-align: center;
  padding: 1.4rem 1rem 1.25rem;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(20,20,28,.92), rgba(10,10,14,.92));
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
  overflow: hidden;
  gap: .35rem;
}
.trust-strip .trust-stat::before{
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--sc-accent, #00ffff);
  box-shadow: 0 0 14px var(--sc-accent, #00ffff), 0 0 30px var(--sc-glow, rgba(0,255,255,.5));
}
.trust-strip .trust-stat .ts-num{
  font-family: 'Orbitron', monospace;
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  letter-spacing: .01em;
  background: none;
  -webkit-text-fill-color: var(--sc-accent, #00ffff);
  color: var(--sc-accent, #00ffff);
  text-shadow: 0 0 18px var(--sc-glow, rgba(0,255,255,.55));
}
.trust-strip .trust-stat .ts-lbl{
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  color: rgba(255,255,255,.62);
}
.trust-strip .trust-stat:nth-child(1){ --sc-accent:#00ffff; --sc-glow:rgba(0,255,255,.5); }
.trust-strip .trust-stat:nth-child(2){ --sc-accent:#ff00aa; --sc-glow:rgba(255,0,170,.5); }
.trust-strip .trust-stat:nth-child(3){ --sc-accent:#8b5cf6; --sc-glow:rgba(139,92,246,.5); }
.trust-strip .trust-stat:nth-child(4){ --sc-accent:#ffff00; --sc-glow:rgba(255,255,0,.45); }

/* ---- Mobile anti-flicker: freeze the headline glow filter (preserves the
   earlier <=768px contract; animating `filter` on clipped text flickers on
   mobile GPUs). Keep the static gradient + a stable glow. ---- */
@media (max-width: 768px){
  .hero.hnew-hero.hnew-hero--bleed h1.hnew-hero__title,
  .hnew-hero.hnew-hero--bleed h1.hnew-hero__title,
  .hnew-hero--bleed .hnew-hero__title{
    animation: none !important;
    filter:
      drop-shadow(0 0 16px rgba(0,255,255,.30))
      drop-shadow(0 0 26px rgba(255,0,170,.24)) !important;
  }
}

/* ===================================================================
   HOME HERO · BACK-TO-ORIGIN  (v=neon16)
   User request: near-black background like the first landing version +
   centered "pyramid" layout (Dot on top, all copy centred — not a
   left column stretched). Append-only; wins by cascade order.
   =================================================================== */

/* ---- Near-black background: kill the CMY washes, keep a faint top glow ---- */
.hnew-hero.hnew-hero--bleed{
  background:
    radial-gradient(ellipse 46% 34% at 50% 6%, rgba(0,200,255,.12), transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(255,0,170,.06), transparent 72%),
    #040406 !important;

  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding-top: clamp(2.4rem, 5vw, 3.6rem) !important;
  padding-bottom: clamp(2.6rem, 5vw, 4rem) !important;
  min-height: auto !important;
  row-gap: clamp(1rem, 2.4vw, 1.6rem);
}
.hnew-hero.hnew-hero--bleed::before{ background: none !important; }
.hnew-hero.hnew-hero--bleed::after{ opacity: .08 !important; }
.hnew-hero--bleed .hnew-hero__orb{ opacity: .10 !important; }
.hnew-hero--bleed .hnew-hero__orb--y{ opacity: .05 !important; }
.hnew-hero--bleed .hnew-hero__cosmos{ opacity: .10 !important; }
.hnew-hero--bleed .hnew-hero__pulse{ opacity: .12 !important; }
.hnew-hero--bleed .hnew-hero__scan{ opacity: .20 !important; }
.hnew-hero--bleed .hnew-hero__grid{ opacity: .12 !important; }
.hnew-hero--bleed .hnew-hero__vignette{
  background: radial-gradient(ellipse at 50% 45%, transparent 52%, rgba(0,0,0,.9) 100%) !important;
}

/* ---- Centered pyramid: Dot on top, content below, scroll-hint last ---- */
.hnew-hero--bleed .hnew-hero__dot{
  order: 1;
  grid-area: auto !important;
  /* canonical home-bleed Dot SIZE lives in the block below (clamp 120-168) */
}
.hnew-hero--bleed .hnew-hero__content{
  order: 2;
  grid-area: auto !important;
  text-align: center !important;
  max-width: 880px !important;
  margin: 0 auto !important;
  padding-right: 0 !important;
  display: flex; flex-direction: column; align-items: center;
}
.hnew-hero--bleed .scroll-hint{ order: 3; }

.hnew-hero--bleed .hnew-hero__eyebrow{ margin-left: auto !important; margin-right: auto !important; position: relative; z-index: 2; }
.hnew-hero--bleed .hnew-hero__title{
  max-width: 22ch !important;
  margin: .2rem auto 1.2rem !important;
  text-align: center !important;
  font-size: clamp(2.4rem, 6.4vw, 4.8rem) !important;
  position: relative; z-index: 2;
}
.hnew-hero--bleed .hnew-hero__sub{
  margin: 0 auto .9rem !important;
  text-align: center !important;
  max-width: 660px;
}
.hnew-hero--bleed .hnew-hero__pitch{
  margin: 0 auto 1.6rem !important;
  text-align: center !important;
  max-width: 620px;
}
.hnew-hero--bleed .hnew-hero__badges{ justify-content: center !important; }
.hnew-hero--bleed .hnew-hero__live{ justify-content: center !important; margin: 0 auto 1.2rem !important; }
.hnew-hero--bleed .hnew-hero__cta{ justify-content: center !important; }

/* ---- Dot: BIG again + the copy overlaps its lower portion (user screenshot).
   Negative margin-bottom pulls the eyebrow + headline up INTO the dot; the copy
   keeps z-index:2 so the text sits in front of the dot. Background stays
   near-black + the headline keeps its CMYK gradient (unchanged). ---- */
.hnew-hero--bleed .hnew-hero__dot{
  width: clamp(300px, 34vw, 460px) !important;
  height: clamp(300px, 34vw, 460px) !important;
  margin: 0 auto clamp(-16rem, -14vw, -7rem) !important;
  position: relative; z-index: 1;
}
.hnew-hero--bleed .hnew-hero__dot .dot-mascot{
  width: 100% !important;
  height: 100% !important;
  box-shadow:
    0 0 60px rgba(0,255,255,.60),
    0 0 130px rgba(0,191,255,.40) !important;
}
.hnew-hero--bleed .hnew-hero__dot-halo{ inset: -48px !important; filter: blur(18px); }
.hnew-hero--bleed .hnew-hero__dot-ring{ inset: -22px !important; }

/* ===== Hero Dot = a "moon" rising from the TOP-RIGHT into the centered headline.
   The Dot is pulled out of the centered column and floated to the top-right
   corner; the content (eyebrow + headline + copy) is vertically centered so the
   glowing moon's lower-left edge reaches INTO the middle headline. The Dot stays
   BEHIND the copy (z-index 1 < content z-index 2) so the CMYK headline stays
   crisp + readable. Background near-black + gradient headline unchanged. ===== */
.hnew-hero.hnew-hero--bleed{
  position: relative;
  justify-content: center !important;
  min-height: min(80vh, 760px) !important;
  overflow: hidden;
}
.hnew-hero--bleed .hnew-hero__content{
  order: 0 !important;
  margin: 0 auto !important;
  position: relative;
  z-index: 2;
}
.hnew-hero--bleed .hnew-hero__dot{
  position: absolute !important;
  top: clamp(-3.5rem, -2vw, 1.5rem) !important;
  right: clamp(-4rem, 2vw, 5rem) !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  width: clamp(300px, 33vw, 500px) !important;
  height: clamp(300px, 33vw, 500px) !important;
  z-index: 1 !important;            /* behind the headline copy */
  pointer-events: none;
}
.hnew-hero--bleed .hnew-hero__dot-halo{ inset: -54px !important; filter: blur(20px); }
.hnew-hero--bleed .hnew-hero__dot-ring{ inset: -26px !important; }

@media (max-width: 768px){
  .hnew-hero.hnew-hero--bleed{
    min-height: auto !important;
    padding-top: clamp(8rem, 40vw, 14rem) !important;
    justify-content: flex-start !important;
  }
  .hnew-hero--bleed .hnew-hero__dot{
    top: clamp(-2.5rem, -5vw, 0rem) !important;
    right: clamp(-4rem, -8vw, -1rem) !important;
    width: clamp(190px, 56vw, 280px) !important;
    height: clamp(190px, 56vw, 280px) !important;
  }
}

/* ===== Spread detail · Location + Live-scan map polish =====
   1) Standort/Origin card gets a subtitle + a taller, glowier map.
   2) The live-scan "LETZTE SCANS" legend is forced BELOW the heatmap at every
      width (no more cramped right rail) and flows as a full-width responsive
      grid so every scan row is completely readable + reachable. ===== */
.sd-card__sub{
  margin: .2rem 0 0;
  color: var(--muted, #9fb0c4);
  font-size: .92rem;
  line-height: 1.45;
}

/* Standort map — more presence */
#pos-map.pos-map{
  height: clamp(300px, 40vw, 400px) !important;
  margin-top: 16px;
  border: 1px solid rgba(0,255,255,.30);
  box-shadow: 0 0 28px rgba(0,255,255,.16), inset 0 0 26px rgba(0,0,0,.5);
}

/* Live-scans: always stack (map on top, legend below) on the detail page */
#live-scans .live-grid{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.1rem !important;
}
#live-scans .live-map,
#live-scans .live-map-wrap{
  height: clamp(340px, 46vw, 480px) !important;
  min-height: clamp(340px, 46vw, 480px) !important;
}

/* Legend = full-width panel below the map, nothing clipped */
#live-scans .live-side{
  width: 100% !important;
  max-height: none !important;
  overflow: visible !important;
}
#live-scans .live-side-title{
  font-size: .92rem;
  margin-bottom: .85rem;
}
#live-scans .live-list{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: .65rem;
  overflow: visible !important;
  max-height: none !important;
}
#live-scans .live-list .ls-item{ margin-bottom: 0; }
#live-scans .live-list .ls-empty{ grid-column: 1 / -1; }
#live-scans .live-list .ls-who{ white-space: normal; }

/* ============================================================
   NFC artifact download + flyer 3-faces note  (append-only)
   ============================================================ */
.flyer-picker__sub{
  margin: -.2rem 0 1rem;
  font-size: .82rem;
  color: var(--muted, #b9a7c9);
  letter-spacing: .02em;
}
.nfc-artifact{
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-top: 1.1rem;
  padding: .85rem 1rem;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(135deg, rgba(255,0,170,.10), rgba(0,255,255,.08));
  border: 1px solid rgba(0,255,255,.30);
  box-shadow: 0 0 0 1px rgba(255,0,170,.12) inset, 0 0 18px rgba(0,255,255,.10);
  transition: transform .14s ease, box-shadow .2s ease, border-color .2s ease;
}
.nfc-artifact:hover{
  transform: translateY(-2px);
  border-color: rgba(0,255,255,.6);
  box-shadow: 0 0 0 1px rgba(255,0,170,.25) inset, 0 0 26px rgba(0,255,255,.22);
}
.nfc-artifact__icon{
  font-size: 1.5rem;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(255,255,0,.65));
}
.nfc-artifact__body{ display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.nfc-artifact__name{ font-weight: 800; letter-spacing: .02em; color: #00ffff; }
.nfc-artifact__desc{ font-size: .82rem; color: var(--muted, #c9b9d6); }
.nfc-artifact__btn{
  flex: 0 0 auto;
  padding: .5rem .85rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: .82rem;
  white-space: nowrap;
  color: #0a0a0a;
  background: linear-gradient(135deg, #00ffff, #ff00aa);
  box-shadow: 0 0 14px rgba(0,255,255,.4);
}
html[data-theme="light"] .nfc-artifact__desc,
html[data-theme="light"] .flyer-picker__sub{ color: #5a4a66; }

/* ============================================================
   Legal pages (About / AGB / Impressum) + disclaimer  (append-only)
   ============================================================ */
.legal{ max-width: 820px; line-height: 1.68; }
.legal p{ margin: .55rem 0; }
.legal .legal-lead{ font-size: 1.05rem; color: var(--text, #eae0f2); }
.legal-h{
  margin: 1.5rem 0 .4rem;
  font-size: 1.1rem;
  font-weight: 800;
  color: #00ffff;
  text-shadow: 0 0 10px rgba(0,255,255,.35);
}
.legal-updated{ font-size: .82rem; color: var(--muted, #b9a7c9); letter-spacing: .02em; }
.legal-list{ margin: .4rem 0 .4rem 1.1rem; padding: 0; }
.legal-list li{ margin: .3rem 0; }
.legal-list--check{ list-style: none; margin-left: 0; }
.legal-list--check li{ position: relative; padding-left: 1.5rem; }
.legal-list--check li::before{
  content: "✓"; position: absolute; left: 0; top: 0;
  color: #ffff00; font-weight: 900; text-shadow: 0 0 8px rgba(255,255,0,.5);
}
.legal-note{
  font-size: .9rem; color: var(--muted, #c9b9d6);
  border-left: 2px solid var(--magenta, #ff00aa); padding-left: .8rem;
}
.legal-seealso{ margin-top: 1.6rem; font-size: .9rem; }
.legal-seealso a{ color: #00ffff; }
.legal-fill p{ margin: .15rem 0; }
.disclaimer-box{
  margin: 1.2rem 0;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,0,170,.12), rgba(0,255,255,.06));
  border: 1px solid rgba(255,0,170,.45);
  box-shadow: 0 0 0 1px rgba(0,255,255,.12) inset, 0 0 22px rgba(255,0,170,.14);
}
.disclaimer-box h3{ margin: .35rem 0 .4rem; color: #ff66cc; font-size: 1.12rem; }
.disclaimer-box p{ margin: .35rem 0; }
.disclaimer-box__badge{
  display: inline-block;
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: .2rem .6rem; border-radius: 999px;
  color: #0a0a0a; background: linear-gradient(135deg, #ffff00, #ff00aa);
}
.disclaimer-box--hero{
  border-color: rgba(0,255,255,.55);
  box-shadow: 0 0 0 1px rgba(255,0,170,.2) inset, 0 0 30px rgba(0,255,255,.18);
}
.disclaimer-box--admin{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,0,.4);
  box-shadow: none;
}
.legal-fill{
  border: 1px dashed rgba(0,255,255,.4); border-radius: 10px;
  padding: .7rem .9rem; background: rgba(0,255,255,.04);
}
.footer-links{ display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin-top: .5rem; }
.footer-links a{ color: var(--muted, #b9a7c9); font-size: .85rem; text-decoration: none; }
.footer-links a:hover{ color: #00ffff; text-shadow: 0 0 8px rgba(0,255,255,.4); }
html[data-theme="light"] .legal .legal-lead{ color: #2a2030; }
html[data-theme="light"] .legal-note,
html[data-theme="light"] .footer-links a{ color: #5a4a66; }
html[data-theme="light"] .disclaimer-box h3{ color: #c01a7a; }

/* ============================================================
   Lively brand logo Dot — many cute poses (blink, grin, laugh,
   curious, perplexed, kiss). Driven by data-pose + .blink in dot.js.
   ============================================================ */
.brand-dot-mascot{ transition: transform .22s ease; }

/* transient blink — squish eyes to happy lines (overrides any pose) */
.brand-dot-mascot.blink .brand-dot-eye{ transform: scaleY(.14) !important; }
.brand-dot-mascot.blink .brand-dot-eye::after{ opacity: 0; }

/* cheerful hop on click / greet */
.brand-dot-mascot.happy-jump{ animation: brandDotHop .62s ease !important; }
@keyframes brandDotHop{
  0%,100%{ transform: translateY(0) scale(1); }
  28%    { transform: translateY(-6px) scale(1.10,.92); }
  55%    { transform: translateY(0) scale(.95,1.06); }
  78%    { transform: translateY(-2px) scale(1.02,.99); }
}

/* ---- grin: wide happy smile (the everyday default) ---- */
.brand-dot-mascot[data-pose="grin"] .brand-dot-smile{
  width: 15px; height: 8px; border-width: 2px;
}

/* ---- laugh: closed arc eyes + open joyful mouth ---- */
.brand-dot-mascot[data-pose="laugh"] .brand-dot-eye,
.brand-dot-mascot[data-pose="kiss"]  .brand-dot-eye{
  background: transparent; box-shadow: none;
  width: 6px; height: 4px;
  border: 1.6px solid #07142e; border-bottom: none;
  border-radius: 6px 6px 0 0;
}
.brand-dot-mascot[data-pose="laugh"] .brand-dot-eye::after,
.brand-dot-mascot[data-pose="kiss"]  .brand-dot-eye::after{ opacity: 0; }
.brand-dot-mascot[data-pose="laugh"] .brand-dot-smile{
  width: 13px; height: 8px;
  background: #07142e; border: none;
  border-radius: 3px 3px 11px 11px;
}

/* ---- curious: head tilt + pupils up + tiny o-mouth ---- */
.brand-dot-mascot[data-pose="curious"]{ animation: none; transform: rotate(-10deg) translateY(-1px); }
.brand-dot-mascot[data-pose="curious"] .brand-dot-eye::after{ top: 2%; }
.brand-dot-mascot[data-pose="curious"] .brand-dot-smile{
  width: 6px; height: 6px; border-radius: 50%;
  border: 1.6px solid #0a1a3a;
}

/* ---- perplex: tilt other way + one squinting eye + wavy mouth ---- */
.brand-dot-mascot[data-pose="perplex"]{ animation: none; transform: rotate(7deg); }
.brand-dot-mascot[data-pose="perplex"] .brand-dot-eye--l{ transform: scaleY(.45); }
.brand-dot-mascot[data-pose="perplex"] .brand-dot-smile{
  width: 8px; height: 3px; border: none;
  background: #0a1a3a; border-radius: 3px;
  transform: translateX(-50%) rotate(-11deg);
}

/* ---- kiss (rare & sweet): closed eyes + pink pucker + blush ---- */
.brand-dot-mascot[data-pose="kiss"] .brand-dot-smile{
  width: 6px; height: 6px; border: none; border-radius: 50%;
  background: #ff4db8;
  box-shadow: 0 0 5px #ff2da5, 0 0 10px rgba(255,45,165,.6);
}
.brand-dot-mascot[data-pose="kiss"]::before,
.brand-dot-mascot[data-pose="kiss"]::after{
  content:""; position:absolute; top: 50%;
  width: 5px; height: 3.5px; border-radius: 50%;
  background: rgba(255,90,170,.6); filter: blur(.5px); pointer-events:none;
}
.brand-dot-mascot[data-pose="kiss"]::before{ left: 8%; }
.brand-dot-mascot[data-pose="kiss"]::after { right: 8%; }

/* ---- happy: the sweet, "lieb" everyday face (gentle smile + soft blush) ---- */
.brand-dot-mascot[data-pose="happy"] .brand-dot-smile{
  width: 12px; height: 6px; border-width: 1.6px;
  border-radius: 0 0 12px 12px;
}
.brand-dot-mascot[data-pose="happy"]::before,
.brand-dot-mascot[data-pose="happy"]::after{
  content:""; position:absolute; top: 52%;
  width: 4px; height: 3px; border-radius: 50%;
  background: rgba(255,120,190,.4); filter: blur(.6px); pointer-events:none;
}
.brand-dot-mascot[data-pose="happy"]::before{ left: 9%; }
.brand-dot-mascot[data-pose="happy"]::after { right: 9%; }

/* reduced-motion: freeze the logo Dot completely (beats happy-jump !important) */
@media (prefers-reduced-motion: reduce){
  .brand-dot-mascot,
  .brand-dot-mascot.happy-jump,
  .brand-dot-mascot[data-pose]{ animation: none !important; transition: none !important; }
}

/* ── Round 2-inch sticker flyer tile (mirrors _layout_round PDF) ── */
.flyer-tile--round .flyer-tile__paper{
  width:90px; height:90px; border-radius:50%;
  flex-direction:column; align-items:center; justify-content:center;
  padding:0; gap:4px;
}
.flyer-tile--round .flyer-tile__paper::before{ inset:5px; border-radius:50%; }
.flyer-tile--round .flyer-tile__inner{ width:auto; gap:3px; }
.flyer-tile--round .flyer-tile__qr{ width:34px; height:34px; }

/* ── About-page welcome block ── */
.about-welcome{
  margin-bottom:1.4rem; padding-bottom:1.2rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* ── Live-map dark on-brand basemap (CartoDB dark_all) ── */
/* Replaces the old bright OpenTopoMap tiles on the home/Pulse/Explore live maps.
   A subtle dim + slight cool shift sinks the basemap behind the neon CMYK pins
   and heat field so they read as the foreground. */
.wikey-tile-dark{
  filter: brightness(.82) contrast(1.08) saturate(.9) hue-rotate(-6deg);
}
[data-theme="light"] .wikey-tile-dark{
  filter: brightness(.9) contrast(1.05) saturate(.95);
}

/* ============================================================
   Re-Spread zone (detail share block) — neon24
   ============================================================ */
.respread-zone{
  margin-top: 1.1rem;
  padding: 1rem;
  border: 1px solid rgba(255,221,0,.28);
  border-radius: 16px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255,0,170,.10), transparent 60%),
    radial-gradient(120% 140% at 0% 100%, rgba(0,255,255,.08), transparent 60%),
    rgba(12,12,16,.55);
  box-shadow: inset 0 0 24px rgba(255,221,0,.06);
}
.respread-zone__head{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
}
.respread-zone__title{
  font-weight:800; letter-spacing:.01em;
  color:#ffdd00; text-shadow:0 0 12px rgba(255,221,0,.45);
}
.respread-zone__count{
  font-size:.82rem; color:var(--muted, #9aa);
  background:rgba(0,0,0,.3); border-radius:999px; padding:.18rem .55rem;
}
.respread-zone__count b{ color:#fff; }
.respread-zone__promo{
  margin:.5rem 0 .85rem; font-size:.9rem; line-height:1.5;
  color:#d9dbe6;
}
.respread-zone__focus{
  display:grid; grid-template-columns:1fr; gap:.6rem;
}
@media (min-width:560px){
  .respread-zone__focus{ grid-template-columns:1fr 1fr; }
}
.respread-focus{
  display:flex; align-items:flex-start; gap:.7rem;
  padding:.8rem .85rem; border-radius:13px; text-decoration:none;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03);
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.respread-focus:hover{ transform:translateY(-2px); }
.respread-focus--flyer:hover{
  border-color:rgba(0,255,255,.6);
  box-shadow:0 8px 26px rgba(0,255,255,.18);
}
.respread-focus--target:hover{
  border-color:rgba(255,0,170,.6);
  box-shadow:0 8px 26px rgba(255,0,170,.2);
}
.respread-focus__ic{ font-size:1.5rem; line-height:1; flex:0 0 auto; }
.respread-focus__body{ display:flex; flex-direction:column; gap:.18rem; min-width:0; }
.respread-focus__name{ font-weight:700; color:#fff; }
.respread-focus__desc{ font-size:.78rem; color:#aeb2c2; line-height:1.4; }
.respread-zone__amplify{
  margin-top:.9rem; padding-top:.85rem;
  border-top:1px dashed rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem;
}
.respread-zone__amplify-hint{ flex:1 1 100%; margin:0 0 .2rem; font-size:.8rem; }
.respread-zone .respread-done-lbl{ font-size:.8rem; }
.respread-zone .respread-bonus-badge{ flex:1 1 100%; }

/* Derivative credit line on a re-spread's detail hero */
.sd-derivative{
  margin-top:.75rem; display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .75rem; border-radius:999px;
  background:rgba(255,0,170,.12); border:1px solid rgba(255,0,170,.32);
  font-size:.85rem; color:#ffd6ef;
}
.sd-derivative__ic{ font-size:1rem; }
.sd-derivative__txt a{ color:#ff7fd0; font-weight:700; text-decoration:none; }
.sd-derivative__txt a:hover{ text-decoration:underline; }

/* ============================================================
   Re-Spread origin banner (form respread mode)
   ============================================================ */
.respread-origin-banner{
  display:flex; align-items:center; gap:.85rem;
  max-width:760px; margin:0 auto 1.25rem;
  padding:.85rem 1rem; border-radius:14px;
  border:1px solid rgba(255,0,170,.34);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(255,0,170,.14), transparent 65%),
    rgba(14,12,18,.6);
}
.respread-origin-banner__ic{ font-size:1.6rem; flex:0 0 auto; }
.respread-origin-banner__body{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.respread-origin-banner__eyebrow{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:#ff7fd0;
}
.respread-origin-banner__title{
  font-weight:800; color:#fff; text-decoration:none; font-size:1.05rem;
}
.respread-origin-banner__title:hover{ text-decoration:underline; }
.respread-origin-banner__credit{ font-size:.8rem; color:#b9bdcc; }

/* ============================================================
   Target-area picker block (form)
   ============================================================ */
.snew-target-block{ margin-top:1.1rem; }
.snew-target-hint{ margin:.1rem 0 .7rem; font-size:.85rem; }
#target-map.snew-map{
  border-color:rgba(255,221,0,.28);
  box-shadow:inset 0 0 28px rgba(255,221,0,.07);
}

/* ============================================================
   Per-spread flyer page
   ============================================================ */
.flyerpage-hero__promo{
  max-width:680px; margin:.7rem auto 0; line-height:1.55; color:#d6d9e6;
}
.flyerpage-hero__eve{
  display:inline-block; margin-top:.85rem; padding:.4rem .9rem; border-radius:999px;
  background:rgba(255,221,0,.12); border:1px solid rgba(255,221,0,.34);
  color:#ffe680; font-size:.85rem; font-weight:600;
}
.flyerpage-grid{
  display:grid; grid-template-columns:1fr; gap:1.25rem;
  max-width:1100px; margin:1.5rem auto;
}
@media (min-width:880px){
  .flyerpage-grid{ grid-template-columns:320px 1fr; align-items:start; }
}
.flyerpage-qr{ padding:1.25rem; text-align:center; }
.flyerpage-qr__code img{
  width:100%; max-width:240px; border-radius:14px; background:#fff; padding:.5rem;
}
.flyerpage-qr__body .shortlink{
  display:inline-block; margin:.7rem 0 .3rem; font-weight:800; color:#00ffff;
  letter-spacing:.02em;
}
.flyerpage-qr__actions{
  display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-top:.8rem;
}
.flyerpage-foot{
  display:flex; flex-wrap:wrap; gap:.7rem; justify-content:space-between;
  max-width:1100px; margin:1.5rem auto 2.5rem;
}