:root {
  --collapse-bg: #ffffff;
  --collapse-text: #333333;
  --collapse-text-muted: #666666;
  --collapse-border: #f0f0f0;
  --collapse-border-strong: #d9d9d9;
  --collapse-bg-hover: #fafafa;
  --collapse-focus: rgba(24, 144, 255, 0.2);
  --collapse-primary: var(--color-primary, #ff4d00);
}

.custom-collapse {
  width: 100%;
  border: 1px solid var(--collapse-border-strong);
  border-radius: 8px;
  background: var(--collapse-bg);
  overflow: hidden;
}

.custom-collapse.collapse-borderless {
  border: none;
}

.custom-collapse.collapse-borderless .collapse-panel + .collapse-panel {
  border-top: none;
}

.custom-collapse.collapse-ghost {
  background: transparent;
}

.collapse-panel + .collapse-panel {
  border-top: 1px solid var(--collapse-border);
}

.custom-collapse .collapse-panel:not(:last-child) {
  margin-bottom: var(--collapse-panel-gap, 0px);
}

.custom-collapse.collapse-has-panel-gap .collapse-panel + .collapse-panel {
  border-top: 1px solid var(--collapse-border-strong);
}

.custom-collapse.collapse-has-panel-gap {
  border: none;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}

.custom-collapse.collapse-has-panel-gap .collapse-panel {
  border: 1px solid var(--collapse-border-strong);
  border-radius: 8px;
  overflow: hidden;
  background: var(--collapse-bg);
}

.custom-collapse.collapse-borderless.collapse-has-panel-gap .collapse-panel {
  border: none;
}

.custom-collapse.collapse-has-panel-gap.collapse-ghost .collapse-panel {
  background: transparent;
}

.collapse-header {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 14px;
  cursor: pointer;
  user-select: none;
  color: var(--collapse-text);
  outline: none;
}

.collapse-header:focus-visible {
  box-shadow: inset 0 0 0 2px var(--collapse-focus);
}

.collapse-panel:not(.disabled) .collapse-header:hover {
  background: var(--collapse-bg-hover);
}

.collapse-expand-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--collapse-text-muted);
  flex: 0 0 16px;
}

.collapse-expand-icon svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

.collapse-panel.active .collapse-expand-icon svg {
  transform: rotate(90deg);
}

.collapse-expand-icon.hidden {
  visibility: hidden;
}

.collapse-title {
  flex: 1;
  min-width: 0;
}

.collapse-extra {
  color: var(--collapse-text-muted);
  margin-left: 8px;
}

.collapse-body-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.22s ease;
}

.collapse-body {
  padding: 12px 14px 16px;
  color: var(--collapse-text);
  line-height: 1.6;
}

.collapse-panel.disabled .collapse-header {
  cursor: not-allowed;
  color: #bfbfbf;
  background: #fafafa;
}

/* 箭头在右侧 */
.custom-collapse.collapse-icon-end .collapse-expand-icon {
  order: 3;
  margin-left: 8px;
}

.custom-collapse.collapse-icon-end .collapse-extra {
  order: 2;
  margin-left: 0;
}