:root{
  --bg:#05060a; --blue:#00e5ff; --purple:#b026ff; --green:#39ff14;
  --panel:rgba(12,14,24,.55); --border:rgba(0,229,255,.25);
  --mono:'Share Tech Mono',monospace; --sans:'Vazirmatn',sans-serif;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:#05060a; color:#e8f0ff; font-family:var(--sans);
  overflow-x:hidden; min-height:100vh;
  background-image:radial-gradient(circle at 20% 10%, rgba(176,38,255,.10), transparent 45%),
                   radial-gradient(circle at 85% 30%, rgba(0,229,255,.10), transparent 45%),
                   radial-gradient(circle at 50% 100%, rgba(57,255,20,.06), transparent 50%);
}
.mono{ font-family:var(--mono); }

/* Background layers */
#bg-particles{ position:fixed; inset:0; z-index:0; pointer-events:none; }
#grid-floor{
  position:fixed; bottom:0; left:-50%; width:200%; height:45vh; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(0,229,255,.18) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(176,38,255,.14) 1px, transparent 1px);
  background-size:60px 60px;
  transform:perspective(400px) rotateX(70deg);
  transform-origin:bottom; animation:gridmove 4s linear infinite;
  mask-image:linear-gradient(to top, #000, transparent);
  -webkit-mask-image:linear-gradient(to top, #000, transparent);
  opacity:.6;
}
@keyframes gridmove{ from{ background-position:0 0; } to{ background-position:0 60px; } }
.orb{ position:fixed; border-radius:50%; filter:blur(70px); z-index:0; pointer-events:none; opacity:.5; animation:float 9s ease-in-out infinite; }
.orb-a{ width:340px; height:340px; background:var(--purple); top:8%; right:-60px; }
.orb-b{ width:280px; height:280px; background:var(--blue); top:40%; left:-40px; animation-delay:-3s; }
.orb-c{ width:300px; height:300px; background:var(--green); bottom:5%; right:30%; opacity:.3; animation-delay:-6s; }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-40px); } }
.scanlines{ position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.10) 3px, rgba(0,0,0,0) 4px);
  animation:flick 6s infinite; }
@keyframes flick{ 0%,97%{ opacity:.5; } 98%{ opacity:.2; } 99%{ opacity:.6; } }
#scroll-bar{ position:fixed; top:0; right:0; height:3px; width:0; z-index:100;
  background:linear-gradient(90deg,var(--green),var(--blue),var(--purple)); box-shadow:0 0 10px var(--blue); }

.app{ position:relative; z-index:2; }
.glass{ background:var(--panel); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border); }

/* Boot */
.boot-screen{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:#02030699; }
.boot-box{ font-family:var(--mono); background:rgba(5,8,14,.9); border:1px solid var(--green);
  box-shadow:0 0 40px rgba(57,255,20,.3); padding:28px 34px; border-radius:10px; min-width:300px; }
.boot-title{ font-size:28px; color:var(--green); margin-bottom:16px; font-family:var(--sans); font-weight:900; }
.boot-line{ color:var(--green); margin:6px 0; animation:typein .3s both; }
@keyframes typein{ from{ opacity:0; transform:translateX(-8px); } to{ opacity:1; transform:none; } }

/* Nav */
.nav{ position:sticky; top:0; z-index:50; border-bottom:1px solid var(--border);
  box-shadow:0 4px 30px rgba(0,0,0,.5); }
.nav::after{ content:''; position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  background:linear-gradient(90deg,var(--blue),var(--purple),var(--green),var(--blue));
  background-size:300% 100%; animation:navglow 5s linear infinite; }
@keyframes navglow{ to{ background-position:300% 0; } }
.nav-inner{ max-width:1200px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; }
.logo{ font-weight:900; font-size:22px; cursor:pointer; color:#fff;
  text-shadow:0 0 12px var(--blue); }
.nav-links{ display:flex; align-items:center; gap:14px; }
.nav-link{ cursor:pointer; color:#cdd8ee; font-weight:500; padding:6px 10px; border-radius:8px; transition:.25s; }
.nav-link:hover{ color:#fff; text-shadow:0 0 10px var(--blue); }
.nav-link.active{ color:var(--blue); text-shadow:0 0 12px var(--blue); }
.connect-btn{ background:linear-gradient(135deg,var(--purple),var(--blue)); border:none; color:#fff;
  padding:8px 16px; border-radius:20px; font-family:var(--sans); font-weight:700; cursor:pointer;
  box-shadow:0 0 16px rgba(176,38,255,.5); animation:pulseb 2.4s infinite; }
@keyframes pulseb{ 0%,100%{ box-shadow:0 0 16px rgba(176,38,255,.5); } 50%{ box-shadow:0 0 26px rgba(0,229,255,.7); } }
.mute-btn{ background:transparent; border:1px solid var(--border); border-radius:8px; padding:6px 8px; cursor:pointer; color:#fff; }
.burger{ display:none; background:transparent; border:1px solid var(--border); color:var(--blue);
  font-size:20px; border-radius:8px; padding:4px 12px; cursor:pointer; }

/* Glitch */
.glitch{ position:relative; }
.glitch:hover::before,.glitch:hover::after{ content:attr(data-text); position:absolute; inset:0; }
.glitch:hover::before{ color:var(--purple); animation:g1 .3s infinite; clip-path:inset(0 0 55% 0); }
.glitch:hover::after{ color:var(--green); animation:g2 .3s infinite; clip-path:inset(55% 0 0 0); }
@keyframes g1{ 0%,100%{ transform:translate(0); } 50%{ transform:translate(-2px,1px); } }
@keyframes g2{ 0%,100%{ transform:translate(0); } 50%{ transform:translate(2px,-1px); } }

.main{ max-width:1200px; margin:0 auto; padding:20px; }

/* Hero */
.hero{ text-align:center; padding:70px 10px 40px; opacity:0; transform:translateY(30px); transition:1s; }
.hero.reveal{ opacity:1; transform:none; }
.hero-tag{ color:var(--green); letter-spacing:2px; opacity:.8; margin-bottom:14px; font-size:13px; }
.hero-title{ font-size:clamp(34px,6vw,64px); font-weight:900; margin:0 0 16px; line-height:1.2;
  text-shadow:0 0 30px rgba(0,229,255,.3); }
.hero-title .grad{ background:linear-gradient(90deg,var(--blue),var(--purple),var(--green));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200%; animation:gr 4s linear infinite; }
@keyframes gr{ to{ background-position:200% 0; } }
.hero-sub{ color:#aeb9d6; font-size:clamp(15px,2vw,19px); max-width:640px; margin:0 auto 30px; }
.hero-sub em{ color:var(--green); font-style:normal; }
.hero-cta{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:44px; }

.neon-btn{ background:linear-gradient(135deg,var(--blue),var(--purple)); color:#fff; border:none;
  padding:14px 30px; border-radius:30px; font-family:var(--sans); font-weight:700; font-size:16px; cursor:pointer;
  box-shadow:0 0 20px rgba(0,229,255,.4); transition:.25s; }
.neon-btn:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 0 34px rgba(0,229,255,.7); }
.neon-btn.alt{ background:linear-gradient(135deg,var(--green),var(--blue)); box-shadow:0 0 20px rgba(57,255,20,.4); }
.neon-btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }

.stats-strip{ display:flex; justify-content:space-around; gap:16px; max-width:700px; margin:0 auto;
  padding:22px; border-radius:16px; flex-wrap:wrap; }
.stat{ text-align:center; min-width:100px; }
.stat-num{ font-size:34px; font-weight:700; color:var(--blue); text-shadow:0 0 16px var(--blue); }
.stat-label{ color:#9aa6c4; font-size:14px; margin-top:4px; }

/* Section */
.section-title{ font-size:clamp(24px,4vw,38px); font-weight:900; margin:40px 0 24px; text-align:center;
  text-shadow:0 0 20px rgba(176,38,255,.4); }
.sub-title{ font-size:20px; font-weight:700; margin:36px 0 16px; color:var(--blue); border-right:3px solid var(--blue);
  padding-right:12px; }

/* Filters */
.filters{ display:flex; gap:12px; padding:16px; border-radius:14px; margin-bottom:24px; flex-wrap:wrap; }
.inp{ background:rgba(0,0,0,.4); border:1px solid var(--border); color:#e8f0ff; padding:11px 14px;
  border-radius:10px; font-family:var(--sans); font-size:15px; outline:none; transition:.2s; }
.inp:focus{ border-color:var(--blue); box-shadow:0 0 14px rgba(0,229,255,.4); }
.inp.search{ flex:1; min-width:180px; }
select.inp{ cursor:pointer; }
select.inp option{ background:#0a0d16; }

/* Grid + cards */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.card-wrap{ opacity:0; transform:translateY(24px); transition:.6s; }
.card-wrap.reveal{ opacity:1; transform:none; }
.card{ background:rgba(10,13,22,.7); backdrop-filter:blur(10px); border:1px solid var(--rc,var(--border));
  border-radius:16px; overflow:hidden; cursor:pointer; transition:transform .15s ease, box-shadow .3s;
  box-shadow:0 0 0 rgba(0,0,0,0); }
.card:hover{ box-shadow:0 12px 40px var(--rg,rgba(0,229,255,.4)); }
.card-img{ position:relative; height:170px; background:linear-gradient(135deg,#0a0e1a,#141a2e); overflow:hidden; }
.card-img img{ width:100%; height:100%; object-fit:cover; }
.rarity-badge{ position:absolute; top:10px; left:10px; background:rgba(0,0,0,.6); border:1px solid;
  padding:3px 10px; border-radius:14px; font-size:12px; font-weight:700; backdrop-filter:blur(4px); }
.card-body{ padding:16px; }
.card-title{ margin:0 0 8px; font-size:17px; font-weight:700; color:#fff; }
.card-desc{ margin:0 0 12px; font-size:13.5px; color:#9aa6c4; line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card-meta{ display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:12px; }
.seller{ color:var(--green); }
.stars{ color:#ffd23f; }
.card-foot{ display:flex; justify-content:space-between; align-items:center; }
.price{ font-size:18px; font-weight:700; color:var(--blue); text-shadow:0 0 10px rgba(0,229,255,.5); }
.buy-btn{ background:linear-gradient(135deg,var(--purple),var(--blue)); color:#fff; border:none;
  padding:9px 18px; border-radius:20px; font-family:var(--sans); font-weight:700; cursor:pointer; transition:.2s;
  box-shadow:0 0 14px rgba(176,38,255,.4); }
.buy-btn:hover{ transform:scale(1.05); box-shadow:0 0 22px rgba(0,229,255,.6); }
.buy-btn.bought{ background:rgba(57,255,20,.15); color:var(--green); border:1px solid var(--green); box-shadow:none; }
.buy-btn.big{ width:100%; padding:14px; font-size:16px; margin-top:10px; }

.empty{ text-align:center; color:#6c7799; padding:60px 0; font-size:18px; }

/* Sell */
.sell-wrap{ padding-bottom:20px; }
.sell-grid{ display:grid; grid-template-columns:1fr 340px; gap:26px; align-items:start; }
.sell-form{ padding:24px; border-radius:16px; display:flex; flex-direction:column; gap:8px; }
.sell-form label{ font-size:14px; color:#aeb9d6; margin-top:8px; }
.sell-form .inp{ width:100%; }
.sell-two{ display:flex; gap:12px; }
.sell-two > div{ flex:1; }
.sell-img-row{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.ghost-btn{ flex:1; background:rgba(0,0,0,.3); border:1px solid var(--border); color:#cdd8ee;
  padding:11px; border-radius:10px; cursor:pointer; font-family:var(--sans); font-size:14px; transition:.2s; text-align:center; }
.ghost-btn:hover{ border-color:var(--blue); color:#fff; box-shadow:0 0 12px rgba(0,229,255,.3); }
.ghost-btn.upload{ display:flex; align-items:center; justify-content:center; }
.ghost-btn:disabled{ opacity:.4; cursor:not-allowed; }
.publish{ margin-top:18px; }
.preview-label{ text-align:center; color:var(--green); font-family:var(--mono); margin-bottom:14px; font-size:13px; }
.preview-holder .card-wrap{ opacity:1; transform:none; }

/* Profile */
.prof-card{ display:flex; gap:20px; align-items:center; padding:24px; border-radius:16px; flex-wrap:wrap; }
.avatar{ width:74px; height:74px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:32px; font-weight:900; background:linear-gradient(135deg,var(--purple),var(--blue));
  box-shadow:0 0 24px rgba(176,38,255,.5); }
.prof-name{ font-size:22px; color:#fff; margin-bottom:8px; }
.prof-stats{ display:flex; gap:24px; margin-top:10px; flex-wrap:wrap; }
.prof-stats b{ font-size:22px; color:var(--blue); }
.prof-stats span{ color:#9aa6c4; font-size:13px; }

/* Modal */
.modal-back{ position:fixed; inset:0; z-index:120; background:rgba(2,3,8,.8); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:20px; animation:fade .3s; }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
.modal{ background:rgba(10,13,22,.95); border:1px solid var(--rc); border-radius:18px; max-width:820px; width:100%;
  box-shadow:0 0 50px var(--rg); animation:pop .35s cubic-bezier(.2,1.2,.4,1); position:relative; overflow:hidden; }
@keyframes pop{ from{ transform:scale(.85); opacity:0; } to{ transform:scale(1); opacity:1; } }
.modal-x{ position:absolute; top:14px; left:14px; z-index:2; background:rgba(0,0,0,.5); border:1px solid var(--border);
  color:#fff; width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:16px; }
.modal-grid{ display:grid; grid-template-columns:1fr 1fr; }
.modal-img{ background:#0a0e1a; min-height:320px; }
.modal-img img{ width:100%; height:100%; object-fit:cover; }
.modal-info{ padding:30px; }
.modal-title{ font-size:26px; font-weight:900; margin:12px 0; color:#fff; }
.modal-desc{ color:#aeb9d6; line-height:1.8; margin-bottom:20px; }
.modal-row{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed rgba(255,255,255,.08); color:#cdd8ee; }
.modal-price{ font-size:30px; font-weight:700; color:var(--blue); text-shadow:0 0 14px var(--blue); margin:18px 0; }

/* Toast + confetti */
.toast{ position:fixed; bottom:28px; left:50%; transform:translateX(-50%); z-index:130;
  padding:14px 26px; border-radius:30px; color:#fff; font-weight:700;
  box-shadow:0 0 26px rgba(0,229,255,.5); animation:toastup .4s; border:1px solid var(--green); }
@keyframes toastup{ from{ transform:translate(-50%,20px); opacity:0; } to{ transform:translate(-50%,0); opacity:1; } }
.confetti{ position:fixed; inset:0; z-index:140; pointer-events:none; }
.confetti span{ position:absolute; width:8px; height:8px; border-radius:2px;
  animation:conf 1s ease-out forwards; }
@keyframes conf{ to{ transform:translate(var(--tx),var(--ty)) rotate(360deg); opacity:0; } }

/* Footer */
.footer{ margin-top:60px; position:relative; z-index:2; }
.foot-line{ height:1px; background:linear-gradient(90deg,transparent,var(--purple),var(--blue),transparent); }
.foot-inner{ max-width:1200px; margin:0 auto; padding:26px 20px; display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:12px; color:#8892b0; font-size:14px; }
.disclaimer{ color:var(--green); }
.remix{ color:var(--blue); text-decoration:none; border:1px solid var(--blue); padding:6px 16px; border-radius:20px;
  transition:.2s; }
.remix:hover{ background:var(--blue); color:#02030a; box-shadow:0 0 16px var(--blue); }

/* Responsive */
@media(max-width:900px){
  .grid{ grid-template-columns:repeat(2,1fr); }
  .sell-grid{ grid-template-columns:1fr; }
  .sell-preview{ max-width:340px; margin:0 auto; }
}
@media(max-width:640px){
  .grid{ grid-template-columns:1fr; }
  .modal-grid{ grid-template-columns:1fr; }
  .modal-img{ min-height:200px; }
  .burger{ display:block; }
  .nav-links{ position:absolute; top:100%; right:0; left:0; flex-direction:column; background:rgba(5,8,14,.97);
    padding:20px; gap:16px; border-bottom:1px solid var(--border); max-height:0; overflow:hidden; transition:.35s; opacity:0; }
  .nav-links.open{ max-height:400px; opacity:1; padding:20px; }
  .hero{ padding:40px 6px 30px; }
  .sell-two{ flex-direction:column; }
}