/* Base Theme (BNB Yellow Variant) */
:root {
  --bg:#070b11;
  --bg-alt:#0e141c;
  --surface:#121b24;
  --surface-alt:#18232d;
  --grid:rgba(255,255,255,0.035);
  --primary:#F0B90B;
  --primary-alt:#ffce2e;
  --primary-soft:#ffe68a;
  --gradient-primary:linear-gradient(135deg,#F0B90B,#ffcc2f,#f7d560);
  --text:#e6ecf3;
  --text-dim:#8a95a3;
  --danger:#ff3d55;
  --radius:14px;
  --ease:cubic-bezier(.4,.14,.2,1);
  --focus:0 0 0 3px #0a0f15,0 0 0 5px var(--primary);
  font-family:'Inter',system-ui,sans-serif;
}

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

html,body {
  height:100%;
  margin:0;
  background:radial-gradient(circle at 50% 30%, #0c121a, #05070b 70%);
  color:var(--text);
  scroll-behavior:smooth;
}

body::before{
  content:"";
  position:fixed;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.9;
  background:
    linear-gradient(rgba(240,185,11,0.06),rgba(240,185,11,0) 60%),
    repeating-linear-gradient(0deg,transparent 0 29px,var(--grid) 30px),
    repeating-linear-gradient(90deg,transparent 0 29px,var(--grid) 30px);
}

/* Airdrop Announcement Card */
.airdrop-annc { position:fixed; top:92px; right:28px; width:360px; max-width:calc(100% - 32px); z-index:260; padding:20px 22px 22px 22px; border-radius:24px; backdrop-filter:blur(26px) saturate(160%); background:linear-gradient(140deg,rgba(15,18,23,.88),rgba(25,31,38,.82) 55%,rgba(15,18,23,.9)); border:1px solid #1f2a33; box-shadow:0 8px 36px -10px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,0.05),0 0 60px -12px rgba(240,185,11,.4); display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start; animation:anncSlide .75s var(--ease); }
.airdrop-annc--center { top:50%; left:50%; right:auto; transform:translate(-50%,-50%); width:560px; max-width:min(92%,760px); padding:42px 48px 46px; grid-template-columns:160px 1fr; border-radius:42px; }
@media (max-width:860px){ .airdrop-annc--center { grid-template-columns:1fr; text-align:center; padding:34px 30px 38px; } .airdrop-annc--center .airdrop-annc__icon { margin-inline:auto; } .airdrop-annc--center .airdrop-annc__actions { justify-content:center; } }
.airdrop-annc--center .airdrop-annc__icon { width:160px; height:160px; border-radius:100%; }
.airdrop-annc--center .airdrop-annc__title { font-size:1.55rem; }
.airdrop-annc--center .airdrop-annc__text { font-size:.9rem; line-height:1.55; }
.airdrop-annc--center .airdrop-annc__cta { font-size:1rem; padding:20px 32px; }
.airdrop-annc--center .airdrop-annc__later { padding:16px 28px; }
.airdrop-annc--center .airdrop-annc__meta { letter-spacing:.22em; }
.airdrop-annc--center .airdrop-annc__body { display:flex; flex-direction:column; justify-content:center; }

/* Optional backdrop for centered variant */
.airdrop-annc--center::before { content:""; position:fixed; inset:0; backdrop-filter:blur(12px); background:radial-gradient(circle at 50% 50%,rgba(10,14,20,.55),rgba(5,7,11,.9)); z-index:-1; border-radius:inherit; }
.airdrop-annc[hidden]{display:none;}
@media (max-width:780px){ .airdrop-annc { left:50%; transform:translateX(-50%); right:auto; top:auto; bottom:86px; width:clamp(300px,92%,480px); grid-template-columns:1fr; padding:20px 20px 24px; } }
@keyframes anncSlide { from { opacity:0; transform:translate3d(30px,-10px,0) scale(.98);} to { opacity:1; transform:translate3d(0,0,0) scale(1);} }
/* Close button style (unused when centered with Later button) retained for fallback */
.airdrop-annc__close { position:absolute; top:6px; right:6px; width:34px; height:34px; border-radius:12px; border:1px solid #2a3642; background:#121b23; color:var(--text-dim); font-size:20px; line-height:1; cursor:pointer; display:none; align-items:center; justify-content:center; transition:.35s var(--ease); }
.airdrop-annc__close:hover { color:#fff; border-color:var(--primary); background:#18232d; }
.airdrop-annc__icon { width:74px; height:74px; border-radius:22px; background:radial-gradient(circle at 50% 45%,#fff9d8,#f0b90b 70%,#c68a00); box-shadow:0 0 0 2px #1c252d,0 0 0 4px rgba(240,185,11,.45),0 0 26px -6px rgba(240,185,11,.7); overflow:hidden; position:relative; display:flex; align-items:center; justify-content:center; }
.airdrop-annc__icon img { width:100%; height:100%; object-fit:contain; display:block; filter:drop-shadow(0 4px 8px #0009); }
.airdrop-annc--center .airdrop-annc__icon img { height:100%; }
@media (max-width:560px){
  .airdrop-annc--center { padding:30px 26px 34px; }
  .airdrop-annc--center .airdrop-annc__icon { width:130px; height:130px; border-radius:100%; }
  .airdrop-annc--center .airdrop-annc__title { font-size:1.4rem; }
}
@media (max-width:430px){
  .airdrop-annc--center { padding:26px 22px 30px; }
  .airdrop-annc--center .airdrop-annc__icon { width:112px; height:112px; border-radius:100%; }
  .airdrop-annc--center .airdrop-annc__text { font-size:.72rem; }
  .airdrop-annc__actions { gap:10px; }
}
@media (max-width:360px){
  .airdrop-annc--center .airdrop-annc__icon { width:100px; height:100px; }
  .airdrop-annc--center .airdrop-annc__title { font-size:1.25rem; }
}
@media (max-width:420px){
  .hud { padding:8px 14px; }
  .hud__logo { width:42px; height:42px; }
  .network-badge { font-size:.55rem; padding:4px 8px; }
}
.airdrop-annc__body { position:relative; z-index:2; }
.airdrop-annc__title { margin:0 0 8px; font-size:1.05rem; letter-spacing:.5px; display:flex; align-items:center; gap:.65ch; font-weight:800; }
.airdrop-annc__title .pulse { position:relative; display:inline-block; background:var(--primary); color:#111; font-size:.6rem; letter-spacing:.15em; padding:4px 8px 3px; border-radius:8px; text-transform:uppercase; font-weight:700; box-shadow:0 0 0 1px #f0b90b55,0 0 14px -2px #f0b90b; animation:pulseGlow 1.8s ease-in-out infinite; }
@keyframes pulseGlow { 0%,100% { filter:brightness(1); box-shadow:0 0 0 1px #f0b90b66,0 0 14px -2px #f0b90b; } 50% { filter:brightness(1.25); box-shadow:0 0 0 1px #ffe37d,0 0 26px -2px #ffe37d; } }
.airdrop-annc__text { margin:0 0 16px; font-size:.78rem; line-height:1.5; color:var(--text-dim); }
.airdrop-annc__actions { display:flex; gap:12px; flex-wrap:wrap; }
.airdrop-annc__cta { flex:1 1 auto; text-align:center; font-weight:700; }
.airdrop-annc__later { font-size:.75rem; padding:14px 20px; }
.airdrop-annc__meta { margin-top:10px; font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; color:#76818d; font-weight:600; }
.airdrop-annc__shine { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 85% 20%,rgba(255,231,150,.4),rgba(240,185,11,0) 60%); opacity:.55; mix-blend-mode:screen; }
.airdrop-annc__glow { content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none; background:conic-gradient(from 0deg,rgba(240,185,11,.6),rgba(240,185,11,0) 40%,rgba(240,185,11,.55) 62%,rgba(240,185,11,.1)); filter:blur(22px) saturate(180%); opacity:.55; animation:spin 18s linear infinite; }
.airdrop-annc--joined { background:linear-gradient(140deg,rgba(20,25,30,.9),rgba(30,36,42,.86)); border-color:#24313c; }
.airdrop-annc--joined .airdrop-annc__title .pulse { background:#3ddc97; box-shadow:0 0 0 1px #3ddc9766,0 0 18px -4px #3ddc97; animation:joinedPulse 2.2s ease-in-out infinite; }
@keyframes joinedPulse { 0%,100% { filter:brightness(1); } 50% { filter:brightness(1.3); } }
.airdrop-annc--closed { background:linear-gradient(140deg,rgba(25,20,23,.9),rgba(30,24,30,.86)); }
.airdrop-annc--soon { background:linear-gradient(140deg,rgba(18,22,28,.9),rgba(24,32,42,.86)); }
.airdrop-annc--closed .airdrop-annc__title .pulse { background:#555; color:#ccc; box-shadow:0 0 0 1px #555; animation:none; }
.airdrop-annc--soon .airdrop-annc__title .pulse { background:#ffb547; color:#222; box-shadow:0 0 0 1px #ffb547aa,0 0 16px -4px #ffb547; }
.airdrop-annc__cta.is-disabled { cursor:not-allowed; filter:grayscale(.3) brightness(.6); opacity:.65; box-shadow:none; }
.airdrop-annc__cta.is-disabled:hover { filter:grayscale(.3) brightness(.6); }
.airdrop-annc--hidden-soft { animation:anncHide .45s var(--ease) forwards; }
@keyframes anncHide { to { opacity:0; transform:translateY(-6px) scale(.98); filter:blur(6px); } }


h1,h2,h3 { font-weight:900; letter-spacing:-.02em; margin:0 0 .6em; line-height:1.05; }
p { line-height:1.55; margin:0 0 1.2em; }
a { color:var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }

/* Preloader */
.preloader {
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  background:#05070b;
  gap:2rem;
  z-index:1000;
  animation:fadeOut .6s var(--ease) 2.3s forwards;
}
@keyframes fadeOut { to { opacity:0; visibility:hidden; } }

/* Preloader new large avatar style */
.preloader__avatar-wrap { width:320px; height:320px; position:relative; }
.preloader__avatar { width:100%; height:100%; position:relative; border-radius:50%; background:#0f1419; overflow:hidden; box-shadow:0 0 0 4px #101820,0 0 0 8px #1c262f,0 0 0 11px rgba(240,185,11,0.25),0 0 60px -10px rgba(240,185,11,.65),0 0 140px -30px rgba(240,185,11,.5); animation:preloaderFloat 6s ease-in-out infinite; }
.preloader__avatar::before { content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at 50% 42%,rgba(255,242,206,.95),rgba(240,185,11,.5) 40%,rgba(240,185,11,.08) 70%,transparent 75%); mix-blend-mode:screen; opacity:.85; filter:blur(4px); }
.preloader__ring-glow { position:absolute; inset:-6%; border-radius:50%; background:conic-gradient(from 0deg,#f0b90b,#ffda55,#f0b90b); filter:blur(14px) brightness(1.15) saturate(140%); opacity:.55; animation:spin 12s linear infinite; }
.preloader__logo { width:100%; height:auto; aspect-ratio:1/1; object-fit:contain; position:relative; z-index:2; filter:drop-shadow(0 4px 8px #000a); }
@keyframes preloaderFloat { 0%,100% { transform:translateY(0);} 50% { transform:translateY(-18px);} }

/* Remove outdated small preloader styles overrides */
.preloader__ring, .preloader__glow { display:none !important; }

.preloader__meta { text-align:center; }
.preloader .progress {
  width:180px;
  height:6px;
  background:#1b222b;
  border-radius:10px;
  overflow:hidden;
  margin:16px auto 10px;
  position:relative;
}
.progress__bar {
  height:100%;
  width:0;
  background:linear-gradient(90deg,#8a6b00,#ffd83b,#fff7c4);
  animation:load 2s ease forwards;
  box-shadow:0 0 12px #ffd83b;
}
@keyframes load { to { width:100%; } }
.status { font-size:.8rem; letter-spacing:.25em; color:var(--text-dim); }

/* HUD */
.hud {
  position:fixed;
  top:16px;
  left:20px;
  right:20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:50;
  pointer-events:none;
  backdrop-filter:blur(22px) saturate(140%);
  background:linear-gradient(140deg,rgba(15,20,25,.78),rgba(25,30,38,.72) 55%,rgba(15,18,23,.78));
  border:1px solid rgba(255,255,255,0.05);
  border-radius:22px;
  padding:12px 22px;
  box-shadow:0 4px 24px -10px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,0.03),0 0 38px -8px rgba(240,185,11,.25);
}
body:not(.scrolled) .hud {
  background:rgba(10,14,18,0.12);
  box-shadow:0 0 0 1px rgba(255,255,255,0.04);
  transition:
    background .5s var(--ease),
    padding .45s var(--ease),
    border-radius .5s var(--ease),
    box-shadow .6s var(--ease),
    backdrop-filter .6s var(--ease);
}
body.scrolled .hud {
  padding:8px 18px;
  border-radius:18px;
  background:linear-gradient(140deg,rgba(15,20,25,.86),rgba(25,30,38,.82));
  box-shadow:0 3px 18px -8px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,0.04),0 0 32px -12px rgba(240,185,11,.18);
  backdrop-filter:blur(22px) saturate(140%);
}
.hud > * { pointer-events:auto; }
.hud__btn {
  font-weight:600;
  font-size:.9rem;
  padding:10px 20px;
  border-radius:var(--radius);
  border:1px solid #27313d;
  background:#0c141d60;
  color:var(--text);
  backdrop-filter:blur(10px);
  transition:.4s var(--ease);
}
.hud__btn:hover { border-color:var(--primary); color:#111; background:var(--primary); text-decoration:none; }

/* HUD Buy Now button variant */
.hud__btn--buy { background:var(--gradient-primary); color:#0d0f11; font-weight:700; border:1px solid var(--primary); box-shadow:0 0 0 1px #f0b90b33,0 6px 22px -10px #f0b90b80; }
.hud__btn--buy:hover { filter:brightness(1.05); text-decoration:none; }

.market-cap {
  font-size:.85rem;
  font-weight:600;
  background:#101820cc;
  padding:10px 18px;
  border:1px solid #27313d;
  border-radius:999px;
  color:var(--primary);
  display:inline-flex;
  gap:.4ch;
  align-items:center;
  box-shadow:0 0 0 1px #27313d;
}
.hud__left, .hud__right { display:flex; align-items:center; gap:14px; }
.network-badge {
  font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  background:#101820d9;padding:8px 14px;border:1px solid #27313d;border-radius:999px;
  color:var(--primary-alt);display:inline-flex;align-items:center;gap:.6ch;
}

/* Floating bottom buttons */
.float-btn {
  position:fixed;
  bottom:22px;
  padding:14px 26px;
  font-size:.9rem;
  font-weight:600;
  border:none;
  border-radius:40px;
  background:linear-gradient(135deg,#ff3af2,#a600ff);
  color:#fff;
  cursor:pointer;
  box-shadow:0 4px 18px -4px #ff3af288;
  transition:.35s var(--ease);
  z-index:40;
}
.float-btn--left { left:22px; background:linear-gradient(135deg,#ff48b5,#ff3af2); }
.float-btn--right { right:22px; background:linear-gradient(135deg,#ffd83b,#ffb300); color:#111; }
.float-btn:hover { transform:translateY(-4px); }

/* Hero */
.hero {
  min-height:100dvh;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  align-items:center;
  padding:140px clamp(1rem,5vw,5rem) 120px;
  position:relative;
  isolation:isolate;
}

/* Launchpad */
.launchpad-main { min-height:100dvh; padding:140px clamp(1.2rem,5vw,4rem) 80px; display:flex; flex-direction:column; gap:46px; position:relative; }
.launchpad-head h1 { margin:0 0 6px; font-size:clamp(1.9rem,5vw,3.2rem); letter-spacing:-.02em; }
.launchpad-head p { margin:0; font-size:.9rem; color:var(--text-dim); }
.launchpad-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:34px; }
.lp-card { position:relative; display:flex; flex-direction:column; gap:14px; padding:30px 28px 34px; background:linear-gradient(155deg,#10181f,#0e141b); border:1px solid #1f2b33; border-radius:26px; text-decoration:none; overflow:hidden; isolation:isolate; transition:.55s var(--ease); box-shadow:0 6px 30px -14px #0009,0 0 0 1px rgba(255,255,255,0.02); }
.lp-card::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 25%,rgba(240,185,11,.18),transparent 70%); opacity:.55; transition:.6s var(--ease); }
.lp-card::after { content:""; position:absolute; inset:-1px; border-radius:inherit; background:linear-gradient(140deg,rgba(240,185,11,.18),rgba(240,185,11,0) 40%); mix-blend-mode:overlay; opacity:0; transition:.7s var(--ease); }
.lp-card:hover { transform:translateY(-8px); border-color:#2a3944; box-shadow:0 12px 40px -18px #000a,0 0 0 1px #283640; }
.lp-card:hover::after { opacity:1; }
.lp-card__icon { width:70px; height:70px; border-radius:22px; background:linear-gradient(135deg,#f0b90b,#ffce2e,#ffe17a); display:flex; align-items:center; justify-content:center; font-size:2rem; box-shadow:0 0 0 1px #f0b90b66,0 8px 26px -10px rgba(240,185,11,.6); position:relative; }
.lp-card__title { margin:4px 0 0; font-size:1.35rem; letter-spacing:.5px; }
.lp-card__desc { margin:0; font-size:.8rem; line-height:1.5; color:#8da0ad; }
.lp-card__cta { margin-top:auto; display:inline-flex; align-items:center; gap:.6ch; font-size:.7rem; letter-spacing:.25em; text-transform:uppercase; font-weight:700; color:var(--primary-soft); position:relative; }
.lp-card__cta::after { content:""; width:0; height:1px; background:var(--primary-soft); position:absolute; left:0; bottom:-2px; transition:.45s var(--ease); }
.lp-card:hover .lp-card__cta::after { width:100%; }
.lp-card:focus-visible { outline:none; box-shadow:0 0 0 3px #0a0f15,0 0 0 5px var(--primary); }
.launchpad-main::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 60% 40%,rgba(240,185,11,.06),transparent 70%); opacity:.6; }
@media (max-width:760px){ .lp-card { padding:26px 24px 30px; } .lp-card__icon { width:60px; height:60px; font-size:1.6rem; } .lp-card__title { font-size:1.2rem; } }

/* Dev Banner */
.dev-banner { position:relative; display:flex; align-items:center; gap:16px; padding:16px 20px 16px 18px; border:1px solid #2a3640; background:linear-gradient(145deg,#10191f,#141f26); border-radius:18px; box-shadow:0 6px 26px -12px #000a,0 0 0 1px rgba(255,255,255,0.04); overflow:hidden; animation:devBannerIn .6s var(--ease); }
.dev-banner__icon { width:42px; height:42px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 35% 30%,#ffe89d,#f0b90b 70%,#c88900); font-size:1.2rem; box-shadow:0 0 0 1px #f0b90b55,0 6px 18px -10px rgba(240,185,11,.55); }
.dev-banner__content { font-size:.78rem; line-height:1.4; letter-spacing:.4px; }
.dev-banner__content strong { color:var(--primary); }
.dev-banner__close { margin-left:auto; background:#172229; border:1px solid #24323c; color:#8fa1ac; width:40px; height:40px; border-radius:14px; cursor:pointer; font-size:1.2rem; display:flex; align-items:center; justify-content:center; transition:.4s var(--ease); }
.dev-banner__close:hover { background:#1d2a32; color:#fff; border-color:#2e3c47; }
.dev-banner__glow { position:absolute; inset:-2px; background:radial-gradient(circle at 80% 35%,rgba(240,185,11,.18),transparent 70%); pointer-events:none; mix-blend-mode:color-dodge; opacity:.65; }
.dev-banner--hide { animation:devBannerOut .55s var(--ease) forwards; }
.dev-banner--hidden { display:none !important; }
@keyframes devBannerIn { 0% { opacity:0; transform:translateY(-10px) scale(.98);} 70% { opacity:1; transform:translateY(0) scale(1.01);} 100% { opacity:1; transform:translateY(0) scale(1);} }
@keyframes devBannerOut { to { opacity:0; transform:translateY(-6px) scale(.97); filter:blur(4px);} }

/* News prototype card */
.news-section { padding:18px clamp(1rem,5vw,2rem); }
.news-card { max-width:820px; margin:18px 0; padding:18px 22px; border-radius:14px; background:linear-gradient(180deg,#0c1318,#0f161b); border:1px solid #1f2b33; box-shadow:0 8px 28px -12px rgba(0,0,0,.6); }
.news-meta { font-size:.68rem; color:#9aa7b3; margin-bottom:8px; letter-spacing:.18em; text-transform:uppercase; }
.news-title { margin:0 0 8px; font-size:1.05rem; color:var(--text); }
.news-quote { margin:0 0 10px; color:#dbe9f0; font-style:italic; background:linear-gradient(90deg,rgba(240,185,11,0.03),transparent); padding:12px 14px; border-radius:8px; }
.news-footer { font-size:.72rem; color:#7b8b96; }

.hero__media {
  display:flex;
  justify-content: center;
}

.avatar-wrap { position:relative; width:320px; height:320px; }
.avatar {
  width:100%;
  height:100%;
  border-radius:50%;
  background:#0f1419;
  position:relative;
  overflow:hidden;
  box-shadow:0 0 0 4px #101820,0 0 0 8px #1c262f,0 0 0 11px rgba(240,185,11,0.2),0 0 34px -6px rgba(240,185,11,.55),0 0 90px -20px rgba(240,185,11,.55);
}
.avatar::before, .avatar::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; }
.avatar::before {
  mix-blend-mode:screen;
  opacity:.9;
  filter:blur(4px);
}
.avatar::after {
  background:
    conic-gradient(from 0deg,rgba(240,185,11,.0),rgba(240,185,11,.9) 35%,rgba(240,185,11,.15) 55%,rgba(240,185,11,.85) 70%,rgba(240,185,11,.0) 90%),
    radial-gradient(circle at 50% 50%,rgba(240,185,11,.5),transparent 60%);
  mix-blend-mode:overlay;
  opacity:.55;
  animation:spinSlow 14s linear infinite;
}

@keyframes spinSlow { to { transform:rotate(360deg); } }

/* Ensure avatar image not stretched */
.avatar img { width: 100%; height:auto; aspect-ratio:1/1; object-fit:contain; }

/* Dynamic glow variable (updated by JS) */
.avatar-wrap { --glow:0.4; }
.avatar {
  box-shadow:0 0 0 4px #101820,0 0 0 8px #1c262f,0 0 0 11px rgba(240,185,11,0.25),0 0 calc(80px * var(--glow)) calc(-10px * var(--glow)) rgba(240,185,11,.65),0 0 calc(160px * var(--glow)) calc(-40px * var(--glow)) rgba(240,185,11,.45);
  transition:box-shadow .4s ease;
}

/* Title */
.hero__title { margin:0 0 1.2rem; }
.ticker { font-weight:800; color:var(--primary); }
.ticker.big { display:block; font-size: clamp(1.6rem,4vw,2.8rem); margin-top:.35rem; letter-spacing:.04em; }
.tagline { font-size:clamp(.95rem,1.15rem,1.2rem); max-width:52ch; color:var(--text-dim); font-weight:500; }

.primary { color:var(--primary); text-shadow:0 0 22px #ffd83b55; }

.cta-row {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin:34px 0 40px;
}

.btn {
  --btn-bg:#16202a;
  position:relative;
  appearance:none;
  font:600 .9rem/1 'Inter',sans-serif;
  padding:16px 30px;
  border-radius:var(--radius);
  border:1px solid #28323e;
  color:var(--text);
  background:var(--btn-bg);
  cursor:pointer;
  letter-spacing:.5px;
  display:inline-flex;
  align-items:center;
  gap:.6ch;
  transition:.45s var(--ease);
  overflow:hidden;
}
.btn:focus-visible { outline:none; box-shadow:var(--focus); }
.btn-primary {
  --btn-bg:var(--gradient-primary);
  color:#141003;
  border:1px solid var(--primary);
  box-shadow:0 0 0 1px #f0b90b33,0 10px 30px -12px #f0b90b70;
}
.btn-primary:hover{ filter:brightness(1.05); }
.btn-holo {
  background:linear-gradient(145deg,#121b24,#0d141b);
  border:1px solid #27313d;
  box-shadow:inset 0 0 0 1px #25313b,0 0 0 1px #1b252f;
}
.btn-holo:hover { border-color:var(--primary); color:var(--primary); }
.btn-frame {
  background:transparent;
  border:1px solid #374450;
}
.btn-frame:hover { background:#16202a; border-color:var(--primary); color:var(--primary); }
.btn__glow {
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 30% 20%,#fff8d1,transparent 55%);
  mix-blend-mode:overlay;
  opacity:.35;
  pointer-events:none;
}

.link-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:14px;
  margin:18px 0 46px;
  max-width:640px;
}
.ext-pill {
  display:flex;
  justify-content:center;
  align-items:center;
  padding:14px 10px;
  background:#111a23;
  border:1px solid #232f3a;
  border-radius:12px;
  font-size:.8rem;
  font-weight:600;
  color:#c8d3df;
  letter-spacing:.6px;
  transition:.4s var(--ease);
  text-transform:uppercase;
}
.ext-pill:hover {
  background:#182430;
  color:var(--primary);
  border-color:var(--primary);
  text-decoration:none;
  box-shadow:0 0 0 1px #ffd83b55,0 0 12px #ffd83b55;
}

.contract {
  font-family:ui-monospace,monospace;
  font-size:.75rem;
  background:#0f1620;
  padding:14px 18px;
  border:1px solid #27313d;
  border-radius:12px;
  max-width:620px;
  display:flex;
  flex-direction:column;
  gap:6px;
  position:relative;
}
.contract__label { font-size:.6rem; letter-spacing:.25em; color:var(--text-dim); text-transform:uppercase; }
.contract__code { word-break:break-all; color:#fff9d8; }

/* Sections */
.section {
  padding:120px clamp(1rem,5vw,5rem);
  max-width:1280px;
  margin-inline:auto;
}
.section--glow {
  position:relative;
  background:
    radial-gradient(circle at 50% 0,rgba(240,185,11,.14),transparent 65%);
  border-top:1px solid #18222c;
  border-bottom:1px solid #18222c;
}

.section--glow::before {
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 30%,rgba(240,185,11,.26),transparent 60%);
  filter:blur(60px);
  opacity:.5;
  z-index:-1;
}

/* New: Stat Bar */
.stat-bar { display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:18px;margin:10px 0 40px; }
.stat { position:relative;padding:14px 16px 12px;border:1px solid #27313d;border-radius:12px;background:#111a22b3;backdrop-filter:blur(6px); }
.stat::before { content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 30% 25%,rgba(240,185,11,.18),transparent 70%);opacity:.6;pointer-events:none; }
.stat__value { display:block;font-weight:700;font-size:1rem;letter-spacing:.5px;color:var(--primary); }
.stat__label { font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);font-weight:600; }

/* Tokenomics Grid */
.tokenomics-grid { --min:210px;display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--min),1fr));gap:28px;margin-top:40px; }
.tk-card { position:relative;padding:24px 22px 22px;background:#101921;border:1px solid #26323d;border-radius:18px;overflow:hidden; }
.tk-card::before { content:"";position:absolute;inset:0;background:radial-gradient(circle at 35% 25%,rgba(240,185,11,.16),transparent 60%);opacity:.7; }
.tk-card h3 { margin:0 0 10px;font-size:1rem;font-weight:700;letter-spacing:.5px;color:var(--primary); }
.tk-card .percent { margin:0 0 8px;font-size:2.15rem;font-weight:800;letter-spacing:-.02em;background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 8px rgba(240,185,11,.35)); }
.tk-card .desc { margin:0;font-size:.78rem;line-height:1.45;color:var(--text-dim);max-width:46ch; }

/* Remove bubble layer styles */
.bubble-layer, .bubble, .bubble__avatar, .bubble__body, .bubble__text, .bubble__meta, .bubble__reply, .bubble__count { display:none !important; }

/* Fix avatar shape strictly circular */
.avatar-wrap { width:320px; height:320px; }
.avatar { width:100%; height:100%; border-radius:50%; }

/* Footer */
.site-footer { text-align:center;padding:60px 1rem 90px;font-size:.75rem;letter-spacing:.08em;color:var(--text-dim); }
.site-footer strong { color:var(--primary); }

/* HUD Logo */
.hud__logo { display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:100%; position:relative; background:radial-gradient(circle at 50% 42%,#fff6d4,#f0b90b 68%,#c68a00 100%); box-shadow:0 0 0 2px #1c252d,0 0 0 4px rgba(240,185,11,.45),0 0 24px -6px rgba(240,185,11,.7); overflow:hidden; transition:.45s var(--ease); }
.hud__logo img { width:100%; height:auto; object-fit:contain; filter:drop-shadow(0 3px 6px #0008); }
.hud__logo::after { content:""; position:absolute; inset:0; border-radius:inherit; background:conic-gradient(from 0deg,#f0b90b,#ffd54d,#f0b90b); mix-blend-mode:overlay; opacity:.35; animation:spinSlow 14s linear infinite; }
.hud__logo:hover { transform:translateY(-3px) scale(1.05); box-shadow:0 0 0 2px #1c252d,0 0 0 4px rgba(240,185,11,.6),0 0 34px -4px rgba(240,185,11,.85); text-decoration:none; }
@media (max-width:560px){ .hud__logo { width:46px; height:46px; } }

/* Social links in HUD */
.social-links { display:flex; align-items:center; gap:10px; margin-right:10px; }
.social { width:40px; height:40px; border-radius:14px; display:flex; align-items:center; justify-content:center; position:relative; background:linear-gradient(145deg,#141a21,#10151b); border:1px solid #27313d; color:#98a6b4; transition:.45s var(--ease); overflow:hidden; }
.social svg { width:20px; height:20px; }
.social::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.12),transparent 60%); opacity:0; transition:.5s var(--ease); }
.social:hover { color:#fff; box-shadow:0 0 0 1px #2c3944,0 6px 18px -8px rgba(0,0,0,.6); }
.social:hover::after { opacity:1; }
.social--tw:hover { color:#fff; background:linear-gradient(135deg,#0f1419,#1d9bf0); border-color:#1d9bf0; box-shadow:0 0 0 1px #1d9bf050,0 0 18px -4px #1d9bf0aa; }
.social--tg:hover { color:#fff; background:linear-gradient(135deg,#0f1419,#28a9ea); border-color:#28a9ea; box-shadow:0 0 0 1px #28a9ea50,0 0 18px -4px #28a9eaaa; }
.social--dc:hover { color:#fff; background:linear-gradient(135deg,#0f1419,#5865F2); border-color:#5865F2; box-shadow:0 0 0 1px #5865F250,0 0 18px -4px #5865F2aa; }
@media (max-width:640px){ .social { width:34px; height:34px; border-radius:10px; } .social svg { width:18px; height:18px; } .social-links { gap:6px; margin-right:6px; } }

/* Mobile Bottom Nav */
.mobile-nav { position:fixed; left:50%; transform:translateX(-50%); bottom:10px; width:min(560px,92%); background:rgba(15,20,25,.82); backdrop-filter:blur(18px) saturate(140%); border:1px solid rgba(255,255,255,0.06); box-shadow:0 8px 28px -10px #000a,0 0 0 1px rgba(255,255,255,0.04); border-radius:24px; padding:6px 10px; display:none; z-index:120; grid-template-columns:repeat(5,1fr); gap:4px; }
.mnav__item { appearance:none; background:transparent; border:none; color:#9aa6b3; font:600 11px/1 'Inter',sans-serif; letter-spacing:.05em; padding:10px 0 8px; display:flex; flex-direction:column; align-items:center; gap:6px; border-radius:16px; position:relative; cursor:pointer; transition:.4s var(--ease); }
.mnav__icon { font-size:18px; line-height:1; }
.mnav__item:before { content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at 50% 35%,rgba(240,185,11,.18),transparent 70%); opacity:0; transition:.5s var(--ease); }
.mnav__item.active, .mnav__item:focus-visible { color:#fff; }
.mnav__item.active:before { opacity:1; }
.mnav__item:hover { color:#fff; }
.mnav__item:active { transform:translateY(2px); }

/* Mobile nav social variant */
.mnav__item--social { text-decoration:none; }
.mnav__item--social:hover { color:#fff; }
.mnav__item--social:active { transform:translateY(2px); }

/* New SVG icons, tooltips, badge styles */
.mobile-nav .mnav__icon {display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin:0 auto 2px;}
.mobile-nav .mnav__icon svg{width:100%;height:100%;display:block;}
.mobile-nav .mnav__item{position:relative;}
.mobile-nav .mnav__item .badge{position:absolute;top:2px;right:18%;background:var(--color-accent);color:#000;font-size:10px;line-height:1;padding:2px 5px;border-radius:12px;font-weight:600;box-shadow:0 0 0 2px #111;animation:pulse 4s infinite;}

/* Tooltip */
.mnav__item[data-tooltip]{--tt-bg:rgba(255,255,10,0.15);}
.mnav__item[data-tooltip]::after{content:attr(data-tooltip);position:absolute;left:50%;bottom:44px;transform:translate(-50%,10px);background:#141414;color:var(--color-yellow);font-size:11px;padding:6px 8px;border:1px solid rgba(255,255,255,0.08);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:8px;opacity:0;pointer-events:none;white-space:nowrap;letter-spacing:.5px;box-shadow:0 2px 8px -2px #000;transition:.3s var(--ease-out);}
.mnav__item[data-tooltip]:hover::after,.mnav__item[data-tooltip].show-tip::after{opacity:1;transform:translate(-50%,0);}

/* Compact mode (default) - show only active label */
.mobile-nav.compact .mnav__label{opacity:0;transform:translateY(4px);height:0;overflow:hidden;transition:.35s var(--ease-out);}
.mobile-nav.compact .mnav__item.active .mnav__label{opacity:1;transform:translateY(0);height:auto;}

@media (min-width:701px){.mobile-nav.compact .mnav__label{opacity:1;transform:none;height:auto;}}

/* Active ring tweak for svg */
.mobile-nav .mnav__item.active .mnav__icon{filter:drop-shadow(0 0 6px rgba(255,230,0,.5));}

/* Touch adjustments */
@media (hover:none){.mnav__item[data-tooltip]::after{display:none;}}

@media (max-width:700px){
  .mobile-nav { display:grid; }
  .hud { left:12px; right:12px; }
  .hud__right .social-links { display:none; }
  .hud__btn--buy { display:none; }
  .float-btn--left, .float-btn--right { bottom:84px; }
}

@media (max-width:760px){
  .stat-bar { gap:12px; }
  .tk-card { padding:20px 18px; }
  .tk-card .percent { font-size:1.9rem; }
}

@media (max-width:960px) {
  .hero {
    padding-top:160px;
    gap:40px;
  }
  .avatar { width:100%; }
  .float-btn--left { left:14px; }
  .float-btn--right { right:14px; }
}

@media (max-width:560px) {
  /* Centered & tidy HUD on mobile */
  .hud { flex-direction:column; gap:10px; align-items:center; justify-content:center; text-align:center; padding:14px 16px; }
  .hud__left { width:100%; justify-content:center; }
  .hud__right { display:none; }
  .hero { padding:150px 1.2rem 100px; }
  .link-grid { grid-template-columns:repeat(2,1fr); }
  .cta-row { gap:10px; }
  .btn { flex:1 1 auto; justify-content:center; }
}

/* Accessiblity focus */
:focus-visible {
  outline:none;
  box-shadow:var(--focus);
}

/* Prefer Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; transition:none !important; }
  .bubble { opacity:.9 !important; }
}

/* Adjust existing components for new palette */
.btn-primary { --btn-bg:var(--gradient-primary); color:#141003; border:1px solid var(--primary); box-shadow:0 0 0 1px #f0b90b33,0 10px 30px -12px #f0b90b70; }
.btn-primary:hover{ filter:brightness(1.05); }
.primary { color:var(--primary); text-shadow:0 0 18px #f0b90b55; }
.market-cap { color:var(--primary); }
.roadmap { position:relative; }
.roadmap__timeline { list-style:none; margin:50px 0 0; padding:0; display:grid; gap:38px; counter-reset:phase; }
.rm-phase { position:relative; background:#0f1620; border:1px solid #24313c; border-radius:22px; padding:28px 30px 26px; overflow:hidden; }
.rm-phase::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%,rgba(240,185,11,.18),transparent 70%); opacity:.65; pointer-events:none; }
.rm-phase.is-done { border-color:#2f3d48; box-shadow:0 0 0 1px #2f3d48,0 0 22px -8px rgba(240,185,11,.4); }
.rm-phase.is-active { border-color:var(--primary); box-shadow:0 0 0 1px #f0b90b55,0 0 36px -8px rgba(240,185,11,.55); }
.rm-phase__head { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:0 0 16px; }
.rm-phase h3 { margin:0; font-size:1.05rem; letter-spacing:.5px; }
.rm-phase__badge { font-size:.6rem; letter-spacing:.25em; text-transform:uppercase; font-weight:700; background:#161f29; border:1px solid #2c3945; padding:6px 10px; border-radius:999px; color:var(--primary); position:relative; }
.rm-phase.is-active .rm-phase__badge { background:var(--gradient-primary); color:#1a1304; border-color:var(--primary); box-shadow:0 0 0 1px #f0b90b33,0 8px 20px -10px #f0b90b80; }
.rm-phase__list { list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:.8rem; letter-spacing:.4px; }
.rm-phase__list li { position:relative; padding-left:18px; line-height:1.5; color:var(--text-dim); }
.rm-phase__list li::before { content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg,#ffe892,#f0b90b); box-shadow:0 0 0 1px #544615,0 0 8px -2px #f0b90b; opacity:.85; }
.rm-phase.is-done .rm-phase__list li::before { background:linear-gradient(135deg,#9bb5c6,#dbe8f2); box-shadow:none; opacity:.55; }
.rm-note { margin-top:42px; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:#6c7885; max-width:640px; }
/* Roadmap Progress Bar */
.rm-progress { margin-top:34px; margin-bottom:14px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.rm-progress__track { position:relative; flex:1 1 420px; height:10px; background:#141d26; border:1px solid #25323d; border-radius:40px; overflow:hidden; }
.rm-progress__bar { position:absolute; inset:0; width:0%; background:linear-gradient(90deg,#f0b90b,#ffe072,#f0b90b); box-shadow:0 0 0 1px #f0b90b44,0 0 18px -4px #f0b90b99; border-radius:inherit; transition:width .9s var(--ease); }
.rm-progress__markers { position:absolute; inset:0; pointer-events:none; }
.rm-progress__markers::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),rgba(255,255,255,0.08) calc(25% - 1px) 25%); mix-blend-mode:overlay; opacity:.5; }
.rm-progress__label { font-size:.65rem; letter-spacing:.28em; text-transform:uppercase; font-weight:600; color:var(--text-dim); }
.rm-progress__value { color:var(--primary); }

/* Collapse / Expand */
.rm-phase { cursor:pointer; }
.rm-phase[aria-expanded="false"] .rm-phase__list { max-height:0; opacity:0; overflow:hidden; transition:max-height .5s var(--ease), opacity .5s var(--ease); }
.rm-phase[aria-expanded="true"] .rm-phase__list { max-height:500px; opacity:1; transition:max-height .7s var(--ease), opacity .6s var(--ease); }
.rm-phase .rm-phase__head { position:relative; padding-right:40px; }
.rm-phase .rm-toggle-icon { position:absolute; right:0; top:50%; transform:translateY(-50%) rotate(0deg); width:26px; height:26px; border-radius:8px; background:#16202a; border:1px solid #25323a; display:flex; align-items:center; justify-content:center; font-size:.75rem; color:var(--primary); transition:.45s var(--ease); }
.rm-phase[aria-expanded="true"] .rm-toggle-icon { transform:translateY(-50%) rotate(45deg); background:var(--gradient-primary); color:#141003; box-shadow:0 0 0 1px #f0b90b55,0 6px 20px -10px #f0b90b99; }
.rm-phase:not(.is-active):not(.is-done):hover { border-color:#2d3a46; }

/* Reveal animation */
.rm-phase { opacity:0; transform:translateY(30px); }
.rm-phase.is-visible { opacity:1; transform:translateY(0); transition:opacity .8s var(--ease), transform .9s var(--ease); }
@media (max-width:780px){ .rm-phase { padding:24px 22px 22px; } }
@media (max-width:560px){ .roadmap__timeline { gap:26px; } }
.avatar__halo { background:radial-gradient(circle at 30% 30%, #fff4c2 0 8%, transparent 40%), conic-gradient(from 0deg,#ffe9a1,#f0b90b,#ffce2e,#f0b90b,#ffe9a1); }

/* Hero FX Layer */
.hero { position:relative; }
.hero__fx { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:-1; }
.hero__gradient-swirl { position:absolute; width:1200px; height:1200px; top:50%; left:50%; transform:translate(-50%,-50%); background:conic-gradient(from 0deg,rgba(240,185,11,.0),rgba(240,185,11,.4),rgba(255,220,90,.18),rgba(240,185,11,.0) 75%); filter:blur(140px) saturate(160%); opacity:.55; animation:swirl 22s linear infinite; }
@keyframes swirl { to { transform:translate(-50%,-50%) rotate(360deg); } }
.hero__spotlight { position:absolute; width:900px; height:900px; top:var(--spot-y,50%); left:var(--spot-x,55%); transform:translate(-50%,-50%); background:radial-gradient(circle at 50% 50%,rgba(255,245,210,.55),rgba(240,185,11,.22) 40%,rgba(10,12,16,0) 68%); mix-blend-mode:screen; filter:blur(60px); opacity:.65; transition:300ms ease; }
#orb-canvas { position:absolute; inset:0; width:100%; height:100%; }

/* Floating Orbs (fallback if canvas off) */
.orb { position:absolute; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle at 30% 30%,rgba(255,250,210,.9),rgba(240,185,11,.4) 45%,rgba(240,185,11,.05) 70%,transparent); filter:blur(40px) saturate(140%); animation:orbFloat 16s ease-in-out infinite; opacity:.25; }
.orb--b { width:560px; height:560px; animation-duration:26s; animation-delay:-8s; left:60%; top:10%; }
.orb--a { left:5%; top:35%; }
@keyframes orbFloat { 0%,100% { transform:translate3d(0,0,0) scale(1);} 50% { transform:translate3d(80px,-120px,0) scale(1.15);} }

/* Button shimmer */
.btn-primary { position:relative; overflow:hidden; }
.btn-primary::after { content:""; position:absolute; top:0; left:-40%; width:40%; height:100%; background:linear-gradient(75deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0)); transform:skewX(-25deg); filter:blur(2px); opacity:0; }
.btn-primary:hover::after { animation:shimmer 1.4s ease; }
@keyframes shimmer { 0% { left:-45%; opacity:0; } 15% { opacity:.9; } 60% { opacity:.4; } 100% { left:130%; opacity:0; } }

/* Noise overlay subtle */
body::after { content:""; position:fixed; inset:0; pointer-events:none; background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2NUVFf0BwADNgGOkWD4RQAAAABJRU5ErkJggg==") repeat; mix-blend-mode:overlay; opacity:.08; z-index:5; }

/* Reduced motion safety */
@media (prefers-reduced-motion: reduce){
  .hero__gradient-swirl, .orb, .btn-primary::after { animation:none !important; }
}

/* Global Reveal System */
[data-reveal]{opacity:0; transform:translateY(28px) scale(.98); transition:opacity .9s var(--ease), transform 1s var(--ease); }
[data-reveal].is-revealed{opacity:1; transform:translateY(0) scale(1);} 
[data-reveal-delay="1"]{transition-delay:.08s;} [data-reveal-delay="2"]{transition-delay:.16s;} [data-reveal-delay="3"]{transition-delay:.24s;}

/* Tokenomics tilt glow */
.tk-card{perspective:900px; transform-style:preserve-3d; transition:transform .6s var(--ease), box-shadow .6s var(--ease);}
.tk-card:hover{transform:translateY(-6px) rotateX(6deg) rotateY(-6deg); box-shadow:0 14px 38px -14px rgba(0,0,0,.65),0 0 0 1px #2c3944,0 0 60px -8px rgba(240,185,11,.35);} 
.tk-card:hover::before{opacity:.9;}

/* Global parallax shift hook */
body{--parallax-x:0px; --parallax-y:0px;} 
.section, .hero__content, .hero__media{transform:translate3d(var(--parallax-x), var(--parallax-y),0); transition:transform .9s cubic-bezier(.25,.15,.1,1);} 

/* Airdrop Page */
body.airdrop-page { background:radial-gradient(circle at 50% 20%, #0b1016, #06080c 70%); }
.page-a { max-width:1100px; margin:0 auto; padding:140px clamp(1rem,4vw,3.2rem) 120px; }
.hud--simple { backdrop-filter:blur(18px) saturate(140%); background:linear-gradient(140deg,rgba(15,20,25,.82),rgba(25,30,38,.78)); }
.airdrop-hero { margin:0 0 40px; }
.airdrop-title { font-size:clamp(2.1rem,4.2vw,3.4rem); margin:0 0 10px; background:var(--gradient-primary); -webkit-background-clip:text; background-clip:text; color:transparent; }
.airdrop-sub { margin:0 0 24px; color:var(--text-dim); font-weight:500; }
.airdrop-steps { list-style:none; margin:0 0 10px; padding:0; display:flex; flex-wrap:wrap; gap:10px; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; }
.airdrop-steps li { background:#111a22; border:1px solid #25323d; padding:10px 14px 8px; border-radius:999px; color:#c8d3df; font-weight:600; position:relative; }
.airdrop-section { position:relative; background:#0e151c; border:1px solid #1f2b35; border-radius:26px; padding:46px clamp(1.2rem,3vw,2.4rem) 50px; box-shadow:0 0 0 1px #1d2a34,0 30px 60px -28px #000a,0 0 110px -40px rgba(240,185,11,.35); }
.airdrop-form { display:flex; flex-direction:column; gap:42px; }
.af-group { margin:0; padding:0; border:none; display:flex; flex-direction:column; gap:26px; }
.af-group legend { font-size:.8rem; letter-spacing:.28em; text-transform:uppercase; color:var(--primary); font-weight:700; margin:0 0 6px; }
.af-row { display:flex; flex-direction:column; gap:10px; }
.af-col { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:22px; }
.af-row label { font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--text-dim); }
.af-row input[type="text"],
.af-row input[type="url"],
.af-row input[type="file"] { background:#121b24; border:1px solid #27333e; border-radius:14px; padding:16px 16px; font:500 .85rem/1.2 'Inter',sans-serif; color:var(--text); transition:.4s var(--ease); }
.af-row input:focus { outline:none; box-shadow:var(--focus); border-color:var(--primary); }
.af-row input[type="file"] { padding:12px 16px; }
.af-row input::placeholder { color:#5c6975; }
.af-row.optional label::after { content:" (Opsional)"; font-weight:400; color:#5d6a76; }
.hint { font-size:.65rem; letter-spacing:.15em; color:#6a7986; text-transform:uppercase; }
.af-check { display:flex; align-items:flex-start; gap:12px; font-size:.75rem; line-height:1.4; background:#121b24; border:1px solid #27333e; padding:16px 18px 16px; border-radius:16px; }
.af-check input { margin-top:4px; width:18px; height:18px; accent-color:var(--primary); }
.af-actions { display:flex; gap:18px; flex-wrap:wrap; }
.af-submit { min-width:180px; position:relative; }
.af-submit .loader { width:18px; height:18px; border:3px solid rgba(255,255,255,.25); border-top-color:#fff; border-radius:50%; animation:spin .9s linear infinite; opacity:0; transform:scale(.6); transition:.35s var(--ease); }
.af-submit.loading .loader { opacity:1; transform:scale(1); }
.af-submit.loading .label { opacity:.3; }
@keyframes spin { to { transform:rotate(360deg); } }
.form-status { margin-top:18px; font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--primary); }
.form-status.error { color:var(--danger); }
.file-preview { position:relative; width:140px; aspect-ratio:4/3; border:1px dashed #2b3945; border-radius:14px; background:#10181f; display:flex; align-items:center; justify-content:center; overflow:hidden; font-size:.55rem; letter-spacing:.15em; color:#3e5565; text-transform:uppercase; font-weight:600; }
.file-preview img { width:100%; height:100%; object-fit:cover; display:block; }
.file-preview::before { content:"Preview"; }
.file-preview.has-image::before { display:none; }

.upload-progress { margin-top:18px; display:flex; align-items:center; gap:14px; }
.upload-progress__bar { flex:1; height:14px; background:#18232c; border:1px solid #25333e; border-radius:999px; position:relative; overflow:hidden; }
.upload-progress__fill { position:absolute; inset:0; width:0%; background:var(--gradient-primary); box-shadow:0 0 0 1px #f0b90b55,0 0 22px -6px #f0b90b; border-radius:inherit; transition:width .35s cubic-bezier(.4,.6,.2,1); }
.upload-progress__label { font-size:.6rem; letter-spacing:.25em; font-weight:600; color:#7c8b96; min-width:42px; text-align:right; }

.submission-success { margin-top:30px; display:flex; gap:18px; background:linear-gradient(145deg,#0f181f,#121e26); border:1px solid #20303a; border-radius:20px; padding:22px 26px; position:relative; box-shadow:0 0 0 1px #20303a,0 10px 32px -18px #000a,0 0 60px -28px rgba(240,185,11,.3); animation:pop-in .65s var(--ease); }
.submission-success__icon { width:54px; height:54px; border-radius:16px; background:var(--gradient-primary); display:flex; align-items:center; justify-content:center; font-size:1.8rem; font-weight:700; color:#1b1405; box-shadow:0 0 0 1px var(--primary),0 10px 30px -14px #f0b90bcc; }
.submission-success__body h3 { margin:0 0 6px; font-size:1.05rem; letter-spacing:.5px; }
.submission-success__body p { margin:0 0 14px; font-size:.8rem; color:var(--text-dim); line-height:1.5; }
.submission-success__close { align-self:flex-start; }
@keyframes pop-in { 0% { opacity:0; transform:translateY(18px) scale(.96);} 60% { opacity:1; transform:translateY(0) scale(1.01);} 100% { opacity:1; transform:translateY(0) scale(1);} }

@media (max-width:720px){
  .file-preview { width:120px; }
  .submission-success { flex-direction:column; }
  .submission-success__icon { width:64px; height:64px; font-size:2rem; }
}

/* Wallet connect UI */
.wallet-connect-wrap { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.wallet-manual { margin-top:8px; display:flex; gap:8px; align-items:center; }
.manual-wallet-input { flex:1; background:#111a19; border:1px solid #24323c; color:#fff; padding:11px 14px; border-radius:14px; font:600 .75rem/1 'Inter',sans-serif; letter-spacing:.06em; }
.manual-wallet-input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 1px var(--primary); }
.wallet-manual.valid .manual-wallet-input { border-color:#36d26b; }
.wallet-manual.invalid .manual-wallet-input { border-color:#ff5566; }
.btn-small { padding:10px 16px; font-size:.6rem; letter-spacing:.2em; }
.wallet-connect { min-width:180px; }
.wallet-display { font-size:.75rem; letter-spacing:.18em; font-weight:600; color:var(--primary); background:#111a22; border:1px solid #25323b; padding:10px 14px; border-radius:12px; max-width:100%; word-break:break-all; }
.wallet-display:empty { display:none; }
.wallet-connect.connected .label { color:#1c1504; }
.wallet-connect.connected { background:var(--gradient-primary); border:1px solid var(--primary); box-shadow:0 0 0 1px #f0b90b55,0 6px 20px -10px #f0b90bcc; }
.wallet-connect.error { animation:shake .5s ease; }
.wallet-copy { width:52px; height:48px; display:inline-flex; align-items:center; justify-content:center; font-size:1rem; border:1px solid #27333e; background:#151e26; border-radius:14px; cursor:pointer; transition:.4s var(--ease); }
.wallet-copy:hover { background:#18242d; border-color:#31414d; }
.wallet-copy:active { transform:translateY(2px); }
.wallet-chain { background:#18242a; border:1px solid #25323b; padding:10px 14px; border-radius:14px; font-size:.55rem; letter-spacing:.28em; font-weight:700; color:#8fa3b4; text-transform:uppercase; display:inline-flex; align-items:center; gap:6px; position:relative; }
.wallet-chain::before { content:""; width:10px; height:10px; border-radius:50%; background:radial-gradient(circle at 30% 30%,#f0b90b,#8a6105); box-shadow:0 0 0 1px #f0b90b66,0 0 14px -4px #f0b90b; }
.wallet-chain.mismatch { border-color:#5e2a2f; color:#ffb3bd; background:#291317; }
.wallet-chain.mismatch::before { background:radial-gradient(circle at 30% 30%,#ff4d5d,#8a101c); box-shadow:0 0 0 1px #ff4d5d66,0 0 14px -4px #ff4d5d; }
.wallet-display[data-tooltip] { position:relative; cursor:pointer; }
.wallet-display[data-tooltip]::after { content:attr(data-full); position:absolute; left:50%; top:-8px; transform:translate(-50%, -100%); background:#0d161d; border:1px solid #22313d; padding:8px 10px; border-radius:10px; font-size:.6rem; letter-spacing:.18em; color:#c9d5de; white-space:nowrap; opacity:0; pointer-events:none; transition:.35s var(--ease); box-shadow:0 4px 18px -6px #000a; }
.wallet-display[data-tooltip]:hover::after { opacity:1; }
.wallet-display.copy-ok { animation:copyPulse 1s ease; }
@keyframes copyPulse { 0% { box-shadow:0 0 0 0 #f0b90b66;} 70% { box-shadow:0 0 0 10px rgba(240,185,11,0);} 100% { box-shadow:0 0 0 0 rgba(240,185,11,0);} }
@keyframes shake { 10%,90% { transform:translateX(-2px);} 20%,80% { transform:translateX(4px);} 30%,50%,70% { transform:translateX(-6px);} 40%,60% { transform:translateX(6px);} }
.wallet-fallback { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.wallet-fallback input { background:#121b24; border:1px solid #27333e; border-radius:14px; padding:12px 14px; font:500 .85rem/1.2 'Inter',sans-serif; color:var(--text); }
.wallet-fallback input:focus { outline:none; border-color:var(--primary); box-shadow:var(--focus); }
.fallback-label { font-size:.6rem; letter-spacing:.25em; text-transform:uppercase; color:#5f6c78; font-weight:600; }

/* Success toast */
/* Success modal (centered) */
.success-toast { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:40px 24px; z-index:600; background:rgba(6,10,14,.78); backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%); animation:fadeBg .5s var(--ease); }
.success-toast__card { background:linear-gradient(145deg,#0e171e,#121e26); border:1px solid #1f2e39; border-radius:28px; padding:44px clamp(1.4rem,3vw,2.6rem) 46px; box-shadow:0 0 0 1px #20303a,0 25px 70px -28px #000a,0 0 140px -40px rgba(240,185,11,.4); width:100%; max-width:620px; display:flex; gap:30px; position:relative; animation:cardIn .7s cubic-bezier(.25,.85,.35,1); }
.success-toast__icon { width:72px; height:72px; border-radius:22px; background:var(--gradient-primary); display:flex; align-items:center; justify-content:center; font-size:2rem; font-weight:800; color:#1c1406; box-shadow:0 0 0 1px var(--primary),0 10px 34px -14px #f0b90bcc; flex-shrink:0; }
.success-toast__content { display:flex; flex-direction:column; gap:12px; }
.success-toast__title { font-weight:800; font-size:1.55rem; letter-spacing:.5px; margin:0; background:var(--gradient-primary); -webkit-background-clip:text; background-clip:text; color:transparent; }
.success-toast__msg { font-size:.85rem; line-height:1.55; color:var(--text-dim); }
.success-toast__actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:6px; }
.success-toast__close { position:absolute; top:14px; right:16px; background:#121c23; border:1px solid #25323b; width:46px; height:46px; border-radius:14px; font-size:1.4rem; cursor:pointer; color:#7e8c97; display:flex; align-items:center; justify-content:center; transition:.4s var(--ease); }
.success-toast__close:hover { color:#fff; background:#16222b; border-color:#2d3b46; }
.success-toast[hidden] { display:none; }
@media (max-width:680px){
  .success-toast__card { flex-direction:column; align-items:flex-start; padding:38px 26px 40px; }
  .success-toast__icon { width:64px; height:64px; font-size:1.7rem; }
  .success-toast__title { font-size:1.38rem; }
}
@keyframes cardIn { 0% { opacity:0; transform:translateY(26px) scale(.94);} 55% { opacity:1; transform:translateY(0) scale(1.015);} 100% { opacity:1; transform:translateY(0) scale(1);} }
@keyframes fadeBg { 0% { opacity:0; } 100% { opacity:1; } }

/* Wallet Picker Modal */
.wallet-picker { position:fixed; inset:0; z-index:700; display:flex; align-items:center; justify-content:center; padding:40px 28px; background:rgba(4,8,12,.75); backdrop-filter:blur(18px) saturate(170%); -webkit-backdrop-filter:blur(18px) saturate(170%); animation:fadeBg .4s var(--ease); }
.wallet-picker[hidden]{ display:none; }
.wallet-picker__panel { width:100%; max-width:620px; max-height:calc(100dvh - 120px); overflow:auto; scrollbar-width:thin; background:linear-gradient(155deg,#0e171e,#121e26); border:1px solid #1f2e39; border-radius:30px; padding:46px clamp(1.6rem,3vw,2.6rem) 50px; position:relative; box-shadow:0 0 0 1px #20303a,0 26px 80px -34px #000a,0 0 140px -40px rgba(240,185,11,.38); animation:panelIn .6s cubic-bezier(.25,.85,.35,1); }
.wallet-picker__close { position:absolute; top:16px; right:18px; width:50px; height:50px; border-radius:16px; border:1px solid #28343f; background:#121c23; color:#7d8a96; font-size:1.6rem; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.45s var(--ease); }
.wallet-picker__close:hover { background:#16242c; color:#fff; border-color:#31404d; }
.wallet-picker__title { margin:0 0 12px; font-size:1.7rem; letter-spacing:.5px; background:var(--gradient-primary); -webkit-background-clip:text; background-clip:text; color:transparent; }
.wallet-picker__sub { margin:0 0 34px; font-size:.85rem; color:var(--text-dim); line-height:1.55; }
/* Wallet picker refined */
.wallet-picker__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:30px 28px; }
.wallet-opt { position:relative; padding:26px 22px 30px; border:1px solid #1f2b33; background:linear-gradient(150deg,#111a21,#0f161c); border-radius:28px; cursor:pointer; display:flex; flex-direction:column; gap:22px; align-items:center; justify-content:flex-start; transition:.55s var(--ease); overflow:hidden; font:600 .68rem/1 'Inter',sans-serif; letter-spacing:.3em; text-transform:uppercase; color:#9eabb5; min-height:190px; }
.wallet-opt::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.09),transparent 70%); opacity:0; transition:.6s var(--ease); }
.wallet-opt::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 0 0 rgba(240,185,11,0); transition:.7s var(--ease); pointer-events:none; }
.wallet-opt:hover { border-color:#2b3943; color:#fff; transform:translateY(-6px); }
.wallet-opt:hover::before { opacity:.55; }
.wallet-opt:active { transform:translateY(-2px) scale(.985); }
.wallet-opt__icon { width:74px; height:74px; border-radius:24px; background:#18242c; display:flex; align-items:center; justify-content:center; position:relative; box-shadow:0 0 0 1px #22323c,0 10px 24px -14px #000a; }
.wallet-opt__icon img, .wallet-opt__icon svg { width:72%; height:72%; object-fit:contain; filter:drop-shadow(0 4px 8px rgba(0,0,0,.45)); }
.wallet-opt[data-last="true"] { border-color:var(--primary); color:#fff; }
.wallet-opt[data-last="true"]::after { box-shadow:0 0 0 1px var(--primary),0 0 46px -10px rgba(240,185,11,.55),0 30px 50px -34px rgba(240,185,11,.4); }
.wallet-opt[data-last="true"] .wallet-opt__icon { box-shadow:0 0 0 1px var(--primary),0 10px 28px -14px rgba(240,185,11,.55); }
.wallet-opt__badge { position:absolute; top:12px; left:14px; background:var(--gradient-primary); color:#1c1405; padding:5px 10px 4px; font:800 .5rem/1 'Inter',sans-serif; letter-spacing:.32em; border-radius:14px; box-shadow:0 0 0 1px var(--primary),0 4px 14px -6px rgba(240,185,11,.5); display:none; }
.wallet-opt[data-last="true"] .wallet-opt__badge { display:inline-flex; }
.wallet-opt__loader { position:absolute; top:12px; right:14px; width:20px; height:20px; border:3px solid rgba(255,255,255,.18); border-top-color:#fff; border-radius:50%; animation:spin .9s linear infinite; opacity:0; transform:scale(.55); transition:.35s var(--ease); }
.wallet-opt.loading .wallet-opt__loader { opacity:1; transform:scale(1); }
@keyframes spin { to { transform:rotate(360deg); } }
.wallet-opt.error { border-color:#5e2a2f !important; }
.wallet-picker__foot { margin-top:40px; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:#61717e; display:flex; justify-content:space-between; align-items:center; }
.wallet-picker__foot a { color:var(--primary); text-decoration:none; }
@keyframes panelIn { 0% { opacity:0; transform:translateY(30px) scale(.95);} 55% { opacity:1; transform:translateY(0) scale(1.01);} 100% { opacity:1; transform:translateY(0) scale(1);} }
@media (max-width:820px){ .wallet-picker__panel { max-width:560px; } }
@media (max-width:680px){ .wallet-picker__panel { padding:40px 26px 44px; } .wallet-opt { padding:18px 16px 20px; min-height:150px; } .wallet-picker__grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:22px 18px; } }
@media (max-width:520px){ .wallet-picker__panel { padding:34px 22px 40px; } .wallet-picker__grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); } .wallet-opt { min-height:140px; } }
.success-toast__icon { width:44px; height:44px; border-radius:14px; background:var(--gradient-primary); display:flex; align-items:center; justify-content:center; font-size:1.4rem; font-weight:700; color:#1c1406; box-shadow:0 0 0 1px var(--primary),0 6px 22px -10px #f0b90bcc; }
.success-toast__title { font-weight:700; font-size:.9rem; letter-spacing:.5px; margin-bottom:2px; }
.success-toast__msg { font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--text-dim); }
.success-toast__close { background:transparent; border:none; color:#758693; font-size:1.2rem; cursor:pointer; padding:4px 6px; border-radius:10px; transition:.35s var(--ease); }
.success-toast__close:hover { color:#fff; background:#16222b; }
.success-toast[hidden] { display:none; }
@keyframes toast-pop { 0% { opacity:0; transform:translateY(18px) scale(.96);} 60% { opacity:1; transform:translateY(0) scale(1.01);} 100% { opacity:1; transform:translateY(0) scale(1);} }
@media (max-width:620px){ .success-toast { left:50%; right:auto; transform:translateX(-50%); bottom:18px; width:calc(100% - 32px); } }
.airdrop-faq { margin:90px 0 40px; }
.airdrop-faq h2 { font-size:1.4rem; margin:0 0 24px; }
.airdrop-faq details { background:#0f181f; border:1px solid #232f3a; border-radius:16px; padding:18px 22px; margin:0 0 16px; }
.airdrop-faq summary { cursor:pointer; font-weight:600; letter-spacing:.5px; }
.airdrop-faq p { margin:10px 0 0; font-size:.85rem; color:var(--text-dim); }
.site-footer.small { padding-top:30px; }
@media (max-width:720px){ .airdrop-section { padding:38px 1.2rem 44px; } .af-col { grid-template-columns:1fr; } .page-a { padding:140px 1rem 100px; } }
@media (max-width:560px){ .airdrop-title { font-size:2.4rem; } .airdrop-steps { flex-direction:column; align-items:flex-start; } }

/* Spark canvas layer placeholder */
#spark-canvas{position:fixed; inset:0; pointer-events:none; z-index:4; mix-blend-mode:screen;}

/* PFP Generator Modal */
.pfp-modal{position:fixed;inset:0;z-index:600;display:none;font-family:inherit;}
.pfp-modal[aria-hidden="false"]{display:block;}
.pfp-modal__overlay{position:absolute;inset:0;background:rgba(3,6,10,.82);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);}
.pfp-modal__panel{position:relative;margin:40px auto;max-width:1400px;min-height:calc(100dvh - 80px);background:linear-gradient(145deg,#0d141b,#121b24);border:1px solid #1f2a33;border-radius:22px;padding:38px 40px 34px;display:flex;flex-direction:column;box-shadow:0 0 0 1px #20303c,0 30px 60px -25px #000a,0 0 120px -40px rgba(240,185,11,.35);overflow:hidden;}
.pfp-modal__panel:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 8% 16%,rgba(240,185,11,.15),transparent 70%),radial-gradient(circle at 92% 84%,rgba(240,185,11,.12),transparent 75%);pointer-events:none;}
.pfp-modal__header{display:flex;flex-direction:column;gap:6px;margin:0 0 28px;}
.pfp-modal__header h2{margin:0;font-size:1.6rem;letter-spacing:.5px;}
.pfp-sub{margin:0;font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);}
.pfp-close{position:absolute;top:14px;right:16px;width:42px;height:42px;border-radius:12px;border:1px solid #27333e;background:#141d25;color:#c9d3dc;font-size:1.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.4s var(--ease);} .pfp-close:hover{color:#fff;border-color:#2f3d49;background:#19242d;}
.pfp-modal__body{flex:1;display:grid;grid-template-columns: minmax(360px,520px) 1fr;gap:46px;align-items:start;}
.pfp-left{display:flex;flex-direction:column;gap:22px;}
.pfp-preview{background:#121a22;border:1px solid #27323d;border-radius:16px;padding:18px;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 0 0 1px #27323d,0 0 34px -10px rgba(240,185,11,.35);}
.pfp-preview:before{content:"";position:absolute;inset:10px;border:2px solid #f0b90b;border-radius:14px;box-shadow:0 0 38px -6px #f0b90b,0 0 0 1px #f0b90b55;pointer-events:none;}
#pfp-canvas{width:100%;height:auto;max-width:100%;border-radius:12px;image-rendering:crisp-edges;}
.pfp-actions{display:flex;gap:14px;}
.pfp-btn{--btn-bg:#16202a;flex:1 1 0;padding:18px 24px;border-radius:14px;border:1px solid #28323e;background:var(--btn-bg);color:var(--text);font:600 .85rem/1 'Inter',sans-serif;letter-spacing:.5px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.6ch;transition:.45s var(--ease);position:relative;overflow:hidden;}
.pfp-btn--primary{--btn-bg:var(--gradient-primary);color:#1a1304;border:1px solid var(--primary);box-shadow:0 0 0 1px #f0b90b33,0 10px 30px -12px #f0b90b70;}
.pfp-btn--holo{background:linear-gradient(145deg,#141d24,#10161d);}
.pfp-btn:hover{filter:brightness(1.05);} .pfp-btn:active{transform:translateY(2px);} .pfp-btn:focus-visible{outline:none;box-shadow:var(--focus);} 
.pfp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;}
.pfp-stat{background:#111a23;border:1px solid #222f3a;border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;align-items:flex-start;}
.pfp-stat__value{font-weight:700;font-size:1.08rem;letter-spacing:.5px;color:var(--primary);} .pfp-stat__label{font-size:.55rem;letter-spacing:.28em;font-weight:600;color:var(--text-dim);}
.pfp-right{display:flex;flex-direction:column;gap:30px;min-height:0;}
.pfp-tabs{display:flex;flex-wrap:wrap;gap:4px;background:#101921;border:1px solid #27323d;padding:6px 8px;border-radius:16px;}
.pfp-tab{appearance:none;background:transparent;color:#95a5b3;border:none;padding:14px 22px;font:600 .8rem/1 'Inter',sans-serif;letter-spacing:.15em;text-transform:uppercase;border-radius:12px;cursor:pointer;position:relative;transition:.4s var(--ease);} .pfp-tab:hover{color:#fff;background:#16222c;} .pfp-tab.is-active{background:var(--gradient-primary);color:#171108;box-shadow:0 0 0 1px #f0b90b66,0 6px 18px -8px #f0b90b99;}
.pfp-grid-wrap{display:flex;flex-direction:column;gap:18px;min-height:0;}
.pfp-grid-title{margin:0;font-size:.95rem;display:flex;align-items:center;gap:12px;letter-spacing:.5px;}
.pfp-grid-count{font-size:.6rem;letter-spacing:.25em;color:var(--text-dim);font-weight:600;text-transform:uppercase;}
.pfp-grid{--size:110px;display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--size),1fr));gap:14px;max-height:520px;overflow:auto;padding-right:4px;}
.pfp-item{position:relative;border:1px solid #27333e;border-radius:14px;aspect-ratio:1/1;background:#121b24;display:flex;align-items:center;justify-content:center;color:#c7d2db;font:600 .7rem/1 'Inter',sans-serif;letter-spacing:.4px;cursor:pointer;transition:.45s var(--ease);overflow:hidden;}
.pfp-item::before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,0));opacity:0;transition:.5s var(--ease);}
.pfp-item:hover{color:#fff;border-color:#31404d;}
.pfp-item:hover::before{opacity:.4;}
.pfp-item.is-active{border:2px solid var(--primary);color:#fff;box-shadow:0 0 0 1px var(--primary),0 0 28px -6px #f0b90b;}
.pfp-item.is-active::before{opacity:.55;}
.pfp-footer{margin-top:28px;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:#6a7783;text-align:center;}
.pfp-note{margin:0;}

/* Scrollbar styling inside grid */
.pfp-grid::-webkit-scrollbar{width:10px;}
.pfp-grid::-webkit-scrollbar-track{background:#121b24;border-radius:20px;}
.pfp-grid::-webkit-scrollbar-thumb{background:#1f2a34;border-radius:20px;border:2px solid #121b24;}
.pfp-grid::-webkit-scrollbar-thumb:hover{background:#24313d;}

@media (max-width:1280px){.pfp-modal__body{grid-template-columns: minmax(340px,480px) 1fr;}}
@media (max-width:1000px){.pfp-modal__body{grid-template-columns:1fr;}.pfp-right{order:3;}.pfp-left{order:2;}.pfp-preview{max-width:520px;margin:0 auto;} .pfp-actions{flex-wrap:wrap;} }
@media (max-width:640px){.pfp-modal__panel{padding:30px 22px 30px;border-radius:0;min-height:100dvh;margin:0;} .pfp-modal__body{gap:30px;} .pfp-tabs{justify-content:space-between;} .pfp-tab{flex:1 1 auto;text-align:center;padding:12px 10px;} .pfp-grid{--size:94px;max-height:360px;} }