*{box-sizing:border-box}
:root{
  --purple:#6C2BD9;     /* Solana Purple */
  --aqua:#00D2FF;       /* Aqua */
  --teal:#14F195;       /* Solana neon green */
  --bg1:#0E0A1F;
  --bg2:#0A0F2A;
  --panel:#101332;
  --panel2:#131746;
  --border:#1E245C;
  --text:#EAF2FF;
  --muted:#A4B2E6;
}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(20,241,149,0.12), transparent 60%),
    linear-gradient(135deg, var(--bg1), var(--bg2) 55%, #090E22);
  color:var(--text)
}
.app{max-width:1100px;margin:0 auto;padding:20px}

.brand{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.brand-left{display:flex;gap:12px;align-items:center}
.logo{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;font-size:22px;
  background: linear-gradient(135deg, var(--purple), var(--aqua));
  filter: drop-shadow(0 10px 24px rgba(0, 210, 255, 0.25));
}
.brand h1{margin:0;font-size:22px;letter-spacing:0.2px}
.brand p{margin:4px 0 0;color:var(--muted);font-size:13px}
.brand-right{display:flex;gap:10px}

.controls{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:12px;position:sticky;top:0;z-index:2}
.row{display:flex;gap:12px;align-items:center;margin:8px 0}
.row.wrap{flex-wrap:wrap}
.templates{align-items:flex-start}
.templates .label{min-width:180px;color:var(--muted);font-size:13px;margin-top:6px}
.overlay-list{display:flex;gap:10px;overflow:auto;padding-bottom:4px}
.overlay-list .thumb{min-width:110px;max-width:110px;aspect-ratio:1;background:var(--panel2);border:1px dashed var(--border);border-radius:12px;display:grid;place-items:center;cursor:pointer;position:relative}
.overlay-list .thumb img{max-width:90%;max-height:90%}
.overlay-list .thumb .name{position:absolute;bottom:6px;left:8px;right:8px;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.overlay-list .thumb.active{outline:2px solid var(--aqua)}

label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)}
input[type="text"], select, input[type="color"]{background:#0D1438;color:var(--text);border:1px solid #28317A;border-radius:10px;padding:9px 10px;min-width:140px}
input[type="range"]{accent-color:var(--aqua)}
.btn{background:#0D1438;color:var(--text);border:1px solid #28317A;border-radius:12px;padding:10px 14px;cursor:pointer}
.btn.primary{background:linear-gradient(90deg,var(--purple),var(--aqua));border:0;color:white;font-weight:800}
.btn.danger{background:#321E1E;border-color:#5A2A2A}
.btn.ghost{background:transparent;border-color:transparent;text-decoration:underline}

label.file input[type=file]{display:none}
label.file span{display:inline-block;background:#0D1438;border:1px dashed #2D3D9A;border-radius:12px;padding:10px 14px;cursor:pointer}

.stage-wrap{margin-top:16px;display:flex;justify-content:center;align-items:center}
canvas{max-width:100%;height:auto;border-radius:14px;border:1px solid var(--border);background:#0A0F2A}

footer{margin-top:16px;color:var(--muted);font-size:12px}
.checkbox{flex-direction:row;align-items:center;gap:8px}

@media (max-width:720px){
  input[type="text"]{min-width:220px;width:100%}
  .templates .label{min-width:140px}
}