.toc-outline-card,
.toc-settings-card,
.toc-collection-card {
    padding: 12px 14px;
    border: 1px solid #dbe2ec;
    border-radius: 8px;
    background: #fff;
}

.toc-outline-card { border-color: #ef9dc7; background: #fff8fc; }
.toc-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.toc-section-heading h3, .toc-section-heading p { margin: 0; }
.toc-section-heading h3 { color: #202635; font-size: 13px; font-weight: 700; line-height: 1.3; }
.toc-section-heading p { margin-top: 3px; color: #7c8798; font-size: 9px; line-height: 1.45; }
.toc-section-heading > span, .toc-section-heading div > span { flex: 0 0 auto; color: #75839a; font-size: 9px; font-weight: 700; }
.toc-section-heading--selected { align-items: center; }.toc-section-heading--selected h3 { margin-top: 2px; overflow-wrap: anywhere; font-size: 15px; }
.toc-number-badge { padding: 4px 7px; border-radius: 999px; background: #e9f2fc; color: #275a91 !important; font-size: 9px !important; }

.toc-generation-flow { display: grid; grid-template-columns: minmax(0, 1fr) 15px minmax(0, 1fr) 15px minmax(0, 1fr); align-items: center; gap: 3px; margin-bottom: 11px; }
.toc-generation-flow > div { display: grid; justify-items: center; min-width: 0; gap: 2px; padding: 8px 3px; border: 1px solid #ecd4e1; border-radius: 6px; background: #fff; text-align: center; }
.toc-generation-flow strong { font-size: 8px; }.toc-generation-flow small { overflow: hidden; max-width: 100%; color: #8490a1; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.toc-generation-flow > i { position: relative; height: 1px; background: #d77aab; }.toc-generation-flow > i::after { position: absolute; top: -3px; right: -1px; border: 3px solid transparent; border-left-color: #d77aab; content: ""; }
.toc-flow-document, .toc-flow-toc, .toc-flow-link { position: relative; width: 25px; height: 21px; border: 1px solid #8fa4bb; border-radius: 2px; background: #f2f6fb; }
.toc-flow-document::before { position: absolute; top: 5px; right: 4px; left: 4px; height: 2px; background: #8298b0; box-shadow: 0 4px #8298b0, 0 8px #8298b0; content: ""; }
.toc-flow-toc::before { position: absolute; top: 4px; right: 4px; left: 7px; height: 2px; background: #ec168c; box-shadow: 0 5px #8298b0, 0 10px #8298b0; content: ""; }
.toc-flow-toc::after { position: absolute; top: 4px; left: 3px; width: 2px; height: 2px; background: #ec168c; box-shadow: 0 5px #8298b0, 0 10px #8298b0; content: ""; }
.toc-flow-link { border: 0; background: transparent; }.toc-flow-link::before, .toc-flow-link::after { position: absolute; width: 13px; height: 7px; border: 2px solid #8298b0; border-radius: 999px; content: ""; transform: rotate(-35deg); }.toc-flow-link::before { top: 3px; left: 1px; }.toc-flow-link::after { right: 1px; bottom: 3px; }

.toc-outline-list { display: grid; gap: 4px; max-height: 205px; overflow-y: auto; padding-right: 3px; }
.toc-outline-list > p { margin: 0; color: #7b889b; font-size: 9px; }
.toc-outline-entry { display: grid; grid-template-columns: 22px minmax(0, auto) minmax(14px, 1fr) auto; align-items: center; gap: 6px; min-width: 0; margin-left: calc((var(--toc-level) - 1) * 9px); padding: 6px 7px; border: 1px solid #eadfe6; border-radius: 5px; background: #fff; }
.toc-outline-entry > span { color: #ec168c; font-size: 7px; font-weight: 700; }.toc-outline-entry strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.toc-outline-entry i { height: 1px; background-image: linear-gradient(90deg, #c4cdd9 50%, transparent 50%); background-size: 5px 1px; }.toc-outline-entry small { color: #77859a; font-size: 7px; white-space: nowrap; }

.toc-settings-card .demo-field-label { margin-top: 9px; color: #66758b; font-size: 9px; }
.toc-level-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.demo-select-input { width: 100%; min-height: 36px; margin-top: 4px; padding: 7px 9px; border: 1px solid #d9e1eb; border-radius: 6px; background: #fff; color: #172439; font: inherit; font-size: 10px; }
.toc-option-list { display: grid; gap: 6px; margin-top: 10px; }
.toc-option-list label { display: flex; align-items: flex-start; gap: 8px; padding: 7px 9px; border: 1px solid #dce3ec; border-radius: 6px; background: #f9fbfd; }
.toc-option-list label.is-disabled { opacity: .48; }.toc-option-list input { margin-top: 2px; accent-color: #ec168c; }.toc-option-list span { display: grid; gap: 1px; }.toc-option-list strong { font-size: 9px; }.toc-option-list small { color: #78869a; font-size: 8px; line-height: 1.35; }
.toc-actions { margin-top: 11px; }

.toc-collection-list { display: grid; gap: 7px; }.toc-collection-list > p { margin: 0; color: #7b889b; font-size: 9px; }
.toc-collection-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 8px; width: 100%; min-width: 0; padding: 7px 9px; border: 1px solid #e1e7ef; border-radius: 6px; background: #f9fbfd; color: #18263a; text-align: left; }
.toc-collection-item:hover, .toc-collection-item:focus-visible, .toc-collection-item.is-active { border-color: #ec168c; background: #fff4fa; outline: 0; }
.toc-collection-icon { position: relative; width: 28px; height: 24px; border: 1px solid #8ea2b9; border-radius: 3px; background: #fff; }.toc-collection-icon::before { position: absolute; top: 5px; right: 4px; left: 8px; height: 2px; background: #ec168c; box-shadow: 0 5px #8499b1, 0 10px #8499b1; content: ""; }.toc-collection-icon::after { position: absolute; top: 5px; left: 4px; width: 2px; height: 2px; background: #ec168c; box-shadow: 0 5px #8499b1, 0 10px #8499b1; content: ""; }
.toc-collection-item > span:last-child { display: grid; min-width: 0; gap: 2px; }.toc-collection-item strong, .toc-collection-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.toc-collection-item strong { font-size: 10px; }.toc-collection-item small { color: #77859a; font-size: 8px; }

@media (max-width: 620px) {
    .toc-generation-flow { grid-template-columns: 1fr; }
    .toc-generation-flow > i { width: 1px; height: 12px; margin: 0 auto; }.toc-generation-flow > i::after { top: auto; right: -2px; bottom: -2px; border-top-color: #d77aab; border-left-color: transparent; }
    .toc-level-controls { grid-template-columns: 1fr; }
    .toc-outline-entry { grid-template-columns: 20px minmax(0, 1fr) auto; }.toc-outline-entry i { display: none; }
}