/* Logo Effects by SWC UI */
:root{
  --bg1:#0b0f14;
  --bg2:#10151d;
  --fg:#e6f3ff;
  --muted:#a8b3c2;

  --accent1:#6ee7ff;
  --accent2:#c084fc;
  --accent3:#ff8bbb;
  --glow: 0 0 24px rgba(110,231,255,0.35), 0 0 48px rgba(192,132,252,0.25);
}

*{box-sizing:border-box}
html,body{height:100%;}
body{
  margin:0;
  color:var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:
    radial-gradient(1200px 700px at 80% 10%, rgba(198,108,255,0.12), transparent 60%),
    radial-gradient(900px 600px at 20% 90%, rgba(0,225,255,0.10), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(8px);
}
.topbar h1{margin:0;font-size:22px;letter-spacing:0.5px}
.topbar .by{color:#9ad7ff;font-weight:700;text-shadow: var(--glow);}
.topbar .actions button{margin-left:8px}

.layout{display:grid;grid-template-columns:360px 1fr;gap:16px;padding:16px;max-width:1400px;margin:0 auto}
.panel{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius:16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

.left{padding:16px}
.right{padding:14px;display:flex;align-items:center;justify-content:center;}

.uploader{
  border:1px dashed rgba(255,255,255,0.25);
  border-radius:14px;
  padding:16px;
  text-align:center;
  background: rgba(0,0,0,0.25);
  box-shadow: inset 0 0 60px rgba(255,255,255,0.03);
}
.uploader .hint{margin:6px 0 10px 0;color:var(--muted)}
.uploader .sub{margin:6px 0 0 0;color:var(--muted);font-size:12px}
.uploader button{margin:6px 0}

.controls{margin-top:14px}
.group{margin:10px 0}
.group label{display:block;margin-bottom:6px;color:#cde6ff;font-weight:600}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}

button, select, input[type="range"]{
  width:100%;
  background: rgba(255,255,255,0.06);
  color:var(--fg);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
}
button{cursor:pointer;transition:transform .06s ease, box-shadow .2s ease}
button:hover{box-shadow: var(--glow); transform: translateY(-1px)}
button.primary{background: linear-gradient(135deg, rgba(110,231,255,0.25), rgba(192,132,252,0.22)); border-color: rgba(110,231,255,0.45)}

.stage-wrap{
  position:relative;
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
}
canvas#stage{
  width:100%;
  max-width:1000px;
  height:auto;
  border-radius:16px;
  background: radial-gradient(1000px 700px at 50% 20%, rgba(255,255,255,0.06), transparent 60%), #0b0f14;
  box-shadow: var(--glow);
  border:1px solid rgba(255,255,255,0.06);
}
.status{
  position:absolute;inset:auto auto 20px 20px;
  background: rgba(0,0,0,0.45);
  padding:8px 12px;border-radius:8px;color:#d9e8ff;font-size:12px;border:1px solid rgba(255,255,255,0.08)
}

.foot{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;color:var(--muted);font-size:12px;
  border-top:1px solid rgba(255,255,255,0.06);
}

/* Sliders */
input[type="range"]{appearance:none;height:8px;border-radius:8px;background:linear-gradient(90deg, rgba(110,231,255,0.25), rgba(192,132,252,0.25))}
input[type="range"]::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 0 10px rgba(110,231,255,0.6)}

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