:root {
  --bg: #1b1b1f;
  --bg-elev: #25252c;
  --fg: #e8e8ee;
  --muted: #999;
  --accent: #7a5af8;
  --accent-fg: #fff;
  --error: #e25a5a;
  --border: #3a3a45;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: system-ui, sans-serif;
  background: var(--bg); color: var(--fg);
}
header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--border);
}
header h1 { margin: 0; font-size: 1.2rem; }
.header-actions { display: flex; gap: 0.5rem; align-items: center; }
.muted { color: var(--muted); font-size: 0.85rem; }
main { padding: 1.25rem; max-width: 960px; margin: 0 auto; }
footer { padding: 1rem; text-align: center; color: var(--muted); }

button {
  background: var(--accent); color: var(--accent-fg);
  border: 0; border-radius: 4px; padding: 0.4rem 0.9rem;
  cursor: pointer; font-size: 0.95rem;
}
button:hover { filter: brightness(1.1); }
button[data-action="back"] { background: var(--bg-elev); color: var(--fg); }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.tile {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 6px;
  padding: 1rem; cursor: pointer; transition: border-color 0.15s;
}
.tile:hover { border-color: var(--accent); }
.tile h3 { margin: 0 0 0.5rem 0; }
.tile p { margin: 0; color: var(--muted); font-size: 0.9rem; }

.recipe-step, .editor-section {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 6px;
  padding: 1.25rem; margin-top: 1rem;
}
.progress { color: var(--muted); margin-bottom: 0.75rem; }
.field { display: grid; grid-template-columns: 200px 1fr; gap: 0.75rem; margin: 0.5rem 0; align-items: center; }
.field label { color: var(--muted); }
.field input, .field textarea, .field select {
  background: var(--bg); color: var(--fg); border: 1px solid var(--border);
  border-radius: 4px; padding: 0.4rem 0.6rem; font: inherit; width: 100%;
}
.field[aria-invalid="true"] input,
.field[aria-invalid="true"] textarea,
.field[aria-invalid="true"] select {
  border-color: var(--error);
}
.field-error { grid-column: 2 / -1; color: var(--error); font-size: 0.85rem; }

.chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.chip { background: var(--bg); border: 1px solid var(--border); padding: 0.2rem 0.5rem; border-radius: 12px; }
.chip-x { background: transparent; color: var(--muted); border: 0; padding: 0 0.2rem; cursor: pointer; }

.dict { border-collapse: collapse; width: 100%; }
.dict td { padding: 0.2rem 0.4rem; border-bottom: 1px solid var(--border); }

.tabs { display: flex; gap: 0.25rem; margin-bottom: 0.75rem; border-bottom: 1px solid var(--border); }
.tab { background: transparent; color: var(--fg); border: 0; padding: 0.5rem 0.75rem; cursor: pointer; }
.tab.active { color: var(--accent); border-bottom: 2px solid var(--accent); }

.nav { display: flex; gap: 0.5rem; margin-top: 1rem; }
.json-preview {
  background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
  padding: 0.75rem; max-height: 400px; overflow: auto; font-size: 0.85rem;
}

.validation-panel { margin-top: 1rem; padding: 0.75rem; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; }
.val-error { color: var(--error); margin: 0.25rem 0; }
.val-warning { color: #d49a3a; margin: 0.25rem 0; }

.catalog-picker { display: flex; flex-direction: column; gap: 0.4rem; }
.catalog-picker-selected {
  min-height: 1.6rem; padding: 0.3rem 0.4rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
  display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center;
}
.catalog-picker-search { width: 100%; }
.catalog-picker-list {
  max-height: 240px; overflow-y: auto;
  display: flex; flex-wrap: wrap; gap: 0.25rem;
  padding: 0.4rem; background: var(--bg);
  border: 1px solid var(--border); border-radius: 4px;
}
.catalog-picker-item {
  background: var(--bg-elev); color: var(--fg);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 0.2rem 0.5rem; font-size: 0.85rem; cursor: pointer;
}
.catalog-picker-item:hover { border-color: var(--accent); }
.catalog-picker-item.selected {
  background: var(--accent); color: var(--accent-fg); border-color: var(--accent);
}

.string-suggestions { grid-column: 2 / -1; margin-top: 0.25rem; }
.string-suggestions .muted { display: block; font-size: 0.8rem; margin-bottom: 0.3rem; }
.suggestion-row {
  display: flex; flex-wrap: wrap; gap: 0.25rem;
  max-height: 120px; overflow-y: auto;
  padding: 0.3rem; background: var(--bg);
  border: 1px solid var(--border); border-radius: 4px;
}
.suggestion-chip {
  background: var(--bg-elev); color: var(--fg);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 0.15rem 0.45rem; font-size: 0.8rem; cursor: pointer;
}
.suggestion-chip:hover { border-color: var(--accent); }

.catalog-picker-info {
  padding: 0.5rem 0.6rem; min-height: 1.8rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
  font-size: 0.88rem; line-height: 1.4;
}
.catalog-picker-info strong { color: var(--accent); }

.enum-option-description {
  grid-column: 2 / -1; margin-top: 0.3rem;
  padding: 0.4rem 0.5rem; background: var(--bg);
  border: 1px solid var(--border); border-radius: 4px;
  font-size: 0.85rem; color: var(--fg); line-height: 1.4;
}
.enum-option-description.muted-empty { color: var(--muted); }

/* ---- plan 2: landing groups, pickers, nested editors ---- */

.modname-row { margin-bottom: 1rem; }
.modname-row input {
  background: var(--bg-elev); color: var(--fg); border: 1px solid var(--border);
  border-radius: 4px; padding: 0.35rem 0.6rem; font: inherit; margin-left: 0.4rem;
}

.banner {
  background: #3d3520; border: 1px solid #6b5d2e; color: #e8d48b;
  border-radius: 6px; padding: 0.6rem 0.9rem; margin-bottom: 1rem; font-size: 0.9rem;
}

.type-group {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 6px;
  padding: 0.9rem 1.1rem; margin-bottom: 0.9rem;
}
.type-group h2 { margin: 0 0 0.15rem 0; font-size: 1.05rem; }
.type-group p { margin: 0 0 0.6rem 0; }
.type-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.recipe-btn { font-size: 0.85rem; }
.edit-btn {
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); font-size: 0.85rem;
}

.picker-list { display: flex; flex-direction: column; gap: 0.3rem; max-height: 60vh; overflow-y: auto; }
.picker-item {
  background: var(--bg-elev); color: var(--fg); text-align: left;
  border: 1px solid var(--border); border-radius: 4px; padding: 0.5rem 0.75rem;
}
.picker-item:hover { border-color: var(--accent); }

.object-fields {
  border-left: 2px solid var(--border); padding-left: 0.75rem;
  display: flex; flex-direction: column;
}
.object-item {
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  padding: 0.6rem 0.8rem; margin-bottom: 0.5rem;
}
.object-item-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 0.4rem;
}
.add-key-row { display: flex; gap: 0.4rem; margin-top: 0.4rem; }
.add-key-row input {
  background: var(--bg); color: var(--fg); border: 1px solid var(--border);
  border-radius: 4px; padding: 0.3rem 0.5rem; font: inherit;
}
.dict-editor .suggestion-row { margin-top: 0.4rem; }

/* ---- review summary ---- */
.summary-root { margin-bottom: 0.75rem; }
dl.summary {
  display: grid; grid-template-columns: minmax(140px, max-content) 1fr;
  gap: 0.3rem 1rem; margin: 0;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  padding: 0.75rem 0.9rem;
}
dl.summary dt { color: var(--muted); text-transform: capitalize; }
dl.summary dd { margin: 0; }
dl.summary.summary-nested { border: 0; padding: 0.1rem 0 0.1rem 0.4rem; border-left: 2px solid var(--border); border-radius: 0; }
.summary-chips { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.summary-item {
  border: 1px solid var(--border); border-radius: 4px;
  padding: 0.4rem 0.6rem; margin-bottom: 0.35rem;
}
.summary-item-head { color: var(--accent); font-size: 0.8rem; margin-bottom: 0.2rem; }
details.raw-json { margin: 0.5rem 0 0.75rem 0; }
details.raw-json summary { color: var(--muted); cursor: pointer; font-size: 0.85rem; }

/* ---- WM importer ---- */
.chip-warn { background: #4a3a1a; border-color: #8a6d2e; color: #e8d48b; cursor: pointer; }