/* Редактор персонажей — отдельная страница, стилистика близка к map-editor. */
body.charEditorBody {
  margin: 0;
  font-family: system-ui, Segoe UI, sans-serif;
  background: #12121a;
  color: #c0c0c8;
  min-height: 100vh;
}
.charEditorRoot {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.topBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.charEditorRoot h1 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #8ab88a;
}
.charEditorRoot .hint {
  font-size: 0.82rem;
  color: #808090;
  margin: 0;
}
.charEditorRoot code {
  color: #a8b8a8;
  font-size: 0.85em;
}
.charEditorSection {
  border: 1px solid #2a2a38;
  border-radius: 6px;
  padding: 0.75rem;
  background: #1a1a24;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.charEditorSection.hidden {
  display: none;
}
.charEditorSection h2 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #a8b890;
}
.charEditorSection h3 {
  margin: 0.5rem 0 0.25rem 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #909090;
}
.pillBtn {
  background: #1f2a1f;
  color: #a8d0a8;
  border: 1px solid #3a4a3a;
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.82rem;
  cursor: pointer;
  font-family: inherit;
}
.pillBtn:hover { background: #2a3a2a; }
.pillBtn.active { background: #3a5a3a; color: #e0f0e0; border-color: #6a8a6a; }

/* ---------- Catalog toolbar ---------- */
.catalogToolbar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

/* ---------- Editor preview ---------- */
.previewRow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}
.previewFrame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  background: #0c0c12;
  border-radius: 6px;
  padding: 0.5rem;
  min-height: 280px;
}
.previewFrame canvas {
  display: block;
  image-rendering: -webkit-optimize-contrast;
}
.previewFrame canvas.dragging { cursor: grabbing; }
.previewFrame canvas.anchorsOn { cursor: grab; }
.previewLabel {
  font-size: 0.75rem;
  color: #707080;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---------- Selector controls ---------- */
.controlsRow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
.selector {
  border: 1px solid #2a2a38;
  border-radius: 6px;
  padding: 0.5rem;
  background: #14141c;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.selector.disabled {
  opacity: 0.4;
  pointer-events: none;
}
.selectorLabel {
  font-size: 0.72rem;
  color: #808090;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.selectorBody {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.arrowBtn {
  background: #1a1a24;
  color: #a8b890;
  border: 1px solid #2a2a38;
  border-radius: 4px;
  padding: 0.3rem 0.6rem;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: inherit;
}
.arrowBtn:hover { background: #242430; }
.selectorValue {
  flex: 1;
  text-align: center;
  font-size: 0.88rem;
  color: #c8c8d0;
  font-weight: 500;
}

/* ---------- Top bar buttons group ---------- */
.topBarButtons {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* ---------- Markup tool ---------- */
.markupControls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}
.markupSelect {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 280px;
}
.markupSelect span {
  font-size: 0.72rem;
  color: #808090;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.markupSelect select {
  background: #14141c;
  color: #c8c8d0;
  border: 1px solid #2a2a38;
  border-radius: 4px;
  padding: 0.35rem 0.5rem;
  font-family: inherit;
  font-size: 0.88rem;
}
.markupToolbar {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.markupCanvasWrap {
  background: #0c0c12;
  border-radius: 6px;
  padding: 0.5rem;
  display: flex;
  justify-content: center;
  overflow: auto;
}
#markupCanvas {
  display: block;
  cursor: crosshair;
  image-rendering: -webkit-optimize-contrast;
  background: #000;
}
.markupOutput {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.markupOutputRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.markupOutputRow label {
  font-size: 0.72rem;
  color: #808090;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
#markupJson {
  background: #0c0c12;
  color: #c8c8d0;
  border: 1px solid #2a2a38;
  border-radius: 4px;
  padding: 0.5rem;
  font-family: ui-monospace, Consolas, Menlo, monospace;
  font-size: 0.78rem;
  resize: vertical;
  width: 100%;
  box-sizing: border-box;
}
.action {
  background: #1a1a24;
  color: #a8b890;
  border: 1px solid #2a2a38;
  border-radius: 4px;
  padding: 0.35rem 0.7rem;
  font-size: 0.82rem;
  cursor: pointer;
  font-family: inherit;
}
.action:hover { background: #242430; }
.action.danger { color: #d0a090; border-color: #4a3a3a; }
.action.danger:hover { background: #2a1a1a; }
.action.primary { color: #e0f0e0; background: #2a3a2a; border-color: #4a6a4a; }
.action.primary:hover { background: #3a5a3a; }

/* ---------- Catalog ---------- */
.catalogGroup {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.assetGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
}
.assetCard {
  border: 1px solid #2a2a38;
  border-radius: 6px;
  padding: 0.5rem;
  background: #14141c;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.assetTitle {
  font-size: 0.85rem;
  font-weight: 600;
  color: #c0c0c8;
}
.assetMeta {
  font-size: 0.72rem;
  color: #707080;
}
.assetFrames {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.25rem;
  margin-top: 0.25rem;
}
.assetFrame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  background: #0c0c12;
  border-radius: 4px;
  padding: 0.35rem 0.2rem;
}
.assetFrame canvas {
  display: block;
  image-rendering: -webkit-optimize-contrast;
}
.assetFrame canvas.anchorEditable { cursor: pointer; }
.assetFrame canvas.anchorActive { cursor: grab; }
.assetFrame canvas.anchorDragging { cursor: grabbing; }
.assetFrameLabel {
  font-size: 0.68rem;
  color: #606070;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}