/* Exoticz brand v2 — gem wordmark palette: deep purple / violet / amethyst / acid lime / black. Loaded last. */
:root { --b-deep: #2A0A4A; --b-violet: #7B3FE4; --b-ame: #B58CFF; --b-lime: #9BE22D; --b-lime-d: #6FCF1F; --b-black: #0B0612; --b-plum: #160828; }

/* ---------- shared textures ---------- */
.exz-waves .b1 { background: radial-gradient(closest-side, rgba(123,63,228,.95), rgba(123,63,228,0)) !important; }
.exz-waves .b2 { background: radial-gradient(closest-side, rgba(155,226,45,.75), rgba(155,226,45,0)) !important; --o: .26 !important; }
.exz-waves .b3 { background: radial-gradient(closest-side, rgba(181,140,255,.9), rgba(181,140,255,0)) !important; }
.exz-waves .b4 { background: radial-gradient(closest-side, rgba(42,10,74,.9), rgba(42,10,74,0)) !important; --o: .5 !important; }
.exz-waves .b5 { background: radial-gradient(closest-side, rgba(111,207,31,.7), rgba(111,207,31,0)) !important; --o: .22 !important; }
/* purple smoke + sparkles */
.exz-waves::before { content: ""; position: absolute; inset: -20%; opacity: .55; animation: exz-smoke 60s linear infinite alternate;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='.006 .012' numOctaves='4' seed='7'/><feColorMatrix values='0 0 0 0 .48  0 0 0 0 .25  0 0 0 0 .89  0 0 0 1.4 -.55'/></filter><rect width='100%' height='100%' filter='url(%23s)'/></svg>");
  background-size: 900px 900px; }
@keyframes exz-smoke { to { transform: translate(-6%, -4%) scale(1.08); } }
.exz-sparkle { position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(1.6px 1.6px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 68% 32%, #E9FFC9 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 40% 72%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 84% 80%, #D9C4FF 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 24% 54%, #C7F08A 50%, transparent 51%), radial-gradient(1.1px 1.1px at 92% 12%, #fff 50%, transparent 51%);
  background-size: 420px 380px; animation: exz-twinkle 4.5s ease-in-out infinite alternate; }
@keyframes exz-twinkle { from { opacity: .35; } to { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .exz-waves::before, .exz-sparkle { animation: none !important; } }

/* ================= CUSTOMER ================= */
html:has(body.customer.cx) { background: linear-gradient(172deg, #2A0A4A 0%, #160828 42%, #0B0612 100%) fixed #0B0612; }
body.customer.cx .exz-waves i { mix-blend-mode: screen; }
body.customer.cx .exz-waves .b4 { mix-blend-mode: normal; }
body.customer.cx .exz-waves::after { mix-blend-mode: overlay; opacity: .14; }
/* nav */
body.customer.cx .site-nav { background: transparent !important; }
body.customer.cx .site-nav-inner { background: rgba(16, 6, 30, .82) !important; border: 1px solid rgba(181,140,255,.22) !important; box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(155,226,45,.06) !important; }
body.customer.cx .nav-brand { display: inline-flex; align-items: center; gap: 8px; }
body.customer.cx .cx-logo { height: 44px; width: auto; display: block; filter: drop-shadow(0 0 8px rgba(155,226,45,.25)); }
body.customer.cx .cx-sf { font: 800 .72rem/1 var(--exz-display, sans-serif); color: var(--b-black); background: var(--b-lime); border-radius: 999px; padding: 5px 8px; letter-spacing: .04em; }
body.customer.cx .site-nav .nav-links a { color: #E9DEFF !important; }
body.customer.cx .site-nav .nav-links a:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }
body.customer.cx .site-nav .nav-links a[aria-current="page"] { background: var(--b-lime) !important; color: var(--b-black) !important; font-weight: 700; }
body.customer.cx .site-nav-inner::after { color: var(--b-ame) !important; }
body.customer.cx .cx-inst-nav { background: rgba(255,255,255,.08) !important; color: #fff !important; }
@media (max-width: 699px) {
  body.customer.cx .cx-logo { height: 38px; }
  body.customer.cx .site-nav .nav-links { background: rgba(11,6,18,.94) !important; border: 1px solid rgba(181,140,255,.22); }
}
/* ticker */
body.customer.cx .ticker, body.customer.cx .ticker * { color: #D9C4FF !important; }
body.customer.cx .ticker b, body.customer.cx .ticker strong, body.customer.cx .ticker em { color: var(--b-lime) !important; }
/* hero video frame */
body.customer.cx .exz-hero-video { border: 1px solid rgba(155,226,45,.28) !important; box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 0 40px rgba(123,63,228,.25) !important; }
/* home hero text sits on the dark page */
body.customer.cx .cx-hero-logo { display: block; width: min(100%, 520px); height: auto; margin: 4px 0 6px -6px; filter: drop-shadow(0 6px 22px rgba(123,63,228,.45)) drop-shadow(0 0 10px rgba(155,226,45,.25)); }
body.customer.cx .home-hero .home-title { color: #fff !important; font-size: clamp(1.5rem, 3.4vw, 2.2rem) !important; }
body.customer.cx .home-hero .home-sub { color: var(--b-lime) !important; }
body.customer.cx .home-hero .biz-type { background: rgba(155,226,45,.12) !important; color: var(--b-lime) !important; border: 1px solid rgba(155,226,45,.35) !important; }
body.customer.cx .home-hero .muted { color: #D9C4FF !important; }
body.customer.cx .btn.primary, body.customer.cx .home-hero .action-row a.primary, body.customer.cx .action-row .btn:first-child { background: var(--b-lime) !important; color: var(--b-black) !important; border: 0 !important; }
body.customer.cx .btn.primary img, body.customer.cx .action-row .btn:first-child img { filter: brightness(0) !important; }
/* dark / light alternating cards */
body.customer.cx .cx-cta, body.customer.cx .promo-hero, body.customer.cx .cx-install {
  background: radial-gradient(120% 90% at 85% 0%, rgba(123,63,228,.55), transparent 60%), linear-gradient(160deg, #2A0A4A, #0B0612) !important;
  color: #fff !important; border: 1px solid rgba(181,140,255,.22) !important; }
body.customer.cx .cx-install .exz-inst-txt b { color: #fff; } body.customer.cx .cx-install .exz-inst-txt span { color: #D9C4FF; }
body.customer.cx .cx-install .exz-inst-btn { background: var(--b-lime); color: var(--b-black); }
body.customer.cx .card:not(.cx-cta):not(.promo-hero):not(.cx-install) { box-shadow: 0 14px 40px rgba(0,0,0,.28) !important; }
/* footer on dark */
body.customer.cx .site-foot { background: transparent !important; color: #CDB4FF !important; border: 0 !important; box-shadow: none !important; }
body.customer.cx .site-foot a { color: #fff !important; }
body.customer.cx .site-foot img { filter: brightness(0) invert(1) !important; opacity: .85; }
body.customer.cx .site-foot .legal, body.customer.cx .music-credit, body.customer.cx .music-credit a { color: #B9A6DA !important; }
/* STAFF button */
body.customer.cx .cx-staff-btn { background: linear-gradient(120deg, #2A0A4A 0%, #5A23B8 45%, #7B3FE4 100%) !important; animation: none !important; border: 2px solid var(--b-lime); box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 22px rgba(155,226,45,.35) !important; }
body.customer.cx .cx-staff-ic { background: var(--b-lime) !important; color: var(--b-black) !important; }
body.customer.cx .cx-staff-t { color: #fff; }
/* music dock on dark */
body.customer.cx .music-toggle { box-shadow: 0 0 0 1px rgba(181,140,255,.3), 0 10px 30px rgba(0,0,0,.4) !important; }

/* ================= STAFF ================= */
body.noir { --bx-panel: #ECE5F8; --bx-ink: #0B0612; }
body.noir.nx-in-app, body.noir:has(#main-view:not([hidden])) { background: var(--bx-panel); }
@media (min-width: 1024px) {
  body.noir.nx-in-app, body.noir:has(#main-view:not([hidden])) { background: #0B0612; }
  body.noir .nx-side { background: linear-gradient(180deg, #1A0A30 0%, #0B0612 70%) !important; }
}
body.noir .nx-main { background: var(--bx-panel) !important; }
body.noir .tab.active, body.noir .nx-home-tab.active { background: var(--b-lime) !important; color: var(--b-black) !important; }
body.noir .tab.active .nx-i, body.noir .nx-home-tab.active .nx-i { color: var(--b-black) !important; }
body.noir .nx-bottom .tab.active, body.noir .nx-bottom a.active, body.noir .nx-bottom [aria-current="page"] { background: var(--b-lime) !important; color: var(--b-black) !important; }
/* logos */
body.noir .nx-logo { display: block; width: 150px; height: auto; filter: drop-shadow(0 0 10px rgba(155,226,45,.22)); }
body.noir .nx-brand-mark { text-shadow: none !important; animation: none !important; }
body.noir .topbar-brand .nx-bl { display: inline-flex; align-items: center; background: #0B0612; border-radius: 14px; padding: 3px 8px; text-shadow: none !important; animation: none !important; }
body.noir .nx-logo-top { width: 92px; height: auto; }
body.noir .login-card .logo-hero.exz-new-logo { aspect-ratio: auto !important; object-fit: contain !important; height: auto; padding: 16px 14px; background: radial-gradient(120% 100% at 50% 0%, #4A1A7A, #2A0A4A 50%, #0B0612) !important; border: 1px solid rgba(155,226,45,.3) !important; border-radius: 24px !important; filter: none !important; }
/* greeting name: lime highlighter */
body.noir .bx-head .nx-hero-title em, body.noir .nx-hero-title em { background: linear-gradient(transparent 55%, rgba(155,226,45,.9) 55%, rgba(155,226,45,.9) 90%, transparent 90%) !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: #3B0F6E !important; color: #3B0F6E !important; }
/* dark cards: deep purple → black with sparkle */
body.noir .bx-dark, body.noir .bx-clock, body.noir .bx-reg, body.noir .exz-bizdash .bd-kpis > .bd-kpi:first-child, body.noir .bx-install {
  background: radial-gradient(120% 90% at 90% 0%, rgba(123,63,228,.5), transparent 60%), linear-gradient(155deg, #2A0A4A 0%, #0B0612 100%) !important; color: #fff !important; }
body.noir .bx-clock *, body.noir .bx-reg * { border-color: rgba(255,255,255,.14); }
body.noir .bx-clock .bx-t, body.noir .bx-reg .bx-t, body.noir .bx-clock dd, body.noir .bx-reg dd { color: #fff !important; }
body.noir .bx-clock dd small, body.noir .bx-clock .bx-unit, body.noir .bx-clock .bx-sub, body.noir .bx-reg .bx-sub, body.noir .bx-reg small, body.noir .bx-clock small, body.noir .bx-reg .bx-unit { color: #CDB4FF !important; }
body.noir .bx-reg[data-state="open"] dd { color: var(--b-lime) !important; }
body.noir .bx-clock .bx-go, body.noir .bx-reg .bx-go, body.noir .bx-clock a[class*=arrow], body.noir .bx-reg a[class*=arrow] { color: #fff !important; }
body.noir .bx-clock .bx-chip, body.noir .bx-reg .bx-chip { background: rgba(155,226,45,.16) !important; color: var(--b-lime) !important; border: 0 !important; }
body.noir .bx-clock .btn, body.noir .bx-clockbtn { background: var(--b-lime) !important; color: var(--b-black) !important; }
body.noir .bx-reg .bx-bar { background: rgba(255,255,255,.12) !important; }
body.noir .bx-install .exz-inst-txt b { color: #fff; } body.noir .bx-install .exz-inst-txt span { color: #D9C4FF; }
body.noir .bx-install .exz-inst-btn { background: var(--b-lime); color: var(--b-black); }
body.noir .exz-bizdash .bd-kpis > .bd-kpi:first-child .v { background: linear-gradient(90deg, #9BE22D, #B58CFF) !important; -webkit-background-clip: text !important; background-clip: text !important; }
/* main CTA in header */
body.noir #nx-qa-sale, body.noir .nx-newsale { background: var(--b-lime) !important; color: var(--b-black) !important; }
body.noir .nx-kicker { color: #5A23B8 !important; }
/* fixes v2 */
body.customer.cx .site-nav .nav-brand img.cx-logo { border: 0 !important; background: none !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; width: auto !important; height: 44px !important; object-fit: contain; animation: none !important; outline: 0 !important; }
@media (max-width: 699px) { body.customer.cx .site-nav .nav-brand img.cx-logo { height: 38px !important; } }
body.customer.cx .cx-hero-logo { width: min(80vw, 380px); }
.exz-waves::before { background-repeat: no-repeat !important; background-size: cover !important; }
body.noir .nx-brand-mark::before { display: none !important; content: none !important; }
body.noir .topbar-brand img.nx-logo-top { width: 78px !important; height: auto !important; }
body.noir .topbar-brand .nx-bl { font-size: 0 !important; line-height: 0; padding: 4px 7px !important; }
body.noir .bx-grid > .bx-clock dd, body.noir .bx-grid > .bx-clock dd *:not(small), body.noir .bx-grid > .bx-reg dd { color: #fff !important; -webkit-text-fill-color: currentColor; }
body.noir .bx-grid > .bx-reg[data-state="open"] dd { color: var(--b-lime) !important; }
body.noir .bx-grid > .bx-clock dd small, body.noir .bx-grid > .bx-reg dd small { color: #CDB4FF !important; }
body.noir .nx-brand-sub { margin-left: 4px !important; margin-top: 6px !important; }

/* fixes v3 */
body.customer .exz-ticker, body.customer .exz-ticker span { color: #D9C4FF !important; }
body.customer .exz-ticker b { color: var(--b-lime, #9BE22D) !important; }
@media (max-width: 899px) {
  .topbar .topbar-brand { padding-top: 4px; }
  body.noir .topbar .topbar-brand img.nx-logo-top { width: 64px !important; height: auto !important; margin-top: 4px; }
}

/* ===== zfix: music in top nav + single bottom dock (2026-10-08) ===== */
body.customer.cx .cx-music-slot { display: inline-flex; align-items: center; flex: 0 0 auto; }
body.customer.cx .cx-music-slot .music-dock { position: static !important; inset: auto !important; display: inline-flex; gap: 6px; align-items: center; }
body.customer.cx .cx-music-slot .music-toggle { min-height: 40px !important; height: 40px; padding: 0 12px 0 4px !important; box-shadow: none !important; background: rgba(255,255,255,.08) !important; color: #E9DEFF !important; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
body.customer.cx .cx-music-slot .music-toggle .music-ico { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; }
body.customer.cx .cx-music-slot .music-label { display: none; }
body.customer.cx .cx-music-slot .music-now { max-width: 130px; font-size: .78rem; }
body.customer.cx .cx-music-slot .music-skip { width: 36px; height: 36px; box-shadow: none !important; background: rgba(255,255,255,.12) !important; color: #fff !important; }
@media (min-width: 700px) { body.customer.cx .site-nav .nav-links { margin-left: auto; } }

@media (max-width: 699px) {
  /* top nav: logo left, music icon right (replaces the "exoticzsf.com" label) */
  body.customer.cx .site-nav-inner::after { content: none !important; display: none !important; }
  body.customer.cx .cx-music-slot .music-toggle { width: 40px; padding: 0 !important; justify-content: center; background: transparent !important; }
  body.customer.cx .cx-music-slot .music-now, body.customer.cx .cx-music-slot .music-skip { display: none !important; }
  /* one bottom dock: tabs left, STAFF right, ~72px + safe area */
  body.customer.cx .site-nav .nav-links {
    left: 0 !important; right: 0 !important; bottom: 0 !important; border-radius: 22px 22px 0 0 !important;
    padding: 10px calc(166px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left)) !important;
    gap: 2px !important; border: 0 !important; border-top: 1px solid rgba(155,226,45,.35) !important;
    background: rgba(11,6,18,.96) !important; box-shadow: 0 -10px 30px rgba(0,0,0,.45) !important;
  }
  body.customer.cx .site-nav .nav-links a { min-height: 52px !important; font-size: .78rem !important; padding: 0 4px !important; border-radius: 16px !important; }
  body.customer.cx .cx-staff-btn {
    left: auto !important; right: calc(8px + env(safe-area-inset-right)) !important; transform: none !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important; width: 154px !important; min-height: 52px !important; height: 52px;
    padding: 4px 12px 4px 4px !important; gap: 8px !important; z-index: 46 !important;
  }
  body.customer.cx .cx-staff-btn:hover { transform: none !important; }
  body.customer.cx .cx-staff-ic { width: 42px !important; height: 42px !important; }
  body.customer.cx .cx-staff-go { display: none !important; }
  body.customer.cx .cx-staff-t { font-size: 1.15rem !important; letter-spacing: .12em !important; }
  body.customer.cx { padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important; }
  body.customer.cx #app { padding-bottom: 0 !important; }
}
@media (min-width: 700px) {
  body.customer.cx { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
}