/* Cyberpunk × Comic style */
:root{
  --bg:#0b1020;
  --panel:#121b33;
  --accent:#7dffda;
  --accent2:#ff3cac;
  --text:#e6f3ff;
  --muted:#9ab3c6;
  --warning:#ffde59;
  --danger:#ff4477;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:radial-gradient(1000px 600px at 10% -10%, #112147 0, transparent 60%),
  radial-gradient(800px 500px at 110% 20%, #2b0b2e 0, transparent 60%), var(--bg);
  color:var(--text); font-family:'Share Tech Mono', ui-monospace, monospace;
}

/* neon scanlines */
.scanlines{position:fixed; inset:0; background:linear-gradient(rgba(255,255,255,.03),rgba(0,0,0,0) 3px); background-size:100% 3px; mix-blend-mode:overlay; pointer-events:none}
.glow{position:fixed; filter:blur(80px); opacity:.35; pointer-events:none}
.glow.a{width:420px;height:420px;left:-100px;top:-80px;background:radial-gradient(circle at center, #7dffda, transparent 60%)}
.glow.b{width:520px;height:520px;right:-120px;top:20px;background:radial-gradient(circle at center, #ff3cac, transparent 60%)}

/* header */
.cp-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(6px)}
.brand{display:flex;align-items:baseline;gap:10px}
.logo{display:inline-block;min-width:36px;height:36px;line-height:36px;text-align:center;border:2px solid var(--accent2);color:var(--accent2);border-radius:6px;font-weight:900;font-family:'Orbitron',sans-serif}
.title{margin:0;font-family:'Bangers', cursive;letter-spacing:1px;color:var(--accent)}
.subtitle{color:var(--muted);font-size:12px;margin-left:8px}
.wallet{display:flex;align-items:center;gap:10px}
.pill{padding:6px 10px;border:1px dashed var(--muted);border-radius:999px;color:var(--muted);font-size:12px}

/* main */
.wrap{max-width:1100px;margin:24px auto;padding:0 16px;display:grid;grid-template-columns:1.1fr .9fr;gap:24px}
.panel{background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.15);border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,.4);padding:20px}
.panel-title{margin:0 0 10px 0;font-family:'Orbitron', sans-serif;color:var(--accent)}
.desc{color:var(--muted)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:10px}
.stat{background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:14px}
.stat .k{color:var(--muted);font-size:12px;margin-bottom:6px}
.stat .v{font-size:18px;font-weight:700}
.mono{font-family:'Share Tech Mono',monospace}
.small{font-size:11px;word-break:break-all}

/* steps & buttons */
.steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.badge{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#000;font-weight:900;margin-right:6px}
.btn{background:transparent;border:1px solid var(--muted);color:var(--text);padding:8px 14px;border-radius:10px;cursor:pointer}
.btn.small{padding:6px 10px;font-size:12px}
.btn.big{padding:12px 18px;font-size:16px}
.btn.neon{border-color:var(--accent);box-shadow:0 0 8px var(--accent);text-shadow:0 0 6px rgba(125,255,218,.6)}
.btn.neon:hover{box-shadow:0 0 16px var(--accent)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* comic preview */
.comic{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.frame{background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.35));border:3px solid #000;border-radius:12px;min-height:160px;position:relative;box-shadow:6px 6px 0 #000}
.frame .caption{position:absolute;left:8px;top:8px;background:#000;color:#fff;padding:4px 8px;border:2px solid #fff;border-radius:8px;font-family:'Bangers',cursive;letter-spacing:.5px}
.frame .hint{position:absolute;right:8px;bottom:8px;color:var(--muted);font-size:12px}
.glitch{background:repeating-linear-gradient(0deg,rgba(255,60,172,.2) 0 2px, rgba(0,0,0,.2) 2px 4px), linear-gradient(90deg, rgba(125,255,218,.1), rgba(255,60,172,.1))}

/* tx messages */
.tx{margin-top:12px;color:var(--warning)}

/* inline row & qty input */
.row-inline{display:flex;align-items:center;gap:10px;margin-top:8px}
.qty{width:90px;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.25);color:var(--text);font-family:'Share Tech Mono',monospace}
.qty:focus{outline:none;box-shadow:0 0 0 2px var(--accent)}

/* responsive */
@media (max-width: 980px){
  .wrap{grid-template-columns:1fr;}
}

@media (max-width: 720px){
  .cp-header{flex-direction:column;align-items:flex-start;gap:12px;padding:12px 16px;}
  .wallet{width:100%;justify-content:space-between;flex-wrap:wrap;gap:8px;}
  .brand{flex-wrap:wrap;gap:6px;}
  .panel{padding:16px;}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .comic{grid-template-columns:repeat(2,minmax(0,1fr));}
  .row-inline{flex-wrap:wrap;gap:8px;}
  .qty{width:70px;}
}

@media (max-width: 480px){
  body{font-size:14px;}
  .cp-header{align-items:center;text-align:center;}
  .brand{justify-content:center;width:100%;}
  .subtitle{margin-left:0;display:block;}
  .wallet{flex-direction:column;align-items:center;}
  .pill{width:100%;text-align:center;}
  .wrap{margin:16px auto;gap:16px;}
  .panel-title{font-size:18px;}
  .stats{grid-template-columns:1fr;}
  .comic{grid-template-columns:1fr;}
  .frame{min-height:140px;}
  .btn.big{width:100%;}
  .qty{width:100%;}
}