/* ZeusLobster site-wide myth-tech visual system. Keep this file public-safe. */
:root {
  --zl-bg-a: #2a1608;
  --zl-bg-b: #110b08;
  --zl-bg-c: #030303;
  --zl-accent: #f7931a;
  --zl-accent-2: #ffcf66;
  --zl-wallpaper-opacity: 0.20;
  --zl-wallpaper-size: min(1180px, 112vw);
  --zl-wallpaper-y: 12px;
  --zl-wallpaper-x: 50%;
  --zl-wallpaper-filter: saturate(1.12);
}

body.zl-theme {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 8%, color-mix(in srgb, var(--zl-accent) 34%, transparent) 0, transparent 32%),
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--zl-accent-2) 22%, transparent) 0, transparent 28%),
    radial-gradient(circle at 82% 2%, color-mix(in srgb, var(--zl-accent) 18%, transparent) 0, transparent 30%),
    linear-gradient(180deg, color-mix(in srgb, var(--zl-bg-a) 85%, #000 15%) 0%, var(--zl-bg-b) 42%, var(--zl-bg-c) 100%) !important;
}

body.zl-theme::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("./zeuslobster-bitcoin-wallpaper.svg");
  background-repeat: no-repeat;
  background-position: var(--zl-wallpaper-x) var(--zl-wallpaper-y);
  background-size: var(--zl-wallpaper-size) auto;
  opacity: var(--zl-wallpaper-opacity);
  filter: var(--zl-wallpaper-filter);
  mix-blend-mode: screen;
}

body.zl-theme::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 18%, transparent 0, rgba(3,3,3,0.32) 48%, rgba(3,3,3,0.82) 100%),
    linear-gradient(180deg, rgba(3,3,3,0.06), rgba(3,3,3,0.50) 68%, rgba(3,3,3,0.88)),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--zl-accent) 13%, transparent) 0 1px, transparent 1px 118px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--zl-accent-2) 8%, transparent) 0 1px, transparent 1px 118px);
}

body.zl-theme > * {
  position: relative;
  z-index: 1;
}

body.zl-theme .hero,
body.zl-theme .section,
body.zl-theme .card,
body.zl-theme .metric,
body.zl-theme .item,
body.zl-theme .pos,
body.zl-theme .status {
  backdrop-filter: blur(10px);
}

body.zl-theme .hero,
body.zl-theme .card:first-of-type {
  box-shadow: 0 24px 80px rgba(0,0,0,0.32), 0 0 80px color-mix(in srgb, var(--zl-accent) 12%, transparent);
}

body.zl-theme .mark {
  box-shadow: 0 0 28px color-mix(in srgb, var(--zl-accent) 34%, transparent);
}

body.zl-home { --zl-bg-a:#2c1707; --zl-bg-b:#100b08; --zl-bg-c:#030303; --zl-accent:#f7931a; --zl-accent-2:#ffcf66; --zl-wallpaper-opacity:.22; --zl-wallpaper-y:-10px; --zl-wallpaper-size:min(1220px,112vw); }
body.zl-bitcoin { --zl-bg-a:#3a1d06; --zl-bg-b:#140b05; --zl-bg-c:#030303; --zl-accent:#f7931a; --zl-accent-2:#facc15; --zl-wallpaper-opacity:.34; --zl-wallpaper-y:-4px; --zl-wallpaper-size:min(1420px,120vw); }
body.zl-artemis { --zl-bg-a:#351b08; --zl-bg-b:#130b09; --zl-bg-c:#030303; --zl-accent:#f59e0b; --zl-accent-2:#ffcf66; --zl-wallpaper-opacity:.21; --zl-wallpaper-y:0px; --zl-wallpaper-filter:saturate(1.18); }
body.zl-cld { --zl-bg-a:#2b1708; --zl-bg-b:#0f0c09; --zl-bg-c:#030303; --zl-accent:#f7931a; --zl-accent-2:#38bdf8; --zl-wallpaper-opacity:.17; --zl-wallpaper-y:8px; --zl-wallpaper-filter:saturate(1.04); }
body.zl-harmony { --zl-bg-a:#251708; --zl-bg-b:#0d0e0d; --zl-bg-c:#030303; --zl-accent:#f7931a; --zl-accent-2:#00ade8; --zl-wallpaper-opacity:.16; --zl-wallpaper-y:10px; --zl-wallpaper-filter:saturate(.96); }
body.zl-base { --zl-bg-a:#1d1c12; --zl-bg-b:#090f1d; --zl-bg-c:#030303; --zl-accent:#f7931a; --zl-accent-2:#0052ff; --zl-wallpaper-opacity:.16; --zl-wallpaper-y:10px; --zl-wallpaper-filter:saturate(1.02); }
body.zl-services { --zl-bg-a:#2c1708; --zl-bg-b:#100b0b; --zl-bg-c:#030303; --zl-accent:#f7931a; --zl-accent-2:#a78bfa; --zl-wallpaper-opacity:.18; --zl-wallpaper-y:4px; --zl-wallpaper-filter:saturate(1.05); }
body.zl-beta { --zl-bg-a:#321507; --zl-bg-b:#120a0c; --zl-bg-c:#030303; --zl-accent:#f7931a; --zl-accent-2:#fb7185; --zl-wallpaper-opacity:.18; --zl-wallpaper-y:4px; --zl-wallpaper-filter:saturate(1.08); }

@media (max-width: 720px) {
  :root { --zl-wallpaper-size: 980px; --zl-wallpaper-y: 34px; }
  body.zl-theme::before { opacity: calc(var(--zl-wallpaper-opacity) * 0.76); }
}


/* readability polish: clearer transparent tabs/pills */
body.zl-theme .button,
body.zl-theme .label,
body.zl-theme .social-link,
body.zl-theme .pill {
  border: 2px solid rgba(0,0,0,0.92) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.13),
    0 0 0 2px rgba(0,0,0,0.58),
    0 10px 26px rgba(0,0,0,0.38);
  background-color: rgba(14,14,14,0.58);
  transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

body.zl-theme .button.primary {
  border: 2px solid rgba(0,0,0,0.96) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.20),
    0 0 0 2px rgba(0,0,0,0.66),
    0 12px 32px rgba(247,147,26,0.30);
}

body.zl-theme .button:hover,
body.zl-theme .button:focus-visible,
body.zl-theme .label:hover,
body.zl-theme .social-link:hover,
body.zl-theme .social-link:focus-visible,
body.zl-theme .pill:hover {
  background: linear-gradient(180deg, #ffbf55, #f7931a) !important;
  color: #111827 !important;
  border-color: rgba(0,0,0,1) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.24),
    0 0 0 3px rgba(0,0,0,0.72),
    0 14px 36px rgba(247,147,26,0.38);
  transform: translateY(-1px);
}

body.zl-theme .button:hover *,
body.zl-theme .button:focus-visible *,
body.zl-theme .label:hover *,
body.zl-theme .social-link:hover *,
body.zl-theme .social-link:focus-visible *,
body.zl-theme .pill:hover * {
  color: #111827 !important;
}


/* CLD/Harmony primary tabs: Harmony blue, orange on hover remains global */
body.zl-cld .button.primary,
body.zl-harmony .button.primary {
  background: linear-gradient(180deg, #61dfff, #00ade8) !important;
  color: #06111a !important;
  border-color: rgba(0,0,0,0.96) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.24),
    0 0 0 2px rgba(0,0,0,0.66),
    0 12px 32px rgba(0,173,232,0.30);
}


/* Services page primary CTA: match Harmony blue system */
body.zl-services .button.primary {
  background: linear-gradient(180deg, #61dfff, #00ade8) !important;
  color: #06111a !important;
  border-color: rgba(0,0,0,0.96) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.24),
    0 0 0 2px rgba(0,0,0,0.66),
    0 12px 32px rgba(0,173,232,0.30);
}


/* Beta/Base primary and active pills: Harmony blue by default, orange on hover */
body.zl-beta .button.primary,
body.zl-base .button.primary,
body.zl-beta .label.primary,
body.zl-base .label.primary,
body.zl-beta .label.active,
body.zl-base .label.active,
body.zl-beta .button.active,
body.zl-base .button.active {
  background: linear-gradient(180deg, #61dfff, #00ade8) !important;
  color: #06111a !important;
  border-color: rgba(0,0,0,0.96) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.24),
    0 0 0 2px rgba(0,0,0,0.66),
    0 12px 32px rgba(0,173,232,0.30);
}

body.zl-beta .tags .label:last-child {
  background: linear-gradient(180deg, #61dfff, #00ade8) !important;
  color: #06111a !important;
  border-color: rgba(0,0,0,0.96) !important;
}


/* CLD marketplace wallet controls: keep current default colors, add orange hover to plain buttons */
body.zl-cld button {
  transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

body.zl-cld button:hover,
body.zl-cld button:focus-visible {
  background: linear-gradient(180deg, #ffbf55, #f7931a) !important;
  color: #111827 !important;
  border-color: rgba(0,0,0,1) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.24),
    0 0 0 3px rgba(0,0,0,0.72),
    0 14px 36px rgba(247,147,26,0.38);
  transform: translateY(-1px);
}

/* Harmony pages: non-secondary action tabs default to Harmony blue */
body.zl-harmony .button:not(.secondary),
body.zl-harmony button:not(.secondary) {
  background: linear-gradient(180deg, #61dfff, #00ade8) !important;
  color: #06111a !important;
  border-color: rgba(0,0,0,0.96) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.24),
    0 0 0 2px rgba(0,0,0,0.66),
    0 12px 32px rgba(0,173,232,0.30);
}

body.zl-harmony .button:not(.secondary):hover,
body.zl-harmony .button:not(.secondary):focus-visible,
body.zl-harmony button:not(.secondary):hover,
body.zl-harmony button:not(.secondary):focus-visible {
  background: linear-gradient(180deg, #ffbf55, #f7931a) !important;
  color: #111827 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.24),
    0 0 0 3px rgba(0,0,0,0.72),
    0 14px 36px rgba(247,147,26,0.38);
}


/* Mine WAGE burn action: Harmony blue by default, orange on hover */
body.zl-harmony #burnWageBtn {
  background: linear-gradient(180deg, #61dfff, #00ade8) !important;
  color: #06111a !important;
  border: 2px solid rgba(0,0,0,0.96) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.24),
    0 0 0 2px rgba(0,0,0,0.66),
    0 12px 32px rgba(0,173,232,0.30);
}

body.zl-harmony #burnWageBtn:hover,
body.zl-harmony #burnWageBtn:focus-visible {
  background: linear-gradient(180deg, #ffbf55, #f7931a) !important;
  color: #111827 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.24),
    0 0 0 3px rgba(0,0,0,0.72),
    0 14px 36px rgba(247,147,26,0.38);
  transform: translateY(-1px);
}