/* =================== hc-tabs.css =================== */
.hc-tabs__nav {
display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--hc-line); scrollbar-width: none
}
.hc-tabs__nav::-webkit-scrollbar {
display: none
}
.hc-tabs__btn {
position: relative; padding: var(--hc-sp-3) var(--hc-sp-4); font-family: inherit; font-size: var(--hc-fs-md); font-weight: 500; color: var(--hc-ink-mid); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--hc-dur-fast), border-color var(--hc-dur-fast)
}
.hc-tabs__btn:hover {
color: var(--hc-ink)
}
.hc-tabs__btn.is-active {
color: var(--hc-ink); border-bottom-color: var(--hc-ink)
}
.hc-tabs__count {
margin-left: var(--hc-sp-1); padding: 1px 6px; background: var(--hc-paper-3); border-radius: var(--hc-r-pill); font-size: var(--hc-fs-xxs); color: var(--hc-ink-mid)
}

.hc-tabs__panel {
padding-top: var(--hc-sp-5)
}
.hc-tabs--premium {
margin-top: var(--hc-sp-7)
}
.hc-tabs__desc {
line-height: var(--hc-lh-base); color: var(--hc-ink-2)
}
.hc-tabs__group-title {
font-size: var(--hc-fs-lg); margin: var(--hc-sp-4) 0 var(--hc-sp-2)
}
.hc-tabs__spec-table {
width: 100%; border-collapse: collapse
}
.hc-tabs__spec-table tr {
border-bottom: 1px solid var(--hc-line)
}
.hc-tabs__spec-name {
width: 40%; padding: 10px 8px 10px 0; color: var(--hc-ink-mid); font-size: var(--hc-fs-sm); vertical-align: top
}
.hc-tabs__spec-value {
padding: 10px 0; font-size: var(--hc-fs-sm)
}
.hc-tabs__docs-note {
margin-bottom: var(--hc-sp-3)
}
.hc-tabs__delivery-grid {
display: grid; gap: var(--hc-sp-2)
}
.hc-tabs__loader {
margin: var(--hc-sp-5) auto
}
.hc-tabs__spec-table--structured {
margin-bottom: var(--hc-sp-4, 20px); border-left: 2px solid rgba(139, 115, 85, 0.25); padding-left: 14px
}
.hc-tabs__spec-table--structured td {
font-size: 13.5px; padding: 5px 8px
}
.hc-tabs__spec-table--structured code {
font-family: var(--hc-mono, "JetBrains Mono", monospace); font-size: 12px; background: rgba(26, 23, 20, 0.05); padding: 1px 6px; border-radius: 4px
}

.hc-tabs {
display: flex;
  border-bottom: 1px solid var(--c-border);
  gap: var(--sp-8);
  overflow-x: auto;
}
.hc-tabs__tab {
position: relative;
  padding: var(--sp-12) var(--sp-20);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: var(--fs-14);
  font-weight: var(--fw-500);
  color: var(--c-text-secondary);
  transition: color var(--tr-base);
  white-space: nowrap;
  flex-shrink: 0;
}
.hc-tabs__tab:hover {
color: var(--c-primary);
}
.hc-tabs__tab.is-active {
color: var(--c-primary);
}
.hc-tabs__tab.is-active::after {
content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--c-primary);
  animation: hcTabSlide var(--tr-base);
}
.hc-tabs__panel {
display: none;
  animation: hcFadeIn var(--tr-base);
}
.hc-tabs__panel.is-active {
display: block;
}
.hc-tabs.hc-tabs--premium {
border-bottom: 1px solid rgba(141, 109, 71, 0.16);
}
.hc-tabs__nav {
display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: stretch;
}
.hc-tabs__btn {
position: relative;
  padding: 12px 18px;
  font: 500 14px/1 var(--hc-sans, "Outfit", sans-serif);
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.6));
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.hc-tabs__btn:hover {
color: var(--hc-ink, #1a1714);
}
.hc-tabs__btn.is-active {
color: var(--hc-ink, #1a1714);
  border-bottom-color: var(--hc-accent, #8b7355);
  font-weight: 500;
}

.hc-tabs__btn.is-active .hc-tabs__count {
background: var(--hc-ink); color: var(--hc-paper, #ffffff)
}

.hc-tabs__btn .hc-tabs__count {
display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  margin-left: 6px;
  padding: 0 6px;
  font-size: 11px;
  border-radius: 9px;
  background: rgba(212, 184, 150, 0.22);
  color: var(--hc-accent-dark, #5d4d3a);
}