/* GlowZoom Studio styles */
* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  color: #e6f1ff;
  background: radial-gradient(1200px 800px at 10% 10%, rgba(115, 96, 255, 0.35), transparent),
              radial-gradient(1000px 700px at 90% 20%, rgba(0, 212, 255, 0.25), transparent),
              radial-gradient(900px 600px at 50% 90%, rgba(255, 0, 200, 0.22), transparent),
              #0b1020;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
}

.bg-orb { position: fixed; inset: 0; pointer-events: none; filter: blur(90px); opacity: 0.5; }
.orb-1 { background: radial-gradient(600px 600px at 15% 20%, #7c5fff, transparent); mix-blend-mode: screen; }
.orb-2 { background: radial-gradient(700px 700px at 85% 15%, #00d4ff, transparent); mix-blend-mode: screen; }
.orb-3 { background: radial-gradient(800px 800px at 50% 85%, #ff00c8, transparent); mix-blend-mode: screen; }

.topbar {
  padding: 24px 24px 8px;
  text-align: center;
}
.topbar h1 {
  margin: 0;
  font-size: 40px;
  letter-spacing: 0.5px;
  text-shadow: 0 0 30px rgba(124,95,255,0.6), 0 0 60px rgba(0,212,255,0.35);
}
.tag { margin: 6px 0 0; color: #cfe6ff; opacity: 0.9; }

.container {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 24px;
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
}

.glass {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
}

.panel, .stage {
  padding: 18px 18px 20px;
}

.section { margin-bottom: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.label { display: block; font-size: 13px; color: #cfe6ff; margin-bottom: 6px; opacity: 0.9; }
.row { display: flex; align-items: center; gap: 8px; }
.sep, .x { opacity: 0.7; }

input[type="number"], select, input[type="file"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  background: rgba(12,16,36,0.6);
  color: #e6f1ff;
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease;
}
input[type="number"]:focus, select:focus, input[type="file"]:focus {
  border-color: rgba(0,212,255,0.55);
  box-shadow: 0 0 0 3px rgba(0,212,255,0.25);
}

.drop {
  margin-top: 8px;
  border: 1px dashed rgba(255,255,255,0.3);
  height: 56px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #bfe0ff;
  opacity: 0.8;
}

.toggle { font-size: 14px; color: #cfe6ff; }
.toggle input { margin-right: 8px; }

.buttons { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.btn {
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(135deg, rgba(124,95,255,0.35), rgba(0,212,255,0.25));
  box-shadow: 0 10px 25px rgba(0,0,0,0.35), 0 0 30px rgba(124,95,255,0.45);
  color: #061224;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: transform .1s ease, filter .2s ease;
}
.btn:hover { filter: brightness(1.1); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn.primary { background: linear-gradient(135deg, rgba(255,0,200,0.45), rgba(0,212,255,0.35)); }
.btn.link { background: rgba(255,255,255,0.06); color: #e6f1ff; box-shadow: none; }

.meta { margin-top: 8px; font-size: 13px; color: #cfe6ff; opacity: 0.9; }
#progress { height: 6px; background: rgba(255,255,255,0.08); border-radius: 999px; margin-top: 8px; overflow: hidden; }
#progress .bar { height: 100%; width: 0; background: linear-gradient(90deg, #7c5fff, #00d4ff, #ff00c8); box-shadow: 0 0 20px #7c5fff; transition: width .1s linear; }

.stage { display: grid; place-items: center; min-height: 480px; position: relative; }
#canvas { max-width: 100%; width: 100%; height: auto; border-radius: 12px; background: #0b1020; }

.foot { text-align: center; padding: 12px 24px 24px; color: #a3c7ff; opacity: 0.8; }

.hide { display: none; }