:root {
  --zx-bg:#07110d;
  --zx-panel:#0d1b15;
  --zx-panel-2:#13261d;
  --zx-text:#eefcf4;
  --zx-muted:#9db7aa;
  --zx-accent:#45f08f;
  --zx-accent-2:#79ffd0;
  --zx-border:rgba(121,255,208,.22);
  --zx-glow:rgba(69,240,143,.38);
  --zx-shadow:0 18px 60px rgba(0,0,0,.42);
  --zx-radius:18px;
}

html[data-zx-theme] body {
  background:
    radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--zx-accent) 12%, transparent), transparent 30%),
    radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--zx-accent-2) 10%, transparent), transparent 28%),
    var(--zx-bg) !important;
  color:var(--zx-text) !important;
  transition:background .35s ease,color .35s ease;
}

#zx-experience-bar {
  position:fixed;
  top:16px;
  left:50%;
  transform:translateX(-50%);
  z-index:2147483640;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  width:min(1180px,calc(100vw - 32px));
  padding:12px 14px;
  border-radius:20px;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--zx-panel) 92%, transparent),
    color-mix(in srgb, var(--zx-panel-2) 88%, transparent));
  border:1px solid var(--zx-border);
  box-shadow:var(--zx-shadow),0 0 30px var(--zx-glow);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
}

#zx-experience-bar .zx-brand {
  display:flex;
  align-items:center;
  gap:10px;
  margin-right:auto;
  min-width:220px;
}

#zx-experience-bar .zx-orb {
  width:34px;
  height:34px;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%, #fff, var(--zx-accent-2) 20%, var(--zx-accent) 58%, transparent 62%),
    var(--zx-accent);
  box-shadow:0 0 16px var(--zx-glow),0 0 38px var(--zx-glow);
  animation:zxPulse 2.8s ease-in-out infinite;
}

#zx-experience-bar .zx-title {
  font:800 16px/1.1 Inter,Segoe UI,Arial,sans-serif;
  letter-spacing:.08em;
  color:var(--zx-text);
}

#zx-experience-bar .zx-subtitle {
  font:600 11px/1.2 Inter,Segoe UI,Arial,sans-serif;
  color:var(--zx-muted);
}

#zx-experience-bar select,
#zx-experience-bar button {
  min-height:42px;
  border-radius:12px;
  border:1px solid var(--zx-border);
  background:color-mix(in srgb, var(--zx-panel-2) 88%, transparent);
  color:var(--zx-text);
  padding:0 12px;
  font:700 14px/1 Inter,Segoe UI,Arial,sans-serif;
  outline:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}

#zx-experience-bar button {
  cursor:pointer;
}

#zx-experience-bar select:hover,
#zx-experience-bar button:hover {
  border-color:var(--zx-accent);
  box-shadow:0 0 18px var(--zx-glow);
}

#zx-mode-badge {
  padding:9px 12px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--zx-accent),var(--zx-accent-2));
  color:#04110a;
  font:900 12px/1 Inter,Segoe UI,Arial,sans-serif;
  letter-spacing:.08em;
}

body.zx-experience-ready {
  padding-top:92px !important;
}

.zx-wow-ring {
  position:fixed;
  inset:auto;
  width:360px;
  height:360px;
  border-radius:50%;
  border:1px solid var(--zx-border);
  filter:blur(.2px);
  opacity:.22;
  pointer-events:none;
  z-index:0;
  animation:zxFloat 12s ease-in-out infinite;
}

.zx-wow-ring.one { top:12%; right:-120px; box-shadow:0 0 80px var(--zx-glow) inset; }
.zx-wow-ring.two { bottom:-150px; left:-100px; animation-delay:-4s; box-shadow:0 0 90px var(--zx-glow); }

.zx-admin-only,.zx-development-only,.zx-demo-only,.zx-customer-only { display:none !important; }
html[data-zx-mode="admin"] .zx-admin-only { display:initial !important; }
html[data-zx-mode="development"] .zx-development-only { display:initial !important; }
html[data-zx-mode="demo"] .zx-demo-only { display:initial !important; }
html[data-zx-mode="customer"] .zx-customer-only { display:initial !important; }

html[data-zx-mode="demo"]::after {
  content:"DEMO";
  position:fixed;
  right:24px;
  top:102px;
  z-index:2147483638;
  padding:10px 16px;
  border-radius:12px;
  background:linear-gradient(135deg,#ffd45f,#ff8f3d);
  color:#241300;
  font:900 14px/1 Inter,Segoe UI,Arial,sans-serif;
  box-shadow:0 12px 35px rgba(255,143,61,.35);
}

html[data-zx-wow="on"] [class*="card"],
html[data-zx-wow="on"] [class*="panel"],
html[data-zx-wow="on"] [class*="widget"] {
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}

html[data-zx-wow="on"] [class*="card"]:hover,
html[data-zx-wow="on"] [class*="panel"]:hover,
html[data-zx-wow="on"] [class*="widget"]:hover {
  transform:translateY(-3px);
  box-shadow:0 18px 44px var(--zx-glow);
  border-color:var(--zx-accent) !important;
}

@keyframes zxPulse {
  0%,100% { transform:scale(1); filter:saturate(100%); }
  50% { transform:scale(1.09); filter:saturate(145%); }
}

@keyframes zxFloat {
  0%,100% { transform:translate3d(0,0,0) scale(1); }
  50% { transform:translate3d(0,-24px,0) scale(1.05); }
}

@media (max-width:900px) {
  #zx-experience-bar {
    position:relative;
    top:auto;
    left:auto;
    transform:none;
    margin:12px;
    width:auto;
  }
  body.zx-experience-ready { padding-top:0 !important; }
  #zx-experience-bar .zx-brand { min-width:100%; }
}