.djt-toc {
  --teal: #00b1d2;
  --teal-dark: #00889f;
  --teal-tint: #e6f8fb;
  --gold: #ffcc00;
  --ink: #0f2733;
  --muted: #5b7480;
  --line: #d7eef3;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 16px !important;
  max-width: 640px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0, 90, 110, 0.10);
  padding: 20px 22px 14px;
  margin: 2rem 0 2.5rem;
}
.djt-toc *, .djt-toc *::before, .djt-toc *::after { box-sizing: border-box; }

.djt-toc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.djt-toc-bolt {
  flex: 0 0 auto;
  width: 6px;
  height: 24px;
  background: var(--gold);
  border-radius: 4px;
}
.djt-toc-title {
  font-family: 'Poppins', 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 19px !important;
  color: var(--ink) !important;
  margin: 0 !important;
  letter-spacing: -0.01em;
  line-height: 1.3 !important;
}

.djt-toc-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.djt-toc-list li {
  border-bottom: 1px dashed var(--line);
  list-style: none !important;
}
.djt-toc-list li:last-child {
  border-bottom: none;
}

.djt-toc-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 6px;
  text-decoration: none !important;
  border-radius: 8px;
  transition: background 0.15s ease, transform 0.15s ease, padding-left 0.15s ease;
}
.djt-toc-list a:hover {
  background: var(--teal-tint);
  padding-left: 12px;
}

.djt-toc-num {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--teal-tint);
  color: var(--teal-dark) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  transition: background 0.15s ease, color 0.15s ease;
}
.djt-toc-list a:hover .djt-toc-num {
  background: var(--teal);
  color: #fff !important;
}

.djt-toc-label {
  color: var(--ink) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}
.djt-toc-list a:hover .djt-toc-label {
  color: var(--teal-dark) !important;
}

/* Active section while scrolling */
.djt-toc-list a.djt-toc-active {
  background: var(--teal-tint);
  box-shadow: inset 3px 0 0 var(--gold);
}
.djt-toc-list a.djt-toc-active .djt-toc-num {
  background: var(--gold);
  color: var(--ink) !important;
}
.djt-toc-list a.djt-toc-active .djt-toc-label {
  color: var(--teal-dark) !important;
  font-weight: 600 !important;
}

@media (max-width: 480px) {
  .djt-toc { padding: 16px 16px 10px; }
  .djt-toc-title { font-size: 17px !important; }
  .djt-toc-label { font-size: 15px !important; }
  .djt-toc-num { width: 26px; height: 26px; font-size: 12px !important; }
}