@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

*{box-sizing:border-box;margin:0;padding:0}

:root{
  --teal:#2DD4BF;
  --pink:#EC4899;
  --lav:#a78bfa;
  --ink:#05070d;
  --txt:#eef2ff;
  --dim:#9aa8c7;
  --faint:#5f6d8c;
  --pos:#34d399;
  --neg:#fb7185;
}

body{
  background:var(--ink);
  min-height:100vh;
  font-family:'Space Grotesk',sans-serif;
  color:var(--txt);
  padding:32px 20px 60px;
  display:flex;
  justify-content:center;
}

/* ambient holographic wash */
.aura{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.aura::before{
  content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(ellipse 700px 500px at 15% 10%, rgba(45,212,191,.22), transparent 60%),
    radial-gradient(ellipse 600px 500px at 85% 15%, rgba(236,72,153,.18), transparent 60%),
    radial-gradient(ellipse 800px 600px at 50% 100%, rgba(167,139,250,.16), transparent 60%);
  filter:blur(40px);
}
.aura::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(167,139,250,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(45,212,191,.045) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 85% 75% at 50% 45%, #000 15%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 45%, #000 15%, transparent 80%);
}

.wrap{width:1120px;max-width:100%;position:relative;z-index:1}

/* glass surface */
.glass{
  background:linear-gradient(155deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 8px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  position:relative;
  overflow:hidden;
}
.glass::before{
  content:"";position:absolute;inset:0;border-radius:16px;padding:1px;
  background:linear-gradient(135deg, rgba(45,212,191,.6), rgba(167,139,250,.25) 40%, transparent 60%, rgba(236,72,153,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}
.pad{padding:18px}

/* header */
.head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px}
.brand svg{filter:drop-shadow(0 0 12px rgba(45,212,191,.55))}
.brand-name{
  font-size:23px;font-weight:700;letter-spacing:-.01em;
  background:linear-gradient(100deg,#5eead4,#a78bfa 45%,#f472b6);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
input,select{
  font-family:'JetBrains Mono',monospace;font-size:12px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  color:var(--txt);padding:9px 12px;border-radius:10px;outline:none;
}
input:focus,select:focus{border-color:rgba(45,212,191,.7);box-shadow:0 0 0 3px rgba(45,212,191,.12)}
input::placeholder{color:var(--faint)}
#addr{width:360px}
select option{background:#0b0f1a}

.go{
  font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.06em;
  padding:9px 22px;border-radius:10px;border:none;cursor:pointer;color:#04120f;
  background:linear-gradient(100deg,#5eead4,#a78bfa 55%,#f472b6);
  box-shadow:0 0 20px rgba(45,212,191,.35);
}
.go:hover{filter:brightness(1.12);box-shadow:0 0 30px rgba(167,139,250,.5)}
.go:disabled{opacity:.5;cursor:wait}

.eyebrow{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
  font-family:'JetBrains Mono',monospace;margin:26px 0 12px;
}
.label{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  font-family:'JetBrains Mono',monospace;margin-bottom:8px;
}

/* rows */
.row1{display:grid;grid-template-columns:1.05fr 1.55fr 1.25fr;gap:16px}
.row3{display:grid;grid-template-columns:1.15fr .85fr 1fr;gap:16px}
.holds{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}

.bignum{
  font-size:34px;font-weight:700;letter-spacing:-.02em;
  background:linear-gradient(100deg,#5eead4,#a78bfa);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(94,234,212,.35));
}
.pos{color:var(--pos)}
.neg{color:var(--neg)}
.mono{font-family:'JetBrains Mono',monospace}
.duo{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px;
  padding-top:14px;border-top:1px solid rgba(255,255,255,.08);
}
.mini{font-size:15px;font-weight:700;font-family:'JetBrains Mono',monospace}

.growth{font-size:28px;font-weight:700;font-family:'JetBrains Mono',monospace}
.gsub{font-size:11px;color:var(--dim);font-family:'JetBrains Mono',monospace;margin-bottom:4px}

.donut-row{display:grid;grid-template-columns:140px 1fr;gap:16px;align-items:center;margin-top:8px}
#donut{width:140px;height:140px}
.legend{display:flex;flex-direction:column;gap:8px;justify-content:center}
.leg{display:flex;align-items:center;gap:9px;font-size:12px;font-family:'JetBrains Mono',monospace;color:#cfd8ee}
.sw{width:9px;height:9px;border-radius:2px;flex-shrink:0}
.leg .pc{margin-left:auto;font-weight:500;color:#fff}

/* holdings cards */
.hc{padding:14px}
.htop{display:flex;align-items:center;gap:9px;margin-bottom:12px;min-height:30px}
.logo{
  width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.08);
  object-fit:cover;flex-shrink:0;box-shadow:0 0 12px rgba(167,139,250,.35);
}
.tname{font-size:14px;font-weight:700;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tsub{
  font-size:9px;color:var(--faint);font-family:'JetBrains Mono',monospace;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:78px;
}
.amt{font-size:10px;color:var(--dim);font-family:'JetBrains Mono',monospace;margin-bottom:5px}
.usd{font-size:15px;font-weight:700;font-family:'JetBrains Mono',monospace;margin-bottom:4px}
.chg{font-size:11px;font-weight:500;font-family:'JetBrains Mono',monospace}

/* transactions */
.tx{
  display:flex;align-items:center;gap:9px;padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
  font-size:11px;font-family:'JetBrains Mono',monospace;
}
.tx:last-of-type{border:none}
.txi{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0}
.txa{flex:1;color:#c6d0e8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.txv{font-weight:500;white-space:nowrap}
.txt{color:var(--faint);font-size:9px;width:42px;text-align:right;flex-shrink:0}

/* stats */
.stat{
  display:flex;align-items:center;justify-content:space-between;padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.06);font-size:12px;
}
.stat:last-of-type{border:none}
.sk{color:var(--dim);font-family:'JetBrains Mono',monospace;font-size:11px}
.sv{font-weight:500;font-family:'JetBrains Mono',monospace}

.stage{display:flex;align-items:center;justify-content:center}
.stage svg{width:100%;height:236px}
.ring-glow{filter:drop-shadow(0 0 6px rgba(94,234,212,.85));transform-origin:110px 194px;animation:ringSpin 14s linear infinite}
.ring-pink{filter:drop-shadow(0 0 6px rgba(244,114,182,.9));transform-origin:110px 194px;animation:ringSpin 9s linear infinite reverse}
.ring-core{filter:drop-shadow(0 0 7px #5eead4)}
.holo-logo{animation:neonPulse 2.6s ease-in-out infinite}
.motes circle{animation:moteFloat 3.2s ease-in-out infinite}
.motes circle:nth-child(2){animation-delay:.4s}
.motes circle:nth-child(3){animation-delay:.8s}
.motes circle:nth-child(4){animation-delay:1.2s}
.motes circle:nth-child(5){animation-delay:1.6s}
.motes circle:nth-child(6){animation-delay:2s}

@keyframes ringSpin{to{transform:rotate(360deg)}}
@keyframes neonPulse{
  0%,100%{filter:drop-shadow(0 0 16px rgba(94,234,212,.9)) drop-shadow(0 0 30px rgba(244,114,182,.55))}
  50%{filter:drop-shadow(0 0 28px rgba(94,234,212,1)) drop-shadow(0 0 48px rgba(244,114,182,.9))}
}
@keyframes moteFloat{
  0%,100%{opacity:.35;filter:drop-shadow(0 0 4px #5eead4)}
  50%{opacity:1;filter:drop-shadow(0 0 9px #5eead4)}
}

.btn{
  width:100%;margin-top:14px;padding:10px;border-radius:10px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);
  color:#c6d0e8;font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
}
.btn:hover{background:rgba(255,255,255,.09);border-color:rgba(45,212,191,.5);color:#fff}

.foot{margin-top:26px;display:flex;justify-content:center}
.fb{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
  padding:9px 26px;border-radius:100px;
}
.fb a{color:#5eead4;text-decoration:none}

.err{
  margin-bottom:16px;padding:12px 16px;border-radius:10px;font-size:12px;
  font-family:'JetBrains Mono',monospace;background:rgba(251,113,133,.1);
  border:1px solid rgba(251,113,133,.35);color:#fda4af;display:none;
}
.empty{color:var(--faint);font-size:12px;font-family:'JetBrains Mono',monospace;padding:14px 0}

.skel{
  background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.11),rgba(255,255,255,.05));
  background-size:200% 100%;animation:sh 1.3s infinite;border-radius:6px;color:transparent;
}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}

@media (prefers-reduced-motion: reduce){
  .skel{animation:none}
  .ring-glow,.ring-pink,.holo-logo,.motes circle{animation:none}
}

@media(max-width:1000px){
  .row1,.row3{grid-template-columns:1fr}
  .holds{grid-template-columns:repeat(2,1fr)}
  #addr{width:100%}
  .controls{width:100%}
}