/* =====================================================================
   Content editor (blog post and similar editors), SEO panel, category tree
   ===================================================================== */
.editor-bar {
    position: sticky; top: var(--topbar-h); z-index: 1010;
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    margin: -1.5rem -1.5rem 1.5rem; padding: .75rem 1.5rem;
    background: color-mix(in srgb, var(--a-surface) 92%, transparent); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--a-border);
}
@media (max-width: 991.98px) { .editor-bar { margin: -1rem -1rem 1rem; padding: .6rem 1rem; } }
.editor-bar-title { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; min-width: 0; }
.editor-bar-title strong { font-size: 1.05rem; }
.editor-bar-actions { margin-inline-start: auto; display: flex; gap: .5rem; align-items: center; }
.status-chip { font-size: .72rem; font-weight: 700; padding: .2rem .6rem; border-radius: 2rem; }
.status-chip.draft { background: #f1f3f5; color: #495057; }
.status-chip.published { background: #e6fcf5; color: #0ca678; }
.status-chip.scheduled { background: #e7f5ff; color: #1c7ed6; }
[data-bs-theme=dark] .status-chip { background: rgba(255, 255, 255, .08); }

.title-input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--a-text); font-size: 1.7rem; font-weight: 800; line-height: 1.5; padding: .25rem 0; }
.title-input::placeholder { color: var(--a-muted); opacity: .6; }

.slug-field { margin-top: .5rem; }
.slug-line { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; background: var(--a-surface-2); border: 1px solid var(--a-border); border-radius: .6rem; padding: .35rem .6rem; font-size: .85rem; }
.slug-line > i { color: var(--a-muted); font-size: 1.1rem; }
.slug-prefix { color: var(--a-muted); }
.slug-value { font-weight: 600; word-break: break-all; }
.slug-input { max-width: 340px; flex: 1; }
.slug-status { margin-inline-start: auto; font-size: .78rem; white-space: nowrap; }
.slug-line .btn { padding: .15rem .45rem; }

.editor-card { overflow: hidden; }
.editor-card .tox-tinymce { border: 0 !important; border-radius: 0 !important; }
.rich-editor { position: relative; min-height: 200px; }
.rich-editor-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .5rem; color: var(--a-muted); }
.content-stats { display: flex; flex-wrap: wrap; gap: 1.1rem; padding: .7rem 1.1rem; border-top: 1px solid var(--a-border); background: var(--a-surface-2); font-size: .78rem; color: var(--a-muted); }
.content-stats span { display: inline-flex; align-items: center; gap: .3rem; }
.content-stats i { font-size: 1rem; }

.publish-options { display: flex; flex-direction: column; gap: .5rem; }
.publish-option { display: flex; align-items: center; gap: .75rem; padding: .65rem .8rem; border: 1px solid var(--a-border); border-radius: .7rem; cursor: pointer; transition: all .15s; margin: 0; }
.publish-option input { accent-color: var(--a-primary); }
.publish-option > i { font-size: 1.35rem; color: var(--a-muted); }
.publish-option span { display: flex; flex-direction: column; line-height: 1.5; }
.publish-option small { color: var(--a-muted); font-size: .74rem; }
.publish-option.active { border-color: var(--a-primary); background: var(--a-primary-soft); }
.publish-option.active > i { color: var(--a-primary); }

.cover-preview { position: relative; border-radius: .7rem; overflow: hidden; aspect-ratio: 16 / 9; background: var(--a-surface-2); }
.cover-preview img { width: 100%; height: 100%; object-fit: cover; }
.cover-actions { position: absolute; inset-inline: .5rem; bottom: .5rem; display: flex; gap: .35rem; justify-content: flex-end; opacity: 0; transition: opacity .15s; }
.cover-preview:hover .cover-actions, .cover-preview:focus-within .cover-actions { opacity: 1; }

.category-tree .tree-body { max-height: 300px; overflow-y: auto; border: 1px solid var(--a-border); border-radius: .6rem; padding: .35rem .5rem; }
.tree-node { display: flex; align-items: center; gap: .25rem; padding: .2rem 0; }
.tree-node .form-check { display: flex; align-items: center; gap: .45rem; padding-inline-start: 0; }
.tree-node .form-check-input { margin: 0; float: none; }
.tree-toggle { border: 0; background: none; color: var(--a-muted); width: 1.4rem; height: 1.4rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .3rem; padding: 0; }
.tree-toggle:hover { background: var(--a-surface-2); }
.tree-toggle-placeholder { width: 1.4rem; display: inline-block; }
.tree-node mark { padding: 0; background: #ffe066; }
.tree-add { border: 1px dashed var(--a-border); border-radius: .6rem; padding: .6rem; margin-top: .5rem; }

.info-row { display: flex; justify-content: space-between; gap: .75rem; padding: .35rem 0; border-bottom: 1px dashed var(--a-border); }
.info-row:last-child { border-bottom: 0; }
.info-row > span:first-child { color: var(--a-muted); }

.preview-frame { width: 100%; height: 75vh; border: 0; background: #fff; border-radius: 0 0 1rem 1rem; }

/* ---------- SEO panel ---------- */
.seo-head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }
.seo-score { position: relative; width: 74px; height: 74px; flex-shrink: 0; }
.seo-score svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.seo-score path { fill: none; stroke-width: 3.2; stroke-linecap: round; }
.seo-score .track { stroke: var(--a-surface-2); }
.seo-score span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem; }
.seo-score.good .bar { stroke: #12b886; }
.seo-score.good span { color: #0ca678; }
.seo-score.improve .bar { stroke: #fab005; }
.seo-score.improve span { color: #f08c00; }
.seo-score.problem .bar { stroke: #fa5252; }
.seo-score.problem span { color: #e03131; }
.seo-tabs { border-color: var(--a-border); }
.seo-tabs .nav-link { color: var(--a-muted); font-size: .83rem; border: 0; border-bottom: 2px solid transparent; }
.seo-tabs .nav-link.active { color: var(--a-primary); background: none; border-bottom-color: var(--a-primary); }
.seo-tab-body { padding-top: 1rem; }
.seo-group { margin-bottom: 1rem; }
.seo-group-title { font-weight: 700; font-size: .85rem; margin-bottom: .35rem; }
.seo-check { display: flex; gap: .55rem; align-items: baseline; font-size: .83rem; padding: .3rem 0; }
.seo-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; transform: translateY(1px); }
.seo-dot.good { background: #12b886; }
.seo-dot.improve { background: #fab005; }
.seo-dot.problem { background: #fa5252; }
.length-meter { height: 5px; background: var(--a-surface-2); border-radius: 3px; margin-top: .35rem; overflow: hidden; }
.length-meter span { display: block; height: 100%; border-radius: 3px; transition: width .2s; }
.length-meter .good { background: #12b886; }
.length-meter .improve { background: #fab005; }
.length-meter .problem { background: #fa5252; }
.google-preview { background: #fff; border: 1px solid #dadce0; border-radius: .8rem; padding: 1rem 1.1rem; font-family: Arial, Tahoma, sans-serif; max-width: 650px; }
.google-preview.mobile { max-width: 390px; }
.google-preview .g-site { display: flex; gap: .6rem; align-items: center; margin-bottom: .35rem; }
.google-preview .g-favicon { width: 26px; height: 26px; border-radius: 50%; background: #f1f3f4; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #1a73e8; font-size: .75rem; }
.google-preview .g-site strong { display: block; color: #202124; font-size: .85rem; font-weight: 400; }
.google-preview .g-site small { color: #4d5156; font-size: .75rem; }
.google-preview .g-title { color: #1a0dab; font-size: 1.2rem; line-height: 1.5; }
.google-preview .g-desc { color: #4d5156; font-size: .86rem; line-height: 1.6; }
.social-card { border: 1px solid var(--a-border); border-radius: .8rem; overflow: hidden; max-width: 520px; background: var(--a-surface); }
.social-image { aspect-ratio: 1.91 / 1; background: var(--a-surface-2); display: flex; flex-direction: column; gap: .3rem; align-items: center; justify-content: center; color: var(--a-muted); }
.social-image img { width: 100%; height: 100%; object-fit: cover; }
.social-image i { font-size: 2rem; }
.social-body { padding: .7rem .9rem; display: flex; flex-direction: column; gap: .15rem; border-top: 1px solid var(--a-border); }
.social-body small { color: var(--a-muted); font-size: .7rem; direction: ltr; text-align: right; }
.social-body span { color: var(--a-muted); font-size: .8rem; }