/* ============================================================
   GLASSMORPHISM THEME  — loaded LAST on every page.
   Frosted translucent panels (backdrop blur), soft white rims, inner highlights,
   a deep gradient canvas with colour blobs behind the glass, gold accent kept.
   Most of the work is done by re-pointing the design tokens used across the
   older stylesheets; the rest are explicit overrides below.
   ============================================================ */

:root {
  color-scheme: dark;
  --bg: #0a0914;
  --surface-deep: rgba(12, 11, 24, .55);
  --surface: rgba(255, 255, 255, .08);
  --text: #fbfaf7;
  --muted: rgba(240, 238, 250, .72);
  --faint: rgba(240, 238, 250, .5);
  --line: rgba(255, 255, 255, .16);
  --line-2: rgba(255, 255, 255, .28);
  --glass: rgba(255, 255, 255, .06);
  --glass-2: rgba(255, 255, 255, .12);

  --g-fill: linear-gradient(135deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .05));
  --g-fill-soft: linear-gradient(135deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03));
  --g-rim: 1px solid rgba(255, 255, 255, .2);
  --g-shadow: 0 10px 36px -8px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(255, 255, 255, .04);
  --g-blur: blur(20px) saturate(170%);

  /* re-point the old "kit" tokens so beveled rules turn into glass */
  --k-rim: rgba(255, 255, 255, .2);
  --k-hi: rgba(255, 255, 255, .28);
  --k-hi-soft: rgba(255, 255, 255, .1);
  --k-well-1: rgba(255, 255, 255, .07);
  --k-well-2: rgba(255, 255, 255, .03);
  --k-key-1: rgba(255, 255, 255, .17);
  --k-key-2: rgba(255, 255, 255, .07);
  --k-key-hover-1: rgba(255, 255, 255, .26);
  --k-key-hover-2: rgba(255, 255, 255, .12);
  --k-r: 14px;
  --k-r-lg: 20px;
  --r: 18px;
  --r-sm: 12px;
  --shadow-1: var(--g-shadow);
}

/* ---------- canvas ---------- */
html { background: #0a0914 !important; }
html body, html body.px { background: transparent !important; color: var(--text); }
html body::before {
  content: '' !important; position: fixed !important; inset: 0 !important; z-index: -1 !important;
  width: auto !important; height: auto !important; transform: none !important; filter: none !important;
  opacity: 1 !important; pointer-events: none !important; animation: none !important;
  background:
    radial-gradient(42% 36% at 10% 6%, rgba(212, 168, 75, .50), transparent 70%),
    radial-gradient(40% 40% at 92% 10%, rgba(112, 92, 220, .55), transparent 70%),
    radial-gradient(46% 42% at 84% 90%, rgba(40, 180, 165, .40), transparent 70%),
    radial-gradient(42% 42% at 6% 84%, rgba(226, 84, 140, .34), transparent 70%),
    linear-gradient(160deg, #0d0b1c, #0a0914 55%, #0b0f1a) !important;
}
html body::after, .px-bg, .px-bg::before, .px-bg::after { display: none !important; }
::selection { background: rgba(246, 214, 92, .4); color: #fff; }

/* ---------- glass surfaces ---------- */
html body :is(.panel, .px-card, .info-cell, .faq-item, .px-faq-item, .px-pool, .px-stat, .px-tl-card, .pw-card, .px-contract, .admin-pool, .card, .step-tabs, .site-header .wrap, .px-header-in) {
  background: var(--g-fill) !important;
  border: var(--g-rim) !important;
  border-radius: 22px;
  box-shadow: var(--g-shadow) !important;
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
}
html body :is(.site-header .wrap, .px-header-in) { border-radius: 20px; }
html body :is(.cell, .px-cell, .px-count .px-cell, .agent-log, .task, .px-task, .px-brow, .steps li) {
  background: var(--g-fill-soft) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 16px -6px rgba(0, 0, 0, .4) !important;
}
html body a.info-cell:hover, html body :is(.faq-item, .px-pool, .px-tl-card):hover { border-color: rgba(255, 255, 255, .32) !important; }
html body :is(.faq-item[open], .task.done) { background: linear-gradient(135deg, rgba(246, 214, 92, .16), rgba(255, 255, 255, .05)) !important; }
html body :is(.panel > h3:first-child, .px-pool-head, .px-contract-top, .admin-pool-head, .info-h) { background: transparent !important; border-color: rgba(255, 255, 255, .12) !important; }

/* ---------- pills / chips / badges ---------- */
html body :is(.px-pill, .px-badge, .admin-pill, .hero-eyebrow, .px-eyebrow, .pw-wchip, .px-chip, .hero-chips span) {
  background: rgba(255, 255, 255, .1) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  text-shadow: none !important;
}
html body :is(.px-pool[data-state="open"] .px-pill, .px-pill.is-open, .hero-eyebrow) { color: #f6d65c; border-color: rgba(246, 214, 92, .5) !important; background: rgba(246, 214, 92, .14) !important; }
html body :is(.px-badge.bad, .admin-pill.is-closed) { background: rgba(229, 120, 109, .18) !important; border-color: rgba(229, 120, 109, .5) !important; }

/* ---------- buttons ---------- */
html body :is(.btn, .px-btn, .pw-wbtn, .px a.px-btn) {
  background: linear-gradient(135deg, rgba(250, 222, 110, .95), rgba(224, 172, 40, .85)) !important;
  border: 1px solid rgba(255, 255, 255, .5) !important;
  border-radius: 14px;
  color: #2a1f08 !important; text-shadow: none !important;
  box-shadow: 0 10px 26px -8px rgba(226, 172, 40, .6), inset 0 1px 0 rgba(255, 255, 255, .6) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
html body :is(.btn, .px-btn, .pw-wbtn, .px a.px-btn):hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(255, 232, 140, 1), rgba(236, 184, 52, .95)) !important;
  box-shadow: 0 14px 30px -8px rgba(236, 184, 52, .75), inset 0 1px 0 rgba(255, 255, 255, .7) !important;
  transform: translateY(-1px);
}
html body :is(.btn, .px-btn, .pw-wbtn):active:not(:disabled) { transform: translateY(0); box-shadow: inset 0 2px 6px rgba(120, 80, 5, .4) !important; }
html body :is(.btn:disabled, .btn[disabled], .px-btn:disabled, .pw-wbtn:disabled, .btn-block:disabled, .px-btn-block:disabled) { opacity: .5; filter: saturate(.6); box-shadow: none !important; }
/* secondary = clear glass */
html body :is(.btn-outline, .px-btn-ghost, .px a.px-btn-ghost, .btn.btn-outline, .px-btn.px-btn-ghost) {
  background: linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .06)) !important;
  border: 1px solid rgba(255, 255, 255, .3) !important;
  color: var(--text) !important;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .3) !important;
}
html body :is(.btn-outline, .px-btn-ghost, .px a.px-btn-ghost, .btn.btn-outline, .px-btn.px-btn-ghost):hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .1)) !important;
  border-color: rgba(255, 255, 255, .45) !important; color: #fff !important;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .4) !important;
}

/* ---------- nav / step tabs ---------- */
html body .step-tabs a { background: transparent !important; text-shadow: none !important; border: 0 !important; box-shadow: none !important; }
html body .step-tabs a:hover { background: rgba(255, 255, 255, .08) !important; }
html body :is(.step-tabs a.active, .step-tabs a.active:nth-child(n)) {
  background: linear-gradient(135deg, rgba(246, 214, 92, .3), rgba(255, 255, 255, .1)) !important;
  color: #fff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35) !important;
}
html body :is(.px-nav a:not(.px-nav-cta), label, .px-label, .info-label, .cell .label) { text-shadow: none !important; }
html body .px-nav a:not(.px-nav-cta):hover { background: rgba(255, 255, 255, .1) !important; border-radius: 12px; }

/* ---------- inputs ---------- */
html body :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), select, textarea, .px-input, .px-checker .px-input) {
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  border-radius: 14px; color: var(--text) !important; text-shadow: none !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
html body :is(input, select, textarea)::placeholder { color: rgba(240, 238, 250, .45); }
html body :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), select, textarea):focus,
html body .px-input:focus-within {
  border-color: rgba(246, 214, 92, .8) !important; background: rgba(255, 255, 255, .12) !important;
  box-shadow: 0 0 0 3px rgba(246, 214, 92, .2), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}
html body select option { background: #1b1a2b; color: #fff; }
html body input[type="checkbox"] { background: rgba(255, 255, 255, .1) !important; border: 1px solid rgba(255, 255, 255, .35) !important; box-shadow: none !important; }
html body input[type="checkbox"]:checked { background: linear-gradient(135deg, #f6d65c, #e0b42c) !important; border-color: rgba(255, 255, 255, .6) !important; }

/* ---------- progress bars ---------- */
html body :is(.px-bar, .progress-track) {
  background: rgba(255, 255, 255, .1) !important; border: 1px solid rgba(255, 255, 255, .18) !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35) !important;
}
html body :is(.px-bar-fill, .progress-fill) {
  background: linear-gradient(90deg, rgba(246, 214, 92, .95), rgba(226, 150, 60, .9)) !important;
  box-shadow: 0 0 18px rgba(246, 214, 92, .55), inset 0 1px 0 rgba(255, 255, 255, .55) !important;
}

/* ---------- tables (admin) ---------- */
html body th { background: rgba(255, 255, 255, .1) !important; border-bottom: 1px solid rgba(255, 255, 255, .16) !important; text-shadow: none !important; }
html body td { border-bottom: 1px solid rgba(255, 255, 255, .08) !important; box-shadow: none !important; }
html body tr:hover td { background: rgba(255, 255, 255, .04); }

/* ---------- footer ---------- */
html body footer { background: rgba(255, 255, 255, .04); border-top: 1px solid rgba(255, 255, 255, .14) !important; box-shadow: none !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html body :is(footer .socials a:not(.x-logo-link), .px-footer-links a:not(.x-logo-link), .x-logo-link) {
  background: rgba(255, 255, 255, .1) !important; border: 1px solid rgba(255, 255, 255, .2) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}

/* ---------- misc ---------- */
html body :is(.px-addr, code) { background: rgba(255, 255, 255, .1) !important; border: 1px solid rgba(255, 255, 255, .18) !important; border-radius: 10px; box-shadow: none !important; }
html body .lock-overlay { background: rgba(10, 9, 20, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html body :is(.face-card, .ticket, .slide-card) { border-radius: 20px; border: var(--g-rim) !important; box-shadow: var(--g-shadow) !important; }
html body :is(.px-msg, .form-message.error) { background: rgba(229, 120, 109, .16) !important; border: 1px solid rgba(229, 120, 109, .4) !important; border-radius: 14px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* ---------- wallet popup (claim) ---------- */
html body .pw-modal .pw-modal-bg { background: rgba(8, 7, 18, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html body .pw-modal .pw-modal-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .06)) !important;
  border: 1px solid rgba(255, 255, 255, .28) !important; border-radius: 28px;
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .35) !important;
}
html body .pw-modal .pw-wrow { background: rgba(255, 255, 255, .09) !important; border: 1px solid rgba(255, 255, 255, .2) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18) !important; }
html body .pw-modal .pw-wrow:hover:not(:disabled) { background: rgba(255, 255, 255, .18) !important; border-color: rgba(246, 214, 92, .6) !important; }
html body .pw-modal .pw-wmore-ico { background: rgba(255, 255, 255, .16); }
html body .pw-modal .pw-wsec::before, html body .pw-modal .pw-wsec::after { background: rgba(255, 255, 255, .2); }

/* ---------- fallbacks ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html body :is(.panel, .px-card, .info-cell, .faq-item, .px-faq-item, .px-pool, .px-stat, .px-tl-card, .pw-card, .px-contract, .admin-pool, .card, .step-tabs, .site-header .wrap, .px-header-in) { background: rgba(30, 28, 50, .88) !important; }
  html body .pw-modal .pw-modal-card { background: rgba(34, 32, 56, .96) !important; }
}
@media (max-width: 640px) {
  /* lighter blur on phones keeps scrolling smooth */
  :root { --g-blur: blur(14px) saturate(150%); }
}