.layer-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.layer-tab {
  flex: 1 1 auto;
  font-size: 0.8rem;
}

.layer-tab.active {
  background: var(--accent);
  color: #1a1508;
  border-color: var(--accent);
}

.palette-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  max-height: 320px;
  overflow-y: auto;
  padding: 2px;
  background: #101216;
  border: 1px solid var(--border);
  border-radius: 4px;
}

.swatch-btn {
  image-rendering: pixelated;
  border: 2px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  flex: 0 0 auto;
  background-color: #000;
  padding: 0;
}

.swatch-btn:hover {
  border-color: var(--muted);
}

.swatch-btn.selected {
  border-color: var(--accent);
}

.swatch-btn.empty-swatch {
  background: repeating-conic-gradient(#2a2d33 0% 25%, #1a1c20 0% 50%) 0 0 / 8px 8px;
}

.swatch-label {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 0.4rem;
}

#levelCanvas.painting {
  cursor: crosshair;
}

.hidden { display: none; }

aside#metaSidebar {
  flex: 1 1 320px;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.field-label {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.6rem;
}

.field-label select,
.field-label input[type="text"],
.field-label input[type="number"],
.field-label input[type="file"] {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  background: #262a32;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.35rem 0.5rem;
  font-size: 0.85rem;
}

.time-inputs {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.25rem;
}

.time-inputs input {
  width: 4rem;
  background: #262a32;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.3rem 0.4rem;
}

.door-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.door-btn {
  flex: 0 0 auto;
}

.door-btn.armed {
  background: var(--accent);
  color: #1a1508;
  border-color: var(--accent);
}

#loadSave button, #metaFields button {
  display: block;
  width: 100%;
  margin: 0.4rem 0;
}

#loadSave hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0.8rem 0;
}

.hint-line-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
}

.hint-line-row input {
  flex: 1 1 auto;
  background: #262a32;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  font-family: monospace;
  text-transform: uppercase;
}

.hint-line-row input.overflow {
  border-color: #c0504d;
}

.hint-line-count {
  flex: 0 0 auto;
  font-size: 0.7rem;
  color: var(--muted);
  width: 2.2rem;
  text-align: right;
}

.lang-tab { flex: 1 1 auto; font-size: 0.8rem; }
.lang-tab.active { background: var(--accent); color: #1a1508; border-color: var(--accent); }

.playtest-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.playtest-modal.hidden { display: none; }

.playtest-modal-inner {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: min(1000px, 92vw);
  height: min(720px, 92vh);
}

.playtest-modal-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.playtest-modal-header .muted.small { flex: 1 1 auto; }

#recordBtn.recording {
  background: #c0504d;
  border-color: #c0504d;
  color: #fff;
}

#playtestFrame {
  flex: 1 1 auto;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #000;
}