:root{
  /* ===== AnareusCZ — light palette ===== */
  --lime: #B9EF40;              /* основной акцент */
  --lime-2: #9FE93A;            /* второй тон лайма */
  --deep: #0D140F;              /* тёмный текст/акцент */
  --bg-0: #F3F5F0;              /* фон страницы (светлый) */
  --paper: rgba(255,255,255,.78); /* стекло/карточки */
  --line: rgba(13,20,15,.14);   /* границы */
  --line-2: rgba(13,20,15,.10); /* мягкая граница */
  --text: #0F1A14;              /* основной текст */
  --text-muted: rgba(13,20,15,.68);

  /* локальные */
  --scrollBarFonColor: var(--bg-0);
  --textColor: var(--text);
  --borderColor: var(--line);

  --accent: var(--lime);
  --maxWidthSwiper: 1150px;
}

/* ===== Общая обёртка ===== */
.toc{
  background-color: transparent;
}

.toc .swiper{
  padding: 20px !important;
  padding-top: 0 !important;
  justify-content: center;
}

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

.toc h2{
  white-space: nowrap;
  text-align: center;
  color: var(--textColor);
}

/* ===== Ссылки (кнопки) — light glass ===== */
.toc a{
  text-decoration: none;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.5;
  white-space: nowrap;

  color: rgba(13,20,15,.86);
  transition:
    color .25s ease,
    background .25s ease,
    border-color .25s ease,
    transform .2s ease,
    box-shadow .25s ease;

  border: 1px solid var(--borderColor);
  padding: 10px 20px;
  border-radius: 22px;

  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.62));
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);

  box-shadow: 0 14px 30px rgba(13,20,15,.08);
}

/* ===== Hover / Focus — lime accent (no neon) ===== */
.toc a:hover,
.toc a:focus{
  color: var(--deep);
  background: linear-gradient(180deg, rgba(185,239,64,.55), rgba(255,255,255,.78));
  border-color: rgba(13,20,15,.18);
  transform: translateY(-1px);
  box-shadow: 0 22px 56px rgba(13,20,15,.10);
}

/* ===== Active — лёгкое нажатие ===== */
.toc a:active{
  transform: translateY(0);
  box-shadow: 0 12px 26px rgba(13,20,15,.08);
}

/* ===== Доступность ===== */
.toc a:focus-visible{
  outline: 3px solid rgba(185,239,64,.75);
  outline-offset: 3px;
  border-radius: 22px;
}

/* ===== Swiper wrapper ===== */
.toc .swiper-wrapper{
  padding-top: 20px;
  padding-bottom: 24px;
  justify-content: center;
}

/* ===== Scrollbar ===== */
.toc-swiper .swiper-scrollbar{
  background: rgba(13,20,15,.10);
  height: 4px;
  border-radius: 2px;
}

.toc-swiper .swiper-scrollbar-drag{
  background: linear-gradient(90deg, rgba(185,239,64,.95), rgba(159,233,58,.85));
  border-radius: 2px;
  width: 20%;
}

/* ===== Контейнер ===== */
.toc.wrapper{
  margin: 0 auto;
  padding-left: 0 !important;
  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);
}

/* ===== Мобилка ===== */
@media screen and (max-width: 750px){
  .toc.wrapper{
    margin-left: auto;
  }

  .swiper-horizontal > .swiper-scrollbar,
  .swiper-scrollbar.swiper-scrollbar-horizontal{
    width: 90% !important;
    margin: 0 auto;
  }

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

  .toc a{
    font-size: 16px;
    padding: 10px 18px;
  }
}