/* Deepnet Expand Section - default styles */
.des-container {
  --des-radius: 12px;
  --des-border: 1px solid #e5e7eb;
  --des-bg: #fff;
  --des-title-bg: #f9fafb;
  --des-title-color: #111827;
  --des-text: #111827;
  --des-accent: #2563eb;
  --des-shadow: 0 1px 2px rgba(0,0,0,0.05);
  border: var(--des-border);
  border-radius: var(--des-radius);
  background: var(--des-bg);
  color: var(--des-text);
  box-shadow: var(--des-shadow);
  margin: 12px 0;
  overflow: hidden;
}

.des-header {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 12px 14px;
  background: var(--des-title-bg);
  color: var(--des-title-color);
  user-select: none;
  outline: none;
}

.des-header:focus {
  box-shadow: 0 0 0 2px rgba(37,99,235,0.35) inset;
}

.des-toggle {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--des-accent);
  flex: 0 0 auto;
}

.des-title {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
}

.des-icon { width: var(--des-icon-size, 20px); height: var(--des-icon-size, 20px);
  display: inline-block;
}

.des-content {
  position: relative;
  max-height: 0;
  overflow: hidden;
  transition: max-height 260ms ease, padding 200ms ease;
  padding: 0 14px;
}

.des-content .des-content-inner {
  padding: 12px 0 18px 0;
}

.des-close {
  position: absolute;
  right: 8px;
  bottom: 8px;
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
  border-radius: 8px;
}

.des-close:hover {
  background: rgba(0,0,0,0.05);
}

.des-container.is-open .des-content {
  max-height: 2000px;
  padding-top: 0;
}

.des-container:not(.is-open) .des-icon-minus { display: none; }
.des-container.is-open .des-icon-plus { display: none; }

/* Variant: borderless */
.des-variant-borderless {
  border: none;
  box-shadow: none;
}
.des-variant-borderless .des-header {
  background: transparent;
}


/* Variant: flush (no outer margin / inner paddings) */
.des-variant-flush { margin: 0 !important; }
.des-variant-flush .des-header { padding: 0 !important; }
.des-variant-flush .des-content { padding: 0 !important; }
.des-variant-flush .des-content .des-content-inner { padding: 0 !important; }


/* Icon variants for images & characters */
.des-icon-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}
.des-icon-char {
  display: inline-block;
  line-height: 1;
  font-size: calc(var(--des-icon-size, 20px) * 0.9);
  vertical-align: middle;
}

/* Support per-instance icon size */
.des-container[data-icon-size] .des-icon,
.des-container[data-icon-size] .des-icon-img,
.des-container[data-icon-size] .des-icon-char {
  width: attr(data-icon-size px, auto);
  height: attr(data-icon-size px, auto);
  font-size: attr(data-icon-size px, auto);
}