:root{
  --bg:#0f1117;
  --panel:#16181d;
  --muted:#9aa4b2;
  --text:#e6edf3;
  --accent:#a04e8b;
  --success:#2ea043;
  --danger:#d9534f;
  --card-radius:10px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,Segoe UI,system-ui,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  
}

.app{max-width:1100px;margin:0 auto;padding:20px;}
header h1{margin:.2rem 0}
.muted{color:var(--muted);font-size:.9rem}
.required{color:var(--danger);font-weight:600;margin-left:.2rem}

.grid{display:grid;grid-template-columns:1fr 420px;gap:20px;margin-top:16px}
.panel{background:var(--panel);padding:18px;border-radius:var(--card-radius);box-shadow:0 6px 18px rgba(0,0,0,.5)}
.small{font-size:.9rem}

label{
  display:block;
  font-size:.95rem;
  margin-top:12px
}
input[type="text"], input[type="number"], select, input[list]{
  width:100%;
  padding:8px 10px;
  margin-top:6px;
  background:#0d1117;
  border:1px solid #262b32;
  color:var(--text);
  border-radius:6px;
}


.row-button{display:flex;gap:10px;margin-top:10px;align-items:center}
.btn{background:#32383f;color:var(--text);border:none;padding:8px 10px;border-radius:6px;cursor:pointer}
.btn:hover{filter:brightness(1.05)}
.btn.primary{background:var(--accent);font-weight:600}
.btn.danger{background:var(--danger);font-weight:600}

.actions{display:flex;gap:10px;margin-top:12px}

.list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px
}
.entry{
  display:flex;
  gap:8px;
  align-items:center;
  background:#0b0d11;
  padding:8px;
  border-radius:8px;
  border:1px solid #212528;
}
.entry .label{flex:1;overflow:hidden}
.entry .remove{background:transparent;border:none;color:var(--muted);cursor:pointer;padding:6px;border-radius:6px}
.entry .remove:hover{color:var(--danger)}

.pre{background:#0b0d11;padding:12px;border-radius:10px;overflow:auto}
#jsonPreview{white-space:pre;overflow:auto;padding:12px;background:#071019;border-radius:8px;border:1px solid #1f262b;color:#cfe9ff;font-size:.9rem}

.errors{margin-top:10px;color:var(--danger);font-size:.95rem}



.modifiers{margin-top:12px}
.modifiers input{max-width:180px}
.help ul{padding-left:1rem}
.help li{margin-bottom:.35rem}

.link{color:var(--success);font-weight:600}