#commandCreator {
  padding: 24px;
}

#commandCreator .command-creator {
  width: min(520px, 100%);
  overflow: hidden;
  border: 1px solid #343c4b;
  border-radius: 18px;
  background: linear-gradient(180deg, #171b24 0%, #11151d 100%);
  box-shadow: 0 28px 90px #000c, 0 0 0 1px #7c5cff10;
  animation: command-creator-in .16s ease-out;
}

#commandCreator .palette-head {
  padding: 22px 24px 19px;
  border-bottom: 1px solid #2a303c;
  background: linear-gradient(135deg, #1a1e29, #151821);
}

#commandCreator .palette-head h2 {
  margin-top: 6px;
  font-size: 19px;
}

#commandCreator .palette-head button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #8993a5;
  font-size: 22px;
}

#commandCreator .palette-head button:hover {
  border-color: #3a4251;
  background: #202530;
  color: #fff;
}

#commandCreator .command-creator-body {
  display: grid;
  gap: 22px;
  padding: 24px;
}

#commandCreator .command-creator-body > label {
  display: grid;
  gap: 8px;
  color: #dce1eb;
  font-size: 12px;
  font-weight: 700;
}

#commandCreator .command-creator-body small {
  color: #778296;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.45;
}

#commandCreator .command-name-field {
  display: flex;
  min-height: 46px;
  align-items: center;
  overflow: hidden;
  border: 1px solid #343c4b;
  border-radius: 10px;
  background: #0d1118;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

#commandCreator .command-name-field:focus-within,
#commandCreator textarea:focus {
  border-color: #8068ff;
  background: #10141d;
  box-shadow: 0 0 0 3px #7c5cff22;
}

#commandCreator .command-name-field > span {
  align-self: stretch;
  display: grid;
  place-items: center;
  width: 43px;
  border-right: 1px solid #2b3240;
  background: #171b26;
  color: #a798ff;
  font-size: 18px;
  font-weight: 800;
}

#commandCreator input,
#commandCreator textarea {
  appearance: none;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f3f5f9;
  caret-color: #9c89ff;
  font: 500 13px/1.45 Inter, ui-sans-serif, system-ui, sans-serif;
}

#commandCreator input {
  min-width: 0;
  padding: 12px 14px;
}

#commandCreator textarea {
  min-height: 104px;
  padding: 13px 14px;
  border: 1px solid #343c4b;
  border-radius: 10px;
  background: #0d1118;
  resize: vertical;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

#commandCreator input::placeholder,
#commandCreator textarea::placeholder {
  color: #555f70;
}

#commandCreator .command-creator-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid #292f3b;
  background: #0e1219;
}

#commandCreator .command-creator-actions button {
  min-height: 39px;
  padding: 9px 16px;
}

#commandCreator .command-creator-actions .primary {
  box-shadow: 0 7px 22px #7c5cff35;
}

@keyframes command-creator-in {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 560px) {
  #commandCreator { padding: 12px; }
  #commandCreator .command-creator-body { padding: 20px; }
  #commandCreator .command-creator-actions { padding: 14px 20px; }
}

.app.inspector-closed{grid-template-columns:64px 260px minmax(0,1fr) 0}.app.inspector-closed .inspector{display:none}#closeInspector{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:9px;transition:color .15s,background .15s}#closeInspector:hover{background:#222733;color:#fff}@media(max-width:1050px){.app.inspector-closed{grid-template-columns:54px 220px minmax(0,1fr)}}