:root{
  /* твои токены оставляем (они нужны для градиентов), но оформление делаем светлым */
  --teal:  #58e1ff;
  --lilac: #a98bff;

  /* светлые служебные токены для TOC */
  --tocText: rgba(15,23,32,.82);
  --tocTextStrong: rgba(15,23,32,.92);
  --tocBorder: rgba(15,23,32,.10);
  --tocBorderHover: rgba(15,23,32,.16);
  --tocGlassA: rgba(255,255,255,.78);
  --tocGlassB: rgba(255,255,255,.52);
  --tocShadow: 0 18px 60px rgba(15,23,32,.10);
  --tocShadowHover: 0 26px 80px rgba(15,23,32,.14);

  --tocScrollTrack: rgba(15,23,32,.06);

  --maxWidthSwiper: 1120px;
}

/* контейнер toc — без фона секции */
#toc .swiper{
  padding: 20px !important;
  padding-top: 0 !important;
}

.toc{
  background-color: transparent; /* важно: никакой заливки секции */
}

.toc .swiper-slide{
  width: fit-content;
}

.toc h2{
  white-space: nowrap;
  text-align: center;
}

/* ===== LINK / PILL ===== */
.toc a{
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
  text-decoration: none;
  font-weight: 500;

  font-size: 18px;
  line-height: 1.5;
  white-space: nowrap;
  text-transform: uppercase;

  color: var(--tocTextStrong);

  /* light glass */
  background: linear-gradient(180deg, var(--tocGlassA), var(--tocGlassB));
  border: 1px solid var(--tocBorder);

  padding: 10px 20px;
  border-radius: 999px;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);


  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    color .18s ease,
    background .18s ease;
}

/* hover — мягкое свечение + микро-подъём */
.toc a:hover,
.toc a:focus{
  transform: translateY(-2px);
  border-color: var(--tocBorderHover);

  /* лёгкий акцент по краю (как premium UI) */
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.56));
}

/* active/pressed */
.toc a:active{
  transform: translateY(-1px);
  box-shadow: 0 14px 44px rgba(15,23,32,.10);
}

/* “active” состояние (если ты добавляешь класс active через JS — поддерживаем) */
.toc a.active{
  color: #041018;
  background: linear-gradient(135deg, var(--teal), var(--lilac));
  border-color: rgba(15,23,32,.10);
  box-shadow:
    0 0 0 6px rgba(88,225,255,.10),
    0 22px 70px rgba(15,23,32,.14);
}

/* hover на активном — чуть сильнее glow */
.toc a.active:hover{
  box-shadow:
    0 0 0 7px rgba(169,139,255,.10),
    0 28px 90px rgba(15,23,32,.16);
}

/* wrapper/spacing */
.toc .swiper-wrapper{
  padding-top: 10px;
  padding-bottom: 34px;
  justify-content: left;
}

/* ===== SCROLLBAR ===== */
.toc-swiper .swiper-scrollbar{
  background: var(--tocScrollTrack);
  height: 4px;
  border-radius: 999px;
}

/* thumb — мягкий градиент + светлый “glass” контур */
.toc-swiper .swiper-scrollbar-drag{
  background: linear-gradient(135deg, var(--teal), var(--lilac));
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.35);

  /* аккуратный glow — без “неона в лицо” */
  box-shadow:
    inset 0 0 10px rgba(255,255,255,.20),
    0 10px 30px rgba(88,225,255,.10);

  transition: box-shadow .18s ease, transform .12s ease;
}

.toc-swiper .swiper-scrollbar-drag:active{
  box-shadow:
    inset 0 0 14px rgba(255,255,255,.28),
    0 14px 40px rgba(169,139,255,.12);
  transform: scaleY(1.05);
}

/* контейнер-обёртка */
.toc.wrapper{
  margin: 0 auto;
  padding: 10px;
  padding-right: 0 !important;
}

.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal{
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}

.toc-swiper{
  max-width: var(--maxWidthSwiper);
  padding-left: 20px;
}

/* ===== Adaptive ===== */
@media screen and (max-width: 750px){
  .swiper-horizontal > .swiper-scrollbar,
  .swiper-scrollbar.swiper-scrollbar-horizontal{
    width: 90% !important;
    margin: 0 auto;
  }

  .toc .swiper-wrapper{
    padding-top: 10px;
    padding-bottom: 34px;
    justify-content: left;
  }

  .toc h2{
    white-space: nowrap;
    text-align: left;
  }

  .toc a{
    font-size: 16px; /* минимальный читаемый размер */
    padding: 10px 16px;
  }
}