.slotedit { display: grid; gap: 16px; }

.slotedit-group {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: 8px 16px;
}

.slotedit-name {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

.slotedit-hint {
  grid-column: 2;
  grid-row: 2;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 60ch;
}

.slotedit-row { grid-column: 2; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.slotedit-select {
  flex: 1 1 200px;
  min-width: 0;
  max-width: 320px;
  padding: 9px 34px 9px 12px;
  background-color: var(--well);
  border: 1px solid var(--edge);
  color: var(--ink);
  font-family: var(--body);
  font-size: 14px;
}

.slotedit-preview { display: inline-flex; gap: 3px; flex: none; }
.slotedit-preview i { width: 16px; height: 22px; display: block; border: 1px solid var(--edge); }

.slotedit-colour {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  padding: 5px 10px 5px 8px;
  border: 1px solid var(--edge);
  background: var(--panel);
  white-space: nowrap;
}

.slotedit-colour input[type="color"] { width: 30px; height: 24px; flex: none; }
.slotedit-colour input[type="color"]:disabled { opacity: 0.35; cursor: default; }
.slotedit-colour input[type="checkbox"] { accent-color: var(--teal); width: 15px; height: 15px; }
.slotedit-hex { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--faint); }

.slotedit-checks {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  background: var(--panel-alt);
  margin-top: 4px;
}

.slotedit-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; }
.slotedit-dot { width: 7px; height: 7px; margin-top: 6px; flex: none; border-radius: 50%; }

.slotedit-check.is-ok .slotedit-dot { background: var(--teal); }
.slotedit-check.is-ok { color: var(--muted); }
.slotedit-check.is-note .slotedit-dot { background: var(--brass); }
.slotedit-check.is-note { color: var(--muted); }
.slotedit-check.is-warn .slotedit-dot { background: var(--danger); }
.slotedit-check.is-warn { color: #e0a99f; }

.slotedit-art {
  display: inline-flex; align-items: center; justify-content: center;
  width: 94px; height: 57px; border: 1px solid var(--edge);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--faint);
  overflow: hidden; background: var(--panel-alt);
}
.slotedit-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slotedit-file { font-size: 12px; color: var(--muted); max-width: 220px; }
.slotedit-btn {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 10px; border: 1px solid var(--edge); background: transparent; color: var(--muted); cursor: pointer;
}
.slotedit-btn:hover { border-color: var(--teal); color: var(--teal); }
.slotedit-link { font-size: 12.5px; color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 700px) {
  .slotedit-group { grid-template-columns: minmax(0, 1fr); }
  .slotedit-row, .slotedit-hint { grid-column: 1; }
}