:root {
  --logo-size: clamp(64px, 18vw, 132px);
  --gold: #f6e27a; --silver: #e6e9f0; --bronze: #e7c09a;
  --gold-grad: linear-gradient(180deg, #f6e27a, #d1a326);
  --silver-grad: linear-gradient(180deg, #e6e9f0, #b8c6db);
  --bronze-grad: linear-gradient(180deg, #e7c09a, #b2774f);
  --bg0: #1a0033; --bg1: #0d0022; --bg2: #08001a;
  --fg: #e6ecf1; --muted: #b3a2ff; --line: #ff40ff;
  --panel: #2a004d; --panel-2: #1f0038; --card: #330066; --card-2: #26004d;
  --neon-pink: #ff40ff; --neon-cyan: #00f7ff; --neon-lime: #39ff14; --neon-yellow: #f4ff61;
  --glow: 0 0 8px #ff40ff80, 0 0 12px #00f7ff80;
  --std-grad: linear-gradient(180deg, #4b0082, #2a004d);
}
[data-theme="original"] {
  --bg0:#070b12; --bg1:#0b0f17; --bg2:#090d14; --fg:#e6ecf1; --muted:#a7b6c1; --line:#1a2637;
  --panel:#0f1724; --panel-2:#0b1320; --card:#131c2a; --card-2:#0f1928;
  --neon-pink:#70e0ff; --neon-cyan:#70e0ff; --neon-lime:#76d39e; --neon-yellow:#c8d2dc;
  --glow: 0 0 6px #70e0ff80; --std-grad: linear-gradient(180deg, #14314a, #0f2a40);
}
[data-theme="light"] {
  --bg0:#f0f2f5; --bg1:#e4e6eb; --bg2:#d8dde1; --fg:#1a1a1a; --muted:#4a4a4a; --line:#d1d5db;
  --panel:#fff; --panel-2:#f7f7f7; --card:#fff; --card-2:#f0f0f0;
  --neon-pink:#e91e63; --neon-cyan:#00acc1; --neon-lime:#4caf50; --neon-yellow:#ff9800;
  --glow: 0 0 6px #e91e6380; --std-grad: linear-gradient(180deg, #e0e7ff, #c7d2fe);
}
*{box-sizing:border-box}
body{
  margin:0; color:var(--fg); font-family:'VT323', monospace; line-height:1.35; font-size:1.2rem;
  background:
    radial-gradient(1200px 800px at 20% -10%, var(--bg1) 0%, transparent 60%),
    radial-gradient(1000px 700px at 120% 10%, var(--bg2) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 55%, var(--bg2) 100%);
}
h1,h2,h3,.tokenId{font-family:'UnifrakturCook',serif; letter-spacing:1px; color:var(--neon-cyan); text-shadow:var(--glow)}
header{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.75rem 1rem; background:linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border-bottom:2px solid var(--neon-pink); box-shadow:var(--glow);
}
.header-left{display:flex; align-items:center; gap:.75rem}
.brand{width:var(--logo-size);height:var(--logo-size);border-radius:50%;object-fit:cover;border:3px solid var(--neon-lime);background:var(--card);box-shadow:0 0 10px var(--neon-lime)}
header h1{margin:0; font-size:clamp(1.5rem,3vw,2rem)}
.sub{font-size:1rem; color:var(--neon-yellow); text-shadow:0 0 4px var(--neon-yellow)}
.pill{padding:.3rem .6rem; border-radius:999px; background:var(--panel); border:2px solid var(--neon-cyan); color:var(--neon-cyan)}
.theme-buttons{display:flex; gap:.5rem}
.theme-btn{width:24px;height:24px;border-radius:50%;border:2px solid var(--neon-lime);cursor:pointer;transition:transform .2s, box-shadow .2s}
.theme-btn:hover{transform:scale(1.1); box-shadow:0 0 8px var(--neon-cyan)}
.theme-btn.active{border-color:var(--neon-pink); box-shadow:0 0 12px var(--neon-pink)}
main{padding:1rem}
.toolbar{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; justify-content:space-between; margin:0 0 1rem}
.toolbar .left{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center}
.group{display:flex; align-items:center; gap:.5rem; background:linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%); border:2px solid var(--neon-pink); padding:.5rem .6rem; border-radius:8px; box-shadow:var(--glow)}
label{font-size:1rem;color:var(--neon-yellow); text-shadow:0 0 4px var(--neon-yellow)}
input,select,button{background:var(--card); color:var(--neon-cyan); border:2px solid var(--neon-lime); border-radius:6px; padding:.5rem .6rem; font-family:'VT323', monospace; font-size:1.1rem; min-height:44px; box-shadow:var(--glow)}
.btn{background:linear-gradient(180deg, var(--neon-pink), var(--neon-pink)); border-color:var(--neon-cyan); cursor:pointer; text-shadow:0 0 4px var(--neon-pink)}
.btn:hover{filter:brightness(1.2); box-shadow:0 0 12px var(--neon-cyan)}
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:1rem}
.card{background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%); border:2px solid var(--neon-pink); border-radius:10px; box-shadow:var(--glow); cursor:pointer; transition:transform .2s, box-shadow .2s; padding:.8rem}
.card:hover{transform:translateY(-5px); box-shadow:0 0 16px var(--neon-cyan), 0 0 24px var(--neon-pink)}
.img-wrap{position:relative}
.thumb{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; background:var(--card); border:1px solid var(--neon-lime)}
.ovl{position:absolute; top:8px; padding:.2rem .5rem; font-size:.9rem; border-radius:999px; border:2px solid var(--neon-pink); box-shadow:var(--glow)}
.ovl-left{left:8px; background:var(--panel); color:var(--neon-cyan)}
.ovl-right{right:8px; color:var(--fg); font-weight:700}
.rank-gold{background:var(--gold-grad)} .rank-silver{background:var(--silver-grad)} .rank-bronze{background:var(--bronze-grad)} .rank-std{background:var(--std-grad); color:var(--neon-cyan)}
.star{position:absolute; bottom:8px; right:8px; font-size:20px; color:var(--neon-yellow); text-shadow:var(--glow)}
.meta{margin-top:.6rem}
.price{margin-top:.4rem; font-size:1rem; line-height:1.4}
.row{display:flex; justify-content:space-between; gap:.5rem}
.badge{font-size:.9rem; background:var(--panel); border:2px solid var(--neon-cyan); padding:.2rem .5rem; border-radius:999px}
.deal{border-color:var(--neon-lime)!important; box-shadow:0 0 16px var(--neon-lime)}
.pagination{display:flex; justify-content:center; align-items:center; gap:.5rem; margin:1.5rem 0}
.pagination button{background:var(--std-grad); border:2px solid var(--neon-pink); padding:.3rem .8rem; border-radius:6px; color:var(--neon-cyan); cursor:pointer}
.pagination button.active{background:var(--neon-lime); color:#000; font-weight:bold}
.pagination button:disabled{opacity:.5; cursor:not-allowed}
.loading,.error{text-align:center; margin:1rem 0; color:var(--neon-yellow)} .error{color:var(--neon-pink)}
.footer{margin-top:2rem; background:linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%); border-top:2px solid var(--neon-cyan); padding:1rem}
.footer .wrap{max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:1rem}
.footer h4{margin:.2rem 0 .6rem} .footer .small{color:var(--neon-yellow); font-size:1rem} .footer a{color:var(--neon-cyan); text-decoration:none} .footer a:hover{text-decoration:underline}
.modal{position:fixed; inset:0; background:rgba(0,0,0,.8); display:flex; align-items:center; justify-content:center; visibility:hidden; opacity:0; transition:visibility 0s, opacity .2s}
.modal.show{visibility:visible; opacity:1}
.modal-content{background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%); padding:1rem; border-radius:12px; max-width:520px; width:92%; max-height:90%; overflow:auto; border:2px solid var(--neon-pink); box-shadow:var(--glow); position:relative}
.close{position:absolute; top:.6rem; right:.6rem; font-size:1.5rem; cursor:pointer; color:var(--neon-cyan)}
table{width:100%; border-collapse:collapse; margin-top:.6rem}
th,td{padding:.4rem .5rem; border-bottom:1px solid var(--neon-pink); font-size:1rem; text-align:left; color:var(--neon-yellow)}
th{background:var(--panel); color:var(--neon-cyan); position:sticky; top:0}
.drawer{position:fixed; top:0; right:-420px; width:400px; height:100vh; background:linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%); border-left:2px solid var(--neon-cyan); transition:right .2s; z-index:50; display:flex; flex-direction:column; box-shadow:-12px 0 28px #000a}
.drawer.open{right:0}
.drawer header{display:flex; justify-content:space-between; align-items:center; padding:.9rem 1rem; border-bottom:2px solid var(--neon-pink)}
.drawer .body{padding:.8rem 1rem 1rem; overflow:auto}
.trait-group{margin:0 0 1rem}
.drawer .footer{margin-top:auto; display:flex; gap:.6rem; padding:.8rem 1rem; border-top:2px solid var(--neon-cyan); background:var(--panel)}
.rare-diamonds{margin-top:.3rem; font-size:1.2rem; color:var(--neon-lime); text-shadow:0 0 6px var(--neon-lime)}
.walletbar{display:flex;gap:.6rem;align-items:center}
@media (max-width:720px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .drawer{width:100%; right:-100%}
  .drawer.open{right:0}
  .footer .wrap{grid-template-columns:1fr}
}