*{box-sizing:border-box}
:root{
  --bg1:#0a0420;
  --bg2:#1a0940;
  --fg:#e9e9ff;
  --muted:#a6a6d6;
  --accent:#6a6aff;
  --accent2:#8a4bff;
  --glass:rgba(255,255,255,0.06);
  --ring:#8a8aff;
  --ok:#2bd98c;
}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--fg);
  background: radial-gradient(1200px 600px at 10% 10%, #2b0c6f55 0%, transparent 60%),
              radial-gradient(900px 500px at 90% 20%, #4a16a955 0%, transparent 60%),
              linear-gradient(180deg, var(--bg1), var(--bg2));
  overflow-x:hidden;
}

.bg-orb{position:fixed; border-radius:50%; filter:blur(60px); opacity:0.35; pointer-events:none; mix-blend-mode:screen}
.orb-1{width:480px;height:480px;background:#7c3aed; top:-60px; left:-60px; animation:float 12s ease-in-out infinite}
.orb-2{width:420px;height:420px;background:#2563eb; bottom:10vh; right:-80px; animation:float 14s ease-in-out infinite reverse}
.orb-3{width:360px;height:360px;background:#14b8a6; top:60vh; left:10vw; animation:float 16s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

.container{width:min(1100px, 92%); margin:0 auto}
header{padding:48px 0 8px}
h1{font-size:38px; margin:0 0 6px; letter-spacing:0.2px}
.brand{
  background: radial-gradient(circle at 30% 30%, #c4b5fd, #a78bfa 40%, #60a5fa 70%, #34d399);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 18px rgba(164, 148, 255, 0.55);
}
.subtitle{margin:0; color:var(--muted)}

.grid{display:grid; grid-template-columns: 1fr 1fr; gap:18px; align-items:start}
@media (max-width: 960px){ .grid{grid-template-columns:1fr} }

.panel{
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.12);
  border-radius:16px;
  padding:18px;
  backdrop-filter: blur(8px);
  box-shadow:0 0 0 1px rgba(168,168,255,0.08), 0 8px 30px rgba(0,0,0,0.35), 0 0 60px rgba(130, 100, 255, 0.25);
}

.tabs{display:flex; gap:8px; margin-bottom:12px}
.tab{
  background:var(--glass);
  color:var(--fg);
  border:1px solid rgba(255,255,255,0.15);
  padding:10px 14px;
  border-radius:999px;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .2s ease;
}
.tab.active, .tab:hover{
  box-shadow:0 0 0 2px var(--ring), 0 0 24px rgba(140, 120, 255, 0.35) inset;
  transform: translateY(-1px);
}

.row{margin-bottom:12px}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:12px}
label{display:block; font-weight:600; margin-bottom:6px}
input, textarea, select{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.14);
  outline:none;
  color:var(--fg);
  background:rgba(255,255,255,0.04);
  box-shadow:0 0 0 1px rgba(168,168,255,0.06) inset, 0 4px 14px rgba(0,0,0,0.25) inset;
}
input:focus, textarea:focus, select:focus{
  box-shadow:0 0 0 2px var(--ring);
}

.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding:12px 14px; border-radius:12px; cursor:pointer; border:1px solid rgba(255,255,255,0.15);
  background:linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
  color:var(--fg);
  transition: transform .12s ease, box-shadow .2s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow:0 0 0 2px var(--ring) }
.btn.primary{ background: radial-gradient(90% 90% at 20% 20%, #7c3aed, #2563eb 60%, #14b8a6); border:none }
.btn.small{ padding:8px 10px; font-size:14px }
.btn.ghost{ background:transparent }

.output-panel h2{margin:4px 0 10px}
.output-toolbar{display:flex; gap:8px; align-items:center; margin-bottom:8px}

#output{
  width:100%; border-radius:12px; min-height:420px; resize:vertical; padding:14px;
  background:rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.15);
}

.footer{display:flex; justify-content:space-between; align-items:center; color:var(--muted); padding:16px 0 32px}
.footer a{color:var(--fg)}

.chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px}
.chip{
  display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 2px 10px rgba(0,0,0,0.3);
}
.chip button{
  border:none; background:transparent; color:var(--muted); cursor:pointer; font-weight:700
}

legend{font-weight:700}
.conditional{display:none}
.conditional.active{display:block}