.character-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.character-actions form {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
}
.export-button {
  appearance: none;
  border: 1px solid #3a4652;
  background: #171d24;
  color: #d7dbe0;
  cursor: pointer;
  font: inherit;
  line-height: 1.2;
  padding: 4px 7px;
}
.export-button:hover {
  background: #222c37;
}
.export-button:focus-visible {
  outline: 2px solid #7cc4ff;
  outline-offset: 1px;
}
.export-button:disabled {
  cursor: wait;
  opacity: 0.55;
}
.export-button.primary {
  background: #24516a;
  border-color: #3d7898;
  color: #fff;
}
.export-button.primary:hover {
  background: #2d6380;
}
.export-button.secondary {
  background: #171d24;
}
.export-button.disconnect {
  border-color: #70444a;
  color: #f2c3c5;
}
.export-button.disconnect:hover {
  background: #3c2429;
}
.export-feedback {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #aeb8c2;
  min-height: 20px;
}
.export-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid #56616d;
  border-top-color: #7cc4ff;
  border-radius: 50%;
  animation: character-export-spin 0.7s linear infinite;
}
@keyframes character-export-spin {
  to {
    transform: rotate(1turn);
  }
}
@media (prefers-reduced-motion: reduce) {
  .export-spinner {
    animation: none;
  }
}
@media (max-width: 34rem) {
  .character-actions,
  .character-actions form {
    align-items: stretch;
  }
  .export-button {
    flex: 1 0 auto;
  }
}
.character-actions {
  align-items: flex-start;
}
.character-actions form[data-character-export] {
  display: block;
  min-width: 0;
}
.export-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}
.export-sections {
  margin: 0;
}
.export-sections > summary {
  cursor: pointer;
  color: #aeb8c2;
}
.export-sections > p {
  color: #aeb8c2;
  margin: 4px 0;
}
.export-section-choice {
  position: static;
  clip: auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 2px 8px 2px 0;
  white-space: nowrap;
}
.export-section-choice input {
  width: auto;
}
.combined-export,
.export-preview {
  margin-top: 8px;
}
.export-preview table {
  margin-bottom: 8px;
}
@media (max-width: 34rem) {
  .export-controls {
    align-items: stretch;
  }
  .export-controls .export-button {
    flex: 1 0 auto;
  }
  .export-section-choice {
    margin-right: 5px;
  }
}