.lcdi-tabs__list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.lcdi-tab {
  appearance: none;
  display: inline-block;
  background: var(--surface-raised);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: var(--weight-body);
  line-height: var(--lh-body);
  padding: var(--space-2) 1.25rem;
  border: 1px solid var(--border-soft);
  border-bottom: 4px solid var(--border-soft);
  border-radius: var(--radius-m) var(--radius-m) 0 0;
  cursor: pointer;
  transition: color var(--t-quick) var(--ease-brand), border-color var(--t-quick) var(--ease-brand), background-color var(--t-quick) var(--ease-brand);
}
.lcdi-tab:hover { background: var(--veil-accent); color: var(--link); border-color: var(--border-accent); }
.lcdi-tab:focus-visible { box-shadow: var(--focus-ring); }

.lcdi-tab[aria-selected="true"],
.lcdi-tab.is-active {
  color: var(--accent-ink);
  border-color: var(--accent);
  font-weight: var(--weight-strong);
}

.lcdi-tabs__panel {
  background: var(--surface-page);
  padding: var(--space-5) 0;
  border-top: 0;
}

@media (max-width: 767px) {
  .lcdi-tabs__list { flex-direction: column; align-items: stretch; }
  .lcdi-tab {
    border-radius: var(--radius-m);
    border-bottom-width: 1px;
    border-left-width: 4px;
    text-align: left;
  }
}

.lcdi-tabs--pastille .lcdi-tabs__list {
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}

.lcdi-tabs--pastille .lcdi-tab {
  border: 1px solid var(--accent);
  border-radius: var(--radius-m);
  padding: var(--space-3) var(--space-5);
}

.lcdi-tabs--pastille .lcdi-tab[aria-selected="true"],
.lcdi-tabs--pastille .lcdi-tab.is-active {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--text-on-night);
}

.lcdi-tabs--pastille .lcdi-tabs__panel {
  background: var(--surface-raised);
  border: 5px solid var(--accent);
  border-radius: var(--radius-l);
  padding: var(--space-6);
}

@media (max-width: 767px) {
  .lcdi-tabs--pastille .lcdi-tabs__list { flex-direction: row; gap: var(--space-2); }
  .lcdi-tabs--pastille .lcdi-tab {
    border-width: 1px;
    border-radius: var(--radius-m);
    text-align: center;
    padding: var(--space-2) var(--space-3);
  }
  .lcdi-tabs--pastille .lcdi-tabs__panel { padding: var(--space-4); border-width: 3px; }
}