/* ================================================
 * Knowledge Base — Shared Styles
 * Dark mode compatible via CSS variables
 * ================================================ */

/* ── Page background ── */
main { background: var(--foreground) !important; }

/* ── Breadcrumb ── */

.kb-breadcrumb {
    display: flex; align-items: center; gap: 0.35rem;
    font-size: 0.85rem; margin-bottom: 1rem; padding: 0 0.5rem;
    flex-wrap: wrap;
}
.kb-breadcrumb a {
    text-decoration: none; color: var(--primary);
}
.kb-breadcrumb a:hover { text-decoration: underline; }
.kb-breadcrumb-sep { color: var(--alternate); }
.kb-breadcrumb-current { color: var(--alternate); }

/* ── Document styles ── */

.kb-doc { max-width: 1400px; width: 100%; margin: 0 auto; padding: 1.5rem 2rem 3rem; }
@media (max-width: 768px) { .kb-doc { padding: 1rem 1rem 2rem; } }

.kb-doc-title {
    font-size: 2rem; font-weight: 700; line-height: 1.3;
    padding: 0.25rem 0.5rem; margin-bottom: 0.25rem;
}
@media (max-width: 768px) {
    .kb-doc-title { font-size: 1.5rem; }
    .kb-doc-title-icon { width: 34px; height: 34px; }
    .kb-doc-title-icon i { width: 16px; height: 16px; }
}
.kb-doc-title-icon {
    width: 40px; height: 40px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px; background: var(--primary); color: #fff;
}
.kb-doc-title-icon i { width: 20px; height: 20px; }

.kb-doc-summary {
    font-size: 1rem; color: var(--alternate);
    padding: 0.25rem 0.5rem; margin-bottom: 0.75rem;
}

.kb-doc-meta {
    display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
    font-size: 0.8rem; color: var(--alternate);
    padding: 0 0.5rem; margin-bottom: 1rem;
}
.kb-doc-meta span {
    display: inline-flex; align-items: center; gap: 0.3rem;
}

.kb-doc-separator {
    border: none; border-top: 1px solid var(--separator);
    margin: 0 0 1.5rem 0;
}

/* Category / subcategory title with icon */
.kb-doc-title--flex {
    display: flex; align-items: center; gap: 0.75rem;
}

/* Admin-page separator variant (no bottom margin) */
.kb-doc-separator--flush {
    margin: 1rem 0 0 0;
}

/* ── Folder items (subcategory cards) ── */

.kb-folder-list {
    list-style: none; padding: 0; margin: 0 0 1.5rem 0;
    display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 0.75rem !important;
}
@media (max-width: 768px) { .kb-folder-list { grid-template-columns: 1fr !important; } }

.kb-folder-item {
    border: 1px solid var(--separator);
    border-radius: 10px;
    transition: border-color 0.15s, background 0.15s;
    overflow: hidden; position: relative;
}
.kb-folder-item:hover { border-color: var(--primary); background: rgba(var(--primary-rgb), 0.04); }
.kb-folder-item:hover .kb-folder-name { color: var(--primary); }

.kb-folder-link {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 1rem;
    text-decoration: none; color: var(--body);
}

.kb-folder-icon {
    width: 38px; height: 38px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px; background: var(--primary); color: #fff;
}
.kb-folder-icon i { width: 18px; height: 18px; }
.kb-folder-info { flex: 1; min-width: 0; }
.kb-folder-name { font-weight: 600; display: block; color: var(--body); }
.kb-folder-count { font-size: 0.8rem; color: var(--alternate); margin-top: 0.15rem; }

.kb-folder-admin-actions {
    position: absolute; top: 0.5rem; right: 0.5rem;
    display: flex; align-items: center; gap: 0.15rem;
    opacity: 0; transition: opacity 0.15s;
}
.kb-folder-item:hover .kb-folder-admin-actions { opacity: 1; }
.kb-folder-admin-actions button {
    background: var(--foreground); border: none; cursor: pointer;
    color: var(--alternate); padding: 0.3rem;
    display: inline-flex; align-items: center;
    border-radius: 4px;
}
.kb-folder-admin-actions button:hover { color: var(--primary); }

/* Subcategory page — folder items (borderless variant) */
.kb-folder-item--borderless {
    border: none; margin-bottom: 0;
    border-bottom: 1px solid var(--separator);
    border-radius: 0; padding: 0;
}
.kb-folder-item--borderless:last-child { border-bottom: none; }
.kb-folder-item--borderless .kb-folder-link { padding: 1rem 0.5rem; }

.kb-folder-title {
    font-weight: 600; color: var(--body);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kb-folder-link:hover .kb-folder-title { color: var(--primary); }

.kb-folder-number {
    font-weight: 600; color: var(--alternate); font-size: 0.85rem;
    margin-right: 0.25rem;
}

.kb-folder-meta {
    font-size: 0.8rem; color: var(--alternate); margin-top: 0.15rem;
}

.kb-folder-actions {
    display: flex; align-items: center; gap: 0.35rem;
    flex-shrink: 0;
}
.kb-folder-actions button {
    background: none; border: none; cursor: pointer;
    color: var(--alternate); padding: 0.35rem;
    display: inline-flex; align-items: center;
}
.kb-folder-actions button:hover { color: var(--primary); }
.kb-folder-actions i { width: 16px !important; height: 16px !important; }

/* Subcategory page — folder icon primary variant */
.kb-folder-icon--primary {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
}

/* ── Post items ── */

.kb-post-list { list-style: none; padding: 0; margin: 0; }

.kb-post-item a {
    display: block; padding: 1rem 0.5rem;
    text-decoration: none; color: var(--body);
    transition: background 0.1s; border-radius: 6px;
}
.kb-post-item a:hover { background: rgba(var(--primary-rgb), 0.04); }

.kb-post-divider {
    border: none; border-top: 1px solid var(--separator);
    margin: 0;
}

.kb-post-number {
    font-weight: 600; color: var(--alternate); font-size: 0.85rem;
    margin-right: 0.25rem;
}
.kb-post-title { font-weight: 600; color: var(--body); }
.kb-post-item a:hover .kb-post-title { color: var(--primary); }
.kb-post-desc {
    color: var(--alternate); font-size: 0.9rem;
    margin-top: 0.2rem;
}
.kb-post-meta {
    color: var(--alternate); font-size: 0.8rem;
    margin-top: 0.3rem;
}

.kb-empty {
    text-align: center; padding: 3rem 1rem;
    color: var(--alternate);
}

.kb-section-label {
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--alternate);
    padding: 0.5rem 0.5rem 0.25rem; margin-top: 0.5rem;
}

.kb-section-title {
    font-size: 1rem; font-weight: 700; color: var(--body);
    padding: 0.5rem; margin-top: 2rem; margin-bottom: 0.25rem;
    border-bottom: 2px solid var(--separator);
}

/* ── Content typography ── */

.kb-content {
    line-height: 1.75; padding: 0 0.5rem; font-size: 1.05rem;
}
.kb-content table { border-collapse: collapse; width: 100%; margin-bottom: 1em; }
.kb-content th,
.kb-content td { border: 1px solid var(--separator); padding: 0.5em 0.75em; text-align: left; }
.kb-content th { font-weight: 600; background: var(--background); }
.kb-content blockquote { border-left: 3px solid var(--separator); margin: 0.5em 0; padding: 0.5em 1em; color: var(--alternate); }
.kb-content pre { background: var(--background); padding: 1em; border-radius: 4px; overflow-x: auto; position: relative; }
.kb-content pre .kb-code-copy {
    position: absolute; top: 6px; right: 6px;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 8px; border: 1px solid var(--separator); border-radius: 4px;
    background: var(--foreground); color: var(--alternate);
    font-size: 0.75rem; font-family: inherit; line-height: 1;
    cursor: pointer; opacity: 0; transition: opacity 0.15s;
}
.kb-content pre:hover .kb-code-copy { opacity: 1; }
.kb-content pre .kb-code-copy:hover { color: var(--body); }
.kb-content pre .kb-code-copy svg { width: 14px; height: 14px; }
.kb-content pre .kb-code-copy.copied { color: var(--body); pointer-events: none; }
.kb-content code { background: var(--background); padding: 2px 4px; border-radius: 3px; font-size: 0.9em; }
.kb-content pre code { background: none; padding: 0; }
.kb-content h1, .kb-content h2, .kb-content h3 { margin-top: 2em; margin-bottom: 0.5em; font-weight: 700; }
.kb-content > h1:first-child, .kb-content > h2:first-child, .kb-content > h3:first-child { margin-top: 0; }
.kb-content p { margin-bottom: 1em; }
.kb-content ol, .kb-content ul { margin: 0.75em 0; padding-left: 1.5em; }
.kb-content li { margin-bottom: 0.5em; }
.kb-content li > ul, .kb-content li > ol { margin-top: 0.4em; margin-bottom: 0.4em; }
.kb-content ol { list-style: none; counter-reset: kb-ol; }
.kb-content ol > li { counter-increment: kb-ol; }
.kb-content ol > li::before {
    content: counter(kb-ol) ". ";
    opacity: 0.5; font-weight: 600;
    display: inline-block; margin-left: -1.5em;
    width: 1.5em;
}
.kb-content ul { list-style: none; }
.kb-content ul > li::before {
    content: "";
    display: inline-block; width: 6px; height: 6px;
    border-radius: 50%; background: currentColor; opacity: 0.5;
    margin-left: -1.5em; margin-right: calc(1.5em - 6px);
    vertical-align: middle; position: relative; top: -0.1em;
}
.kb-content a[target="_blank"]::before {
    content: "";
    display: inline-block; width: 0.75em; height: 0.75em;
    margin-right: 0.2em; vertical-align: baseline; position: relative; top: 0.05em;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E") no-repeat center / contain;
}
.kb-content img { width: 100%; height: auto !important; border-radius: 8px; margin: 2.5em 0; display: block; border: 1px solid var(--separator); }
.kb-content figure { margin: 1.5em 0; }
.kb-content figure img { display: block; }
.kb-content .tox-editor-header,
.kb-content .tox-toolbar-overlord,
.kb-content .tox-toolbar__primary,
.kb-content .tox-toolbar__group { display: contents; }

@media (max-width: 768px) {
    .kb-content { font-size: 1rem; padding: 0; }
    .kb-content img { margin: 1.5em 0; }
    .kb-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── Callout blocks ── */
/* Using semi-transparent backgrounds so they work in both light and dark */

.kb-callout {
    border-left: 4px solid; border-radius: 6px;
    padding: 1em 1.25em; margin: 1.5em 0;
}
.kb-callout p:last-child { margin-bottom: 0; }
.kb-callout-warning { border-color: #f59e0b; background: rgba(245, 158, 11, 0.08); }
.kb-callout-info { border-color: #3b82f6; background: rgba(59, 130, 246, 0.08); }
.kb-callout-success { border-color: #10b981; background: rgba(16, 185, 129, 0.08); }
.kb-callout-danger { border-color: #ef4444; background: rgba(239, 68, 68, 0.08); }

/* Inside .kb-content (view page) */
.kb-content .kb-callout {
    border-left: 4px solid; border-radius: 6px;
    padding: 1em 1.25em; margin: 1.5em 0;
}
.kb-content .kb-callout p:last-child { margin-bottom: 0; }
.kb-content .kb-callout-warning { border-color: #f59e0b; background: rgba(245, 158, 11, 0.08); }
.kb-content .kb-callout-info { border-color: #3b82f6; background: rgba(59, 130, 246, 0.08); }
.kb-content .kb-callout-success { border-color: #10b981; background: rgba(16, 185, 129, 0.08); }
.kb-content .kb-callout-danger { border-color: #ef4444; background: rgba(239, 68, 68, 0.08); }

/* ── Navigation (prev/next) ── */

.kb-nav {
    display: flex; justify-content: space-between; align-items: stretch;
    margin-top: 3rem; padding-top: 1.5rem;
    border-top: 1px solid var(--separator);
    gap: 1rem;
}
.kb-nav-link {
    display: flex; flex-direction: column; gap: 0.2rem;
    text-decoration: none; padding: 0.75rem 1rem;
    border: 1px solid var(--separator); border-radius: 8px;
    transition: border-color 0.15s; min-width: 0; max-width: 48%;
}
.kb-nav-link:hover { border-color: var(--primary); }
.kb-nav-next { margin-left: auto; text-align: right; }
.kb-nav-label {
    font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--alternate);
}
.kb-nav-title {
    font-size: 0.95rem; font-weight: 600; color: var(--body);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kb-nav-link:hover .kb-nav-title { color: var(--primary); }

@media (max-width: 768px) {
    .kb-nav { flex-direction: column; }
    .kb-nav-link { max-width: 100%; }
    .kb-nav-next { margin-left: 0; text-align: right; }
}

/* ── Table of Contents ── */

.kb-toc {
    margin-bottom: 2rem; padding: 1rem 1.25rem;
    border: 1px solid var(--separator); border-radius: 8px;
    background: var(--background);
}
.kb-toc-title {
    font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--alternate);
    margin: 0 0 0.5rem 0;
}
.kb-toc-list {
    list-style: none; padding: 0; margin: 0;
}
.kb-toc-list li { margin-bottom: 0.15rem; }
.kb-toc-list a {
    text-decoration: none; color: var(--body); font-size: 0.85rem;
    transition: color 0.1s; display: block;
    padding: 0.2rem 0;
}
.kb-toc-list a:hover { color: var(--primary); }
.kb-toc-h2 { padding-left: 1rem; }
.kb-toc-h3 { padding-left: 2rem; }

/* Scroll offset for anchor links */
.kb-content h1[id], .kb-content h2[id], .kb-content h3[id] {
    scroll-margin-top: 0;
}

/* ── Admin controls ── */

.kb-manage-list { list-style: none; padding: 0; margin: 0; }

.kb-manage-item {
    display: flex; align-items: center; gap: 1rem;
    padding: 0.85rem 0.5rem;
    text-decoration: none; color: var(--body);
    transition: background 0.1s; border-radius: 6px;
}
.kb-manage-item:hover { background: rgba(var(--primary-rgb), 0.04); }

.kb-manage-icon {
    width: 36px; height: 36px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px; background: var(--primary); color: #fff;
}
.kb-manage-icon i { width: 16px; height: 16px; }

.kb-manage-info { flex: 1; min-width: 0; }
.kb-manage-number {
    font-weight: 600; color: var(--alternate); font-size: 0.85rem;
    margin-right: 0.25rem;
}
.kb-manage-name {
    font-weight: 600; color: var(--body);
    text-decoration: none;
}
.kb-manage-item:hover .kb-manage-name { color: var(--primary); }

.kb-manage-desc {
    color: var(--alternate); font-size: 0.85rem;
    margin-top: 0.15rem;
}

.kb-manage-count {
    font-size: 0.85rem; color: var(--alternate); flex-shrink: 0;
}

.kb-manage-meta {
    font-size: 0.8rem; color: var(--alternate); flex-shrink: 0;
}

.kb-manage-divider {
    border: none; border-top: 1px solid var(--separator);
    margin: 0;
}

/* Sub-subcategory section (inline in subcategory page) */
.kb-subsection { margin-top: 2rem; }
.kb-subsection-heading {
    font-size: 1rem; font-weight: 700; color: var(--body);
    padding: 0.5rem; margin-bottom: 0.25rem;
    border-bottom: 2px solid var(--separator);
}

/* Subcategory header (admin) */
.kb-subcategory-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.5rem;
    margin-top: 2rem;
    border-bottom: 2px solid var(--separator);
}
.kb-subcategory-title {
    font-size: 1rem; font-weight: 700; color: var(--body);
}
.kb-subcategory-actions {
    display: flex; align-items: center; gap: 0.35rem;
}
.kb-subcategory-actions button,
.kb-subcategory-actions a {
    background: none; border: none; cursor: pointer;
    color: var(--alternate); padding: 0.35rem;
    text-decoration: none; display: inline-flex; align-items: center;
}
.kb-subcategory-actions button:hover,
.kb-subcategory-actions a:hover { color: var(--primary); }
.kb-subcategory-actions i { width: 18px !important; height: 18px !important; }

/* Add-post link in admin */
.kb-add-post-link {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.85rem; color: var(--primary);
    text-decoration: none; padding: 0.5rem;
    margin-top: 0.25rem;
}
.kb-add-post-link:hover { text-decoration: underline; }

/* ── Sorting mode ── */

.sorting .kb-manage-item { cursor: grab; background: rgba(var(--primary-rgb), 0.04); }
.sorting .kb-manage-item:active { cursor: grabbing; }
.sorting .kb-manage-divider { display: none; }

.sorting .kb-post-item { cursor: grab; padding: 0.5rem; }
.sorting .kb-post-item:active { cursor: grabbing; }
.sorting .kb-post-item a { pointer-events: none; }
/* Drop zones for moving posts into/out of subcategories */
.kb-post-drop-zone:empty { display: none; }
.kb-folder-drop { list-style: none; padding: 0; margin: 0; display: none; }

.sorting .kb-post-drop-zone {
    display: block !important;
    min-height: 44px;
    border: 2px dashed var(--separator);
    border-radius: 6px;
    padding: 0.25rem;
    transition: border-color 0.15s;
}
.sorting .kb-post-drop-zone:empty::after {
    content: "Drop posts here";
    display: block; text-align: center;
    padding: 0.5rem; font-size: 0.8rem;
    color: var(--alternate); opacity: 0.6;
}
.sorting .kb-post-drop-zone .kb-post-item {
    background: var(--foreground); border-radius: 6px;
    margin: 0.25rem 0;
}
.sorting .kb-folder-drop {
    display: block !important;
    width: 100%; margin-top: 0.5rem;
    grid-column: 1 / -1;
}

/* Parent category drop zone (hidden until sort mode) */
.kb-parent-drop-zone-wrapper { display: none; margin-top: 2rem; }
.sorting .kb-parent-drop-zone-wrapper { display: block; }

.sorting .kb-folder-list { grid-template-columns: 1fr; }
.sorting .kb-folder-item { cursor: grab; }
.sorting .kb-folder-item:active { cursor: grabbing; }

.sorting .kb-post-list,
.sorting .kb-post-list-sortable {
    min-height: 40px;
    border: 2px dashed transparent;
    border-radius: 6px;
    transition: border-color 0.15s;
    padding: 0.25rem 0;
}
.sorting .kb-post-list:empty,
.sorting .kb-post-list.sortable-empty,
.sorting .kb-post-list-sortable:empty,
.sorting .kb-post-list-sortable.sortable-empty {
    border-color: var(--separator);
}

.sorting .kb-folder-list {
    min-height: 40px;
    border: 2px dashed transparent;
    border-radius: 6px;
    transition: border-color 0.15s;
    padding: 0.25rem 0;
}

.sorting .kb-add-post-link { display: none; }
.sorting .kb-post-divider { display: none; }
.sorting .kb-post-desc,
.sorting .kb-post-meta { display: none; }
.sorting .kb-folder-meta { display: none; }
.sorting .kb-folder-actions { display: none; }
.sorting .kb-folder-admin-actions { display: none; }
.sorting .kb-folder-item .kb-folder-chevron { display: none; }

.sorting .kb-subcategory-section { cursor: grab; }
.sorting .kb-subcategory-section:active { cursor: grabbing; }

/* Home page sort mode */
.sorting .kb-categories { grid-template-columns: 1fr !important; }
.sorting .kb-category { cursor: grab; }
.sorting .kb-category:active { cursor: grabbing; }
.sorting .kb-category a { pointer-events: none; }
.sorting .kb-article-list { display: none; }
.sorting .kb-view-all { display: none; }

.sortable-ghost { opacity: 0.4; background: rgba(var(--primary-rgb), 0.08); border-radius: 6px; }

/* ── Editor styles ── */

.kb-doc--editor { max-width: 1400px; width: 100%; margin: 0 auto; padding: 2rem 2rem 120px; }
@media (max-width: 768px) { .kb-doc--editor { padding: 1rem 1rem 120px; } }

.kb-doc--editor .kb-doc-title {
    outline: none; border: none; width: 100%;
    border-radius: 6px; cursor: text;
}
.kb-doc--editor .kb-doc-title:hover { background: rgba(var(--primary-rgb), 0.03); }
.kb-doc--editor .kb-doc-title:focus { background: rgba(var(--primary-rgb), 0.05); }
.kb-doc--editor .kb-doc-title:empty::before {
    content: attr(data-placeholder);
    color: var(--alternate); pointer-events: none;
}

.kb-doc--editor .kb-doc-summary {
    outline: none; border: none; width: 100%;
    border-radius: 6px; cursor: text;
    margin-bottom: 1rem;
}
.kb-doc--editor .kb-doc-summary:hover { background: rgba(var(--primary-rgb), 0.03); }
.kb-doc--editor .kb-doc-summary:focus { background: rgba(var(--primary-rgb), 0.05); }
.kb-doc--editor .kb-doc-summary:empty::before {
    content: attr(data-placeholder);
    color: var(--alternate); opacity: 0.5; pointer-events: none;
}

#kb-editor {
    min-height: 300px; outline: none; line-height: 1.75;
    padding: 0 0.5rem; font-size: 1.05rem;
}
#kb-editor h1, #kb-editor h2, #kb-editor h3 { margin-top: 2em; margin-bottom: 0.5em; font-weight: 700; }
#kb-editor > h1:first-child, #kb-editor > h2:first-child, #kb-editor > h3:first-child { margin-top: 0; }
#kb-editor table { border-collapse: collapse; width: 100%; margin-bottom: 1em; }
#kb-editor th,
#kb-editor td { border: 1px solid var(--separator); padding: 0.5em 0.75em; text-align: left; }
#kb-editor th { font-weight: 600; }
#kb-editor blockquote { border-left: 3px solid var(--separator); margin: 0.5em 0; padding: 0.5em 1em; color: var(--alternate); }
#kb-editor pre { background: var(--background); padding: 1em; border-radius: 4px; overflow-x: auto; }
#kb-editor code { background: var(--background); padding: 2px 4px; border-radius: 3px; font-size: 0.9em; }
#kb-editor pre code { background: none; padding: 0; }
#kb-editor ol, #kb-editor ul { margin: 0.75em 0; padding-left: 1.5em; }
#kb-editor li { margin-bottom: 0.5em; }
#kb-editor li > ul, #kb-editor li > ol { margin-top: 0.4em; margin-bottom: 0.4em; }
#kb-editor img { max-width: 100%; height: auto; border-radius: 8px; margin: 2.5em 0; display: block; border: 1px solid var(--separator); }

#kb-editor[data-mce-placeholder]::before {
    color: var(--alternate) !important;
    opacity: 0.6;
}

#kb-editor .kb-callout {
    border-left: 4px solid; border-radius: 6px;
    padding: 1em 1.25em; margin: 1.5em 0;
}

/* ── Floating toolbar ── */

.kb-toolbar-wrap {
    position: fixed; bottom: 24px; left: 0; right: 0;
    display: flex; justify-content: center;
    pointer-events: none; z-index: 1040;
}
#kb-toolbar {
    pointer-events: auto;
    max-width: calc(100% - 32px);
}
@media (max-width: 768px) {
    .kb-toolbar-wrap { bottom: 12px; }
    #kb-toolbar { max-width: calc(100% - 16px); }
    #kb-toolbar .tox.tox-tinymce-inline { border-radius: 8px !important; }
}
#kb-toolbar .tox.tox-tinymce-inline {
    border: 1px solid var(--separator) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12) !important;
    overflow: hidden;
    display: flex !important;
}
#kb-toolbar .tox .tox-editor-header {
    border: none !important;
    box-shadow: none !important;
}
#kb-toolbar .tox .tox-toolbar__primary {
    background: var(--foreground) !important;
}
#kb-toolbar .tox .tox-tbtn {
    color: var(--body) !important;
}
#kb-toolbar .tox .tox-tbtn svg {
    fill: var(--body) !important;
}
#kb-toolbar .tox .tox-tbtn:hover {
    background: rgba(var(--primary-rgb), 0.08) !important;
}

/* ── Home page ── */

.kb-home { max-width: 1400px; width: 100%; margin: 0 auto; padding: 1.5rem 2rem 3rem; }
@media (max-width: 768px) { .kb-home { padding: 1rem 1rem 2rem; } }

/* Bookmarks */
.kb-bookmarks {
    margin-bottom: 2rem; padding-bottom: 2rem;
    border-bottom: 1px solid var(--separator);
}
.kb-bookmarks-label {
    font-size: 0.8rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--alternate);
    margin: 0 0 0.75rem 0;
    display: flex; align-items: center; gap: 0.5rem;
}
.kb-bookmark-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.kb-bookmark-item {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--separator); border-radius: 6px;
    text-decoration: none; color: var(--body);
    font-size: 0.9rem; transition: border-color 0.15s;
}
.kb-bookmark-item:hover { border-color: var(--primary); color: var(--primary); }

/* Department section */
.kb-department {
    margin-bottom: 2rem;
}

.kb-department-header {
    display: flex; align-items: center; gap: 0.75rem;
    margin-bottom: 1.25rem; padding-bottom: 1rem;
    border-bottom: 1px solid var(--separator);
}
.kb-department-icon {
    width: 38px; height: 38px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px; background: var(--primary); color: #fff;
}
.kb-department-icon i { width: 18px; height: 18px; }
.kb-department-name {
    font-size: 1.1rem; font-weight: 700; color: var(--body);
    line-height: 1.2;
}
.kb-department-badge {
    font-size: 0.75rem; color: var(--alternate);
    line-height: 1.2;
}

/* Category grid inside department */
.kb-categories {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
@media (max-width: 1200px) { .kb-categories { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) { .kb-categories { grid-template-columns: 1fr; } }

.kb-category {
    border: 1px solid var(--separator); border-radius: 8px;
    padding: 1rem 1.25rem;
    transition: border-color 0.15s;
}
.kb-category:hover { border-color: var(--primary); }

.kb-category-header {
    display: flex; align-items: center; gap: 0.6rem;
    margin-bottom: 0.6rem; text-decoration: none;
}
.kb-category-icon {
    width: 30px; height: 30px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px; background: var(--separator); color: var(--body);
}
.kb-category-icon i { width: 14px; height: 14px; }
.kb-category-name {
    font-size: 0.95rem; font-weight: 600; color: var(--body);
    text-decoration: none;
}
.kb-category-name:hover { color: var(--primary); }

.kb-article-list { list-style: none; padding: 0; margin: 0 0 0.5rem 0; }
.kb-article-list li {
    padding: 0.25rem 0; padding-left: calc(30px + 0.6rem);
}
.kb-article-list a {
    text-decoration: none; color: var(--body); font-size: 0.85rem;
    position: relative; z-index: 1;
    display: block; padding: 0.15rem 0; border-radius: 3px;
}
.kb-article-list a:hover { color: var(--primary); }

.kb-view-all {
    padding-left: calc(30px + 0.6rem);
    font-size: 0.8rem; font-weight: 500;
}
.kb-view-all a { text-decoration: none; color: var(--primary); }
.kb-view-all a:hover { text-decoration: underline; }

/* ================================================
 * Mobile responsive
 * ================================================ */

@media (max-width: 768px) {
    /* Folder admin actions always visible on touch */
    .kb-folder-admin-actions { opacity: 1; }

    /* Subcategory header wraps on small screens */
    .kb-subcategory-header { flex-wrap: wrap; gap: 0.5rem; }

    /* Department header stacks */
    .kb-department-header { flex-wrap: wrap; }

    /* Breadcrumb smaller */
    .kb-breadcrumb { font-size: 0.8rem; }

    /* Post items tighter */
    .kb-post-item a { padding: 0.75rem 0.25rem; }

    /* Callout blocks */
    .kb-callout { padding: 0.75em 1em; }
}