/* ============================================================================
   THE MUSH REALM — "ELECTRIFY" theme layer
   Loaded AFTER style.css. Flips the light-content MycoWorld engine into a
   full dark neon-electric identity by (1) redefining the palette variables so
   every var()-driven surface/ink/line cascades dark, and (2) overriding the
   few hardcoded-light components + adding electric flourishes and the hero.
   Nothing here renames a class the JS engine relies on.
   ========================================================================== */

/* ---- fonts: add a heavy display face for the electric wordmark/headings ---- */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@600;700;800;900&display=swap');

/* ============================ PALETTE ==================================== */
:root{
  /* surfaces → deep violet-black cosmos */
  --bg:#08040f; --bg-2:#0e0722; --card:#17102e; --card-2:#1e1442; --well:#130c28;
  --cosmic:#0a0518; --cosmic-2:#150826; --cosmic-3:#1c0a30;
  /* ink → luminous lavender-white */
  --ink:#f4eeff; --ink-2:#cebff2; --ink-mut:#9b8fc4; --ink-soft:#6b5f92;
  /* lines → glowing violet hairlines */
  --line:rgba(163,120,255,.15); --line-2:rgba(163,120,255,.26); --line-3:rgba(163,120,255,.42);
  /* brand → electric neon */
  --blue:#22d3ee; --blue-2:#0ea5e9; --purple:#b06bff; --purple-2:#8b3dff;
  --magenta:#ff3ea5; --violet-lt:#cba6ff; --cyan:#22e0c8;
  --gold:#f5c044; --lime:#a3e635;
  --grad:linear-gradient(120deg,#a855f7 0%,#ff3ea5 100%);
  --grad-2:linear-gradient(120deg,#a855f7,#cba6ff);
  --grad-blue:linear-gradient(120deg,#8b5cf6 0%,#22d3ee 100%);
  --grad-hot:linear-gradient(95deg,#a855f7,#ff3ea5,#22d3ee);
  --grad-soft:linear-gradient(120deg,rgba(168,85,247,.16),rgba(34,224,200,.12));
  --ok:#22e0a0; --bad:#ff5470;
  /* legacy aliases used by some classes */
  --paper:var(--bg); --paper-2:var(--bg-2);
  --pine:var(--purple); --pine-2:var(--cosmic); --pine-lt:var(--violet-lt);
  --gold-2:var(--blue-2); --gold-wash:rgba(34,224,200,.1); --moss:var(--violet-lt);
  /* elevation → neon glows */
  --shadow-xs:0 1px 2px rgba(0,0,0,.5);
  --shadow:0 2px 10px rgba(0,0,0,.5),0 18px 44px rgba(0,0,0,.55);
  --shadow-md:0 6px 18px rgba(0,0,0,.5),0 20px 50px rgba(120,40,220,.22);
  --shadow-lg:0 12px 34px rgba(0,0,0,.55),0 40px 90px rgba(150,50,240,.28);
  --shadow-brand:0 8px 26px rgba(168,85,247,.5);
  --shadow-brand-lg:0 12px 40px rgba(255,62,165,.55);
  --glow:0 0 60px rgba(168,85,247,.45);
  --ring:0 0 0 3px rgba(168,85,247,.35);
  /* type */
  --display:'Unbounded','Space Grotesk',system-ui,sans-serif;
  --heavy:'Unbounded',system-ui,sans-serif;
}
:root{
  --card-grad:linear-gradient(180deg,#1e1442,#160f2c);
  --sheen:linear-gradient(155deg,rgba(203,166,255,.16),transparent 34%);
  --lift:0 20px 44px -22px rgba(0,0,0,.8);
}

/* ============================ GLOBAL BACKDROP ============================ */
html{background:#08040f}
body{
  background:
    radial-gradient(46% 40% at 12% 6%,rgba(168,85,247,.20),transparent 60%),
    radial-gradient(42% 38% at 88% 2%,rgba(255,62,165,.14),transparent 62%),
    radial-gradient(50% 46% at 50% 108%,rgba(34,211,238,.14),transparent 66%),
    #08040f;
  background-attachment:fixed;
}
/* fixed aurora + grid wash behind everything */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(38% 34% at 18% 24%,rgba(168,85,247,.16),transparent 70%),
    radial-gradient(36% 32% at 82% 30%,rgba(255,62,165,.10),transparent 70%),
    radial-gradient(40% 40% at 60% 88%,rgba(34,211,238,.10),transparent 72%);
  filter:blur(24px) saturate(1.4);
  animation:mrAur 18s ease-in-out infinite alternate;
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(163,120,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(163,120,255,.05) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 80% at 50% 0%,#000 20%,transparent 82%);
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000 20%,transparent 82%);
}
@keyframes mrAur{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(2%,1%,0) scale(1.08)}100%{transform:translate3d(-2%,-1%,0) scale(1.04)}}
::selection{background:rgba(255,62,165,.35);color:#fff}
a{color:var(--violet-lt)}

/* ============================ TYPE / HEADINGS =========================== */
h1,h2,h3{font-family:var(--heavy);letter-spacing:-.015em}
.grad-t{background:var(--grad-hot);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:mrSheen 4s linear infinite}
@keyframes mrSheen{to{background-position:220% 0}}
.eyebrow{color:var(--violet-lt);text-shadow:0 0 18px rgba(168,85,247,.5)}
.eyebrow::before{background:var(--grad-hot);box-shadow:0 0 10px rgba(255,62,165,.7)}

/* ============================ BUTTONS =================================== */
.btn{font-family:var(--heavy);font-weight:800;letter-spacing:.02em;
  background:var(--grad);background-size:180% 180%;
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,var(--shadow-brand),0 0 40px -6px rgba(255,62,165,.5)}
.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-130%);animation:mrShine 3.6s ease-in-out infinite}
@keyframes mrShine{55%,100%{transform:translateX(130%)}}
.btn:hover{box-shadow:0 0 0 1px rgba(255,255,255,.2) inset,var(--shadow-brand-lg),0 0 66px -4px rgba(168,85,247,.7)}
.btn.gold{background:linear-gradient(120deg,var(--gold),#ff6b35)}
.btn.ghost{color:#fff;border:1.6px solid var(--line-3);background:rgba(163,120,255,.06);backdrop-filter:blur(6px);box-shadow:none}
.btn.ghost::before{display:none}
.btn.ghost:hover{border-color:var(--purple);background:rgba(168,85,247,.16);color:#fff;box-shadow:0 0 30px -6px rgba(168,85,247,.6)}
/* headline CTA breathes */
.hero .cta .btn:not(.ghost),.band .btn:not(.ghost){animation:mrThrob 2.4s ease-in-out infinite}
@keyframes mrThrob{50%{box-shadow:0 0 0 1px rgba(255,255,255,.2) inset,var(--shadow-brand-lg),0 0 80px -2px rgba(255,62,165,.8)}}

/* ============================ HEADER ==================================== */
.hd{background:rgba(8,4,16,.72)}
.hd.scrolled{background:rgba(8,4,16,.94);box-shadow:0 10px 44px rgba(0,0,0,.6)}
.brand b{font-family:var(--heavy);font-weight:900;letter-spacing:.02em;
  background:var(--grad-hot);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:mrSheen 5s linear infinite;text-shadow:none}
.brand .m{background:#0a0518;box-shadow:0 0 26px rgba(168,85,247,.6),inset 0 0 0 1px rgba(203,166,255,.14)}
.brand .m svg{filter:drop-shadow(0 0 6px rgba(203,166,255,.9))}
.nav a{color:var(--ink-2)}
.nav a.on{background:rgba(168,85,247,.24)}
.icobtn{border-color:var(--line-2)!important}
.icobtn:hover{border-color:var(--purple)!important;box-shadow:0 0 20px -4px rgba(168,85,247,.6)}

/* ============================ PRODUCT CARDS ============================= */
.pcard{background:var(--card-grad);border:1px solid var(--line-2);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(203,166,255,.06);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.pcard::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:linear-gradient(120deg,transparent 40%,rgba(203,166,255,.08) 50%,transparent 60%);opacity:0;transition:opacity .3s}
.pcard:hover{transform:translateY(-6px);border-color:var(--purple);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.9),0 0 50px -8px rgba(168,85,247,.55)}
.pcard:hover::after{opacity:1}
.pcard .im{background:radial-gradient(120% 120% at 50% 0%,#1a1136,#0c0720)}
.pcard .im img{transition:transform .5s var(--ease)}
.pcard:hover .im img{transform:scale(1.07)}
.pcard .tag{background:var(--grad);box-shadow:0 0 20px -4px rgba(255,62,165,.7)}
.pcard .pr{background:var(--grad-hot);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.pcard .mchip{color:var(--ink-2);background:rgba(163,120,255,.08);border-color:var(--line-2)}
.pcard .qadd{background:var(--grad);box-shadow:0 0 20px -4px rgba(168,85,247,.7)}
.pcard h3 a{color:var(--ink)}

/* ============================ PANELS / INPUTS ========================== */
.panel,.facets{background:var(--card-grad);border:1px solid var(--line-2);box-shadow:var(--shadow)}
.input,select.input,textarea.input{background:#0e0824;border:1px solid var(--line-2);color:var(--ink)}
.input::placeholder{color:var(--ink-soft)}
.input:focus,select.input:focus,textarea.input:focus{border-color:var(--purple);background:#120a2a;box-shadow:var(--ring)}
select.input option{background:#140c2c;color:var(--ink)}

/* ============================ TRUSTBAR / BANDS ========================= */
.trustbar{background:rgba(20,12,44,.6)!important;border-color:var(--line)!important;backdrop-filter:blur(8px)}
.tb{color:var(--ink-2)}
.band{box-shadow:var(--shadow-lg),0 0 80px -20px rgba(168,85,247,.5)}
.band.gold{background:radial-gradient(680px 340px at 88% -10%,rgba(34,211,238,.42),transparent 60%),var(--cosmic-3)}
.sec.dark{background:transparent}

/* section rhythm: subtle neon divider above section heads */
.sec-head{position:relative}

/* ============================ NEON MARQUEE (.strip) ==================== */
.strip{background:linear-gradient(90deg,rgba(20,12,44,.9),rgba(28,10,48,.9));border-block:1px solid var(--line-2);position:relative;overflow:hidden}
.strip::before,.strip::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.strip::before{left:0;background:linear-gradient(90deg,#0a0518,transparent)}
.strip::after{right:0;background:linear-gradient(270deg,#0a0518,transparent)}
.strip .track *{color:var(--violet-lt)!important}

/* ============================ FOOTER =================================== */
.ft{background:linear-gradient(180deg,#0a0518,#0d0620)}
.ft a{color:var(--ink-2)}
.ft a:hover{color:var(--violet-lt)}

/* toast / cart popup already dark — nudge accent */
#toast{border-color:rgba(168,85,247,.5)!important}

/* =======================================================================
   ELECTRIC HERO SLIDESHOW  (index.html: <section class="mr-hero">)
   ===================================================================== */
.mr-hero{position:relative;width:100%;min-height:min(90vh,860px);overflow:hidden;
  background:#0a0518;color:#fff;isolation:isolate;font-family:var(--heavy);--mr-a:#a855f7;--mr-b:#ff3ea5;
  border-bottom:1px solid var(--line-2)}
.mr-hero *{box-sizing:border-box}
.mr-aurora{position:absolute;inset:-25%;z-index:0;filter:blur(60px) saturate(1.7);opacity:.9;
  background:
    radial-gradient(38% 45% at 18% 22%,color-mix(in srgb,var(--mr-a) 60%,transparent),transparent 70%),
    radial-gradient(42% 48% at 84% 18%,color-mix(in srgb,var(--mr-b) 50%,transparent),transparent 70%),
    radial-gradient(50% 55% at 55% 92%,rgba(59,15,110,.7),transparent 72%),
    radial-gradient(30% 35% at 40% 45%,rgba(34,211,238,.4),transparent 70%),
    linear-gradient(160deg,#12082a,#1b0a3c 50%,#26094a);
  animation:mrAurora 16s ease-in-out infinite alternate;transition:background 1.1s ease}
@keyframes mrAurora{0%{transform:rotate(-3deg) scale(1.06)}50%{transform:rotate(2deg) scale(1.2)}100%{transform:rotate(-2deg) scale(1.1)}}
.mr-bgimg{position:absolute;inset:-12%;z-index:0;background-size:cover;background-position:center;filter:blur(46px) saturate(2.2) brightness(.5);opacity:0;transform:scale(1.15);transition:opacity 1.4s ease}
.mr-bgimg.on{opacity:.55}
.mr-hero .mr-grid{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.22;
  background-image:linear-gradient(#ffffff14 1px,transparent 1px),linear-gradient(90deg,#ffffff14 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(75% 75% at 50% 45%,#000 30%,transparent 100%);-webkit-mask-image:radial-gradient(75% 75% at 50% 45%,#000 30%,transparent 100%)}
.mr-noise{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;background:repeating-linear-gradient(0deg,transparent 0 3px,#00000018 3px 4px);mix-blend-mode:overlay;animation:mrScan 9s linear infinite}
@keyframes mrScan{to{background-position:0 120px}}
.mr-spores{position:absolute;inset:0;z-index:2;pointer-events:none}
.mr-spore{position:absolute;bottom:-3%;border-radius:50%;background:var(--mr-a);box-shadow:0 0 12px 3px color-mix(in srgb,var(--mr-a) 75%,transparent);opacity:0;animation:mrRise linear infinite}
@keyframes mrRise{0%{transform:translateY(0) translateX(0) scale(.5);opacity:0}12%{opacity:.9}85%{opacity:.5}100%{transform:translateY(-105vh) translateX(var(--dx,40px)) scale(1.1);opacity:0}}
.mr-flash{position:absolute;inset:0;z-index:8;pointer-events:none;background:radial-gradient(60% 60% at 50% 42%,#fff,transparent 75%);opacity:0}
.mr-flash.zap{animation:mrZap .5s ease-out}
@keyframes mrZap{0%{opacity:0}12%{opacity:.5}100%{opacity:0}}
.mr-bolts{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0}
.mr-bolts.zap{animation:mrBolt .55s steps(2,jump-none)}
@keyframes mrBolt{0%{opacity:0}20%{opacity:1}45%{opacity:.2}65%{opacity:.9}100%{opacity:0}}
.mr-bolts svg{position:absolute;width:180px;height:auto;filter:drop-shadow(0 0 14px var(--mr-a)) drop-shadow(0 0 34px var(--mr-b))}

.mr-wrap{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:3rem;max-width:1200px;margin:0 auto;padding:5rem 22px 6rem;min-height:inherit}
.mr-copy{flex:1 1 52%;min-width:0}
.mr-kicker{display:inline-flex;align-items:center;gap:.6em;font-size:clamp(.66rem,1vw,.82rem);font-weight:600;letter-spacing:.32em;color:var(--mr-a);
  text-shadow:0 0 18px color-mix(in srgb,var(--mr-a) 80%,transparent);border:1px solid color-mix(in srgb,var(--mr-a) 45%,transparent);
  border-radius:999px;padding:.55em 1.2em;backdrop-filter:blur(6px);background:#ffffff0d;margin-bottom:1.4rem;animation:mrPulseB 2.6s ease-in-out infinite}
@keyframes mrPulseB{50%{box-shadow:0 0 24px color-mix(in srgb,var(--mr-a) 55%,transparent)}}
.mr-title{font-size:clamp(2.1rem,5.4vw,4.6rem);font-weight:900;line-height:1.03;letter-spacing:-.01em;margin:0 0 1.2rem;text-transform:uppercase;text-wrap:balance;color:#fff;text-shadow:0 4px 40px #000c}
.mr-title em{font-style:normal;background:linear-gradient(92deg,var(--mr-a),var(--mr-b),var(--mr-a));background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:mrSheen 3.2s linear infinite;filter:drop-shadow(0 0 22px color-mix(in srgb,var(--mr-b) 60%,transparent))}
.mr-sub{font-family:var(--sans);font-size:clamp(1rem,1.5vw,1.22rem);font-weight:500;color:#e9defc;max-width:34ch;line-height:1.55;margin:0 0 2.2rem;text-shadow:0 2px 18px #0009}
.mr-ctas{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.mr-stage{flex:0 1 44%;display:flex;align-items:center;justify-content:center;position:relative;min-width:0}
.mr-orb{position:relative;width:min(34vw,440px);aspect-ratio:1;border-radius:50%;animation:mrFloat 7s ease-in-out infinite}
@keyframes mrFloat{50%{transform:translateY(-16px) rotate(1.2deg)}}
.mr-orb::before{content:"";position:absolute;inset:-7%;border-radius:50%;background:conic-gradient(from 0deg,var(--mr-a),var(--mr-b),#22d3ee,var(--mr-a));filter:blur(18px);opacity:.9;animation:mrSpin 6s linear infinite}
.mr-orb::after{content:"";position:absolute;inset:-2.5%;border-radius:50%;border:2px dashed color-mix(in srgb,var(--mr-a) 70%,#fff);opacity:.7;animation:mrSpin 24s linear infinite reverse}
@keyframes mrSpin{to{transform:rotate(360deg)}}
.mr-orb-ring{position:absolute;inset:-16%;border-radius:50%;border:1px solid #ffffff2a;animation:mrSpin 40s linear infinite}
.mr-orb-ring i{position:absolute;top:-5px;left:50%;width:10px;height:10px;border-radius:50%;background:var(--mr-b);box-shadow:0 0 16px 4px var(--mr-b)}
.mr-slides{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:#0b0318;box-shadow:0 30px 90px -20px #000e,0 0 90px -10px color-mix(in srgb,var(--mr-a) 55%,transparent)}
.mr-slide{position:absolute;inset:0;opacity:0;transform:scale(1.14) rotate(2deg);transition:opacity 1.1s ease,transform 6.5s linear;background-size:cover;background-position:center}
.mr-slide.on{opacity:1;transform:scale(1.02) rotate(0deg)}
.mr-orb-label{position:absolute;left:50%;bottom:-1.1rem;transform:translateX(-50%);z-index:3;font-size:.62rem;font-weight:800;letter-spacing:.28em;white-space:nowrap;padding:.7em 1.5em;border-radius:999px;color:#16062e;background:linear-gradient(95deg,#fff,color-mix(in srgb,var(--mr-a) 40%,#fff));box-shadow:0 8px 30px -8px var(--mr-a)}
.mr-arrow{position:absolute;top:50%;z-index:9;transform:translateY(-50%);width:50px;height:50px;border-radius:50%;border:1px solid #ffffff3d;background:#ffffff12;backdrop-filter:blur(8px);color:#fff;font-size:1.3rem;line-height:1;cursor:pointer;transition:.25s;display:grid;place-items:center}
.mr-arrow:hover{background:var(--mr-a);color:#16062e;box-shadow:0 0 30px var(--mr-a)}
.mr-prev{left:1rem}.mr-next{right:1rem}
.mr-dots{position:absolute;left:50%;bottom:3.9rem;transform:translateX(-50%);z-index:9;display:flex;gap:.9rem}
.mr-dot{width:42px;height:6px;border-radius:99px;border:0;padding:0;cursor:pointer;background:#ffffff2e;overflow:hidden;position:relative}
.mr-dot i{position:absolute;inset:0;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--mr-a),var(--mr-b));border-radius:99px}
.mr-dot.on i{animation:mrFill var(--mr-dur,5000ms) linear forwards}
@keyframes mrFill{to{transform:scaleX(1)}}
.mr-marquee{position:absolute;left:0;right:0;bottom:0;z-index:9;overflow:hidden;border-top:1px solid #ffffff24;background:#0c041cd9;backdrop-filter:blur(10px);padding:.8rem 0}
.mr-track{display:flex;width:max-content;animation:mrTicker 26s linear infinite}
.mr-marquee:hover .mr-track{animation-play-state:paused}
@keyframes mrTicker{to{transform:translateX(-50%)}}
.mr-track span{font-size:.72rem;font-weight:800;letter-spacing:.3em;white-space:nowrap;padding:0 1.6rem;background:linear-gradient(92deg,var(--mr-a),var(--mr-b));-webkit-background-clip:text;background-clip:text;color:transparent}

@media(max-width:900px){
  .mr-wrap{flex-direction:column-reverse;justify-content:center;text-align:center;gap:2.2rem;padding:3.2rem 22px 6.5rem}
  .mr-copy{flex:0 0 auto}.mr-sub{margin-inline:auto}.mr-ctas{justify-content:center}
  .mr-orb{width:min(66vw,300px)}
  .mr-arrow{display:none}
}
@media(prefers-reduced-motion:reduce){
  .mr-hero *,.mr-hero *::before,.mr-hero *::after,body::before{animation:none!important;transition:opacity .4s ease!important}
}

/* ============================================================================
   VIP EMAIL POPUP (.mr-vip) — themushrealm.com list capture, 15% off
   ==========================================================================*/
.mr-vip{position:fixed;inset:0;z-index:800;display:flex;align-items:center;justify-content:center;padding:20px}
body.mrv-lock{overflow:hidden}
.mrv-scrim{position:absolute;inset:0;background:rgba(6,3,14,.72);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);animation:mrvFade .4s ease}
.mrv-box{position:relative;width:100%;max-width:430px;background:radial-gradient(120% 80% at 50% -10%,rgba(168,85,247,.24),transparent 60%),#0f0823;border:1px solid rgba(139,61,255,.5);border-radius:24px;padding:30px 28px 24px;text-align:center;box-shadow:0 40px 120px -24px rgba(0,0,0,.85),0 0 70px -18px rgba(168,85,247,.6);animation:mrvRise .5s cubic-bezier(.2,.9,.25,1);overflow:hidden}
.mrv-box::before{content:"";position:absolute;inset:0;border-radius:24px;padding:1px;background:linear-gradient(120deg,#a855f7,#ff3ea5,#22d3ee);-webkit-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}
.mrv-spark{position:absolute;inset:0;pointer-events:none;background:radial-gradient(1.5px 1.5px at 18% 22%,rgba(255,255,255,.7),transparent),radial-gradient(1.5px 1.5px at 82% 30%,rgba(185,139,255,.8),transparent),radial-gradient(1px 1px at 70% 78%,rgba(34,224,200,.8),transparent),radial-gradient(1px 1px at 30% 82%,rgba(255,255,255,.6),transparent);opacity:.9}
.mrv-x{position:absolute;top:12px;right:12px;z-index:3;width:32px;height:32px;border-radius:50%;border:1px solid rgba(203,166,255,.28);background:rgba(20,12,40,.7);color:var(--violet-lt);font-size:19px;line-height:1;cursor:pointer;transition:transform .2s,background .2s}
.mrv-x:hover{transform:rotate(90deg);background:rgba(139,61,255,.3)}
.mrv-crest{position:relative;z-index:2;width:88px;height:88px;margin:2px auto 14px;border-radius:50%;background:center/cover no-repeat #0b0318;box-shadow:0 0 0 1px rgba(139,61,255,.5),0 12px 40px -8px rgba(168,85,247,.7)}
.mrv-eyebrow{position:relative;z-index:2;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.26em;color:var(--violet-lt);text-transform:uppercase;margin-bottom:8px}
.mrv-h{position:relative;z-index:2;font-size:clamp(1.7rem,6vw,2.15rem);line-height:1.04;font-weight:800;letter-spacing:-.01em;color:var(--ink);margin:0 0 10px}
.mrv-sub{position:relative;z-index:2;font-size:14px;line-height:1.55;color:var(--ink-mut);margin:0 auto 18px;max-width:340px}
.mrv-form{position:relative;z-index:2;display:flex;flex-direction:column;gap:10px}
.mrv-form input{width:100%;background:rgba(10,6,22,.85);border:1px solid rgba(139,61,255,.4);border-radius:12px;padding:14px 16px;color:var(--ink);font-size:15px;text-align:center;transition:border-color .2s,box-shadow .2s;outline:none}
.mrv-form input::placeholder{color:var(--ink-soft)}
.mrv-form input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(34,224,200,.18)}
.mrv-form .btn{width:100%;padding:15px;font-size:15px}
.mrv-err{position:relative;z-index:2;min-height:16px;font-size:12.5px;color:#ff7ba7;margin-top:2px}
.mrv-fine{position:relative;z-index:2;font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;color:var(--ink-soft);margin-top:14px;line-height:1.5}
/* success state */
.mrv-code{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:10px;margin:6px auto 12px;max-width:300px}
.mrv-code b{flex:1;font-family:var(--mono);font-size:23px;font-weight:800;letter-spacing:.2em;color:#08040f;background:linear-gradient(95deg,#fff,#e9d9ff);border:1px dashed #8b3dff;border-radius:12px;padding:13px 8px}
.mrv-copy{border:0;border-radius:10px;padding:13px 16px;background:var(--grad-hot);background-size:200% 100%;color:#fff;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap}
.mrv-copy.done{background:var(--cyan);color:#062}
@keyframes mrvFade{from{opacity:0}to{opacity:1}}
@keyframes mrvRise{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
@media(max-width:480px){.mrv-box{padding:26px 20px 20px;border-radius:20px}.mrv-crest{width:76px;height:76px}}