/* Настройки цветов */
:root {
  --sn-badge-bg: rgba(255, 255, 255, 0.05);
  --sn-badge-text: var(--text-muted);
  --sn-badge-border: rgba(255, 255, 255, 0.1);
  --sn-active-bg: var(--interactive-accent);
  --sn-active-text: #ffffff;
}

/* 1. Очистка основного блока сноски */
.sidenote-margin {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: var(--text-normal);
}

/* 2. Стилизация цифры-индикатора (бейджа) */
.sidenote-margin[data-sidenote-num]::before {
  content: attr(data-sidenote-num) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 1.7em;
  height: 1.7em;
  margin-right: 8px;
  padding: 0 4px;
  background-color: var(--sn-badge-bg) !important;
  border: 1px solid var(--sn-badge-border) !important;
  border-radius: 4px !important;
  color: var(--sn-badge-text) !important;
  font-family: var(--font-monospace) !important;
  font-size: 0.85em !important;
  font-weight: 600 !important;
  vertical-align: middle;
  line-height: 1;
}

/* 3. Эффект при наведении на сноску */
.sidenote-margin:hover[data-sidenote-num]::before,
.sidenote-margin.is-active[data-sidenote-num]::before {
  background-color: var(--sn-active-bg) !important;
  color: var(--sn-active-text) !important;
  border-color: transparent !important;
}

/* 4. Стилизация цифры в основном тексте */
.sidenote-number::after {
  content: attr(data-sidenote-num);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  height: 1.4em;
  background-color: var(--sn-badge-bg);
  border: 1px solid var(--sn-badge-border);
  border-radius: 3px;
  color: var(--sn-badge-text);
  font-size: 0.7em;
  font-weight: bold;
  margin-left: 2px;
  vertical-align: super;
}