/* MXEL v2 theme (2026-11-04): purple + lime from the logo. Loaded after Tailwind on every public page.
   Tailwind tokens were also changed per page: primary #8B6CFF, secondary #9F86FF, dark-bg #0B0B10, dark-card #171722. */
:root{
  --mx-violet:#8B6CFF; --mx-violet-2:#B79BFF; --mx-violet-deep:#5A3F96;
  --mx-lime:#D6E36A; --mx-lime-h:#E3EE84;
  --mx-grad:linear-gradient(100deg,#8B6CFF 0%,#B79BFF 45%,#D6E36A 100%);
  --mx-bg:#0B0B10; --mx-bg2:#12121A; --mx-card:#171722; --mx-line:#2A2A3A;
  --mx-text:#F3F3F7; --mx-muted:#A6A6B8; --mx-dim:#7C7C90;
  --mx-head:"Space Grotesk",Inter,system-ui,sans-serif;
  --mx-body:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---------- Base ---------- */
html{background:var(--mx-bg)}
body{background-color:var(--mx-bg)!important;color:var(--mx-text);font-family:var(--mx-body)}
h1,h2,h3,.font-serif,.font-display{font-family:var(--mx-head)!important;letter-spacing:-.02em}
::selection{background:rgba(139,108,255,.45);color:#fff}
*:focus-visible{outline:2px solid var(--mx-lime)!important;outline-offset:2px}

/* ---------- Tailwind class re-skin ---------- */
.text-primary{color:#A68CFF!important}
.text-secondary{color:var(--mx-lime)!important}
.bg-dark-bg{background-color:var(--mx-bg)!important}
.bg-dark-card,.dark .dark\:bg-dark-card{background-color:var(--mx-card)!important}
.dark .dark\:bg-dark-bg{background-color:var(--mx-bg)!important}
.dark .dark\:border-gray-800,.dark .dark\:border-gray-700{border-color:var(--mx-line)!important}

/* Gradient text -> logo gradient */
.bg-clip-text[class*="from-"],.gradient-text{
  background-image:var(--mx-grad)!important;-webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent;color:transparent!important;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* Gradient / solid colour blocks that are not buttons -> purple */
.gradient-bg:not(a):not(button){background:linear-gradient(135deg,var(--mx-violet),var(--mx-violet-deep))!important}

/* Main buttons -> lime pill with dark text */
a.bg-primary,button.bg-primary,input.bg-primary,
a.gradient-bg,button.gradient-bg,
a[class*="from-primary"]:not(.bg-clip-text),button[class*="from-primary"]:not(.bg-clip-text),
a[class*="from-secondary"]:not(.bg-clip-text),button[class*="from-secondary"]:not(.bg-clip-text),
a[class*="from-[#8B6CFF]"]:not(.bg-clip-text),button[class*="from-[#8B6CFF]"]:not(.bg-clip-text),
.mx-btn-primary{
  background:var(--mx-lime)!important;color:#14140C!important;border-radius:999px!important;
  box-shadow:none!important;border-color:transparent!important;font-weight:600}
a.bg-primary:hover,button.bg-primary:hover,a.gradient-bg:hover,button.gradient-bg:hover,
a[class*="from-primary"]:not(.bg-clip-text):hover,button[class*="from-primary"]:not(.bg-clip-text):hover,
a[class*="from-secondary"]:not(.bg-clip-text):hover,button[class*="from-secondary"]:not(.bg-clip-text):hover,
a[class*="from-[#8B6CFF]"]:not(.bg-clip-text):hover,button[class*="from-[#8B6CFF]"]:not(.bg-clip-text):hover,
.mx-btn-primary:hover{background:var(--mx-lime-h)!important}
a.bg-primary *,button.bg-primary *,a[class*="from-primary"]:not(.bg-clip-text) *,button[class*="from-primary"]:not(.bg-clip-text) *{color:inherit}
button[disabled].bg-primary,button[disabled][class*="from-primary"]{opacity:.5}

/* Outline buttons */
a.border-primary,button.border-primary{border-color:var(--mx-violet)!important;border-radius:999px}

/* Glow + scrollbar from main.css */
.neon-glow{box-shadow:0 0 22px rgba(139,108,255,.45)!important}
.neon-glow:hover{box-shadow:0 0 32px rgba(139,108,255,.7)!important}
::-webkit-scrollbar-track{background:var(--mx-bg)}
::-webkit-scrollbar-thumb{background:#3A3560;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:var(--mx-violet)}
.spinner{border-color:rgba(139,108,255,.15)!important;border-top-color:var(--mx-violet)!important}

/* ---------- Shared header ---------- */
.mx-header{position:fixed;top:0;left:0;right:0;z-index:50;height:72px;background:rgba(11,11,16,.86);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--mx-line);font-family:var(--mx-body)}
.mx-header.is-scrolled{box-shadow:0 8px 30px rgba(0,0,0,.35)}
.mx-wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.mx-nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.mx-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--mx-text)!important;
  font-family:var(--mx-head);font-weight:700;font-size:20px}
.mx-brand img{width:38px;height:auto}
.mx-menu{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.mx-menu a{text-decoration:none;color:var(--mx-muted);font-weight:500;font-size:15px}
.mx-menu a:hover,.mx-menu a.is-active{color:var(--mx-text)}
.mx-menu a.is-active{box-shadow:inset 0 -2px 0 var(--mx-lime);padding-bottom:4px}
.mx-right{display:flex;align-items:center;gap:10px}
#auth-container{display:flex;align-items:center;gap:10px}
.mx-login{text-decoration:none;color:var(--mx-text)!important;font-weight:500;font-size:15px;padding:9px 12px}
.mx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border-radius:999px;
  font-weight:600;text-decoration:none;font-size:16px;line-height:1.2;white-space:nowrap;cursor:pointer;border:0;
  transition:transform .15s ease,background .15s ease}
.mx-btn:hover{transform:translateY(-1px)}
.mx-btn-sm{padding:9px 18px;font-size:14px}
.mx-btn-secondary{background:transparent;color:var(--mx-text)!important;border:1.5px solid #4A4A60}
.mx-btn-secondary:hover{border-color:var(--mx-violet);background:rgba(139,108,255,.08)}
.mx-burger{display:none;background:transparent;color:var(--mx-text);border:1px solid var(--mx-line);border-radius:10px;
  padding:8px 12px;font-size:14px;font-weight:600;cursor:pointer;font-family:var(--mx-body)}
.mx-mobile-login{display:none}
.mx-sheet{position:absolute;right:16px;top:66px;width:260px;max-height:calc(100vh - 90px);overflow-y:auto;
  background:var(--mx-card);border:1px solid var(--mx-line);border-radius:14px;padding:8px;display:flex;flex-direction:column;
  box-shadow:0 24px 60px rgba(0,0,0,.5)}
.mx-sheet.hidden{display:none!important}
.mx-sheet a,.mx-sheet button{display:block;width:100%;text-align:left;padding:11px 14px;text-decoration:none;border-radius:10px;
  color:var(--mx-text);font-size:15px;background:transparent;border:0;cursor:pointer;font-family:var(--mx-body)}
.mx-sheet a:hover,.mx-sheet button:hover{background:var(--mx-bg2)}
.mx-sheet .mx-sheet-label{padding:12px 14px 4px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mx-dim)}
.mx-sheet hr{border:0;border-top:1px solid var(--mx-line);margin:6px 0}
.mx-sheet .mx-btn{margin-top:6px;text-align:center;justify-content:center}
.mx-sheet .hidden{display:none!important}
.mx-spacer{height:72px}

/* Logged-in account menu */
.mx-acct{position:relative}
.mx-acct-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:var(--mx-card);
  border:1px solid var(--mx-line);color:var(--mx-text);font-weight:600;font-size:14px;cursor:pointer;font-family:var(--mx-body)}
.mx-dot{width:8px;height:8px;border-radius:50%;background:var(--mx-lime);display:inline-block}
.mx-acct-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:210px;background:var(--mx-card);border:1px solid var(--mx-line);
  border-radius:12px;padding:6px;opacity:0;visibility:hidden;transition:opacity .15s;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.mx-acct:hover .mx-acct-menu,.mx-acct:focus-within .mx-acct-menu{opacity:1;visibility:visible}
.mx-acct-menu a,.mx-acct-menu button{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:8px;background:transparent;
  border:0;color:var(--mx-text);text-decoration:none;font-size:14px;cursor:pointer;font-family:var(--mx-body)}
.mx-acct-menu a:hover,.mx-acct-menu button:hover{background:var(--mx-bg2)}
.mx-acct-menu small{display:block;color:var(--mx-dim);font-size:12px}

/* Early-access notice (in page flow, never covers content) */
.mx-notice{position:relative;border-bottom:1px solid var(--mx-line);background:var(--mx-bg2);font-family:var(--mx-body)}
.mx-notice p{margin:0 auto;max-width:1180px;padding:10px 48px 10px 20px;font-size:14px;line-height:1.5;color:var(--mx-muted);text-align:center}
.mx-notice strong{color:var(--mx-text)}
.mx-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:6px;
  border:1px solid var(--mx-lime);color:var(--mx-lime);margin-right:8px;vertical-align:1px}
.mx-notice-x{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:transparent;border:0;color:var(--mx-muted);
  font-size:20px;line-height:1;cursor:pointer;padding:4px 8px}
.mx-notice-x:hover{color:var(--mx-text)}

/* ---------- Shared footer ---------- */
.mx-footer{border-top:1px solid var(--mx-line);padding:48px 0 28px;font-size:14px;margin-top:80px;background:var(--mx-bg);
  font-family:var(--mx-body);color:var(--mx-text)}
.mx-fgrid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px}
.mx-fgrid h4{font-family:var(--mx-body);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mx-dim);margin:0 0 12px}
.mx-fgrid ul{list-style:none;display:grid;gap:8px;margin:0;padding:0}
.mx-fgrid a{color:var(--mx-muted);text-decoration:none}
.mx-fgrid a:hover{color:var(--mx-text)}
.mx-fgrid p{color:var(--mx-muted);margin:12px 0 0;max-width:300px;line-height:1.6}
.mx-legal{margin-top:36px;padding-top:20px;border-top:1px solid var(--mx-line);color:var(--mx-dim);font-size:12px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.mx-legal a{color:var(--mx-dim);text-decoration:none}
.mx-legal a:hover{color:var(--mx-text)}

@media (max-width:980px){.mx-fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:860px){
  .mx-menu,#auth-container{display:none}
  .mx-burger,.mx-mobile-login{display:inline-flex}
}
@media (max-width:420px){.mx-brand span{display:none}}