* { box-sizing: border-box; margin: 0; }
:root {
  --bg: #1a1b26; --panel: #24263a; --line: #3b3d5c;
  --text: #e6e6f0; --dim: #9a9ec2; --accent: #7aa2f7; --chroma: #00c853;
}
body {
  background: var(--bg); color: var(--text);
  font-family: "Galmuri11", "DungGeunMo", ui-monospace, "Apple SD Gothic Neo", monospace;
  padding: 24px; max-width: 1200px; margin: 0 auto;
}
header h1 { font-size: 22px; letter-spacing: 1px; }
.subtitle { color: var(--dim); font-size: 13px; margin-top: 6px; }
.layout { display: grid; grid-template-columns: 380px 1fr; gap: 20px; margin-top: 20px; }
@media (max-width: 860px) { .layout { grid-template-columns: 1fr; } }
.panel {
  background: var(--panel); border: 2px solid var(--line);
  border-radius: 8px; padding: 16px;
}
.theme-row {
  display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--dim);
  padding-bottom: 12px; border-bottom: 2px solid var(--line); margin-bottom: 6px;
}
.theme-row select { flex: 1; }
.group-title {
  margin: 14px 0 8px; font-size: 13px; color: var(--accent);
  border-bottom: 1px solid var(--line); padding-bottom: 4px;
}
.field { display: grid; grid-template-columns: 96px 1fr; gap: 8px; align-items: center; margin: 6px 0; }
.field > label { font-size: 13px; color: var(--dim); }
select, input[type="text"] {
  width: 100%; background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; font: inherit; font-size: 13px;
}
.custom-input { grid-column: 2; margin-top: 4px; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.checks label { font-size: 12px; display: inline-flex; gap: 4px; align-items: center; }
button {
  background: var(--accent); color: #10101a; border: none; border-radius: 4px;
  padding: 8px 12px; font: inherit; font-size: 13px; cursor: pointer;
}
button:hover { filter: brightness(1.1); }
button.wide { width: 100%; margin-top: 14px; }
.engine-row { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--dim); }
.engine-row select { flex: 1; }
#preview {
  background: var(--bg); border: 1px solid var(--line); border-radius: 4px;
  padding: 12px; margin: 12px 0; font-size: 12.5px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word; max-height: 60vh; overflow-y: auto;
}
#preview mark { background: rgba(122, 162, 247, .25); color: #c8d3ff; padding: 1px 2px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
#copy-status { min-height: 18px; font-size: 12px; color: var(--chroma); margin-top: 6px; }
.info {
  margin-top: 10px; padding: 10px; border: 1px dashed var(--line);
  border-radius: 4px; font-size: 12px; color: var(--dim);
}
.set-actions { margin-top: 8px; }
.set-actions select { width: auto; flex: 0 0 auto; }

.tabs { display: flex; gap: 6px; margin-top: 16px; }
.tab-btn {
  background: var(--panel); color: var(--dim); border: 2px solid var(--line);
  border-bottom: none; border-radius: 8px 8px 0 0; padding: 10px 18px;
}
.tab-btn.active { background: var(--accent); color: #10101a; }
.tab-panel > .layout { margin-top: 0; }
textarea {
  width: 100%; background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 4px; padding: 8px; font: inherit; font-size: 12.5px;
  resize: vertical;
}
.hint { font-size: 12px; color: var(--dim); margin-top: 8px; }
#motion-status { min-height: 18px; font-size: 12px; color: var(--chroma); margin-top: 6px; }
.info b { color: var(--text); }