* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* ---- App layout ---- */
#app {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 8px;
  overflow: hidden;
  gap: 6px;
}

.hidden { display: none !important; }

/* ---- Toolbar ---- */
#toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: wrap;
  padding: 4px 0;
}

#toolbar label {
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

#toolbar input[type="number"] {
  width: 64px;
  font-size: 11px;
}

#toolbar input[type="text"] {
  width: 80px;
  font-size: 11px;
}

#toolbar select {
  font-size: 11px;
}

#toolbar button {
  padding: 3px 12px;
  font-size: 11px;
  white-space: nowrap;
}

#toolbar button.btn-primary {
  font-weight: bold;
  background: var(--sz-color-highlight);
  color: var(--sz-color-highlight-text);
}

/* ---- Main split ---- */
#main {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 6px;
}

/* ---- Field panel (left) ---- */
#field-panel {
  width: 320px;
  min-width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border: 2px inset;
  border-color: var(--sz-color-button-shadow) var(--sz-color-button-highlight) var(--sz-color-button-highlight) var(--sz-color-button-shadow);
  background: var(--sz-color-window);
}

#field-panel-header {
  padding: 3px 6px;
  font-size: 11px;
  font-weight: bold;
  background: var(--sz-color-button-face);
  border-bottom: 1px solid var(--sz-color-button-shadow);
  flex-shrink: 0;
}

#field-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.field-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px;
  border-bottom: 1px solid var(--sz-color-button-face);
}

.field-row:hover {
  background: var(--sz-color-button-face);
}

.field-move-btns {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-shrink: 0;
}

.field-move-btns button {
  padding: 0;
  width: 14px;
  height: 11px;
  border-width: 1px;
  font-size: 7px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.field-name {
  width: 80px;
  min-width: 60px;
  padding: 1px 3px;
  border-width: 1px;
  border-style: solid;
  font-size: 11px;
}

.field-type {
  flex: 1;
  min-width: 100px;
  padding: 1px 3px;
  border-width: 1px;
  border-style: solid;
  font-size: 11px;
}

.field-options {
  display: flex;
  gap: 2px;
  align-items: center;
  flex-shrink: 0;
}

.field-options input[type="number"] {
  width: 44px;
  padding: 1px 2px;
  border-width: 1px;
  border-style: solid;
  font-size: 10px;
}

.field-options label {
  font-size: 10px;
  color: var(--sz-color-gray-text);
}

.field-delete {
  width: 18px;
  height: 18px;
  padding: 0;
  border-width: 1px;
  font-size: 11px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#field-panel-footer {
  padding: 4px;
  background: var(--sz-color-button-face);
  border-top: 1px solid var(--sz-color-button-shadow);
  flex-shrink: 0;
}

#btn-add-field {
  width: 100%;
  padding: 3px 10px;
  font-size: 11px;
}

/* ---- Output panel (right) ---- */
#output-panel {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  border: 2px inset;
  border-color: var(--sz-color-button-shadow) var(--sz-color-button-highlight) var(--sz-color-button-highlight) var(--sz-color-button-shadow);
  background: var(--sz-color-window);
}

#output-header {
  padding: 3px 6px;
  font-size: 11px;
  font-weight: bold;
  background: var(--sz-color-button-face);
  border-bottom: 1px solid var(--sz-color-button-shadow);
  flex-shrink: 0;
}

#output-wrap {
  flex: 1;
  overflow: auto;
  min-height: 0;
}

#output-code {
  padding: 6px 8px;
  font-family: 'Lucida Console', Consolas, monospace;
  font-size: 11px;
  color: var(--sz-color-window-text);
  white-space: pre;
  tab-size: 2;
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
  min-height: 100%;
}

#status-bar {
  padding: 2px 6px;
  font-size: 10px;
  color: var(--sz-color-gray-text);
  background: var(--sz-color-button-face);
  border-top: 1px solid var(--sz-color-button-shadow);
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Scrollbar styling ---- */
#field-list::-webkit-scrollbar,
#output-wrap::-webkit-scrollbar {
  width: 14px;
}

#field-list::-webkit-scrollbar-track,
#output-wrap::-webkit-scrollbar-track {
  background: var(--sz-color-scrollbar);
}

#field-list::-webkit-scrollbar-thumb,
#output-wrap::-webkit-scrollbar-thumb {
  background: var(--sz-color-button-face);
  border: 1px solid var(--sz-color-button-shadow);
}