.html-editor {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.html-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--border-color, #d3dad9);
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--bg-secondary, #f7f8f8);
}

.html-editor-toolbar__group {
  display: flex;
  gap: 2px;

  & + .html-editor-toolbar__group:not(.html-editor-toolbar__group--end) {
    padding-left: 8px;
    border-left: 1px solid var(--border-color, #d3dad9);
  }
}

.html-editor-toolbar__group--end {
  margin-left: auto;
}

.html-editor-toolbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary, #1e3c38);
  font-size: var(--font-size-sm, 0.8125rem);
  cursor: pointer;

  .pi { font-size: var(--font-size-sm, 0.8125rem); }

  &:hover { background: var(--bg-tertiary, #e8ecea); }
  &:focus-visible { outline: 2px solid var(--primary-color, #2f8f5b); outline-offset: 1px; }
}

.html-editor-toolbar__btn--bold { font-weight: var(--font-weight-bold, 700); }
.html-editor-toolbar__btn--italic { font-style: italic; font-family: serif; }
.html-editor-toolbar__btn--underline { text-decoration: underline; }
.html-editor-toolbar__btn--wide { padding: 0 10px; font-size: var(--font-size-sm, 0.8125rem); color: var(--text-secondary, #6b7280); }

.html-editor-surface {
  min-height: 160px;
  border: 1px solid var(--border, #ccc);
  border-radius: var(--radius-xs, 4px);
  padding: 0.5rem;
  overflow-y: auto;
}

.html-editor-code-error {
  margin: 0;
  color: var(--error-color, #991b1b);
  font-size: var(--font-size-sm, 0.8125rem);
}
