:root{
  --bg:#050505;
  --fg:#ffffff;
  --neon:oklch(0.9 0.15 200);
  --neon-2:oklch(0.7 0.2 250);
  --neon-3:oklch(0.65 0.25 300);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Space Grotesk","Inter",system-ui,sans-serif;
  background:var(--bg);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 10%, oklch(0.4 0.2 260 / .25), transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 90%, oklch(0.55 0.2 200 / .22), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 50%, oklch(0.5 0.22 300 / .15), transparent 70%);
  background-attachment:fixed;
  overflow-x:hidden;
}
.page{position:relative;min-height:100vh;overflow:hidden}
.bg{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.blob{position:absolute;border-radius:9999px;filter:blur(120px)}
.b1{top:-160px;left:-160px;width:500px;height:500px;background:oklch(0.5 0.25 280 / .25)}
.b2{bottom:-160px;right:-160px;width:500px;height:500px;background:oklch(0.7 0.2 200 / .2)}
.b3{top:50%;left:50%;width:400px;height:400px;transform:translate(-50%,-50%);background:oklch(0.55 0.22 260 / .15);filter:blur(100px)}
.container{position:relative;z-index:1;max-width:700px;margin:0 auto;padding:64px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh}
@media(min-width:640px){.container{padding:64px 32px}}

header{text-align:center;margin-bottom:40px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:9999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);backdrop-filter:blur(10px);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:20px}
.pill-dot{width:6px;height:6px;border-radius:9999px;background:var(--neon);box-shadow:0 0 10px var(--neon)}
h1{font-size:clamp(2rem,5vw,3rem);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.neon{color:oklch(0.9 0.15 200);text-shadow:0 0 20px oklch(0.85 0.18 200 / .6)}
.sub{margin:16px auto 0;max-width:28rem;color:rgba(255,255,255,.6);font-size:15px}

section{width:100%}
.card{
  position:relative;overflow:hidden;padding:24px;
  background:linear-gradient(135deg, oklch(0.18 0.03 240 / .5), oklch(0.1 0.02 260 / .35));
  backdrop-filter:blur(24px) saturate(140%);
  border:1px solid oklch(0.85 0.18 200 / .25);
  border-radius:24px;
}
@media(min-width:640px){.card{padding:28px}}
.pulse{animation:cardpulse 3s ease-in-out infinite}
.card-glow{position:absolute;width:256px;height:256px;border-radius:9999px;filter:blur(48px);opacity:.6;pointer-events:none}
.g1{top:-96px;right:-96px;background:oklch(0.7 0.22 280 / .3)}
.g2{bottom:-96px;left:-96px;background:oklch(0.85 0.18 200 / .25)}
.card-row{position:relative;display:flex;align-items:center;gap:16px}
.logo-box{flex-shrink:0;width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:16px;border:1px solid oklch(0.85 0.18 200 / .35);background:oklch(0.1 0.02 260 / .6);box-shadow:0 0 30px oklch(0.85 0.18 200 / .35)}
.card-body{flex:1;min-width:0}
.card-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card-title h2{font-size:20px;font-weight:600;letter-spacing:-.01em}
.tag{padding:2px 8px;border-radius:9999px;border:1px solid oklch(0.85 0.18 200 / .4);background:oklch(0.85 0.18 200 / .1);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:oklch(0.9 0.15 200);text-shadow:0 0 20px oklch(0.85 0.18 200 / .6)}
.muted{margin-top:4px;color:rgba(255,255,255,.6);font-size:14px}
.card-meta{position:relative;display:flex;justify-content:space-between;margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.05);font-size:12px;color:rgba(255,255,255,.5)}
.card-meta .strong{color:rgba(255,255,255,.8);font-weight:500}

.wallet-slot{margin-top:24px}
.nc-tron-connect-wallet,
.connect-wallet{
  position:relative;width:100%;padding:18px 32px;border-radius:16px;font-family:inherit;font-size:16.8px;font-weight:600;letter-spacing:.02em;
  color:oklch(0.08 0.02 240);
  background:linear-gradient(135deg, oklch(0.9 0.18 200), oklch(0.75 0.2 220) 50%, oklch(0.7 0.22 280));
  background-size:200% 200%;animation:gradshift 6s ease infinite;
  border:1px solid rgba(255,255,255,.3);
  box-shadow:0 10px 40px oklch(0.85 0.18 200 / .45),0 0 60px oklch(0.7 0.22 280 / .35),inset 0 1px 0 rgba(255,255,255,.4);
  cursor:pointer;transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.nc-tron-connect-wallet:hover,
.connect-wallet:hover{transform:translateY(-2px) scale(1.02);filter:brightness(1.1);box-shadow:0 15px 55px oklch(0.85 0.18 200 / .6),0 0 80px oklch(0.7 0.22 280 / .5),inset 0 1px 0 rgba(255,255,255,.5)}
.nc-tron-connect-wallet:active,
.connect-wallet:active{transform:translateY(0) scale(.99)}
.nc-tron-connect-wallet:focus-visible,
.connect-wallet:focus-visible{outline:2px solid oklch(0.9 0.15 200);outline-offset:3px}
.nc-tron-connect-wallet:disabled,
.connect-wallet:disabled{opacity:.7;cursor:wait}
.fineprint{margin-top:16px;text-align:center;font-size:11px;color:rgba(255,255,255,.4)}

.status-card{padding:20px;background:linear-gradient(135deg, oklch(0.18 0.03 240 / .5), oklch(0.1 0.02 260 / .35));backdrop-filter:blur(24px) saturate(140%);border:1px solid oklch(0.85 0.18 200 / .25);border-radius:24px}
.status-row{display:flex;align-items:center;gap:16px}
.dot{width:12px;height:12px;border-radius:9999px;background:oklch(0.78 0.2 145);animation:statuspulse 2s ease-out infinite}
.status-body{flex:1}
.status-title{font-size:14px;font-weight:600}
.status-addr{margin-top:2px;font-family:ui-monospace,Menlo,monospace;font-size:12px;color:rgba(255,255,255,.6)}
.status-addr .neon{font-family:ui-monospace,Menlo,monospace}
.status-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:12px;border:1px solid oklch(0.85 0.18 200 / .35);background:oklch(0.1 0.02 260 / .6)}

.foot{display:inline-flex;align-items:center;gap:8px;margin-top:48px;font-size:11px;color:rgba(255,255,255,.4)}

.particle{position:absolute;border-radius:9999px;background:radial-gradient(circle, oklch(0.9 0.18 200 / .8), transparent 70%);filter:blur(1px);pointer-events:none;animation:float 12s ease-in-out infinite}

.fade-up{animation:fadeup .8s ease-out both}

@keyframes fadeup{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes float{0%,100%{transform:translate(0,0);opacity:.4}50%{transform:translate(20px,-30px);opacity:.8}}
@keyframes gradshift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes cardpulse{0%,100%{box-shadow:0 0 30px oklch(0.85 0.18 200 / .25),0 0 60px oklch(0.7 0.2 250 / .15),inset 0 1px 0 rgba(255,255,255,.08)}50%{box-shadow:0 0 60px oklch(0.85 0.18 200 / .5),0 0 100px oklch(0.7 0.2 250 / .3),inset 0 1px 0 rgba(255,255,255,.12)}}
@keyframes statuspulse{0%,100%{box-shadow:0 0 0 0 oklch(0.75 0.2 145 / .7)}50%{box-shadow:0 0 0 8px oklch(0.75 0.2 145 / 0)}}