/* ═══════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════ */
:root{
  --stone-dark:   #0D0D0F;
  --stone-mid:    #16161A;
  --stone-card:   #1C1C21;
  --stone-hover:  #232329;
  --gold:         #C9932A;
  --gold-light:   #E8B84B;
  --gold-dim:     #8A6015;
  --teal:         #2D5A5C;
  --text:         #EDEAE3;
  --text-dim:     #9A9488;
  --text-faint:   #6A6558;
  --border:       #2A2A30;
  --green:        #4ade80;
  --red:          #f87171;
  --radius:       14px;
  --radius-lg:    20px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--stone-dark);
  color:var(--text);
  font-family:'Inter',sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
input{font-family:inherit;}

/* ── Typography ── */
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;font-weight:700;line-height:1.15;}
.eyebrow{
  font-family:'Space Grotesk',sans-serif;
  font-size:.75rem;font-weight:600;
  color:var(--gold);letter-spacing:.14em;
  text-transform:uppercase;display:block;margin-bottom:.8rem;
}
.section-title{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:.8rem;}
.section-desc{color:var(--text-dim);font-size:1rem;max-width:600px;}

/* ── Layout ── */
section{padding:5rem 1.5rem;position:relative;}
.wrap{max-width:1140px;margin:0 auto;}
.divider{
  height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);
  margin:0 auto;max-width:1140px;
}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.8rem;border-radius:40px;
  font-family:'Space Grotesk',sans-serif;
  font-size:.95rem;font-weight:600;
  transition:all .22s;cursor:pointer;
}
.btn-primary{
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  color:#0D0D0F;
  box-shadow:0 4px 24px rgba(201,147,42,.3);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(201,147,42,.45);}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;}
.btn-outline{
  border:1.5px solid var(--border);color:var(--text);
}
.btn-outline:hover{border-color:var(--gold);color:var(--gold-light);}
.btn-ghost{color:var(--text-dim);padding:.6rem 1rem;}
.btn-ghost:hover{color:var(--gold-light);}
.btn-full{width:100%;}

/* ═══════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 2rem;
  background:rgba(13,13,15,.82);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.logo{display:flex;align-items:center;gap:.7rem;}
.logo img{width:34px;height:34px;border-radius:50%;}
.logo-text{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.1rem;font-weight:700;letter-spacing:.02em;
}
.logo-text span{color:var(--gold);}
.nav-links{display:flex;gap:1.8rem;align-items:center;}
.nav-links a{
  font-size:.88rem;color:var(--text-dim);
  font-weight:500;transition:color .2s;
}
.nav-links a:hover,.nav-links a.active{color:var(--gold-light);}
.nav-right{display:flex;gap:.8rem;align-items:center;}
.wallet-btn{
  padding:.6rem 1.3rem;border-radius:40px;
  font-size:.85rem;font-weight:600;
  font-family:'Space Grotesk',sans-serif;
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  color:#0D0D0F;
}
.wallet-btn.connected{
  background:transparent;border:1.5px solid var(--green);
  color:var(--green);
}
.menu-toggle{display:none;font-size:1.5rem;color:var(--text);}

@media(max-width:900px){
  .nav-links{
    position:fixed;top:64px;left:0;right:0;
    flex-direction:column;gap:0;
    background:var(--stone-mid);
    border-bottom:1px solid var(--border);
    max-height:0;overflow:hidden;transition:max-height .3s;
  }
  .nav-links.open{max-height:520px;}   /* 8 links = 444px; 400 clipped the last one */
  .nav-links a{padding:1rem 2rem;width:100%;border-bottom:1px solid var(--border);}
  .menu-toggle{display:block;}
  nav{padding:1rem 1.2rem;}
}

/* ═══════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════ */
#hero{
  min-height:100vh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  padding:7rem 1.5rem 4rem;
  position:relative;overflow:hidden;
}
.hero-glow{
  position:absolute;
  width:600px;height:600px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(201,147,42,.13) 0%,transparent 65%);
  top:20%;left:50%;transform:translateX(-50%);
  pointer-events:none;
}
.hero-coin{
  width:130px;height:130px;
  margin-bottom:2rem;
  border-radius:50%;
  animation:float 5s ease-in-out infinite;
  box-shadow:0 0 60px rgba(201,147,42,.35);
  position:relative;z-index:2;
}
@keyframes float{
  0%,100%{transform:translateY(0) rotate(-2deg);}
  50%{transform:translateY(-14px) rotate(2deg);}
}
.hero-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.4rem 1rem;border-radius:40px;
  background:rgba(201,147,42,.1);
  border:1px solid rgba(201,147,42,.3);
  font-size:.8rem;color:var(--gold-light);
  font-weight:600;margin-bottom:1.4rem;
  position:relative;z-index:2;
}
.hero-badge .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--gold);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.hero-title{
  font-size:clamp(2.4rem,7vw,4.4rem);
  margin-bottom:1rem;
  position:relative;z-index:2;
  letter-spacing:-.02em;
}
.hero-title .accent{
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-sub{
  font-size:1.05rem;color:var(--text-dim);
  max-width:520px;margin:0 auto 2.4rem;
  position:relative;z-index:2;
}

/* ── Countdown ── */
.countdown-wrap{
  position:relative;z-index:2;
  margin-bottom:2.4rem;
}
.countdown-label{
  font-family:'Space Grotesk',sans-serif;
  font-size:.8rem;font-weight:600;
  color:var(--gold);letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:1rem;
}
.countdown{
  display:flex;gap:.8rem;justify-content:center;
}
.cd-box{
  background:var(--stone-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem 1.2rem;
  min-width:78px;
}
.cd-num{
  font-family:'Space Grotesk',sans-serif;
  font-size:2rem;font-weight:700;
  color:var(--gold-light);
  display:block;line-height:1;
  font-variant-numeric:tabular-nums;
}
.cd-unit{
  font-size:.7rem;color:var(--text-faint);
  text-transform:uppercase;letter-spacing:.1em;
  margin-top:.4rem;display:block;
}
.hero-cta{
  display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;
  position:relative;z-index:2;
}
@media(max-width:600px){
  .countdown{gap:.5rem;}
  .cd-box{padding:.8rem .7rem;min-width:64px;}
  .cd-num{font-size:1.5rem;}
}

/* ═══════════════════════════════════════════
   TOKEN INFO GRID
   ═══════════════════════════════════════════ */
.info-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1rem;margin-top:2.5rem;
}
.info-card{
  background:var(--stone-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.4rem;
  transition:border-color .2s,transform .2s;
}
.info-card:hover{border-color:var(--gold-dim);transform:translateY(-3px);}
.info-label{
  font-size:.75rem;color:var(--text-faint);
  text-transform:uppercase;letter-spacing:.1em;
  font-weight:600;margin-bottom:.5rem;
}
.info-value{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.35rem;font-weight:700;
  color:var(--text);
}
.info-value.gold{color:var(--gold-light);}
.info-value.green{color:var(--green);}
.info-note{font-size:.78rem;color:var(--text-faint);margin-top:.3rem;}

/* ── Contract copy ── */
.contract-box{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;margin-top:2rem;
  background:var(--stone-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem 1.2rem;
  cursor:pointer;transition:border-color .2s;
}
.contract-box:hover{border-color:var(--gold);}
.contract-addr{
  font-family:monospace;font-size:.82rem;
  color:var(--gold-light);word-break:break-all;
}
.copy-badge{
  font-size:.78rem;color:var(--text-dim);
  white-space:nowrap;font-weight:500;
}

/* ═══════════════════════════════════════════
   PRESALE
   ═══════════════════════════════════════════ */
.presale-grid{
  display:grid;grid-template-columns:1fr 400px;
  gap:2.5rem;margin-top:2.5rem;align-items:start;
}
@media(max-width:960px){.presale-grid{grid-template-columns:1fr;}}

/* Live stats */
.live-stats{
  background:var(--stone-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.8rem;
}
.live-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1.5rem;
}
.live-badge{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.3rem .8rem;border-radius:30px;
  background:rgba(74,222,128,.1);
  border:1px solid rgba(74,222,128,.3);
  font-size:.72rem;color:var(--green);font-weight:600;
}
.live-badge.soon{
  background:rgba(201,147,42,.1);
  border-color:rgba(201,147,42,.3);
  color:var(--gold-light);
}
.live-badge .dot{
  width:6px;height:6px;border-radius:50%;
  background:currentColor;animation:pulse 1.6s infinite;
}
.tier-display{
  display:flex;align-items:baseline;gap:.7rem;
  margin-bottom:.4rem;
}
.tier-name{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.6rem;font-weight:700;color:var(--gold-light);
}
.tier-rate{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.05rem;color:var(--text);
}
.tier-rate small{color:var(--text-dim);font-size:.85rem;}

/* Progress bar */
.progress-wrap{margin:1.5rem 0;}
.progress-top{
  display:flex;justify-content:space-between;
  font-size:.82rem;color:var(--text-dim);
  margin-bottom:.5rem;
}
.progress-bar{
  height:10px;border-radius:20px;
  background:var(--stone-hover);
  overflow:hidden;position:relative;
}
.progress-fill{
  height:100%;
  background:linear-gradient(90deg,var(--gold),var(--gold-light));
  border-radius:20px;
  transition:width .8s cubic-bezier(.2,.8,.2,1);
  width:0%;
}
.progress-ticks{
  display:flex;justify-content:space-between;
  margin-top:.4rem;font-size:.68rem;color:var(--text-faint);
}
.stats-row{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1rem;margin-top:1.5rem;
  padding-top:1.5rem;border-top:1px solid var(--border);
}
.stat-mini-label{
  font-size:.7rem;color:var(--text-faint);
  text-transform:uppercase;letter-spacing:.08em;
}
.stat-mini-val{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.15rem;font-weight:700;
  color:var(--text);margin-top:.2rem;
}

/* Buy box */
.buy-box{
  background:var(--stone-card);
  border:1px solid var(--gold-dim);
  border-radius:var(--radius-lg);
  padding:1.8rem;
  position:sticky;top:6rem;
}
.buy-title{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.2rem;font-weight:700;
  margin-bottom:1.2rem;
}
.input-group{margin-bottom:1rem;}
.input-label{
  display:flex;justify-content:space-between;
  font-size:.8rem;color:var(--text-dim);
  margin-bottom:.5rem;
}
.input-wrap{
  display:flex;align-items:center;
  background:var(--stone-dark);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:.9rem 1rem;
  transition:border-color .2s;
}
.input-wrap:focus-within{border-color:var(--gold);}
.input-wrap input{
  flex:1;background:none;border:none;outline:none;
  color:var(--text);font-size:1.15rem;font-weight:600;
  font-family:'Space Grotesk',sans-serif;
}
.input-wrap input::placeholder{color:var(--text-faint);}
.input-suffix{
  font-family:'Space Grotesk',sans-serif;
  font-size:.9rem;font-weight:600;color:var(--text-dim);
}
.preview-box{
  background:var(--stone-dark);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:.9rem 1rem;margin-bottom:1.2rem;
}
.preview-label{font-size:.75rem;color:var(--text-faint);margin-bottom:.2rem;}
.preview-val{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.3rem;font-weight:700;color:var(--gold-light);
}
.buy-note{
  font-size:.75rem;color:var(--text-faint);
  text-align:center;margin-top:.8rem;line-height:1.5;
}
.quick-amounts{display:flex;gap:.5rem;margin-bottom:1rem;}
.quick-btn{
  flex:1;padding:.5rem;border-radius:8px;
  background:var(--stone-hover);
  border:1px solid var(--border);
  font-size:.78rem;color:var(--text-dim);
  font-weight:600;transition:all .2s;
}
.quick-btn:hover{border-color:var(--gold);color:var(--gold-light);}

/* ═══════════════════════════════════════════
   TIER TABLE
   ═══════════════════════════════════════════ */
.tier-table{
  width:100%;margin-top:2rem;
  border-collapse:separate;border-spacing:0;
}
.tier-table th{
  text-align:left;padding:.9rem 1rem;
  font-family:'Space Grotesk',sans-serif;
  font-size:.78rem;font-weight:600;
  color:var(--text-faint);
  text-transform:uppercase;letter-spacing:.08em;
  border-bottom:1px solid var(--border);
}
.tier-table td{
  padding:1rem;font-size:.92rem;
  border-bottom:1px solid var(--border);
}
.tier-table tr:hover td{background:var(--stone-hover);}
.tier-table tr.active td{
  background:rgba(201,147,42,.07);
  border-bottom-color:var(--gold-dim);
}
.tier-tag{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;color:var(--gold-light);
}
.profit-tag{
  display:inline-block;padding:.2rem .6rem;
  border-radius:20px;font-size:.78rem;font-weight:700;
  background:rgba(74,222,128,.12);color:var(--green);
}
@media(max-width:700px){
  .tier-table{font-size:.82rem;}
  .tier-table th,.tier-table td{padding:.7rem .5rem;}
}

/* ═══════════════════════════════════════════
   PROFIT CALCULATOR
   ═══════════════════════════════════════════ */
.calc-box{
  background:linear-gradient(160deg,var(--stone-card),var(--stone-mid));
  border:1px solid var(--gold-dim);
  border-radius:var(--radius-lg);
  padding:2rem;margin-top:2rem;
}
.calc-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:1.5rem;align-items:end;
}
@media(max-width:700px){.calc-grid{grid-template-columns:1fr;}}
.calc-result{
  background:var(--stone-dark);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.4rem;margin-top:1.5rem;
}
.calc-row{
  display:flex;justify-content:space-between;
  align-items:center;padding:.6rem 0;
  border-bottom:1px solid var(--border);
  font-size:.9rem;
}
.calc-row:last-child{border-bottom:none;padding-bottom:0;}
.calc-row .label{color:var(--text-dim);}
.calc-row .value{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;color:var(--text);
}
.calc-row.highlight .value{
  color:var(--green);font-size:1.2rem;
}
select{
  width:100%;padding:.9rem 1rem;
  background:var(--stone-dark);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text);font-size:1rem;
  font-family:'Space Grotesk',sans-serif;font-weight:600;
  outline:none;cursor:pointer;
}
select:focus{border-color:var(--gold);}

/* ═══════════════════════════════════════════
   TOKENOMICS
   ═══════════════════════════════════════════ */
.tok-grid{
  display:grid;grid-template-columns:1fr 340px;
  gap:3rem;align-items:center;margin-top:2.5rem;
}
@media(max-width:900px){.tok-grid{grid-template-columns:1fr;}}
.tok-list{display:flex;flex-direction:column;gap:.7rem;}
.tok-item{
  display:flex;align-items:center;gap:1rem;
  background:var(--stone-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem 1.2rem;
  transition:border-color .2s;
}
.tok-item:hover{border-color:var(--gold-dim);}
.tok-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;}
.tok-name{flex:1;font-weight:600;font-size:.95rem;}
.tok-amt{font-size:.85rem;color:var(--text-dim);}
.tok-pct{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;color:var(--gold-light);
  min-width:48px;text-align:right;
}
#pie{max-width:300px;margin:0 auto;display:block;}

/* ═══════════════════════════════════════════
   VESTING TIMELINE
   ═══════════════════════════════════════════ */
.vest-timeline{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1rem;margin-top:2.5rem;position:relative;
}
@media(max-width:700px){.vest-timeline{grid-template-columns:repeat(2,1fr);}}
.vest-step{
  background:var(--stone-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.4rem;text-align:center;
  position:relative;
}
.vest-step:first-child{border-color:var(--gold-dim);}
.vest-pct{
  font-family:'Space Grotesk',sans-serif;
  font-size:2rem;font-weight:700;
  color:var(--gold-light);line-height:1;
}
.vest-when{
  font-size:.8rem;color:var(--text-dim);
  margin-top:.5rem;
}
.vest-total{
  font-size:.72rem;color:var(--text-faint);
  margin-top:.3rem;
}

/* ═══════════════════════════════════════════
   HOW TO BUY / STEPS
   ═══════════════════════════════════════════ */
.tabs{
  display:flex;gap:.7rem;justify-content:center;
  margin-bottom:2.5rem;
}
.tab{
  display:flex;align-items:center;gap:.5rem;
  padding:.65rem 1.8rem;border-radius:40px;
  font-family:'Space Grotesk',sans-serif;
  font-size:.9rem;font-weight:600;
  border:1.5px solid var(--border);
  color:var(--text-dim);transition:all .22s;
}
.tab.active{
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  color:#0D0D0F;border-color:transparent;
  box-shadow:0 4px 20px rgba(201,147,42,.3);
}
.tab:hover:not(.active){border-color:var(--gold-dim);color:var(--gold-light);}
.steps{display:flex;flex-direction:column;}
.step{
  display:flex;gap:1.4rem;align-items:flex-start;
  padding:1.3rem 0;border-bottom:1px solid var(--border);
}
.step:last-child{border-bottom:none;}
.step-num{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.4rem;font-weight:700;
  color:var(--gold);min-width:2.6rem;
  flex-shrink:0;line-height:1;padding-top:.15rem;
}
.step-title{
  font-family:'Space Grotesk',sans-serif;
  font-size:1rem;font-weight:700;
  margin-bottom:.35rem;
}
.step-desc{font-size:.9rem;color:var(--text-dim);line-height:1.65;}
.step-desc a{color:var(--gold-light);}
.step-desc a:hover{text-decoration:underline;}

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
footer{
  padding:3rem 1.5rem 2rem;
  border-top:1px solid var(--border);
  background:var(--stone-mid);
}
.foot-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr;
  gap:2.5rem;max-width:1140px;margin:0 auto 2.5rem;
}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr;gap:2rem;}}
.foot-brand{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem;}
.foot-brand img{width:32px;height:32px;border-radius:50%;}
.foot-desc{font-size:.88rem;color:var(--text-dim);max-width:320px;}
.foot-title{
  font-family:'Space Grotesk',sans-serif;
  font-size:.85rem;font-weight:700;
  color:var(--gold);margin-bottom:1rem;
  text-transform:uppercase;letter-spacing:.08em;
}
.foot-links{display:flex;flex-direction:column;gap:.6rem;}
.foot-links a{font-size:.88rem;color:var(--text-dim);transition:color .2s;}
.foot-links a:hover{color:var(--gold-light);}
.foot-bottom{
  max-width:1140px;margin:0 auto;
  padding-top:2rem;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;gap:1rem;
  font-size:.82rem;color:var(--text-faint);
}

/* ── Fade in animation ── */
.fade{opacity:0;transform:translateY(18px);transition:opacity .7s,transform .7s;}
.fade.in{opacity:1;transform:translateY(0);}

/* ── Toast ── */
.toast{
  position:fixed;bottom:2rem;left:50%;
  transform:translateX(-50%) translateY(120px);
  background:var(--stone-card);
  border:1px solid var(--gold-dim);
  border-radius:40px;padding:.9rem 1.6rem;
  font-size:.88rem;font-weight:600;
  z-index:2000;transition:transform .35s;
  box-shadow:0 8px 32px rgba(0,0,0,.5);
}
.toast.show{transform:translateX(-50%) translateY(0);}
.toast.error{border-color:var(--red);color:var(--red);}
.toast.success{border-color:var(--green);color:var(--green);}

/* ═══════════════════════════════════════════
   AUTH MODAL
   ═══════════════════════════════════════════ */
.auth-overlay{
  position:fixed;inset:0;z-index:3000;
  background:rgba(5,5,7,.82);
  backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  padding:1.5rem;
  opacity:0;pointer-events:none;
  transition:opacity .25s;
}
.auth-overlay.open{opacity:1;pointer-events:auto;}

.auth-card{
  background:var(--stone-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:2rem;
  width:100%;max-width:400px;
  position:relative;
  transform:translateY(14px) scale(.98);
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
  max-height:92vh;overflow-y:auto;
}
.auth-overlay.open .auth-card{transform:translateY(0) scale(1);}

.auth-close{
  position:absolute;top:1rem;right:1rem;
  width:30px;height:30px;border-radius:8px;
  color:var(--text-faint);font-size:1.3rem;
  line-height:1;transition:all .2s;
}
.auth-close:hover{background:var(--stone-hover);color:var(--text);}

.auth-head{text-align:center;margin-bottom:1.6rem;}
.auth-logo{width:46px;height:46px;border-radius:50%;margin-bottom:.9rem;}
.auth-title{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.25rem;font-weight:700;
  margin-bottom:.3rem;
}
.auth-sub{font-size:.86rem;color:var(--text-dim);}

.auth-note{
  font-size:.75rem;color:var(--text-faint);
  text-align:center;margin-top:.55rem;
}

.auth-or{
  display:flex;align-items:center;gap:.8rem;
  margin:1.5rem 0 1.2rem;
  color:var(--text-faint);font-size:.76rem;
}
.auth-or::before,.auth-or::after{
  content:'';flex:1;height:1px;background:var(--border);
}

.auth-tabs{
  display:flex;gap:.4rem;
  background:var(--stone-dark);
  border:1px solid var(--border);
  border-radius:10px;padding:.25rem;
  margin-bottom:1rem;
}
.auth-tab{
  flex:1;padding:.5rem;border-radius:8px;
  font-size:.83rem;font-weight:600;
  font-family:'Space Grotesk',sans-serif;
  color:var(--text-dim);transition:all .2s;
}
.auth-tab.active{
  background:var(--stone-hover);
  color:var(--gold-light);
}

.auth-field{margin-bottom:.75rem;}
.auth-field input{
  width:100%;padding:.8rem .95rem;
  background:var(--stone-dark);
  border:1px solid var(--border);
  border-radius:10px;
  color:var(--text);font-size:.92rem;
  outline:none;transition:border-color .2s;
}
.auth-field input:focus{border-color:var(--gold);}
.auth-field input::placeholder{color:var(--text-faint);}
.auth-hint{font-size:.72rem;color:var(--text-faint);margin-top:.35rem;}

.auth-error{
  font-size:.82rem;color:var(--red);
  text-align:center;margin-top:.8rem;
  min-height:1rem;line-height:1.5;
}

.auth-foot{
  font-size:.75rem;color:var(--text-faint);
  text-align:center;line-height:1.6;
  margin-top:1.4rem;padding-top:1.2rem;
  border-top:1px solid var(--border);
}

@media(max-width:480px){
  .auth-card{padding:1.6rem 1.3rem;}
}

/* ═══════════════════════════════════════════
   PASSWORD FIELD WITH VIEW TOGGLE
   ═══════════════════════════════════════════ */
.pw-wrap{position:relative;}
.pw-wrap input{padding-right:2.8rem !important;width:100%;}
.pw-eye{
  position:absolute;right:.6rem;top:50%;
  transform:translateY(-50%);
  width:30px;height:30px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-faint);font-size:1rem;
  cursor:pointer;transition:all .18s;
  background:none;border:none;
}
.pw-eye:hover{background:var(--stone-hover);color:var(--gold-light);}

/* ═══════════════════════════════════════════
   CONTENT EDITOR (admin)
   ═══════════════════════════════════════════ */
.editor-section{
  border:1px solid var(--border);
  border-radius:var(--radius);
  margin-bottom:1rem;
  overflow:hidden;
}
.editor-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.2rem;
  background:var(--stone-hover);
  cursor:pointer;transition:background .18s;
}
.editor-head:hover{background:var(--stone-mid);}
.editor-head-title{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:.95rem;
}
.editor-head-sub{font-size:.75rem;color:var(--text-faint);margin-top:.15rem;}
.editor-arrow{
  color:var(--text-faint);font-size:.8rem;
  transition:transform .22s;
}
.editor-section.open .editor-arrow{transform:rotate(90deg);}
.editor-body{
  display:none;padding:1.4rem 1.2rem;
  border-top:1px solid var(--border);
}
.editor-section.open .editor-body{display:block;}

.item-card{
  background:var(--stone-dark);
  border:1px solid var(--border);
  border-radius:10px;
  padding:1rem;margin-bottom:.8rem;
  position:relative;
}
.item-card-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:.8rem;
}
.item-num{
  font-family:'Space Grotesk',sans-serif;
  font-size:.75rem;font-weight:700;
  color:var(--gold);letter-spacing:.06em;
  text-transform:uppercase;
}
.item-actions{display:flex;gap:.35rem;}
.mini-btn{
  width:26px;height:26px;border-radius:6px;
  background:var(--stone-hover);
  border:1px solid var(--border);
  color:var(--text-faint);font-size:.8rem;
  display:flex;align-items:center;justify-content:center;
  transition:all .18s;
}
.mini-btn:hover{border-color:var(--gold);color:var(--gold-light);}
.mini-btn.del:hover{border-color:var(--red);color:var(--red);}

textarea{
  width:100%;padding:.75rem .9rem;
  background:var(--stone-dark);
  border:1px solid var(--border);
  border-radius:10px;
  color:var(--text);font-size:.88rem;
  font-family:inherit;line-height:1.6;
  outline:none;resize:vertical;min-height:70px;
  transition:border-color .2s;
}
textarea:focus{border-color:var(--gold);}

.list-input-row{
  display:flex;gap:.5rem;align-items:center;
  margin-bottom:.5rem;
}
.list-input-row input{flex:1;}

/* ═══════════════════════════════════════════
   LOADING SKELETON
   ═══════════════════════════════════════════ */
.skel{
  background:linear-gradient(90deg,
    var(--stone-card) 25%,
    var(--stone-hover) 50%,
    var(--stone-card) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:8px;
}
@keyframes shimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}
.skel-line{height:14px;margin-bottom:.6rem;}
.skel-line.short{width:45%;}
.skel-line.mid{width:70%;}
.skel-box{height:80px;margin-bottom:1rem;}

/* ═══════════════════════════════════════════
   BACK BUTTON
   ═══════════════════════════════════════════ */
.back-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem 1rem;border-radius:30px;
  font-size:.85rem;font-weight:500;
  color:var(--text-dim);
  border:1px solid var(--border);
  background:var(--stone-card);
  transition:all .2s;margin-bottom:1.5rem;
}
.back-btn:hover{
  border-color:var(--gold-dim);
  color:var(--gold-light);
  transform:translateX(-2px);
}

/* ═══════════════════════════════════════════
   3D COIN
   ═══════════════════════════════════════════ */
/* Fixed behind every section on the home page. The coin sits
   slightly right-of-centre and the gold particles drift across
   the whole viewport, the way the first version of the site did. */
#hero-canvas{
  position:fixed;
  top:0;left:0;
  width:100vw;height:100vh;
  z-index:0;
  pointer-events:none;   /* clicks pass through to the page */
  opacity:.85;
}
#coinFallback{
  display:none;
  position:fixed;
  width:130px;height:130px;
  border-radius:50%;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:0;
  animation:float 5s ease-in-out infinite;
  box-shadow:0 0 60px rgba(201,147,42,.35);
  pointer-events:none;
}

/* Every section needs to sit above the fixed background. nav is deliberately
   NOT in this list: it already has position:fixed and z-index:1000 higher up,
   and because both selectors weigh the same the later one used to win — which
   quietly turned the nav into position:relative;z-index:1, the same layer as
   every section. #hero comes after nav in the document, so it painted on top.
   The mobile menu is see-through enough that it still looked open, but every
   tap landed on the hero behind it, and the bar stopped sticking on scroll. */
section, footer, .page-head{
  position:relative;
  z-index:1;
}

@media(max-width:700px){
  /* On phones the coin becomes a subtle backdrop rather than a
     distraction behind small text */
  #hero-canvas{ opacity:.5; }
}

/* ═══════════════════════════════════════════
   AUDIT SECTION
   ═══════════════════════════════════════════ */
.audit-grid{
  display:grid;grid-template-columns:280px 1fr;
  gap:2.5rem;align-items:center;margin-top:2.5rem;
}
@media(max-width:800px){
  .audit-grid{grid-template-columns:1fr;gap:2rem;}
}
.score-ring{
  position:relative;
  width:220px;height:220px;
  margin:0 auto;
}
.score-ring svg{transform:rotate(-90deg);}
.score-inner{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}
.score-val{
  font-family:'Space Grotesk',sans-serif;
  font-size:2.8rem;font-weight:700;
  color:var(--gold-light);line-height:1;
}
.score-max{font-size:.9rem;color:var(--text-faint);margin-top:.1rem;}
.score-label{
  font-size:.75rem;color:var(--text-dim);
  margin-top:.6rem;text-transform:uppercase;
  letter-spacing:.08em;font-weight:600;
}
.audit-points{display:flex;flex-direction:column;gap:.8rem;}
.audit-point{
  display:flex;gap:1rem;align-items:flex-start;
  background:var(--stone-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.1rem 1.3rem;
  transition:border-color .2s;
}
.audit-point:hover{border-color:var(--gold-dim);}
.audit-check{
  color:var(--green);font-size:1rem;
  flex-shrink:0;line-height:1.4;
}
.audit-point-title{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:.95rem;
  margin-bottom:.2rem;
}
.audit-point-desc{font-size:.85rem;color:var(--text-dim);line-height:1.6;}

/* ═══════════════════════════════════════════
   ROADMAP
   ═══════════════════════════════════════════ */
.roadmap{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.5rem;margin-top:2.5rem;
}
.phase{
  background:var(--stone-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.8rem;
  position:relative;
  transition:border-color .22s,transform .22s;
}
.phase:hover{transform:translateY(-4px);}
.phase.active{
  border-color:var(--gold-dim);
  background:linear-gradient(160deg,var(--stone-card),rgba(201,147,42,.04));
}
.phase-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1.2rem;
}
.phase-period{
  font-family:'Space Grotesk',sans-serif;
  font-size:.8rem;font-weight:700;
  color:var(--gold);letter-spacing:.08em;
  text-transform:uppercase;
}
.phase-status{
  font-size:.68rem;font-weight:600;
  padding:.2rem .6rem;border-radius:20px;
  text-transform:uppercase;letter-spacing:.06em;
}
.phase-status.done{background:rgba(74,222,128,.12);color:var(--green);}
.phase-status.active{background:rgba(201,147,42,.12);color:var(--gold-light);}
.phase-status.upcoming{background:rgba(154,148,136,.1);color:var(--text-faint);}
.phase-title{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.3rem;font-weight:700;
  margin-bottom:1.1rem;
}
.phase-items{
  display:flex;flex-direction:column;gap:.7rem;
  list-style:none;
}
.phase-item{
  display:flex;gap:.7rem;align-items:flex-start;
  font-size:.88rem;color:var(--text-dim);
  line-height:1.6;
}
.phase-item::before{
  content:'—';color:var(--gold-dim);
  flex-shrink:0;
}
.roadmap-note{
  font-size:.8rem;color:var(--text-faint);
  margin-top:2rem;line-height:1.6;
  padding:1rem 1.2rem;
  background:var(--stone-card);
  border-left:2px solid var(--gold-dim);
  border-radius:0 8px 8px 0;
}

/* ═══════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════ */
.faq-list{margin-top:2.5rem;}
.faq-item{
  border-bottom:1px solid var(--border);
}
.faq-item:first-child{border-top:1px solid var(--border);}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1.3rem 0;
  cursor:pointer;transition:color .2s;
}
.faq-q:hover{color:var(--gold-light);}
.faq-q-text{
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;font-size:1rem;
}
.faq-toggle{
  color:var(--gold);font-size:1.2rem;
  flex-shrink:0;transition:transform .25s;
  line-height:1;
}
.faq-item.open .faq-toggle{transform:rotate(45deg);}
.faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .3s ease, padding .3s ease;
  font-size:.92rem;color:var(--text-dim);
  line-height:1.75;
}
.faq-item.open .faq-a{
  max-height:400px;
  padding-bottom:1.4rem;
}

/* ═══════════════════════════════════════════
   DASHBOARD EXTRAS
   ═══════════════════════════════════════════ */

/* Profile card */
.profile-card{
  display:flex;align-items:center;gap:1.3rem;
  background:var(--stone-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.5rem;flex-wrap:wrap;
}
.profile-avatar{
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-dim));
  display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk',sans-serif;
  font-size:1.4rem;font-weight:700;color:#0D0D0F;
  flex-shrink:0;
}
.profile-info{flex:1;min-width:180px;}
.profile-name{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.05rem;font-weight:700;
  margin-bottom:.2rem;
}
.profile-meta{
  display:flex;gap:1rem;flex-wrap:wrap;
  font-size:.8rem;color:var(--text-faint);
}
.profile-meta span{display:flex;align-items:center;gap:.3rem;}
.profile-code{
  background:rgba(201,147,42,.1);
  border:1px solid var(--gold-dim);
  border-radius:8px;padding:.5rem .9rem;
  text-align:center;
}
.profile-code-label{
  font-size:.65rem;color:var(--text-faint);
  text-transform:uppercase;letter-spacing:.08em;
}
.profile-code-val{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;color:var(--gold-light);
  font-size:.95rem;margin-top:.1rem;
}

/* Team levels */
.team-level{
  display:flex;align-items:center;gap:1rem;
  padding:.75rem 0;
  border-bottom:1px solid var(--border);
}
.team-level:last-child{border-bottom:none;}
.team-lv-num{
  width:32px;height:32px;border-radius:9px;
  background:var(--stone-hover);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk',sans-serif;
  font-size:.78rem;font-weight:700;
  color:var(--gold-light);flex-shrink:0;
}
.team-lv-bar{
  flex:1;height:6px;border-radius:10px;
  background:var(--stone-hover);overflow:hidden;
}
.team-lv-fill{
  height:100%;border-radius:10px;
  background:linear-gradient(90deg,var(--gold-dim),var(--gold));
  transition:width .6s;
}
.team-lv-count{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:.88rem;
  min-width:34px;text-align:right;
}
.team-lv-earned{
  font-size:.8rem;color:var(--gold-light);
  min-width:80px;text-align:right;
  font-family:'Space Grotesk',sans-serif;font-weight:600;
}

/* Transaction rows */
.tx-row{
  display:flex;align-items:center;gap:1rem;
  padding:.9rem 0;
  border-bottom:1px solid var(--border);
}
.tx-row:last-child{border-bottom:none;}
.tx-icon{
  width:34px;height:34px;border-radius:10px;
  background:var(--stone-hover);
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;flex-shrink:0;
}
.tx-body{flex:1;min-width:0;}
.tx-title{font-weight:600;font-size:.9rem;}
.tx-meta{
  font-size:.75rem;color:var(--text-faint);
  margin-top:.15rem;
  display:flex;gap:.6rem;flex-wrap:wrap;
}
.tx-hash{
  font-family:monospace;
  color:var(--text-dim);
}
.tx-hash:hover{color:var(--gold-light);}
.tx-amt{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:.9rem;
  color:var(--gold-light);white-space:nowrap;
}

/* Email link box */
.email-box{
  background:var(--stone-dark);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.2rem;margin-top:1rem;
}
.email-status{
  display:flex;align-items:center;gap:.5rem;
  font-size:.85rem;margin-bottom:.8rem;
}
.email-status.linked{color:var(--green);}
.email-status.none{color:var(--text-faint);}

/* Leaderboard */
.lb-row{
  display:flex;align-items:center;gap:1rem;
  padding:.85rem 0;
  border-bottom:1px solid var(--border);
}
.lb-row:last-child{border-bottom:none;}
.lb-row.me{
  background:rgba(201,147,42,.05);
  margin:0 -1rem;padding-left:1rem;padding-right:1rem;
  border-radius:8px;
}
.lb-rank{
  width:30px;height:30px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk',sans-serif;
  font-size:.8rem;font-weight:700;
  background:var(--stone-hover);
  color:var(--text-dim);flex-shrink:0;
}
.lb-rank.top1{background:linear-gradient(135deg,#E8B84B,#C9932A);color:#0D0D0F;}
.lb-rank.top2{background:#8A8678;color:#0D0D0F;}
.lb-rank.top3{background:#8A6015;color:var(--text);}
.lb-user{flex:1;min-width:0;}
.lb-code{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:.88rem;
  color:var(--gold-light);
}
.lb-wallet{
  font-family:monospace;font-size:.72rem;
  color:var(--text-faint);margin-top:.1rem;
}
.lb-stats{text-align:right;}
.lb-earned{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:.9rem;
}
.lb-team{font-size:.72rem;color:var(--text-faint);margin-top:.1rem;}

/* ═══════════════════════════════════════════
   WALLET PICKER
   ═══════════════════════════════════════════ */
.wallet-list{
  display:flex;flex-direction:column;gap:.6rem;
  margin-bottom:.5rem;
}
.wallet-option{
  display:flex;align-items:center;gap:.9rem;
  padding:.9rem 1rem;
  background:var(--stone-dark);
  border:1px solid var(--border);
  border-radius:12px;
  cursor:pointer;transition:all .2s;
  text-align:left;width:100%;
  /* The global button rule inherits font-family but NOT color, so text in
     here fell back to the browser's default button colour — near-black on
     a near-black card. The wallet names were effectively invisible. */
  color:var(--text);
}
.wallet-option:hover{
  border-color:var(--gold);
  transform:translateX(2px);
}
.wallet-option:disabled{
  opacity:.45;cursor:not-allowed;transform:none;
}
.wallet-icon{
  width:34px;height:34px;
  border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;flex-shrink:0;
  background:var(--stone-hover);
}
.wallet-info{flex:1;min-width:0;}
.wallet-name{
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;font-size:.92rem;
  color:var(--text);
}
.wallet-desc{
  font-size:.74rem;color:var(--text-dim);
  margin-top:.1rem;
}
/* A wallet you do not have is still worth reading — dimmed, not hidden. */
.wallet-option.not-installed .wallet-name{color:var(--text-dim);}
.wallet-option.not-installed .wallet-desc{color:var(--text-faint);}
.wallet-option:hover .wallet-name{color:var(--gold-light);}
.wallet-tag{
  font-size:.68rem;font-weight:600;
  padding:.2rem .5rem;border-radius:20px;
  background:rgba(74,222,128,.12);
  color:var(--green);flex-shrink:0;
}
.wallet-tag.install{
  background:rgba(154,148,136,.1);
  color:var(--text-faint);
}

/* Referral code box in the login modal */
.auth-ref{
  background:var(--stone-dark);
  border:1px solid var(--gold-dim);
  border-radius:12px;
  padding:.9rem;margin-bottom:1.2rem;
}
.auth-ref .auth-field{margin-bottom:0;}

/* Airdrop task — clickable link tasks */
.task-link{
  color:var(--text);text-decoration:none;
  display:inline-flex;align-items:center;gap:.4rem;
  transition:color .18s;
  cursor:pointer;
  margin-bottom:.15rem;   /* matches the old .task-name spacing */
}
.task-link:hover{color:var(--gold-light);}
.task-link-arrow{
  font-size:.78rem;color:var(--gold-dim);
  transition:transform .18s;
}
.task-link:hover .task-link-arrow{
  transform:translate(2px,-2px);
  color:var(--gold-light);
}
.task.done .task-link{
  color:var(--text-dim);pointer-events:none;
}

/* ── Footer social links ──────────────────────────────────
   Rendered by app.js from the admin panel's link settings.
   Empty when nothing is configured, so it takes no space. */
.foot-social{
  display:flex;gap:.55rem;margin-top:1rem;
}
.foot-social:empty{display:none;}
.soc{
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:var(--stone-card);
  border:1px solid var(--border);
  color:var(--text-dim);
  transition:color .18s, border-color .18s, background .18s;
}
.soc:hover{
  color:var(--gold-light);
  border-color:var(--gold-dim);
  background:var(--stone-hover);
}
.soc:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

/* ── Sign-in modal: layout that survives a phone ──────────
   A phone's ordinary browser has no wallet injected, so every
   wallet renders as an "Install" row. Four of those pushed the
   email form past the bottom of the screen — the modal opened
   on the one thing the visitor could not use. */
.auth-card{display:flex;flex-direction:column;}
.auth-card > *{flex:none;}

/* Nothing detected → the email form leads, wallets follow. The header
   is pinned above both, or reordering leaves the logo and title
   stranded at the bottom of the card. */
.auth-card.email-first .auth-head{order:-4;}
.auth-card.email-first #authEmailBlock{order:-3;}
.auth-card.email-first #authError{order:-2;}
.auth-card.email-first #authOr{order:-1;}

/* The referral toggle is a link, not a field — it should not inherit
   the bordered box the referral wrapper draws. */
#authRefWrap{border:none;padding:0;background:none;}

/* The install list folds away until asked for. */
.wallet-more{margin-top:.2rem;}
.wallet-more > summary{
  list-style:none;cursor:pointer;
  padding:.7rem .2rem;
  font-size:.85rem;color:var(--gold-light);
  text-align:center;
}
.wallet-more > summary::-webkit-details-marker{display:none;}
.wallet-more > summary::after{content:' ▾';opacity:.7;}
.wallet-more[open] > summary::after{content:' ▴';}
.wallet-more > summary:hover{color:var(--gold);}
.wallet-more > summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px;}

/* Quiet inline links inside the modal (forgot password, referral). */
.auth-link{
  display:block;width:100%;
  background:none;border:none;
  color:var(--text-dim);
  font-family:'Inter',sans-serif;font-size:.82rem;
  padding:.6rem 0 .2rem;cursor:pointer;text-align:center;
}
.auth-link:hover{color:var(--gold-light);}
.auth-link:disabled{opacity:.6;cursor:default;}
.auth-link:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px;}

/* "Check your inbox" is not a failure. */
.auth-error.ok{color:var(--green);}

/* ── Referral allocation bar ──────────────────────────────
   The programme pays from a fixed pot. Showing what is left
   keeps people from sharing a link that has quietly stopped
   earning once the pot runs dry. */
.cap-bar{
  background:var(--stone-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.1rem 1.3rem;margin-top:2rem;
}
.cap-top{
  display:flex;justify-content:space-between;
  align-items:baseline;gap:1rem;flex-wrap:wrap;
  margin-bottom:.6rem;
}
.cap-label{
  font-size:.72rem;color:var(--text-faint);
  text-transform:uppercase;letter-spacing:.08em;
}
.cap-text{
  font-family:'Space Grotesk',sans-serif;
  font-size:.88rem;font-weight:600;color:var(--gold-light);
  font-variant-numeric:tabular-nums;
}
.cap-track{
  height:6px;border-radius:20px;
  background:var(--stone-hover);
  overflow:hidden;
}
.cap-fill{
  height:100%;width:0;
  background:linear-gradient(90deg,var(--gold-dim),var(--gold-light));
  border-radius:20px;transition:width .6s ease;
}
.cap-fill.full{background:var(--red);}
.cap-closed{
  margin-top:.9rem;padding-top:.9rem;
  border-top:1px solid var(--border);
  font-size:.85rem;color:var(--red);line-height:1.6;
}

/* ── Airdrop task question ────────────────────────────────
   The task is proved by answering a question about what the
   user saw on the linked page, so the box only appears once
   they ask for it — it stays out of the way otherwise. */
.task-quiz{
  margin-top:.75rem;padding-top:.75rem;
  border-top:1px solid var(--border);
}
.quiz-q{
  font-size:.85rem;color:var(--text);
  margin-bottom:.55rem;line-height:1.5;
}
.quiz-row{display:flex;gap:.5rem;flex-wrap:wrap;}
.quiz-input{
  flex:1;min-width:150px;
  padding:.55rem .8rem;
  background:var(--stone-dark);
  border:1px solid var(--border);
  border-radius:9px;
  color:var(--text);font-size:.88rem;
  outline:none;transition:border-color .2s;
  font-variant-numeric:tabular-nums;
}
.quiz-input:focus{border-color:var(--gold);}
.quiz-go{
  padding:.55rem 1.1rem;border-radius:9px;
  font-family:'Space Grotesk',sans-serif;
  font-size:.85rem;font-weight:600;
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  color:#0D0D0F;white-space:nowrap;
}
.quiz-go:hover{filter:brightness(1.06);}
.quiz-msg{font-size:.8rem;margin-top:.5rem;line-height:1.5;min-height:1rem;}
.quiz-msg.bad{color:var(--red);}

/* Warning under the buy preview when the order is larger than the
   supply left — the contract fills what it can and refunds the rest,
   and the buyer should know before they sign, not after. */
.preview-note{
  margin-top:.55rem;padding-top:.55rem;
  border-top:1px solid var(--border);
  font-size:.78rem;color:var(--gold-light);
  line-height:1.55;
}

/* Explains where the balance went while a payout is in flight. Requesting
   a withdrawal zeroes the points, and without this the panel reads as
   "your points are gone" until an admin gets round to sending them. */
.withdraw-pending{
  margin-top:1rem;padding:.9rem 1.1rem;
  background:rgba(201,147,42,.07);
  border:1px solid var(--gold-dim);
  border-radius:var(--radius);
  font-size:.85rem;color:var(--text-dim);line-height:1.6;
}
.withdraw-pending strong{color:var(--gold-light);}
.tx-amt.out{color:var(--text-dim);}

/* ── Presale clock on the sub-pages ───────────────────────
   The countdown only existed on the home page, so anyone on
   the dashboard, referral or airdrop page had no idea how
   long was left. Same tickCountdown() drives it. */
.pre-bar{
  display:flex;align-items:center;justify-content:center;
  gap:1rem;flex-wrap:wrap;
  padding:.65rem 1.2rem;
  background:linear-gradient(90deg,rgba(201,147,42,.10),rgba(201,147,42,.04));
  border-bottom:1px solid var(--gold-dim);
  text-decoration:none;
  position:sticky;top:0;z-index:90;
  backdrop-filter:blur(8px);
  transition:background .2s;
}
.pre-bar:hover{background:linear-gradient(90deg,rgba(201,147,42,.16),rgba(201,147,42,.07));}
.pre-bar-label{
  font-size:.72rem;color:var(--text-dim);
  text-transform:uppercase;letter-spacing:.08em;font-weight:600;
}
.pre-bar-time{
  display:flex;align-items:baseline;gap:.15rem;
  font-family:'Space Grotesk',sans-serif;
  color:var(--gold-light);
  font-variant-numeric:tabular-nums;
}
.pre-bar-time b{font-size:1rem;font-weight:700;}
.pre-bar-time i{
  font-style:normal;font-size:.7rem;
  color:var(--text-faint);margin-right:.45rem;
}
.pre-bar-go{
  font-size:.75rem;color:var(--gold);font-weight:600;
}
@media(max-width:600px){
  .pre-bar{gap:.6rem;padding:.55rem .8rem;}
  .pre-bar-go{display:none;}
  .pre-bar-label{font-size:.66rem;}
}

/* Admin: the service key lives in sessionStorage, so it is gone every time
   the tab is closed and the panel comes back looking like it has no data.
   This sits at the top of every view until the key is back in. */
.key-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid rgba(255, 176, 32, 0.45);
  border-left: 3px solid var(--gold, #ffb020);
  border-radius: 10px;
  background: rgba(255, 176, 32, 0.08);
  color: var(--text, #e8e8ea);
  font-size: 0.92rem;
}
.key-banner strong { color: var(--gold-light, #ffcd6b); }

/* Dashboard: unclaimed tokens wait forever, so say so plainly rather than
   leaving the user to notice the button further down the page. */
.claim-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(74, 222, 128, .4);
  border-left: 3px solid #4ade80;
  border-radius: 14px;
  background: rgba(74, 222, 128, .07);
}
.claim-alert-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1.02rem;
  color: #86efac;
}
.claim-alert-title span { color: #fff; }
.claim-alert-sub {
  margin-top: .2rem;
  font-size: .85rem;
  color: var(--text-dim, #9A958A);
}
.claim-alert .btn { flex-shrink: 0; }
@media (max-width: 560px) {
  .claim-alert { flex-direction: column; align-items: stretch; text-align: left; }
  .claim-alert .btn { width: 100%; }
}