/* ============================================================
   UI KIT — beveled / inset components in Claude-dark + gold.
   Loaded LAST on every page (after theme.css). Geometry, bevels, wells and
   highlights follow the reference kit; the palette is warm charcoal + gold.

   Roles (kit → site):
     light raised key      → raised charcoal key   (.btn-outline, header, nav links)
     dark slate CTA        → gold key              (.btn, .px-btn)
     dark slate field      → deep inset well       (inputs, countdown, bars)
     light module + title  → charcoal module       (.panel, .px-pool, .pw-card …)
   ============================================================ */

:root {
  /* Claude dark surfaces */
  --bg: #262624;
  --surface-deep: #1f1e1d;
  --surface: #30302e;
  --text: #faf9f5;
  --muted: #c2c0b6;
  --faint: #a3a198;
  --line: rgba(222, 220, 209, .14);
  --line-2: rgba(222, 220, 209, .26);
  --glass: rgba(250, 249, 245, .04);
  --glass-2: rgba(250, 249, 245, .08);

  /* gold */
  --primary: #d4a84b;
  --primary-soft: #e8c877;
  --brass: #e1b55b;
  --brass-2: #e1b55b;
  --warn: #e1b55b;
  --danger: #e5786d;
  --ok: #8fae6a;
  --ok-rgb: 143, 174, 106;
  --violet: #6a9bcc;

  --paper: #faf9f5;
  --paper-2: #e8e6dc;
  --paper-ink: #1f1e1d;

  /* kit tokens */
  --k-key-1: #3d3c38;
  --k-key-2: #2b2a28;
  --k-key-hover-1: #4a4944;
  --k-key-hover-2: #34332f;
  --k-rim: #11100f;
  --k-hi: rgba(255, 250, 235, .17);
  --k-hi-soft: rgba(255, 250, 235, .07);
  --k-well-1: #161514;
  --k-well-2: #211f1e;
  --k-gold-1: #efd085;
  --k-gold-2: #c99b3b;
  --k-gold-rim: #7d5d1b;
  --k-gold-ink: #2a1f08;
  --k-r: 6px;
  --k-r-lg: 9px;

  --r: 9px;
  --r-sm: 6px;
  --shadow-1: 0 1px 0 var(--k-hi) inset, 0 2px 4px rgba(0, 0, 0, .5);
}

/* ---------- canvas: flat Claude-dark, no aurora ---------- */
html { background: var(--bg); }
body, body.px { background: var(--bg); color: var(--text); }
body::before, .px-bg::before { background: radial-gradient(60% 40% at 50% -8%, rgba(212, 168, 75, .09), transparent 70%); }
body::after, .px-bg::after { opacity: .35; background-image: none; }
::selection { background: rgba(212, 168, 75, .35); color: #fff; }
a { color: var(--primary-soft); }
:focus-visible, .px :focus-visible { outline: 2px solid var(--primary-soft); outline-offset: 2px; border-radius: 6px; }

/* ---------- type: debossed, bold, tight (kit uses bold 12–13px caps-free labels) ---------- */
.btn, .px-btn, .pw-wbtn, .step-tabs a, .px-nav a, label, .px-label, .info-label, .cell .label { text-shadow: 0 -1px 0 rgba(0, 0, 0, .55); }

/* ============================================================
   KEYS (buttons)
   ============================================================ */
.btn, .px-btn, .pw-wbtn, .px a.px-btn {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--k-r); border: 1px solid var(--k-gold-rim);
  color: var(--k-gold-ink); font-weight: 700; letter-spacing: .005em;
  background: linear-gradient(180deg, var(--k-gold-1) 0%, #dcb25a 48%, var(--k-gold-2) 100%);
  box-shadow: 0 1px 0 rgba(255, 244, 205, .75) inset, 0 -1px 0 rgba(90, 62, 10, .35) inset, 0 2px 3px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 250, 235, .06);
  text-shadow: 0 1px 0 rgba(255, 238, 180, .6);
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease, background .15s ease;
}
.btn::after, .px-btn::after, .pw-wbtn::after { display: none; }
.px a.px-btn, .px a.px-btn:hover { color: var(--k-gold-ink); }
.btn:hover:not(:disabled), .px-btn:hover:not(:disabled), .pw-wbtn:hover {
  transform: none; filter: none;
  background: linear-gradient(180deg, #f6dc9a 0%, #e8c06b 48%, #d3a544 100%);
  box-shadow: 0 1px 0 rgba(255, 248, 220, .85) inset, 0 -1px 0 rgba(90, 62, 10, .35) inset, 0 2px 3px rgba(0, 0, 0, .55), 0 0 0 3px rgba(232, 200, 119, .22);
}
.btn:active:not(:disabled), .px-btn:active:not(:disabled), .pw-wbtn:active {
  transform: translateY(1px) scale(1);
  background: linear-gradient(180deg, #c99b3b, #dcb25a);
  box-shadow: 0 2px 5px rgba(60, 40, 5, .6) inset, 0 1px 0 rgba(255, 250, 235, .08);
}

/* secondary key — the "light raised" key of the kit */
.btn-outline, .px-btn-ghost, .px a.px-btn-ghost {
  color: var(--text); border: 1px solid var(--k-rim);
  background: linear-gradient(180deg, var(--k-key-1), var(--k-key-2));
  box-shadow: 0 1px 0 var(--k-hi) inset, 0 2px 3px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 250, 235, .05);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .65);
}
.btn-outline:hover:not(:disabled), .px-btn-ghost:hover:not(:disabled), .px a.px-btn-ghost:hover {
  color: #fff; border-color: #0b0a0a;
  background: linear-gradient(180deg, var(--k-key-hover-1), var(--k-key-hover-2));
  box-shadow: 0 1px 0 rgba(255, 250, 235, .24) inset, 0 2px 3px rgba(0, 0, 0, .55), 0 0 0 3px rgba(232, 200, 119, .16);
}
.btn-outline:active:not(:disabled), .px-btn-ghost:active:not(:disabled) {
  background: linear-gradient(180deg, #262523, #2f2e2b);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .7) inset, 0 1px 0 rgba(255, 250, 235, .06);
}
.btn:disabled, .btn[disabled], .px-btn:disabled, .pw-wbtn:disabled {
  color: #77756d; border-color: var(--k-rim); text-shadow: 0 1px 0 rgba(255, 250, 235, .05);
  background: linear-gradient(180deg, #2c2b29, #252422);
  box-shadow: 0 1px 0 rgba(255, 250, 235, .06) inset; cursor: not-allowed;
}

/* large pill key — "Large Normal / Large Hover": thick rim, full pill */
.hero-actions .btn, .btn-block, .px-btn-block {
  min-height: 56px; border-radius: 999px; border: 3px solid #151412; font-size: 16px;
  background: linear-gradient(180deg, #f3d68e 0%, #e0b85f 52%, #cfa243 100%);
  box-shadow: 0 0 0 1px rgba(212, 168, 75, .55), 0 1px 0 rgba(255, 246, 215, .8) inset, 0 3px 5px rgba(0, 0, 0, .55);
}
.hero-actions .btn:hover:not(:disabled), .btn-block:hover:not(:disabled), .px-btn-block:hover:not(:disabled) {
  box-shadow: 0 0 0 1px rgba(232, 200, 119, .9), 0 1px 0 rgba(255, 250, 230, .9) inset, 0 3px 5px rgba(0, 0, 0, .55), 0 0 0 5px rgba(232, 200, 119, .2);
}
.hero-actions .btn-outline {
  color: var(--text); border-color: #151412;
  background: linear-gradient(180deg, var(--k-key-1), var(--k-key-2));
  box-shadow: 0 0 0 1px rgba(222, 220, 209, .22), 0 1px 0 var(--k-hi) inset, 0 3px 5px rgba(0, 0, 0, .55);
}
.hero-actions .btn-outline:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--k-key-hover-1), var(--k-key-hover-2));
  box-shadow: 0 0 0 1px rgba(232, 200, 119, .6), 0 1px 0 rgba(255, 250, 235, .24) inset, 0 3px 5px rgba(0, 0, 0, .55), 0 0 0 5px rgba(232, 200, 119, .14);
}
.btn-block:disabled, .px-btn-block:disabled { border-color: #1b1a19; box-shadow: 0 0 0 1px rgba(222, 220, 209, .08), 0 1px 0 rgba(255, 250, 235, .06) inset; }

/* small keys keep the 6px square corner of the kit */
.btn-sm, .px-btn-sm { border-radius: var(--k-r); border-width: 1px; font-size: 13px; }

/* icon keys: glyph cell + etched divider, like  ✔ │ OK  in the kit */

:is(#downloadCardBtn, #shareXBtn, #connectBtn, #copyBtn, #copyReferralBtn, #logoutBtn, #connectOwnerBtn, #uploadBtn, #applyFiltersBtn, [data-join-whitelist].btn-sm, .nav-actions .btn-outline, [data-role="claim"]) {
  padding-left: 46px; text-align: center; justify-content: center;
}
:is(#downloadCardBtn, #shareXBtn, #connectBtn, #copyBtn, #copyReferralBtn, #logoutBtn, #connectOwnerBtn, #uploadBtn, #applyFiltersBtn, [data-join-whitelist].btn-sm, .nav-actions .btn-outline, [data-role="claim"])::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 38px; z-index: 1;
  background: currentColor; opacity: .92;
  -webkit-mask: var(--ico) no-repeat center / 15px 15px; mask: var(--ico) no-repeat center / 15px 15px;
}
:is(#downloadCardBtn, #shareXBtn, #connectBtn, #copyBtn, #copyReferralBtn, #logoutBtn, #connectOwnerBtn, #uploadBtn, #applyFiltersBtn, [data-join-whitelist].btn-sm, .nav-actions .btn-outline, [data-role="claim"])::after {
  display: block; content: ''; position: absolute; left: 38px; top: 18%; bottom: 18%; width: 1px; z-index: 1; background: rgba(0, 0, 0, .38);
  box-shadow: 1px 0 0 rgba(255, 250, 235, .16); transform: none; transition: none;
}
.btn-outline:is(#shareXBtn, #copyBtn, #copyReferralBtn, #logoutBtn, .nav-actions .btn-outline)::after, .px-btn-ghost::after { background: rgba(0, 0, 0, .6); box-shadow: 1px 0 0 rgba(255, 250, 235, .12); }
[data-join-whitelist].btn-sm { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.nav-actions .btn-outline { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.6 6.1 20.8l1.2-6.5L2.5 9.7l6.6-.9z' fill='%23000'/%3E%3C/svg%3E"); }
#downloadCardBtn { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v11m0 0l-4.5-4.5M12 14l4.5-4.5M4 20h16' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
#shareXBtn { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 4h7v7M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
#connectBtn, #connectOwnerBtn { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12.2a4.6 4.6 0 1 0 0-9.2 4.6 4.6 0 0 0 0 9.2zM3.5 21c.6-4.6 3.6-7 8.5-7s7.9 2.4 8.5 7z' fill='%23000'/%3E%3C/svg%3E"); }
#copyBtn, #copyReferralBtn { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='8' y='8' width='12' height='12' rx='2' fill='none' stroke='%23000' stroke-width='2.8'/%3E%3Cpath d='M16 8V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3' fill='none' stroke='%23000' stroke-width='2.8'/%3E%3C/svg%3E"); }
#logoutBtn { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 4H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h5M15 8l4 4-4 4M19 12H9' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
#uploadBtn { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 16V4m0 0L7.5 8.5M12 4l4.5 4.5M4 20h16' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
#applyFiltersBtn { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6' fill='none' stroke='%23000' stroke-width='3'/%3E%3Cpath d='M15.5 15.5L21 21' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }
[data-role="claim"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

.px-btn-block[data-role="claim"] { padding-left: 52px; }
.px-btn-block[data-role="claim"]::before { width: 44px; }
.px-btn-block[data-role="claim"]::after { left: 44px; top: 22%; bottom: 22%; }

/* ============================================================
   HEADER — one raised pill, the way the segmented control sits in the kit
   ============================================================ */
.site-header .wrap, .px-header-in {
  border-radius: 18px; border: 1px solid var(--k-rim);
  background: linear-gradient(180deg, #3a3935, #2a2927);
  box-shadow: 0 1px 0 var(--k-hi) inset, 0 3px 6px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 250, 235, .05);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.brand, .px-brand { font-weight: 800; text-shadow: 0 -1px 0 rgba(0, 0, 0, .6); }
.brand-logo, .px-brand-logo { border-radius: 8px; box-shadow: 0 0 0 1px var(--k-rim), 0 1px 0 var(--k-hi-soft); }
.px-nav a:not(.px-nav-cta) { border-radius: var(--k-r); color: var(--muted); }
.px-nav a:not(.px-nav-cta):hover { background: linear-gradient(180deg, var(--k-key-1), var(--k-key-2)); box-shadow: 0 1px 0 var(--k-hi) inset, 0 1px 3px rgba(0, 0, 0, .5); color: #fff; }

/* ============================================================
   SEGMENTED CONTROL — "Option 1 | Option 2 | Option 3"
   ============================================================ */
.step-tabs {
  display: grid; gap: 0; padding: 0; border-radius: 18px; border: 1px solid var(--k-rim); overflow: hidden;
  background: linear-gradient(180deg, #3d3c38, #2b2a28);
  box-shadow: 0 1px 0 var(--k-hi) inset, 0 3px 5px rgba(0, 0, 0, .5);
}
.step-tabs a {
  position: relative; border-radius: 0; border: 0; min-height: 46px; justify-content: center; color: var(--muted);
  background: transparent; box-shadow: none; font-weight: 700; text-shadow: 0 -1px 0 rgba(0, 0, 0, .6);
}
/* etched dividers: single row on wide screens, 2x2 on phones */
.step-tabs a:nth-child(n+2) { box-shadow: 1px 0 0 rgba(0, 0, 0, .55) inset, 2px 0 0 rgba(255, 250, 235, .07) inset; }
@media (max-width: 560px) {
  .step-tabs a:nth-child(odd) { box-shadow: none; }
  .step-tabs a:nth-child(even) { box-shadow: 1px 0 0 rgba(0, 0, 0, .55) inset, 2px 0 0 rgba(255, 250, 235, .07) inset; }
  .step-tabs a:nth-child(n+3) { border-top: 1px solid rgba(0, 0, 0, .55); }
  .step-tabs a:nth-child(n+3):nth-child(odd) { box-shadow: 0 1px 0 rgba(255, 250, 235, .07) inset; }
  .step-tabs a:nth-child(n+3):nth-child(even) { box-shadow: 1px 0 0 rgba(0, 0, 0, .55) inset, 2px 0 0 rgba(255, 250, 235, .07) inset; }
}
.step-tabs a:hover { color: #fff; background: rgba(255, 250, 235, .05); }
.step-tabs a.active, .step-tabs a.active:nth-child(n) {
  color: var(--text);
  background: linear-gradient(180deg, #2c2b29, #353430);
  box-shadow: 0 3px 7px rgba(0, 0, 0, .65) inset, 0 -1px 0 rgba(255, 250, 235, .1) inset;
}
.step-icon {
  border-radius: 50%; color: var(--muted); background: linear-gradient(180deg, #1a1918, #262523); border: 1px solid #0d0c0c;
  box-shadow: 0 1px 0 var(--k-hi-soft), 0 2px 3px rgba(0, 0, 0, .55) inset; text-shadow: none;
}
.step-tabs a.active .step-icon { background: linear-gradient(180deg, var(--k-gold-1), var(--k-gold-2)); color: var(--k-gold-ink); border-color: var(--k-gold-rim); box-shadow: 0 1px 0 rgba(255, 244, 205, .7) inset, 0 1px 2px rgba(0, 0, 0, .5); }

/* ============================================================
   MODULES — light-module-with-title becomes a charcoal module
   ============================================================ */
.panel, .px-card, .info-cell, .faq-item, .px-faq-item, .px-pool, .px-stat, .px-tl-card, .pw-card, .px-contract, .admin-pool, .card {
  border-radius: var(--k-r-lg); border: 1px solid var(--k-rim);
  background: linear-gradient(180deg, #383733 0, #2e2d2a 38px, #2b2a28 100%);
  box-shadow: 0 1px 0 var(--k-hi) inset, 0 3px 6px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 250, 235, .05);
}
.cell, .agent-log, .task, .px-task, .px-brow, .steps li {
  border-radius: var(--k-r); border: 1px solid var(--k-rim);
  background: linear-gradient(180deg, var(--k-well-1), var(--k-well-2));
  box-shadow: 0 3px 6px rgba(0, 0, 0, .65) inset, 0 1px 0 rgba(255, 250, 235, .08);
}
a.info-cell:hover { transform: none; border-color: #0b0a0a; background: linear-gradient(180deg, #44433e, #34332f); }
.panel > h3:first-child, .px-pool-head, .px-contract-top, .admin-pool-head, .info-h {
  text-align: left; padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, .55); box-shadow: 0 1px 0 rgba(255, 250, 235, .1);
}
.info-h { color: var(--text); font-size: 15px; font-weight: 800; letter-spacing: -.005em; padding-top: 2px; }
.info-h:not(:first-child) { margin-top: 22px; }
.panel p, .faq-item p { color: var(--muted); }
.section-heading, .px-h2 { text-shadow: 0 -1px 0 rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 250, 235, .07); }
.px-kicker { color: var(--primary-soft); }
.px-hero-top::before, .px-checker .px-h2::before, .px-h2::after { opacity: .5; }
.px-grad { color: var(--primary-soft); background: linear-gradient(180deg, #f6dc9a, #c99b3b); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ============================================================
   FIELDS — deep inset wells with a lit lower lip, focus halo
   ============================================================ */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), select, textarea, .px-input {
  min-height: 46px; border-radius: var(--k-r); border: 1px solid #0d0c0c;
  color: #e8e6dc; font-weight: 700; font-size: 14px; text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
  background-color: #1b1a19;
  background-image: linear-gradient(180deg, var(--k-well-1), var(--k-well-2));
  box-shadow: 0 3px 6px rgba(0, 0, 0, .7) inset, 0 1px 0 rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 250, 235, .1);
  transition: box-shadow .15s ease, border-color .15s ease;
}
input::placeholder, textarea::placeholder { color: #8d8b82; font-weight: 700; opacity: 1; }
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):focus, select:focus, textarea:focus, .px-input:focus-within {
  outline: 0; border-color: #3a3118;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .7) inset, 0 0 0 3px rgba(239, 208, 133, .5), 0 0 14px 2px rgba(232, 200, 119, .4);
}
.field label, .consent span { font-weight: 700; color: var(--muted); }
.field .hint { color: var(--faint); }

/* icon cell on the left of selected fields (user / wallet / lock / search) */
#xHandleInput, #walletInput, #tokenInput, #filterHandle, #filterWallet, #filterFace {
  padding-left: 52px;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 13px center, 0 0, 0 0;
  background-size: 16px 16px, 41px 100%, 100% 100%;
}
#xHandleInput, #filterHandle { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12.2a4.6 4.6 0 1 0 0-9.2 4.6 4.6 0 0 0 0 9.2zM3.5 21c.6-4.6 3.6-7 8.5-7s7.9 2.4 8.5 7z' fill='%23c2c0b6'/%3E%3C/svg%3E"), linear-gradient(90deg, rgba(0,0,0,.32) 0 40px, rgba(255,250,235,.1) 40px 41px), linear-gradient(180deg, var(--k-well-1), var(--k-well-2)); }
#walletInput, #filterWallet { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7.5A2.5 2.5 0 0 1 5.5 5H18a1 1 0 0 1 1 1v2M3 7.5V17a2 2 0 0 0 2 2h14a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1H5.5A2.5 2.5 0 0 1 3 7.5zM16 13.5h2' fill='none' stroke='%23c2c0b6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), linear-gradient(90deg, rgba(0,0,0,.32) 0 40px, rgba(255,250,235,.1) 40px 41px), linear-gradient(180deg, var(--k-well-1), var(--k-well-2)); }
#tokenInput { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2' fill='%23c2c0b6'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5' fill='none' stroke='%23c2c0b6' stroke-width='2.4'/%3E%3C/svg%3E"), linear-gradient(90deg, rgba(0,0,0,.32) 0 40px, rgba(255,250,235,.1) 40px 41px), linear-gradient(180deg, var(--k-well-1), var(--k-well-2)); }
#filterFace { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6' fill='none' stroke='%23c2c0b6' stroke-width='2.4'/%3E%3Cpath d='M15.5 15.5L21 21' stroke='%23c2c0b6' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"), linear-gradient(90deg, rgba(0,0,0,.32) 0 40px, rgba(255,250,235,.1) 40px 41px), linear-gradient(180deg, var(--k-well-1), var(--k-well-2)); }
#xHandleInput:focus, #walletInput:focus, #tokenInput:focus, #filterHandle:focus, #filterWallet:focus, #filterFace:focus { background-position: 13px center, 0 0, 0 0; }

/* dropdown — well + arrow block, as in the kit */
select {
  -webkit-appearance: none; appearance: none; padding-right: 54px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5-5 5 5zM7 14l5 5 5-5z' fill='%23faf9f5'/%3E%3C/svg%3E"), linear-gradient(180deg, #4a4944, #34332f), linear-gradient(180deg, var(--k-well-1), var(--k-well-2));
  background-repeat: no-repeat; background-position: right 10px center, right 0 top 0, 0 0; background-size: 16px 16px, 40px 100%, 100% 100%;
}
select option { background: #262624; color: var(--text); }

/* checkbox — recessed square; checked = gold key with a dark tick */
input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; flex: 0 0 auto; width: 22px; height: 22px; margin: 0; cursor: pointer;
  border-radius: 5px; border: 1px solid #0d0c0c;
  background: linear-gradient(180deg, var(--k-well-1), var(--k-well-2));
  box-shadow: 0 2px 5px rgba(0, 0, 0, .75) inset, 0 1px 0 rgba(255, 250, 235, .12);
  transition: box-shadow .15s ease;
}
input[type="checkbox"]:checked {
  border-color: var(--k-gold-rim);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%232a1f08' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat, linear-gradient(180deg, var(--k-gold-1), var(--k-gold-2));
  box-shadow: 0 1px 0 rgba(255, 244, 205, .7) inset, 0 0 0 3px rgba(232, 200, 119, .25), 0 1px 3px rgba(0, 0, 0, .5);
}
input[type="checkbox"]:focus-visible { outline: 2px solid var(--primary-soft); outline-offset: 2px; }
.consent { align-items: center; }

input[type="file"] { color: var(--muted); font-weight: 600; }
input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 8px 14px; border-radius: var(--k-r); border: 1px solid var(--k-rim); cursor: pointer; font: 700 13px var(--font); color: var(--text);
  background: linear-gradient(180deg, var(--k-key-1), var(--k-key-2)); box-shadow: 0 1px 0 var(--k-hi) inset, 0 2px 3px rgba(0, 0, 0, .55);
}

/* ============================================================
   PROGRESS — recessed track, striped gold fill, % printed inside
   ============================================================ */
.px-bar, .progress-track {
  height: 22px; margin-top: 18px; border-radius: 999px; border: 1px solid #0d0c0c; overflow: hidden;
  background: linear-gradient(180deg, var(--k-well-1), var(--k-well-2));
  box-shadow: 0 3px 6px rgba(0, 0, 0, .75) inset, 0 1px 0 rgba(255, 250, 235, .1);
}
.px-bar-fill, .progress-fill {
  height: 100%; min-width: 14px; border-radius: 999px;
  background:
    repeating-linear-gradient(-45deg, rgba(255, 246, 215, .26) 0 5px, rgba(255, 246, 215, 0) 5px 10px),
    linear-gradient(180deg, #f1d58f 0%, #dcb25a 50%, #c99b3b 100%);
  background-size: 14.14px 14.14px, 100% 100%;
  box-shadow: 0 1px 0 rgba(255, 248, 220, .75) inset, 0 0 0 1px rgba(125, 93, 27, .7) inset;
}
.px-bar-fill::after, .progress-fill::after { height: 46%; background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0)); }
.px-bar[data-label]:not([data-label=""])::after, .progress-track[data-label]:not([data-label=""])::after {
  bottom: auto; top: 50%; left: auto; right: 12px; transform: translateY(-50%); padding: 0; border: 0; background: none;
  font: 800 11px/1 var(--font); color: #faf9f5; text-shadow: 0 1px 1px rgba(0, 0, 0, .9), 0 0 3px rgba(0, 0, 0, .7); transition: none; z-index: 2;
}
.px-bar[data-label]:not([data-label=""])::before, .progress-track[data-label]:not([data-label=""])::before { display: none; }
.dist-bar { height: 16px; gap: 3px; }
.dist-bar i { border-radius: 999px; box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 2px rgba(0, 0, 0, .5); }
.dist-bar i:nth-child(1) { background: linear-gradient(180deg, #efd085, #c99b3b); }
.dist-bar i:nth-child(2) { background: linear-gradient(180deg, #c9a9e0, #8f66b3); }
.dist-bar i:nth-child(3) { background: linear-gradient(180deg, #85b4de, #4f7fae); }
.dist-bar i:nth-child(4) { background: linear-gradient(180deg, #a9c585, #6f8c4c); }
.dist-bar i:nth-child(5) { background: linear-gradient(180deg, #e9b39b, #c06c4d); }
.dist-key li::before { border-radius: 3px; }

/* ============================================================
   COUNTDOWN + READOUTS — LCD wells with gold digits
   ============================================================ */
.cell, .px-cell, .px-count .px-cell {
  border-radius: var(--k-r); border: 1px solid #0d0c0c;
  background: linear-gradient(180deg, var(--k-well-1), var(--k-well-2));
  box-shadow: 0 3px 7px rgba(0, 0, 0, .75) inset, 0 1px 0 rgba(255, 250, 235, .1);
}
.cell::after { background: rgba(0, 0, 0, .55); box-shadow: 0 1px 0 rgba(255, 250, 235, .07); }
.cell .num, .px-cell b { color: var(--primary-soft); text-shadow: 0 0 12px rgba(232, 200, 119, .28), 0 1px 0 rgba(0, 0, 0, .7); }
.cell .label, .px-cell span, .px-label, .info-label { color: var(--faint); }
.info-num, .px-big, .px-alloc-amt { color: var(--text); text-shadow: 0 -1px 0 rgba(0, 0, 0, .55); }
.hero-chips span {
  border-radius: var(--k-r); border: 1px solid var(--k-rim);
  background: linear-gradient(180deg, var(--k-key-1), var(--k-key-2)); box-shadow: 0 1px 0 var(--k-hi) inset, 0 2px 3px rgba(0, 0, 0, .5);
}
.agent-log-row b { color: var(--primary-soft); }

/* ============================================================
   PILLS, BADGES, STATES
   ============================================================ */
.px-pill, .px-badge, .admin-pill, .hero-eyebrow, .px-eyebrow {
  border-radius: 999px; border: 1px solid #0d0c0c; color: var(--muted);
  background: linear-gradient(180deg, var(--k-well-1), var(--k-well-2));
  box-shadow: 0 2px 4px rgba(0, 0, 0, .65) inset, 0 1px 0 rgba(255, 250, 235, .1);
}
.px-pool[data-state="open"] .px-pill, .px-pill.is-open, .hero-eyebrow { color: var(--primary-soft); }
.px-live i { background: var(--primary-soft); box-shadow: 0 0 8px rgba(232, 200, 119, .8); }
.px-dot { background: var(--primary-soft); box-shadow: 0 0 8px rgba(232, 200, 119, .7); }

.task { border-radius: var(--k-r); }
.task.done { border-color: #2c3a1f; background: linear-gradient(180deg, #1d2417, #232b1b); }
.task-icon, .px-pool-ico, .px-tl-ico, .px-step-num, .steps .n {
  border-radius: 8px; border: 1px solid var(--k-rim); color: var(--primary-soft);
  background: linear-gradient(180deg, var(--k-key-1), var(--k-key-2)); box-shadow: 0 1px 0 var(--k-hi) inset, 0 2px 3px rgba(0, 0, 0, .5);
}
.px-tl-dot { background: var(--primary-soft); border-color: rgba(232, 200, 119, .35); box-shadow: 0 0 12px rgba(232, 200, 119, .5); }

/* ============================================================
   FAQ — accordion rows built from the module
   ============================================================ */
.faq-item { padding: 0; overflow: hidden; }
.faq-item summary { padding: 16px 18px; font-family: var(--font); font-weight: 800; letter-spacing: -.005em; text-shadow: 0 -1px 0 rgba(0, 0, 0, .55); }
.faq-item[open] { border-color: var(--k-rim); }
.faq-item[open] summary { border-bottom: 1px solid rgba(0, 0, 0, .55); box-shadow: 0 1px 0 rgba(255, 250, 235, .09); }
.faq-item p, .faq-item > div { padding: 14px 18px 18px; margin: 0; }
.faq-item summary::after, .px-faq-item summary::after {
  color: var(--text); border-radius: 6px; border: 1px solid var(--k-rim);
  background: linear-gradient(180deg, var(--k-key-1), var(--k-key-2)); box-shadow: 0 1px 0 var(--k-hi) inset, 0 1px 2px rgba(0, 0, 0, .5);
}

/* ============================================================
   LOCK OVERLAY, FACE GRID, TICKET, MODALS
   ============================================================ */
.lock-overlay { background: rgba(31, 30, 29, .72); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); border-radius: inherit; }
.lock-overlay .lock-title {
  border-radius: 999px; border: 1px solid var(--k-rim); color: var(--text);
  background: linear-gradient(180deg, var(--k-key-1), var(--k-key-2)); box-shadow: 0 1px 0 var(--k-hi) inset, 0 3px 5px rgba(0, 0, 0, .55);
}
.face-card { border-radius: var(--k-r-lg); padding: 5px; background: linear-gradient(180deg, #e8e6dc, #c9c6b8); box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 3px 5px rgba(0, 0, 0, .55); }
.face-card img { border-radius: 6px; box-shadow: 0 2px 5px rgba(0, 0, 0, .6) inset; }
.face-card:hover { transform: translateY(-2px); }
.face-card.selected { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--primary-soft), 0 6px 14px rgba(0, 0, 0, .6); transform: none; }
.face-card .check { border-radius: 50%; background: linear-gradient(180deg, var(--k-gold-1), var(--k-gold-2)); color: var(--k-gold-ink); border: 1px solid var(--k-gold-rim); }
.ticket { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .6)); }
.slide-card { border-radius: var(--k-r-lg); border: 1px solid var(--k-rim); box-shadow: 0 1px 0 var(--k-hi) inset, 0 4px 8px rgba(0, 0, 0, .55); }
.px-modal-card, .pw-modal-card {
  border-radius: 12px; border: 1px solid var(--k-rim);
  background: linear-gradient(180deg, #3a3935 0, #2d2c29 46px, #2a2927 100%);
  box-shadow: 0 1px 0 var(--k-hi) inset, 0 18px 50px rgba(0, 0, 0, .75);
}
.px-modal-badge { border-radius: 10px; background: linear-gradient(180deg, var(--k-gold-1), var(--k-gold-2)); border: 1px solid var(--k-gold-rim); }
.pw-wchip {
  border-radius: var(--k-r); border: 1px solid var(--k-rim); color: var(--text);
  background: linear-gradient(180deg, var(--k-key-1), var(--k-key-2)); box-shadow: 0 1px 0 var(--k-hi) inset, 0 2px 3px rgba(0, 0, 0, .55);
}
.pw-wchip:hover, .pw-wchip[aria-expanded="true"] { border-color: #0b0a0a; box-shadow: 0 1px 0 rgba(255, 250, 235, .24) inset, 0 0 0 3px rgba(232, 200, 119, .18); }
.pw-card-av { border-radius: 9px; border: 1px solid var(--k-rim); color: var(--primary-soft); background: linear-gradient(180deg, var(--k-well-1), var(--k-well-2)); box-shadow: 0 2px 5px rgba(0, 0, 0, .7) inset; }
.px-addr, code { border-radius: var(--k-r); border: 1px solid #0d0c0c; color: var(--primary-soft); background: linear-gradient(180deg, var(--k-well-1), var(--k-well-2)); box-shadow: 0 2px 5px rgba(0, 0, 0, .7) inset, 0 1px 0 rgba(255, 250, 235, .08); }

/* ============================================================
   FOOTER LINKS as small raised keys; round X key
   ============================================================ */
footer { border-top: 1px solid rgba(0, 0, 0, .55); box-shadow: 0 1px 0 rgba(255, 250, 235, .07) inset; }
footer .socials a:not(.x-logo-link), .px-footer-links a:not(.x-logo-link) {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: var(--k-r); border: 1px solid var(--k-rim); color: var(--text);
  background: linear-gradient(180deg, var(--k-key-1), var(--k-key-2)); box-shadow: 0 1px 0 var(--k-hi) inset, 0 2px 3px rgba(0, 0, 0, .5); text-shadow: 0 -1px 0 rgba(0, 0, 0, .6); font-weight: 700;
}
footer .socials a:not(.x-logo-link):hover, .px-footer-links a:not(.x-logo-link):hover { background: linear-gradient(180deg, var(--k-key-hover-1), var(--k-key-hover-2)); color: #fff; }
.x-logo-link { border: 1px solid var(--k-rim); background: linear-gradient(180deg, var(--k-key-1), var(--k-key-2)); box-shadow: 0 1px 0 var(--k-hi) inset, 0 2px 3px rgba(0, 0, 0, .5); }

/* ============================================================
   ADMIN TABLE + 404
   ============================================================ */
table { border-collapse: separate; border-spacing: 0; }
th { color: var(--muted); background: linear-gradient(180deg, #3a3935, #2e2d2a); border-bottom: 1px solid rgba(0, 0, 0, .6); text-shadow: 0 -1px 0 rgba(0, 0, 0, .6); }
td { border-bottom: 1px solid rgba(0, 0, 0, .4); box-shadow: 0 1px 0 rgba(255, 250, 235, .05); }
.admin-stat-cards .card .n { color: var(--primary-soft); }
.nf-logo { border-radius: 22px; box-shadow: 0 0 0 1px var(--k-rim), 0 6px 14px rgba(0, 0, 0, .6); }

@media (max-width: 560px) {
  .hero-actions .btn, .btn-block, .px-btn-block { min-height: 54px; }
  .step-tabs { border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) { .btn, .px-btn, input { transition: none; } }

/* ============================================================
   FIXES from first visual pass
   ============================================================ */
.px-pool::before { display: none; }                                   /* kit modules are flat: no glow wash */
.px-meter {
  padding: 14px 14px 12px; border-radius: var(--k-r); border: 1px solid #0d0c0c;
  background: linear-gradient(180deg, var(--k-well-1), var(--k-well-2));
  box-shadow: 0 3px 7px rgba(0, 0, 0, .75) inset, 0 1px 0 rgba(255, 250, 235, .1);
}
.px-meter .px-bar { margin-top: 10px; }
.px-meter-nums .px-num { color: var(--text); }
.px-alloc {
  border-radius: var(--k-r); border: 1px solid #0d0c0c;
  background: linear-gradient(180deg, var(--k-well-1), var(--k-well-2));
  box-shadow: 0 3px 7px rgba(0, 0, 0, .75) inset, 0 1px 0 rgba(255, 250, 235, .1);
}
.px-alloc-amt { color: var(--primary-soft); }
.pw-wrow, .px-chip {
  border-radius: var(--k-r); border: 1px solid var(--k-rim); color: var(--text);
  background: linear-gradient(180deg, var(--k-key-1), var(--k-key-2)); box-shadow: 0 1px 0 var(--k-hi) inset, 0 2px 3px rgba(0, 0, 0, .5);
}
.px-chip-solid { color: var(--k-gold-ink); border-color: var(--k-gold-rim); background: linear-gradient(180deg, var(--k-gold-1), var(--k-gold-2)); }
.px-nav .px-nav-cta { border-radius: var(--k-r); }
.form-message.error, .px-msg { border-radius: var(--k-r); }
.px-badge.bad, .admin-pill.is-closed { color: var(--danger); }

/* ============================================================
   AIRDROP PAGE — checker steps, stat strip, notes
   ============================================================ */
.px-hero-top::before { display: none; }
.px-hero-top .px-eyebrow {
  text-transform: none; letter-spacing: .01em; font-size: 13px; color: var(--primary-soft);
  border: 1px solid #0d0c0c; background: linear-gradient(180deg, var(--k-well-1), var(--k-well-2));
  box-shadow: 0 2px 4px rgba(0, 0, 0, .65) inset, 0 1px 0 rgba(255, 250, 235, .1);
}
.px-hero-top .px-sub { letter-spacing: .02em; text-transform: none; font-size: 14px; color: var(--primary-soft); }
.px-hero-top .px-sub::before { background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .7)); box-shadow: 0 1px 0 rgba(255, 250, 235, .08); }
.px-hero-top .px-sub::after { background: linear-gradient(270deg, transparent, rgba(0, 0, 0, .7)); box-shadow: 0 1px 0 rgba(255, 250, 235, .08); }
.px-hero-top .px-lead [data-symbol] { color: var(--primary-soft); }
.px-checker .px-h2::before { background: var(--primary-soft); box-shadow: 0 0 0 4px rgba(0, 0, 0, .45) inset, 0 0 10px rgba(232, 200, 119, .6); }

.px-checker .px-steps {
  border-radius: var(--k-r-lg); border: 1px solid var(--k-rim);
  background: linear-gradient(180deg, #383733 0, #2e2d2a 46px, #2b2a28 100%);
  box-shadow: 0 1px 0 var(--k-hi) inset, 0 3px 6px rgba(0, 0, 0, .5);
}
.px-checker .px-steps::before { display: none; }
.px-checker .px-step-head { padding-bottom: 12px; border-bottom: 1px solid rgba(0, 0, 0, .55); box-shadow: 0 1px 0 rgba(255, 250, 235, .1); }
.px-checker .px-step-num { box-shadow: 0 1px 0 var(--k-hi) inset, 0 2px 3px rgba(0, 0, 0, .5); }

/* the wrapper is the well; the real <input> inside it stays flat */
.px-checker .px-input, .px-input { border-radius: var(--k-r); padding: 4px 5px 4px 14px; }
.px-input input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),
.px-input input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):focus {
  min-height: 0; border: 0; border-radius: 0; background: none; box-shadow: none; outline: 0; padding-left: 0; padding-right: 8px;
}
.px-checker .px-chip { border-radius: var(--k-r); }

.px-hero-facts .px-stats.px-stats-4 {
  border-radius: var(--k-r-lg); border: 1px solid var(--k-rim);
  background: linear-gradient(180deg, #383733, #2b2a28); box-shadow: 0 1px 0 var(--k-hi) inset, 0 3px 6px rgba(0, 0, 0, .5);
}
.px-hero-facts .px-stats-4 .px-stat { box-shadow: none; }
.px-hero-facts .px-stats-4 .px-stat:nth-child(odd) { border-right: 1px solid rgba(0, 0, 0, .55); box-shadow: 1px 0 0 rgba(255, 250, 235, .07); }
.px-hero-facts .px-stats-4 .px-stat:nth-child(-n+2) { border-bottom: 1px solid rgba(0, 0, 0, .55); }
.px-stat-num small, .px-stats-4 .px-stat-num small { -webkit-text-fill-color: var(--primary-soft); color: var(--primary-soft); }
.px-hero-facts .px-note, .px-checker .px-fine-pad {
  border-radius: var(--k-r); border: 1px solid #0d0c0c;
  background: linear-gradient(180deg, var(--k-well-1), var(--k-well-2));
  box-shadow: 0 3px 7px rgba(0, 0, 0, .7) inset, 0 1px 0 rgba(255, 250, 235, .08);
}