* { box-sizing: border-box; }
body { margin: 0; height: 100vh; overflow: hidden; font-family: "Malgun Gothic", "Segoe UI", sans-serif; background: #f3f4f6; color: #111827; }
.toolbar { height: 52px; display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-bottom: 1px solid #d1d5db; background: #fff; white-space: nowrap; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 16px; color: #0a1930; margin-right: 4px; }
.logo { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; }
.app-title { letter-spacing: -0.5px; }
button { display: inline-flex; align-items: center; justify-content: center; height: 34px; min-width: 34px; border: 1px solid #cbd5e1; background: #fff; border-radius: 6px; padding: 0; color: #4b5563; font: inherit; cursor: pointer; }
button.text-btn { padding: 0 11px; }
button svg { width: 18px; height: 18px; }
button.active { background: #0a1930; color: #fff; border-color: #0a1930; }
button:hover { background: #f3f4f6; color: #111827; border-color: #94a3b8; }
.sep { width: 1px; height: 26px; background: #d1d5db; margin: 0 4px; }
#zoomLabel { min-width: 54px; text-align: center; font-weight: 700; color: #0a1930; }
#status { overflow: hidden; text-overflow: ellipsis; color: #4b5563; }
#workspace { height: calc(100vh - 52px); display: grid; grid-template-columns: minmax(360px, 65%) 8px minmax(340px, 35%); }
.stagePane, .editorPane { min-width: 0; min-height: 0; }
.stagePane { display: flex; flex-direction: column; padding: 10px; }
.hint { height: 24px; color: #4b5563; font-size: 13px; }
#stageWrap { flex: 1; overflow: auto; background: #e5e7eb; border: 1px solid #cbd5e1; position: relative; }
#canvas { display: block; background: #e5e7eb; cursor: crosshair; }
#divider { background: #cbd5e1; cursor: col-resize; }
#divider:hover { background: #0a1930; }
.editorPane { padding: 10px 12px; background: #fff; border-left: 1px solid #d1d5db; overflow: auto; }
#selectionLabel { height: 28px; font-weight: 700; color: #0a1930; }
.fieldLabel, .listTitle { display: block; margin: 8px 0 5px; font-weight: 700; }
#textInput { width: 100%; height: 150px; resize: vertical; font-family: "Malgun Gothic", sans-serif; font-size: 24px; line-height: 1.45; padding: 10px; border: 1px solid #cbd5e1; border-radius: 6px; }
.controlGrid { display: grid; grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 8px 10px; margin-top: 10px; }
.controlGrid label { display: grid; gap: 4px; font-size: 13px; color: #374151; }
input, select { height: 32px; border: 1px solid #cbd5e1; border-radius: 5px; padding: 0 7px; font: inherit; }
.colorRow { display: flex; align-items: center; gap: 10px; margin: 10px 0; font-weight: 700; }
.colorRow input { width: 58px; padding: 0; }
#patchList { border: 1px solid #cbd5e1; min-height: 160px; border-radius: 6px; overflow: auto; }
.patchItem { padding: 8px 10px; border-bottom: 1px solid #e5e7eb; cursor: pointer; }
.patchItem.active { background: #ccfbf1; }
.patchItem small { color: #6b7280; display: block; margin-top: 2px; }

/* Make standard number spinners always visible */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity: 1;
}

/* X-axis custom input group */
.x-input-group {
  display: flex;
  align-items: center;
  height: 32px;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  overflow: hidden;
  background: #fff;
}
.x-input-group input {
  flex: 1;
  width: 100%;
  border: none !important;
  text-align: center;
  padding: 0;
  border-radius: 0;
}
/* Hide spinner just for X axis */
.x-input-group input::-webkit-inner-spin-button,
.x-input-group input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.x-input-group button {
  width: 32px;
  height: 100%;
  border: none;
  background: #f3f4f6;
  border-radius: 0;
  padding: 0;
  font-size: 12px;
  color: #4b5563;
}
.x-input-group button:hover {
  background: #e5e7eb;
}