*{box-sizing:border-box}
:root{
  --bg:#0c0f0d;
  --card:#121614;
  --muted:#8a928d;
  --primary:#baff2a;
  --primary-2:#7aff2a;
  --line:#1b211d;
  --shadow:0 10px 30px rgba(0,0,0,.5);
}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:
    radial-gradient(1000px 400px at 100% 0%, rgba(122,255,42,.15), transparent 40%),
    radial-gradient(700px 300px at 0% 100%, rgba(186,255,42,.12), transparent 45%),
    var(--bg);
  color:#e8eee9;
}
#app{max-width:980px;margin:0 auto;padding:16px 16px 80px}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:8px 0}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:28px;height:28px;display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.logo .stick{background:linear-gradient(180deg,var(--primary),var(--primary-2));border-radius:6px;box-shadow:0 0 12px rgba(186,255,42,.4)}
.logo .stick:nth-child(2){height:26px}
.logo .stick:nth-child(1), .logo .stick:nth-child(3){height:18px;align-self:end}
.titles h1{margin:0;font-weight:800;letter-spacing:.4px}
.titles p{margin:0;color:var(--muted);font-size:12px}
.ghost{background:transparent;border:1px solid var(--line);color:#cfd7d0;border-radius:14px;padding:8px 12px}
.hero{
  display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:center;
  background:linear-gradient(180deg,rgba(186,255,42,.12),rgba(186,255,42,0) 60%);
  border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow)
}
.hero-left h2{font-size:32px;margin:4px 0 8px}
.hero-left .accent{color:var(--primary)}
.hero-left .muted{color:var(--muted)}
.cta{display:flex;gap:10px;margin-top:12px}
.primary,.secondary{
  padding:12px 16px;border-radius:14px;border:0;font-weight:700;cursor:pointer
}
.primary{background:linear-gradient(180deg,var(--primary),var(--primary-2));color:#081005}
.secondary{background:#1a201b;color:#e8eee9;border:1px solid var(--line)}
.mock{display:flex;justify-content:center}
.mock img{max-width:260px;filter:drop-shadow(0 20px 40px rgba(0,0,0,.6));opacity:.95}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:18px}
.card{grid-column:span 6;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow)}
.card.balance{grid-column:span 7}
.card.invest{grid-column:span 5}
.card.referral{grid-column:span 12}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.big-amount{font-size:32px;font-weight:800;margin-bottom:12px}
.split{display:flex;gap:16px}
.split > div{flex:1;background:#0f130f;border:1px solid var(--line);border-radius:14px;padding:10px}
.small{font-size:12px}
.muted{color:var(--muted)}
.amount{font-weight:700;margin-top:6px}
.actions{display:flex;gap:10px;margin-top:12px}
.pill{background:#0f130f;border:1px solid var(--line);border-radius:22px;padding:10px 14px;color:#e8eee9}
.positions{display:flex;flex-direction:column;gap:10px}
.position{display:flex;align-items:center;justify-content:space-between;background:#0f130f;border:1px solid var(--line);border-radius:14px;padding:10px}
.badge{padding:4px 8px;border-radius:10px;background:rgba(186,255,42,.12);border:1px solid rgba(186,255,42,.35);font-size:12px}
.ref{display:flex;gap:10px}
.ref input{flex:1;background:#0f130f;border:1px solid var(--line);border-radius:12px;padding:12px;color:#fff}
.ref button{border:0;border-radius:12px;padding:12px 14px;background:linear-gradient(180deg,var(--primary),var(--primary-2));font-weight:700}

.foot{position:fixed;left:0;right:0;bottom:0;background:rgba(12,15,13,.8);backdrop-filter:blur(6px);border-top:1px solid var(--line);display:flex;justify-content:center;gap:16px;padding:10px}
.nav{background:#141914;color:#dfe7e0;border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.nav.active{border-color:rgba(186,255,42,.5)}

.sheet{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:end center;padding:14px}
.sheet.hidden{display:none}
.sheet-card{width:min(560px,94vw);background:var(--card);border:1px solid var(--line);border-radius:18px 18px 0 0;padding:16px 16px 18px;box-shadow:var(--shadow)}
.sheet-head{display:flex;align-items:center;justify-content:space-between}
.sheet-actions{display:flex;gap:10px;margin-top:12px}
.input{width:100%;padding:12px;border-radius:12px;background:#0f130f;border:1px solid var(--line);color:#fff}
.help{font-size:12px;color:var(--muted);margin-top:8px}

@media (max-width:860px){
  .hero{grid-template-columns:1fr}
  .card.balance{grid-column:span 12}
  .card.invest{grid-column:span 12}
}