/* ═══════════════════════════════════════════════════════════════════════════
   DGX TOKEN PLATFORM — ULTRA PREMIUM UI
   Saasify × DarkTech X × Luxury Crypto Dark
   Fonts: Syne (display) + DM Sans (body)
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:wght@300;400;500;600;700&display=swap');

/* ── TOKENS ─────────────────────────────────────────────────────────────── */
:root {
  /* Core palette */
  --bg0:   #020209;
  --bg1:   #07071a;
  --bg2:   #0d0d26;
  --bg3:   #121232;
  --bg4:   #181840;
  --card:  rgba(14,14,38,.90);
  --glass: rgba(255,255,255,.03);

  /* Brand */
  --p:    #6366f1;   /* indigo */
  --p2:   #818cf8;
  --v:    #8b5cf6;   /* violet */
  --v2:   #a78bfa;
  --c:    #22d3ee;   /* cyan */
  --c2:   #67e8f9;

  /* Gradients */
  --gp:   linear-gradient(135deg,#6366f1,#8b5cf6);
  --gv:   linear-gradient(135deg,#8b5cf6,#ec4899);
  --gc:   linear-gradient(135deg,#22d3ee,#6366f1);
  --gw:   linear-gradient(135deg,#6366f1,#22d3ee);

  /* Status */
  --green:  #10b981;
  --yellow: #f59e0b;
  --red:    #ef4444;
  --blue:   #38bdf8;
  --pink:   #ec4899;

  /* Text */
  --t1: #f8f8ff;
  --t2: #b4b4d0;
  --t3: #6b6b90;
  --t4: #3a3a58;

  /* Borders */
  --b:  rgba(99,102,241,.15);
  --b2: rgba(99,102,241,.08);
  --bh: rgba(99,102,241,.40);

  /* Shadows */
  --sh1: 0 4px 24px rgba(0,0,0,.50);
  --sh2: 0 12px 60px rgba(0,0,0,.65);
  --shg: 0 0 60px rgba(99,102,241,.20);

  /* Radii */
  --r:   10px;
  --rl:  16px;
  --rx:  22px;
  --r2x: 30px;

  /* Fonts */
  --ff:  'DM Sans',   system-ui, sans-serif;
  --ffd: 'Syne',      system-ui, sans-serif;
}

/* ── BASE ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--ff);
  background:  var(--bg0);
  color:        var(--t2);
  min-height:  100vh;
  overflow-x:  hidden;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color:var(--p); text-decoration:none; transition:.2s; }
a:hover { color:var(--c); }

::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--bg1); }
::-webkit-scrollbar-thumb { background:rgba(99,102,241,.35); border-radius:2px; }

/* ── LAYOUT ──────────────────────────────────────────────────────────────── */
.container { max-width:1220px; margin:0 auto; padding:0 28px; }
.section    { padding:110px 0; }
.section-sm { padding:80px 0; }

/* ── NAVBAR ──────────────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset:0 0 auto; z-index:1000;
  height: 70px;
  background: rgba(2,2,9,.80);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border-bottom: 1px solid var(--b2);
}
.nav-inner {
  display:flex; align-items:center; height:70px; gap:36px;
}
.nav-logo {
  display:flex; align-items:center; gap:10px;
  font-family:var(--ffd); font-size:20px; font-weight:800;
  color:var(--t1); letter-spacing:-.3px; flex-shrink:0; white-space:nowrap;
}
.nav-logo img   { width:34px; height:34px; border-radius:9px; }
.nav-logo .dot  { color:var(--c); }
.nav-links      { display:flex; align-items:center; gap:2px; flex:1; list-style:none; }
.nav-links a    { padding:8px 14px; border-radius:var(--r); font-size:14px; font-weight:500; color:var(--t3); transition:.2s; }
.nav-links a:hover,
.nav-links a.on { color:var(--t1); background:rgba(99,102,241,.10); }
.nav-actions    { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.burger         { display:none; background:none; border:none; color:var(--t1); font-size:21px; cursor:pointer; padding:5px; }

/* ── BUTTONS ─────────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 26px; border-radius:var(--r); border:none;
  font-family:var(--ff); font-size:14px; font-weight:600;
  cursor:pointer; transition:all .22s; text-decoration:none;
  white-space:nowrap; letter-spacing:.1px; position:relative; overflow:hidden;
}
.btn::after {
  content:''; position:absolute; inset:0; opacity:0;
  background:linear-gradient(135deg,rgba(255,255,255,.1),transparent);
  transition:.2s;
}
.btn:hover::after { opacity:1; }
.btn:disabled { opacity:.45; cursor:not-allowed !important; transform:none !important; box-shadow:none !important; }

.btn-primary { background:var(--gp); color:#fff; box-shadow:0 4px 22px rgba(99,102,241,.35); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 36px rgba(99,102,241,.50); color:#fff; }

.btn-cyan { background:var(--gc); color:#fff; box-shadow:0 4px 22px rgba(34,211,238,.25); }
.btn-cyan:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(34,211,238,.40); color:#fff; }

.btn-ghost {
  background:rgba(255,255,255,.04); color:var(--t2);
  border:1px solid var(--b); backdrop-filter:blur(8px);
}
.btn-ghost:hover { background:rgba(255,255,255,.08); color:var(--t1); border-color:var(--bh); }

.btn-outline { background:transparent; color:var(--p); border:1.5px solid var(--p); }
.btn-outline:hover { background:var(--p); color:#fff; }

.btn-sm  { padding:8px 18px;  font-size:13px; border-radius:8px; }
.btn-lg  { padding:14px 34px; font-size:15px; }
.btn-xl  { padding:16px 44px; font-size:16px; border-radius:var(--rl); }
.btn-blk { width:100%; }

/* ── HERO ────────────────────────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  display:    flex;
  align-items:center;
  padding:    120px 0 100px;
  position:   relative;
  overflow:   hidden;
}

/* Layered mesh background */
.hero-mesh {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 80% 70% at 60% 20%, rgba(99,102,241,.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 15% 75%, rgba(139,92,246,.12) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 85% 75%, rgba(34,211,238,.08) 0%, transparent 50%),
    linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 100%);
}

/* Grid overlay */
.hero-grid {
  position:absolute; inset:0; pointer-events:none; opacity:.035;
  background:
    linear-gradient(rgba(99,102,241,1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,1) 1px, transparent 1px);
  background-size:72px 72px;
}

/* Glow orbs */
.orb {
  position:absolute; border-radius:50%;
  filter:blur(80px); pointer-events:none;
  animation: orbFloat 12s ease-in-out infinite;
}
.orb-1 { width:500px; height:500px; background:rgba(99,102,241,.10); top:-120px; right:-80px; }
.orb-2 { width:360px; height:360px; background:rgba(139,92,246,.08); bottom:-80px; left:-60px; animation-delay:4s; }
.orb-3 { width:260px; height:260px; background:rgba(34,211,238,.06); top:40%; right:8%; animation-delay:8s; }
@keyframes orbFloat { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-30px) scale(1.04)} }

.hero .container { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; position:relative; z-index:1; }

/* Live badge */
.hero-badge {
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 18px; border-radius:50px; margin-bottom:24px;
  background:rgba(99,102,241,.10); border:1px solid rgba(99,102,241,.25);
  font-size:13px; font-weight:600; color:var(--p2);
}
.hero-badge .live-dot { width:7px; height:7px; background:var(--green); border-radius:50%; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.5)} 70%{box-shadow:0 0 0 8px rgba(16,185,129,0)} }

.hero-h1 {
  font-family: var(--ffd);
  font-size:   62px;
  font-weight: 800;
  color:       var(--t1);
  line-height: 1.04;
  letter-spacing:-2.5px;
  margin-bottom:20px;
}
.hero-h1 .grad-p { background:var(--gp); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-h1 .grad-c { background:var(--gw); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

.hero-sub {
  font-size:17px; color:var(--t3); line-height:1.75;
  max-width:500px; margin-bottom:38px;
}
.hero-btns  { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:46px; }
.hero-stats { display:flex; gap:20px; flex-wrap:wrap; }
.hstat {
  display:flex; align-items:center; gap:9px;
  padding:8px 16px; border-radius:50px;
  background:rgba(255,255,255,.03); border:1px solid var(--b);
  font-size:13px; color:var(--t3);
}
.hstat i   { color:var(--p); }
.hstat strong { color:var(--t1); font-weight:600; }

/* Hero visual cards */
.hero-vis { position:relative; display:flex; flex-direction:column; gap:18px; }
.hcard {
  background:var(--card); border:1px solid var(--b);
  border-radius:var(--rx); padding:26px;
  backdrop-filter:blur(24px);
  box-shadow:var(--sh2), var(--shg);
  animation: floatCard 6s ease-in-out infinite;
}
.hcard:nth-child(2) { margin-left:32px; animation-delay:2s; }
@keyframes floatCard { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

.hcard-title { font-family:var(--ffd); font-size:13px; font-weight:700; color:var(--t4); text-transform:uppercase; letter-spacing:1px; margin-bottom:16px; }
.hcard-row   { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid var(--b2); }
.hcard-row:last-child { border:none; }
.hcard-lbl   { font-size:13px; color:var(--t3); }
.hcard-val   { font-size:14px; font-weight:700; color:var(--t1); }
.hcard-val.g { color:var(--green); }
.hcard-val.c { color:var(--c); }
.hcard-val.p { color:var(--p2); }
.hcard-val.y { color:var(--yellow); }

.hcard-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.hcard-stat { background:rgba(99,102,241,.08); border:1px solid var(--b2); border-radius:12px; padding:12px; text-align:center; }
.hcard-stat .num { font-family:var(--ffd); font-size:20px; font-weight:800; color:var(--t1); }
.hcard-stat .lbl { font-size:10px; color:var(--t3); margin-top:3px; text-transform:uppercase; letter-spacing:.5px; }

/* ── SECTION HEADERS ─────────────────────────────────────────────────────── */
.sh { text-align:center; margin-bottom:64px; }
.sh-tag {
  display:inline-block; padding:6px 18px; border-radius:50px; margin-bottom:14px;
  background:rgba(99,102,241,.09); border:1px solid rgba(99,102,241,.22);
  font-size:11px; font-weight:700; color:var(--p2); letter-spacing:2px; text-transform:uppercase;
}
.sh-h2 {
  font-family:var(--ffd); font-size:44px; font-weight:800;
  color:var(--t1); letter-spacing:-1.5px; margin-bottom:14px;
}
.sh-h2 span { background:var(--gp); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.sh-p { font-size:16px; color:var(--t3); max-width:520px; margin:0 auto; line-height:1.72; }

/* ── CARDS ───────────────────────────────────────────────────────────────── */
.card {
  background:var(--card); border:1px solid var(--b);
  border-radius:var(--rx); overflow:hidden;
  transition:border-color .25s, box-shadow .25s, transform .25s;
  backdrop-filter:blur(16px);
}
.card:hover { border-color:var(--bh); box-shadow:var(--shg); }
.card-hdr {
  padding:20px 26px; border-bottom:1px solid var(--b2);
  font-family:var(--ffd); font-size:15px; font-weight:700; color:var(--t1);
  display:flex; align-items:center; gap:10px;
}
.card-hdr i { color:var(--p); }
.card-body { padding:26px; }

/* Glass card */
.gcard {
  background:linear-gradient(145deg,rgba(14,14,38,.95),rgba(18,18,50,.90));
  border:1px solid var(--b); border-radius:var(--rx); position:relative; overflow:hidden;
  transition:.25s;
}
.gcard::before {
  content:''; position:absolute; top:-60px; right:-60px; width:180px; height:180px;
  background:radial-gradient(circle,rgba(99,102,241,.14),transparent 70%); pointer-events:none;
}
.gcard:hover { border-color:var(--bh); transform:translateY(-4px); box-shadow:var(--shg); }

/* ── CRYPTO GRID ─────────────────────────────────────────────────────────── */
.crypto-section { padding:110px 0; background:var(--bg1); }
.cgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:18px; }
.ccard {
  background:var(--card); border:1px solid var(--b);
  border-radius:var(--rl); padding:22px; position:relative; overflow:hidden;
  transition:all .3s; cursor:default;
}
.ccard::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--gp); transform:scaleX(0); transition:.3s; border-radius:0 0 var(--rl) var(--rl); }
.ccard:hover  { border-color:rgba(99,102,241,.38); transform:translateY(-5px); box-shadow:0 16px 48px rgba(0,0,0,.5), var(--shg); }
.ccard:hover::after { transform:scaleX(1); }

.cc-top   { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; }
.cc-info  { display:flex; align-items:center; gap:11px; }
.cc-icon  { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex-shrink:0; letter-spacing:-.3px; }
.cc-name  { font-weight:700; color:var(--t1); font-size:14px; }
.cc-sym   { font-size:12px; color:var(--t3); margin-top:1px; }
.cc-chg   { padding:4px 10px; border-radius:50px; font-size:11px; font-weight:700; }
.up   { background:rgba(16,185,129,.12); color:var(--green); }
.dn   { background:rgba(239,68,68,.12);  color:var(--red); }
.cc-price { font-family:var(--ffd); font-size:22px; font-weight:800; color:var(--t1); letter-spacing:-.3px; margin-bottom:6px; }
.cc-vol   { font-size:12px; color:var(--t4); }
.cc-sparkline { height:50px; margin-top:12px; }
.cc-sparkline canvas { width:100%!important; height:50px!important; }

/* Icon color schemes */
.ic-BTC  { background:rgba(247,147,26,.13);  color:#f7931a; }
.ic-ETH  { background:rgba(98,126,234,.13);  color:#627eea; }
.ic-BNB  { background:rgba(243,186,47,.13);  color:#f3ba2f; }
.ic-SOL  { background:rgba(20,241,149,.13);  color:#14f195; }
.ic-XRP  { background:rgba(200,200,200,.08); color:#aaa; }
.ic-USDT { background:rgba(38,161,123,.13);  color:#26a17b; }
.ic-USDC { background:rgba(38,161,123,.13);  color:#2775ca; }
.ic-ADA  { background:rgba(52,104,209,.13);  color:#3468d1; }
.ic-DOGE { background:rgba(194,166,51,.13);  color:#c2a633; }
.ic-TRX  { background:rgba(239,0,39,.13);    color:#ef0027; }
.ic-AVAX { background:rgba(232,65,66,.13);   color:#e84142; }
.ic-DOT  { background:rgba(230,0,122,.13);   color:#e6007a; }
.ic-MATIC{ background:rgba(130,71,229,.13);  color:#8247e5; }
.ic-LINK { background:rgba(42,90,218,.13);   color:#2a5ada; }
.ic-LTC  { background:rgba(166,169,170,.13); color:#a6a9aa; }
.ic-UNI  { background:rgba(255,0,122,.13);   color:#ff007a; }
.ic-def  { background:rgba(99,102,241,.13);  color:var(--p); }

/* Skeleton */
.skel {
  background:linear-gradient(90deg,var(--bg3) 25%,var(--bg4) 50%,var(--bg3) 75%);
  background-size:200% 100%; border-radius:6px;
  animation:shimmer 1.6s infinite;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── FORMS ───────────────────────────────────────────────────────────────── */
.fg   { margin-bottom:20px; }
.fl   { display:block; font-size:11px; font-weight:700; color:var(--t2); margin-bottom:7px; text-transform:uppercase; letter-spacing:.5px; }
.fi   {
  width:100%; padding:13px 16px; font-size:14px; font-family:var(--ff);
  background:rgba(255,255,255,.04); border:1.5px solid var(--b);
  border-radius:var(--r); color:var(--t1); outline:none; transition:.22s;
}
.fi:focus { border-color:var(--bh); box-shadow:0 0 0 4px rgba(99,102,241,.10); background:rgba(255,255,255,.06); }
.fi::placeholder { color:var(--t4); }
.fi.valid { border-color:var(--green); }
.fi.invalid { border-color:var(--red); }
textarea.fi { resize:vertical; min-height:100px; }
select.fi option { background:var(--bg2); }

/* ── ALERTS ──────────────────────────────────────────────────────────────── */
.alert { padding:14px 18px; border-radius:var(--r); display:flex; align-items:flex-start; gap:12px; font-size:14px; line-height:1.55; }
.alert i { flex-shrink:0; margin-top:1px; }
.a-info    { background:rgba(99,102,241,.09);  color:var(--p2);    border:1px solid rgba(99,102,241,.22); }
.a-success { background:rgba(16,185,129,.09);  color:var(--green); border:1px solid rgba(16,185,129,.22); }
.a-warning { background:rgba(245,158,11,.09);  color:var(--yellow);border:1px solid rgba(245,158,11,.22); }
.a-danger  { background:rgba(239,68,68,.09);   color:var(--red);   border:1px solid rgba(239,68,68,.22); }

/* ── WIZARD ──────────────────────────────────────────────────────────────── */
.wizard { display:flex; justify-content:space-between; align-items:flex-start; position:relative; margin-bottom:48px; padding:0 16px; }
.wiz-track { position:absolute; top:22px; left:40px; right:40px; height:2px; background:var(--b2); }
.wiz-fill  { height:100%; background:var(--gp); border-radius:2px; transition:width .5s ease; }
.wiz-step  { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:8px; }
.wiz-num   {
  width:46px; height:46px; border-radius:50%;
  background:var(--bg3); border:2px solid var(--b);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ffd); font-size:14px; font-weight:800; color:var(--t4);
  transition:all .3s;
}
.wiz-step.active .wiz-num { background:var(--gp); border-color:var(--p); color:#fff; box-shadow:0 0 24px rgba(99,102,241,.45); }
.wiz-step.done   .wiz-num { background:var(--green); border-color:var(--green); color:#fff; }
.wiz-lbl   { font-size:11px; font-weight:600; color:var(--t4); white-space:nowrap; }
.wiz-step.active .wiz-lbl { color:var(--p2); font-weight:700; }
.wiz-step.done   .wiz-lbl { color:var(--green); }
.wiz-content { display:none; animation:fadeUp .35s ease; }
.wiz-content.on { display:block; }
@keyframes fadeUp { from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)} }

/* ── TOKEN BOXES ─────────────────────────────────────────────────────────── */
.tgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:14px; }
/* button reset — makes <button class="tbox"> look exactly like the old div */
button.tbox {
  appearance:none; -webkit-appearance:none;
  margin:0; font-family:var(--ff); line-height:1.4;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:100%;
}
.tbox {
  background:var(--bg3); border:1.5px solid var(--b);
  border-radius:var(--rx); padding:24px 16px; text-align:center;
  cursor:pointer; transition:all .25s; position:relative; overflow:hidden;
}
.tbox-glow { position:absolute; inset:0; background:var(--gp); opacity:0; transition:.25s; pointer-events:none; }
.tbox:hover:not(.locked) { border-color:rgba(99,102,241,.45); transform:translateY(-3px); box-shadow:0 10px 32px rgba(0,0,0,.45); }
.tbox:hover:not(.locked) .tbox-glow { opacity:.06; }
.tbox.sel { border-color:var(--p); box-shadow:0 0 0 3px rgba(99,102,241,.22),0 10px 32px rgba(0,0,0,.45); }
.tbox.sel .tbox-glow { opacity:.10; }
.tbox.locked { opacity:.35; cursor:not-allowed; pointer-events:none; }
.tbox-emoji { font-size:30px; margin-bottom:10px; position:relative; z-index:1; }
.tbox-num   { font-family:var(--ffd); font-size:26px; font-weight:800; color:var(--t1); letter-spacing:-.4px; position:relative; z-index:1; }
.tbox-sub   { font-size:12px; color:var(--t3); margin:4px 0 10px; position:relative; z-index:1; }
.tbox-earn  { font-size:12px; font-weight:700; color:var(--green); background:rgba(16,185,129,.10); padding:4px 12px; border-radius:50px; display:inline-block; position:relative; z-index:1; }
.tbox-lock  { position:absolute; top:9px; right:10px; background:rgba(245,158,11,.15); color:var(--yellow); border-radius:6px; padding:3px 8px; font-size:10px; font-weight:700; z-index:2; }

/* ── NETWORK OPTIONS ─────────────────────────────────────────────────────── */
.ngrid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.nopt {
  background:var(--bg3); border:1.5px solid var(--b);
  border-radius:var(--rl); padding:18px 10px; text-align:center;
  cursor:pointer; transition:.25s;
}
.nopt input { display:none; }
.nopt:hover { border-color:rgba(99,102,241,.4); transform:translateY(-2px); }
.nopt.sel  { border-color:var(--p); background:rgba(99,102,241,.10); box-shadow:0 0 0 2px rgba(99,102,241,.18); }
.nopt-img  { width:36px; height:36px; border-radius:50%; object-fit:contain; margin:0 auto 8px; }
.nopt-name { font-size:12px; font-weight:700; color:var(--t1); }
.nopt-chain{ font-size:10px; color:var(--t4); margin-top:2px; }

/* ── UPLOAD BOX ──────────────────────────────────────────────────────────── */
.upbox {
  border:2px dashed var(--b); border-radius:var(--rl);
  padding:40px 20px; text-align:center; cursor:pointer;
  background:rgba(255,255,255,.02); transition:.25s; position:relative;
}
.upbox:hover { border-color:var(--p); background:rgba(99,102,241,.04); }
.upbox.done  { border-color:var(--green); background:rgba(16,185,129,.03); border-style:solid; }
.upbox input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.upbox-ico   { font-size:40px; color:var(--p); margin-bottom:12px; transition:.25s; }
.upbox.done .upbox-ico { color:var(--green); }
.upbox-txt   { color:var(--t3); font-size:14px; line-height:1.55; }
.upbox-txt small { display:block; color:var(--t4); font-size:12px; margin-top:4px; }

/* ── PAYMENT BOX ─────────────────────────────────────────────────────────── */
.paybox {
  background:linear-gradient(145deg,rgba(99,102,241,.07),rgba(139,92,246,.04));
  border:1px solid rgba(99,102,241,.20); border-radius:var(--rx); padding:28px;
  animation:fadeUp .35s ease;
}
.pay-eth-card {
  background:rgba(0,0,0,.35); border:1px solid var(--b2);
  border-radius:var(--rl); padding:22px; text-align:center; margin-bottom:18px;
}
.pay-eth-amt  { font-family:var(--ffd); font-size:36px; font-weight:800; color:var(--t1); letter-spacing:-.5px; }
.pay-eth-usd  { font-size:14px; color:var(--t3); margin-top:4px; }
.pay-eth-rate { font-size:12px; color:var(--t4); margin-top:8px; }
.pay-eth-rate strong { color:var(--green); }

.addr-copy {
  background:rgba(0,0,0,.3); border:1px solid var(--b2); border-radius:var(--r);
  padding:13px 16px; display:flex; align-items:center; gap:10px;
  font-family:'Courier New',monospace; font-size:12px; color:var(--t2); word-break:break-all;
}
.addr-copy span { flex:1; }
.copy-btn {
  background:var(--gp); border:none; border-radius:8px; padding:8px 14px;
  color:#fff; cursor:pointer; font-size:11px; font-weight:700; font-family:var(--ff);
  white-space:nowrap; flex-shrink:0; transition:.2s;
}
.copy-btn:hover { opacity:.9; transform:scale(1.03); }
.qrw { text-align:center; margin:18px 0 0; }
.qrw img { border-radius:var(--rl); border:2px solid rgba(99,102,241,.25); display:inline-block; }

/* ── SUMMARY ─────────────────────────────────────────────────────────────── */
.sum-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.sum-item { background:rgba(255,255,255,.03); border:1px solid var(--b2); border-radius:var(--r); padding:16px; }
.sum-lbl  { font-size:10px; color:var(--t4); text-transform:uppercase; letter-spacing:.7px; font-weight:700; margin-bottom:6px; }
.sum-val  { font-family:var(--ffd); font-size:18px; font-weight:800; color:var(--t1); }
.sum-val.g { color:var(--green); }
.sum-val.c { color:var(--c); }
.sum-val.p { color:var(--p2); }
.sum-val.y { color:var(--yellow); }

/* ── CONTRACT SEND BOX ───────────────────────────────────────────────────── */
.send-card {
  background:linear-gradient(145deg,rgba(16,185,129,.06),rgba(99,102,241,.04));
  border:1px solid rgba(16,185,129,.18); border-radius:var(--rx); padding:26px; margin-bottom:22px;
}
.contract-row {
  background:rgba(0,0,0,.3); border:1px solid rgba(16,185,129,.15);
  border-radius:var(--r); padding:12px 16px; display:flex; align-items:center; gap:10px;
  font-family:'Courier New',monospace; font-size:11px; color:var(--t2); word-break:break-all; margin-top:12px;
}

/* ── WALLET HINT ─────────────────────────────────────────────────────────── */
.whint { font-size:13px; margin-top:7px; display:flex; align-items:center; gap:6px; }
.whint.ok   { color:var(--green); }
.whint.fail { color:var(--red); }

/* ── REASON CHIPS ────────────────────────────────────────────────────────── */
.chip {
  background:rgba(255,255,255,.03); border:1.5px solid var(--b);
  border-radius:50px; padding:8px 18px; font-size:13px; color:var(--t3);
  cursor:pointer; transition:.2s; font-family:var(--ff);
}
.chip:hover,.chip.on { background:rgba(99,102,241,.12); border-color:var(--p); color:var(--t1); }

/* ── BADGES ──────────────────────────────────────────────────────────────── */
.badge { padding:4px 12px; border-radius:50px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; }
.b-green  { background:rgba(16,185,129,.13); color:var(--green); }
.b-yellow { background:rgba(245,158,11,.13); color:var(--yellow); }
.b-red    { background:rgba(239,68,68,.13);  color:var(--red); }
.b-blue   { background:rgba(56,189,248,.13); color:var(--blue); }
.b-ind    { background:rgba(99,102,241,.13); color:var(--p2); }

/* ── LIVE POPUP ──────────────────────────────────────────────────────────── */
.live-pop {
  position:fixed; bottom:28px; left:28px; max-width:290px; z-index:900;
  background:rgba(10,10,28,.95); border:1px solid var(--b);
  border-radius:var(--rl); padding:16px 18px;
  backdrop-filter:blur(24px); box-shadow:var(--sh2);
  transform:translateX(-160%); transition:transform .5s cubic-bezier(.34,1.56,.64,1);
}
.live-pop.show { transform:translateX(0); }
.live-hd { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.live-dot { width:7px; height:7px; background:var(--green); border-radius:50%; animation:pulse 2s infinite; }
.live-tag { font-size:11px; font-weight:700; color:var(--green); text-transform:uppercase; letter-spacing:1px; }
.live-body { display:flex; align-items:center; gap:12px; }
.live-av   { width:40px; height:40px; background:var(--gp); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; color:#fff; flex-shrink:0; }
.live-name { font-weight:700; color:var(--t1); font-size:14px; }
.live-amt  { color:var(--green); font-weight:700; font-size:13px; }
.live-time { font-size:11px; color:var(--t4); margin-top:2px; }

/* ── TOAST ───────────────────────────────────────────────────────────────── */
.toast {
  position:fixed; top:84px; right:22px; z-index:9999;
  padding:14px 20px; border-radius:var(--rl);
  display:flex; align-items:center; gap:11px;
  font-size:14px; font-weight:600; min-width:270px; max-width:360px;
  box-shadow:var(--sh2); pointer-events:none;
  animation:tIn .3s ease;
}
.t-success { background:rgba(16,185,129,.15); color:var(--green); border:1px solid rgba(16,185,129,.28); }
.t-danger  { background:rgba(239,68,68,.15);  color:var(--red);   border:1px solid rgba(239,68,68,.28); }
.t-warning { background:rgba(245,158,11,.15); color:var(--yellow);border:1px solid rgba(245,158,11,.28); }
.t-info    { background:rgba(99,102,241,.15); color:var(--p2);    border:1px solid var(--b); }
@keyframes tIn  { from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)} }
@keyframes tOut { to{opacity:0;transform:translateX(30px)} }

/* ── SPINNER ─────────────────────────────────────────────────────────────── */
.spin {
  width:18px; height:18px; border-radius:50%; display:inline-block;
  border:2.5px solid rgba(255,255,255,.2); border-top-color:#fff;
  animation:rot 1s linear infinite;
}
@keyframes rot { to{transform:rotate(360deg)} }

/* ── FOOTER ──────────────────────────────────────────────────────────────── */
.footer { background:var(--bg1); border-top:1px solid var(--b2); padding:80px 0 36px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:56px; margin-bottom:56px; }
.f-logo { display:flex; align-items:center; gap:10px; font-family:var(--ffd); font-size:18px; font-weight:800; color:var(--t1); margin-bottom:14px; }
.f-logo img { width:30px; height:30px; border-radius:8px; }
.f-logo .dot { color:var(--c); }
.f-desc { color:var(--t4); font-size:14px; line-height:1.7; max-width:240px; }
.f-ttl  { font-size:11px; font-weight:700; color:var(--t2); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:18px; }
.f-nav  { list-style:none; }
.f-nav li { margin-bottom:9px; }
.f-nav a  { color:var(--t4); font-size:14px; transition:.2s; }
.f-nav a:hover { color:var(--p2); }
.f-bottom { border-top:1px solid var(--b2); padding-top:28px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.f-copy   { color:var(--t4); font-size:13px; }
.f-tag    { color:var(--t4); font-size:12px; }

/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN PANEL  (sidebar-based layout)
   ═══════════════════════════════════════════════════════════════════════════ */
.sb {
  position:fixed; top:0; bottom:0; left:0; width:260px; z-index:100;
  background:var(--bg1); border-right:1px solid var(--b2);
  display:flex; flex-direction:column; overflow-y:auto;
}
.sb-brand { padding:24px 22px 20px; display:flex; align-items:center; gap:11px; border-bottom:1px solid var(--b2); }
.sb-brand img { width:36px; height:36px; border-radius:10px; }
.sb-brand-name { font-family:var(--ffd); font-size:17px; font-weight:800; color:var(--t1); }
.sb-brand-tag  { font-size:11px; color:var(--t3); margin-top:1px; }
.sb-sec  { padding:18px 22px 8px; font-size:10px; font-weight:700; color:var(--t4); text-transform:uppercase; letter-spacing:1.5px; }
.sb-nav  { list-style:none; padding:0 12px 16px; }
.sb-nav li a {
  display:flex; align-items:center; gap:11px; padding:11px 14px;
  border-radius:10px; color:var(--t3); font-weight:500; font-size:13.5px; transition:.2s;
}
.sb-nav li a:hover { color:var(--t1); background:rgba(99,102,241,.09); }
.sb-nav li a.on   { color:var(--t1); background:rgba(99,102,241,.16); border:1px solid rgba(99,102,241,.22); }
.sb-nav li a i { width:17px; text-align:center; color:var(--p); font-size:14px; }
.sb-badge { background:var(--red); color:#fff; border-radius:50px; padding:2px 7px; font-size:10px; font-weight:800; margin-left:auto; }

.a-main { margin-left:260px; padding:30px 36px; min-height:100vh; }
.a-top  { display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; flex-wrap:wrap; gap:14px; }
.a-top h1 { font-family:var(--ffd); font-size:26px; font-weight:800; color:var(--t1); letter-spacing:-.5px; }

/* Admin cards */
.acard { background:var(--bg2); border:1px solid var(--b); border-radius:var(--rl); overflow:hidden; }
.acard-hdr { padding:17px 22px; border-bottom:1px solid var(--b2); font-family:var(--ffd); font-size:14px; font-weight:700; color:var(--t1); display:flex; justify-content:space-between; align-items:center; }
.acard-hdr i { color:var(--p); margin-right:8px; }
.acard-body { padding:22px; }

/* Admin table */
.atbl { width:100%; border-collapse:collapse; }
.atbl th { background:var(--bg3); padding:11px 16px; text-align:left; font-size:11px; color:var(--t4); text-transform:uppercase; letter-spacing:.5px; font-weight:700; white-space:nowrap; }
.atbl td { padding:13px 16px; border-bottom:1px solid rgba(99,102,241,.06); font-size:13px; color:var(--t3); vertical-align:middle; }
.atbl tr:last-child td { border-bottom:none; }
.atbl tr:hover td { background:rgba(99,102,241,.03); }

/* Admin form */
.afi { width:100%; padding:11px 14px; background:rgba(255,255,255,.04); border:1.5px solid var(--b); border-radius:var(--r); color:var(--t1); font-size:13px; font-family:var(--ff); outline:none; transition:.2s; }
.afi:focus { border-color:var(--bh); }
.afi::placeholder { color:var(--t4); }
select.afi option { background:var(--bg2); }

/* Admin result box */
.res-box { margin-top:10px; padding:12px 15px; border-radius:var(--r); font-size:13px; font-weight:500; display:none; }
.res-ok   { background:rgba(16,185,129,.12); color:var(--green); border:1px solid rgba(16,185,129,.25); }
.res-fail { background:rgba(239,68,68,.12);  color:var(--red);   border:1px solid rgba(239,68,68,.25); }

/* Avatar */
.av { width:38px; height:38px; background:var(--gp); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--ffd); font-weight:800; font-size:15px; color:#fff; flex-shrink:0; }

/* Modal */
.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.72); z-index:200; display:none; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(6px); }
.modal-bg.show { display:flex; }
.modal { background:var(--bg2); border:1px solid var(--b); border-radius:var(--rx); padding:30px; width:100%; max-width:500px; box-shadow:var(--sh2); }
.modal h3 { font-family:var(--ffd); font-size:20px; font-weight:800; color:var(--t1); margin-bottom:20px; }
.modal-actions { display:flex; gap:12px; justify-content:flex-end; margin-top:22px; }

/* Filters */
.filters { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; align-items:center; }
.filters .afi { flex:1; min-width:180px; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero .container { grid-template-columns:1fr; text-align:center; gap:0; }
  .hero-sub  { margin-left:auto; margin-right:auto; }
  .hero-btns { justify-content:center; }
  .hero-stats { justify-content:center; }
  .hero-vis  { display:none; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 900px) {
  .sb { display:none; }
  .a-main { margin-left:0; padding:24px 20px; }
}
@media (max-width: 768px) {
  .nav-links,.nav-actions { display:none; flex-direction:column; position:absolute; top:70px; left:0; right:0; background:rgba(2,2,9,.97); padding:16px 20px; border-bottom:1px solid var(--b); gap:4px; }
  .nav-links.open,.nav-actions.open { display:flex; }
  .burger { display:block; }
  .hero-h1 { font-size:40px; }
  .sh-h2   { font-size:32px; }
  .ngrid   { grid-template-columns:repeat(3,1fr); }
  .tgrid   { grid-template-columns:repeat(2,1fr); }
  .sum-grid{ grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .live-pop { left:14px; right:14px; max-width:none; }
}
@media (max-width: 480px) {
  .hero-h1 { font-size:32px; letter-spacing:-1px; }
  .ngrid   { grid-template-columns:repeat(2,1fr); }
  .tgrid   { grid-template-columns:1fr; }
  .card-body,.card-hdr { padding:20px; }
  .wizard { padding:0 4px; }
  .wiz-lbl { display:none; }
}