#smart-toc-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  border-radius: 14px;
  overflow: hidden;
  margin: 0 0 28px 0;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  background: #ffffff;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}
#smart-toc-container.smart-toc-sticky {
  position: sticky;
  top: 100px;
  height: fit-content;
  align-self: flex-start;
}
#smart-toc-container::before {
  content: "";
  display: block;
  height: 4px;
  border-radius: 14px 14px 0 0;
}
.smart-toc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 10px;
}
.smart-toc-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.smart-toc-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  transition: background 0.2s;
  color: #9ca3af;
}
.smart-toc-toggle:hover { background: rgba(0,0,0,0.06); }
.smart-toc-toggle.collapsed svg { transform: rotate(-90deg); }
.smart-toc-toggle svg { transition: transform 0.3s ease; }
.smart-toc-nav {
  max-height: 600px;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.3s ease;
  opacity: 1;
}
.smart-toc-nav.collapsed { max-height: 0 !important; opacity: 0; }
.smart-toc-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 10px 14px !important;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.smart-toc-item { margin: 0 !important; padding: 0 !important; }
.smart-toc-link {
  display: flex !important;
  align-items: center;
  padding: 7px 10px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  border-radius: 8px !important;
  border-left: 2px solid transparent !important;
  transition: color 0.2s, background 0.2s, border-color 0.2s, padding-left 0.2s !important;
}
.smart-toc-h3 .smart-toc-link { padding-left: 20px !important; font-size: 12px !important; }
.smart-toc-h4 .smart-toc-link { padding-left: 30px !important; font-size: 11px !important; }

/* THEMES */
.smart-toc-theme-modern::before { background: linear-gradient(90deg, #1a73e8, #60a5fa); }
.smart-toc-theme-modern .smart-toc-title { color: #1a73e8; }
.smart-toc-theme-modern .smart-toc-link { color: #374151; }
.smart-toc-theme-modern .smart-toc-link:hover,
.smart-toc-theme-modern .smart-toc-link.active { color: #1a73e8; background: #f0f6ff; border-left-color: #1a73e8; padding-left: 14px !important; font-weight: 600 !important; }

.smart-toc-theme-dark { background: #1f2937 !important; }
.smart-toc-theme-dark::before { background: linear-gradient(90deg, #374151, #6b7280); }
.smart-toc-theme-dark .smart-toc-title { color: #e5e7eb; }
.smart-toc-theme-dark .smart-toc-link { color: #d1d5db; }
.smart-toc-theme-dark .smart-toc-link:hover { color: #fff; background: rgba(255,255,255,0.08); border-left-color: #9ca3af; padding-left: 14px !important; }
.smart-toc-theme-dark .smart-toc-link.active { color: #fff; background: rgba(255,255,255,0.1); border-left-color: #60a5fa; padding-left: 14px !important; font-weight: 600 !important; }

.smart-toc-theme-minimal { box-shadow: none !important; border: 1px solid #e5e7eb; }
.smart-toc-theme-minimal::before { background: #e5e7eb; height: 2px; }
.smart-toc-theme-minimal .smart-toc-title { color: #6b7280; }
.smart-toc-theme-minimal .smart-toc-link { color: #374151; }
.smart-toc-theme-minimal .smart-toc-link:hover,
.smart-toc-theme-minimal .smart-toc-link.active { color: #111827; background: #f9fafb; border-left-color: #6b7280; padding-left: 14px !important; }

.smart-toc-theme-green::before { background: linear-gradient(90deg, #059669, #34d399); }
.smart-toc-theme-green .smart-toc-title { color: #059669; }
.smart-toc-theme-green .smart-toc-link { color: #374151; }
.smart-toc-theme-green .smart-toc-link:hover,
.smart-toc-theme-green .smart-toc-link.active { color: #059669; background: #ecfdf5; border-left-color: #059669; padding-left: 14px !important; font-weight: 600 !important; }

.smart-toc-theme-purple::before { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.smart-toc-theme-purple .smart-toc-title { color: #7c3aed; }
.smart-toc-theme-purple .smart-toc-link { color: #374151; }
.smart-toc-theme-purple .smart-toc-link:hover,
.smart-toc-theme-purple .smart-toc-link.active { color: #7c3aed; background: #f5f3ff; border-left-color: #7c3aed; padding-left: 14px !important; font-weight: 600 !important; }

.smart-toc-theme-red::before { background: linear-gradient(90deg, #dc2626, #f87171); }
.smart-toc-theme-red .smart-toc-title { color: #dc2626; }
.smart-toc-theme-red .smart-toc-link { color: #374151; }
.smart-toc-theme-red .smart-toc-link:hover,
.smart-toc-theme-red .smart-toc-link.active { color: #dc2626; background: #fef2f2; border-left-color: #dc2626; padding-left: 14px !important; font-weight: 600 !important; }

@media (max-width: 1024px) {
  #smart-toc-container.smart-toc-sticky { position: relative !important; top: 0 !important; }
}
@media (max-width: 767px) {
  #smart-toc-container { border-radius: 10px; margin-bottom: 20px; }
  .smart-toc-link { font-size: 13px !important; min-height: 38px; }
}