/* ConvertFreely CMS dashboard - builds on Bootstrap 5.3 (light + dark via data-bs-theme). */
:root {
    --cf-sidebar-w: 248px;
    --cf-topbar-h: 60px;
    --cf-radius: .75rem;
    --cf-brand: #4f46e5;
    --bs-primary: #4f46e5;
    --bs-primary-rgb: 79, 70, 229;
    --bs-link-color: #4f46e5;
    --bs-link-color-rgb: 79, 70, 229;
    --bs-link-hover-color: #4338ca;
    --bs-border-radius: .5rem;
}
[data-bs-theme="dark"] {
    --bs-body-bg: #0f1117;
    --bs-tertiary-bg: #161a23;
    --bs-secondary-bg: #1b2030;
    --bs-link-color: #a5b4fc;
    --bs-link-color-rgb: 165, 180, 252;
    --bs-link-hover-color: #c7d2fe;
}
.btn-primary { --bs-btn-bg: #4f46e5; --bs-btn-border-color: #4f46e5; --bs-btn-hover-bg: #4338ca; --bs-btn-hover-border-color: #4338ca; --bs-btn-active-bg: #3730a3; --bs-btn-disabled-bg: #4f46e5; --bs-btn-disabled-border-color: #4f46e5; }
.btn-outline-primary { --bs-btn-color: #4f46e5; --bs-btn-border-color: #4f46e5; --bs-btn-hover-bg: #4f46e5; --bs-btn-hover-border-color: #4f46e5; --bs-btn-active-bg: #4338ca; }
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #a5b4fc; --bs-btn-border-color: #6366f1; }
[data-bs-theme="dark"] .btn-light {
    --bs-btn-color: var(--bs-body-color); --bs-btn-bg: var(--bs-tertiary-bg); --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-emphasis-color); --bs-btn-hover-bg: var(--bs-secondary-bg); --bs-btn-hover-border-color: var(--bs-border-color);
    --bs-btn-active-color: var(--bs-emphasis-color); --bs-btn-active-bg: var(--bs-secondary-bg); --bs-btn-active-border-color: var(--bs-border-color);
    --bs-btn-disabled-color: var(--bs-secondary-color); --bs-btn-disabled-bg: var(--bs-tertiary-bg); --bs-btn-disabled-border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .btn-light.text-danger { color: #f87171 !important; }
.nav-pills { --bs-nav-pills-link-active-bg: #4f46e5; }
.page-item.active .page-link, .form-check-input:checked { background-color: #4f46e5; border-color: #4f46e5; }
.progress-bar { background-color: #4f46e5; }

body.cf-body { background: var(--bs-tertiary-bg); min-height: 100vh; }
[data-bs-theme="light"] body.cf-body { background: #f5f6fa; }
.min-w-0 { min-width: 0; }
.cf-skip { position: absolute; left: 1rem; top: .5rem; z-index: 2000; background: var(--bs-body-bg); padding: .5rem 1rem; border-radius: .5rem; }

/* ----- Sidebar ----- */
.cf-sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--cf-sidebar-w); z-index: 1030;
    flex-direction: column; background: var(--bs-body-bg); border-right: 1px solid var(--bs-border-color);
}
.cf-brand { display: flex; align-items: center; gap: .6rem; height: var(--cf-topbar-h); padding: 0 1.25rem; font-weight: 600; color: var(--bs-body-color); text-decoration: none; flex-shrink: 0; }
.cf-brand small { font-weight: 500; color: var(--bs-secondary-color); }
/* Website logo: red-500 tile + pencil, "Convert" + red "Freely" (matches the site header) */
.cf-logo { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: .5rem; background: #ef4444; color: #fff; flex-shrink: 0; transition: transform .2s ease; }
.cf-logo svg { width: 18px; height: 18px; }
.cf-brand:hover .cf-logo, .cf-brand-stack:hover .cf-logo { transform: rotate(12deg); }
.cf-logo-lg { width: 48px; height: 48px; border-radius: .75rem; }
.cf-logo-lg svg { width: 26px; height: 26px; }
.cf-wordmark { font-weight: 900; letter-spacing: -.025em; font-size: 1.15rem; color: var(--bs-emphasis-color); white-space: nowrap; }
.cf-wordmark-accent { color: #ef4444; }
.cf-wordmark small { font-weight: 500; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-secondary-color); margin-left: .15rem; }
.cf-wordmark-lg { font-size: 1.5rem; }
.cf-brand-stack { display: inline-flex; align-items: center; gap: .6rem; }
.cf-nav { flex: 1; overflow-y: auto; padding: .5rem .75rem 1rem; }
.cf-nav-section { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); padding: 1rem .75rem .35rem; }
.cf-nav-link { display: flex; align-items: center; gap: .7rem; padding: .5rem .75rem; margin-bottom: 2px; border-radius: .5rem; color: var(--bs-body-color); text-decoration: none; font-size: .925rem; }
.cf-nav-link i { font-size: 1.05rem; opacity: .75; width: 1.1rem; text-align: center; }
.cf-nav-link:hover { background: var(--bs-secondary-bg); color: var(--bs-body-color); }
.cf-nav-link.active { background: rgba(79, 70, 229, .1); color: #4338ca; font-weight: 600; }
[data-bs-theme="dark"] .cf-nav-link.active { background: rgba(129, 140, 248, .15); color: #c7d2fe; }
.cf-nav-link.active i { opacity: 1; }
/* Collapsible groups (config/navigation.php items with children) */
.cf-nav-group { width: 100%; border: 0; background: none; text-align: left; }
.cf-nav-group.has-active { font-weight: 600; }
.cf-nav-group.has-active > i:first-child { opacity: 1; }
.cf-nav-caret { margin-left: auto; font-size: .75rem !important; width: auto !important; transition: transform .2s ease; }
.cf-nav-group.collapsed .cf-nav-caret { transform: rotate(-90deg); }
.cf-nav-sub { margin: 2px 0 6px 1.3rem; padding-left: .55rem; border-left: 1px solid var(--bs-border-color); }
.cf-nav-child { padding: .4rem .75rem; font-size: .9rem; color: var(--bs-secondary-color); }
.cf-nav-child.active { color: #4338ca; }
@media (prefers-reduced-motion: reduce) { .cf-logo, .cf-nav-caret { transition: none; } }
.cf-sidebar-foot { padding: .9rem 1.25rem; border-top: 1px solid var(--bs-border-color); font-size: .85rem; }
.cf-sidebar-foot a { color: var(--bs-secondary-color); text-decoration: none; }
.cf-offcanvas { --bs-offcanvas-width: 280px; }
.cf-offcanvas .offcanvas-header { padding: 0 1rem 0 0; }

/* ----- Main ----- */
.cf-main { min-height: 100vh; display: flex; flex-direction: column; }
@media (min-width: 992px) { .cf-main { margin-left: var(--cf-sidebar-w); } }
.cf-topbar {
    position: sticky; top: 0; z-index: 1020; height: var(--cf-topbar-h); display: flex; align-items: center; gap: .5rem;
    padding: 0 1rem; background: color-mix(in srgb, var(--bs-body-bg) 88%, transparent); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--bs-border-color);
}
@media (min-width: 768px) { .cf-topbar { padding: 0 1.5rem; } }
.cf-page-title { font-size: 1.1rem; font-weight: 600; margin: 0; }
.cf-content { flex: 1; padding: 1rem; width: 100%; max-width: 1440px; }
@media (min-width: 768px) { .cf-content { padding: 1.5rem; } }
.cf-avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(79, 70, 229, .12); color: #4338ca; font-weight: 600; font-size: .9rem; flex-shrink: 0; }
[data-bs-theme="dark"] .cf-avatar { color: #c7d2fe; background: rgba(129, 140, 248, .2); }
.cf-avatar-lg { width: 56px; height: 56px; font-size: 1.4rem; }

/* ----- Cards & tables ----- */
.card { --bs-card-border-radius: var(--cf-radius); --bs-card-inner-border-radius: calc(var(--cf-radius) - 1px); --bs-card-border-color: var(--bs-border-color-translucent); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.card-header { background: transparent; padding: .85rem 1rem; }
.card-footer { background: transparent; }
.cf-stat { transition: transform .15s ease, box-shadow .15s ease; color: var(--bs-body-color); }
.cf-stat:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(16, 24, 40, .08); }
.cf-stat-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: .65rem; font-size: 1.25rem; flex-shrink: 0; }
.cf-table { --bs-table-bg: transparent; }
.cf-table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); font-weight: 600; white-space: nowrap; border-bottom-width: 1px; }
.cf-table td, .cf-table th { padding: .7rem 1rem; }
.cf-table.table-sm td, .cf-table.table-sm th { padding: .5rem .75rem; }
.cf-check { width: 1%; }
.cf-title-cell { max-width: 420px; }
.cf-thumb { width: 52px; height: 36px; object-fit: cover; border-radius: .35rem; flex-shrink: 0; background: var(--bs-secondary-bg); }
.cf-thumb-empty { align-items: center; justify-content: center; color: var(--bs-secondary-color); }
.cf-tabs .nav-link { white-space: nowrap; padding: .4rem .8rem; font-size: .9rem; }
.cf-tabs .nav-link.active .badge { background: rgba(255, 255, 255, .25) !important; color: #fff !important; }
.cf-meta { max-width: 320px; font-family: var(--bs-font-monospace); font-size: .75rem; }
.cf-scroll-list { max-height: 320px; overflow-y: auto; }
.cf-checklist { max-height: 260px; overflow-y: auto; padding: .25rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; }
.cf-checklist .form-check { margin: .25rem .35rem .25rem 1.9rem; padding-left: 0; }
@media (min-width: 1200px) { .cf-sticky { position: sticky; top: calc(var(--cf-topbar-h) + 1rem); } }

/* ----- Editor ----- */
.note-editor.note-frame { border-radius: .5rem; border-color: var(--bs-border-color) !important; }
.note-editor .note-toolbar { background: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); border-radius: .5rem .5rem 0 0; }
.note-editor .note-editing-area .note-editable { background: var(--bs-body-bg); color: var(--bs-body-color); min-height: 420px; font-size: 1rem; line-height: 1.7; }
.note-editor .note-statusbar { background: var(--bs-tertiary-bg); }
.note-editable h2 { font-size: 1.5rem; margin-top: 1.5rem; }
.note-editable h3 { font-size: 1.2rem; margin-top: 1.25rem; }
.note-editable img { max-width: 100%; height: auto; }
.note-editable table { width: 100%; border-collapse: collapse; }
.note-editable td, .note-editable th { border: 1px solid var(--bs-border-color); padding: .4rem .6rem; }
.note-modal .note-modal-content { background: var(--bs-body-bg); color: var(--bs-body-color); }
.cf-counter { font-size: .75rem; color: var(--bs-secondary-color); text-align: right; margin-top: .2rem; }
.cf-counter.over { color: var(--bs-warning-text-emphasis); font-weight: 600; }
.cf-counter.hard-over { color: var(--bs-danger); }
.cf-serp { border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .9rem 1rem; background: var(--bs-body-bg); font-family: arial, sans-serif; }
.cf-serp-url { color: var(--bs-secondary-color); }
.cf-serp-title { color: #1a0dab; font-size: 1.15rem; line-height: 1.3; margin: .15rem 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-bs-theme="dark"] .cf-serp-title { color: #8ab4f8; }
.cf-serp-desc { color: var(--bs-secondary-color); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ----- Media ----- */
.cf-media-preview { aspect-ratio: 16 / 9; max-height: 240px; margin-inline: auto; border-radius: .5rem; overflow: hidden; background: var(--bs-secondary-bg); display: grid; place-items: center; border: 1px dashed var(--bs-border-color); text-align: center; color: var(--bs-secondary-color); }
.note-image-dialog .note-form-group:has(.note-image-url) { display: none; }
.cf-media-preview img { width: 100%; height: 100%; object-fit: cover; }
.cf-media-preview:not(.is-empty) { border-style: solid; }
.cf-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .75rem; }
.cf-media-grid-lg { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.cf-media-thumb { display: block; aspect-ratio: 4 / 3; background: var(--bs-secondary-bg) repeating-conic-gradient(rgba(127,127,127,.12) 0 25%, transparent 0 50%) 50% / 16px 16px; overflow: hidden; border-radius: var(--cf-radius) var(--cf-radius) 0 0; }
.cf-media-thumb img { width: 100%; height: 100%; object-fit: contain; }
.cf-pick { position: relative; border: 2px solid transparent; border-radius: .5rem; overflow: hidden; padding: 0; background: var(--bs-secondary-bg); aspect-ratio: 1; cursor: pointer; }
.cf-pick img { width: 100%; height: 100%; object-fit: cover; }
.cf-pick:hover, .cf-pick:focus-visible { border-color: #6366f1; outline: none; }
.cf-pick span { position: absolute; inset: auto 0 0 0; font-size: .7rem; padding: .2rem .35rem; background: rgba(0, 0, 0, .55); color: #fff; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.cf-dropzone { border: 2px dashed var(--bs-border-color); border-radius: var(--cf-radius); padding: 1.25rem; text-align: center; color: var(--bs-secondary-color); background: var(--bs-body-bg); transition: border-color .15s, background .15s; }
.cf-dropzone.is-over { border-color: #6366f1; background: rgba(99, 102, 241, .06); }

/* ----- Auth ----- */
body.cf-auth { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: radial-gradient(1200px 600px at 10% -10%, rgba(99, 102, 241, .18), transparent), radial-gradient(900px 500px at 110% 110%, rgba(79, 70, 229, .14), transparent), var(--bs-tertiary-bg); }
.cf-auth-card { width: 100%; max-width: 420px; border-radius: 1rem; }
.cf-code-input { letter-spacing: .35em; font-family: var(--bs-font-monospace); }
.cf-qr { background: #fff; padding: .5rem; border-radius: .5rem; border: 1px solid var(--bs-border-color); }
.cf-codes { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .75rem 1rem; font-size: .95rem; column-count: 2; max-width: 360px; }

/* ----- Preview / bare ----- */
body.cf-bare { background: var(--bs-body-bg); }
.cf-preview-bar { position: sticky; top: 0; z-index: 10; display: flex; gap: 1rem; justify-content: space-between; align-items: center; padding: .6rem 1rem; background: #1e1b4b; color: #e0e7ff; font-size: .85rem; }
.cf-article { max-width: 760px; padding: 2.5rem 1rem 4rem; }
.cf-article h1 { font-size: 2.1rem; font-weight: 700; line-height: 1.2; margin-bottom: 1rem; }
.cf-article-hero { width: 100%; border-radius: .75rem; margin: 1rem 0 1.5rem; aspect-ratio: 16 / 9; object-fit: cover; }
.cf-tldr { border-left: 4px solid #6366f1; background: rgba(99, 102, 241, .07); padding: .9rem 1rem; border-radius: .25rem .5rem .5rem .25rem; margin-bottom: 1.25rem; }
.cf-article-body { font-size: 1.05rem; line-height: 1.75; }
.cf-callout, .note-editable .cf-callout { border: 1px solid var(--bs-border-color); background: rgba(239, 68, 68, .08); border-radius: .75rem; padding: 1rem; margin: 1.5rem 0; }
.cf-article-body h2 { font-size: 1.6rem; margin: 2rem 0 .75rem; font-weight: 700; }
.cf-article-body h3 { font-size: 1.25rem; margin: 1.5rem 0 .5rem; font-weight: 600; }
.cf-article-body img { max-width: 100%; height: auto; border-radius: .5rem; }
.cf-article-body table { width: 100%; margin: 1rem 0; border-collapse: collapse; font-size: .95rem; }
.cf-article-body th, .cf-article-body td { border: 1px solid var(--bs-border-color); padding: .5rem .75rem; }
.cf-article-body blockquote { border-left: 4px solid var(--bs-border-color); padding-left: 1rem; color: var(--bs-secondary-color); }
.cf-article-body pre { background: var(--bs-tertiary-bg); padding: 1rem; border-radius: .5rem; overflow-x: auto; }

/* ----- Website page blocks (editor + previews; the website applies its own styling) ----- */
:is(.note-editable, .cf-page-body) .cf-callout { border: 0; border-left: 4px solid #3b82f6; background: rgba(59, 130, 246, .08); border-radius: 0 .5rem .5rem 0; padding: .9rem 1rem; margin: 1rem 0; }
:is(.note-editable, .cf-page-body) .cf-callout-success { border-left-color: #22c55e; background: rgba(34, 197, 94, .09); }
:is(.note-editable, .cf-page-body) .cf-callout-warning { border-left-color: #eab308; background: rgba(234, 179, 8, .1); }
:is(.note-editable, .cf-page-body) .cf-callout-danger { border-left-color: #ef4444; background: rgba(239, 68, 68, .08); }
:is(.note-editable, .cf-page-body) .cf-callout-purple { border-left-color: #a855f7; background: rgba(168, 85, 247, .08); }
:is(.note-editable, .cf-page-body) .cf-box { border: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg); border-radius: .5rem; padding: .9rem 1rem; margin: .75rem 0; }
:is(.note-editable, .cf-page-body) .cf-box-danger { border: 2px solid rgba(239, 68, 68, .35); background: rgba(239, 68, 68, .06); }
:is(.note-editable, .cf-page-body) .cf-box-warning { border: 2px solid rgba(234, 179, 8, .4); background: rgba(234, 179, 8, .08); }
:is(.note-editable, .cf-page-body) .cf-box-accent { border-left: 4px solid #ef4444; }
:is(.note-editable, .cf-page-body) .cf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; margin: 1rem 0; }
:is(.note-editable, .cf-page-body) .cf-grid > .cf-box { margin: 0; }
:is(.note-editable, .cf-page-body) .cf-banner { background: linear-gradient(90deg, #ef4444, #dc2626); color: #fff; border-radius: .75rem; padding: 1rem 1.25rem; margin: 1rem 0; }
:is(.note-editable, .cf-page-body) .cf-banner.cf-tone-blue { background: linear-gradient(90deg, #3b82f6, #2563eb); }
:is(.note-editable, .cf-page-body) .cf-banner.cf-tone-yellow { background: linear-gradient(90deg, #eab308, #ca8a04); }
:is(.note-editable, .cf-page-body) .cf-banner :is(h2, h3, a, strong) { color: #fff; }
:is(.note-editable, .cf-page-body) .cf-closing { text-align: center; border: 2px solid rgba(239, 68, 68, .3); background: rgba(239, 68, 68, .06); border-radius: .75rem; padding: 1.25rem; margin: 1.5rem 0; }
:is(.note-editable, .cf-page-body) .cf-closing.cf-tone-blue { border-color: rgba(59, 130, 246, .35); background: rgba(59, 130, 246, .06); }
:is(.note-editable, .cf-page-body) .cf-closing.cf-tone-yellow { border-color: rgba(234, 179, 8, .4); background: rgba(234, 179, 8, .08); }
:is(.note-editable, .cf-page-body) .cf-closing.cf-tone-purple { border-color: rgba(168, 85, 247, .35); background: rgba(168, 85, 247, .06); }
:is(.note-editable, .cf-page-body) .cf-contact { border: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg); border-radius: .5rem; padding: .9rem 1rem; margin: 1rem 0; }
:is(.note-editable, .cf-page-body) .cf-contact p { margin-bottom: .35rem; }
:is(.note-editable, .cf-page-body) ul.cf-checklist { list-style: none; padding-left: .25rem; }
:is(.note-editable, .cf-page-body) ul.cf-checklist > li::before { content: "✓"; color: #16a34a; font-weight: 700; margin-right: .6rem; }
:is(.note-editable, .cf-page-body) .cf-note { font-size: .875rem; color: var(--bs-secondary-color); font-style: italic; }
:is(.note-editable, .cf-page-body) h2.cf-unnumbered::after { content: " (no number)"; font-size: .75rem; font-weight: 400; color: var(--bs-secondary-color); }
:is(.note-editable, .cf-page-body) .cf-widget-cookie-settings { display: inline-block; background: #3b82f6; color: #fff; border-radius: .5rem; padding: .35rem .9rem; font-weight: 600; font-size: .9rem; }
.cf-page-body.cf-numbered { counter-reset: cfsec; }
.cf-page-body.cf-numbered > h2:not(.cf-unnumbered)::before { counter-increment: cfsec; content: counter(cfsec); display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin-right: .6rem; border-radius: 50%; background: #ef4444; color: #fff; font-size: 1rem; vertical-align: middle; }
.cf-blocks-menu { max-height: 360px; overflow-y: auto; }

/* ----- Small screens ----- */
@media (max-width: 575.98px) {
    .cf-content { padding: .75rem; }
    .card-body { padding: .9rem; }
    .cf-table td, .cf-table th { padding: .6rem .6rem; }
    .cf-filters .form-label { margin-bottom: .2rem; }
}
.cf-content a:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item) { text-decoration: none; }
.cf-content a:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item):hover,
.cf-content p a:not(.btn), .cf-content .form-text a { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
/* Cards-layout blocks (About / Contact / Chrome extension pages) */
:is(.note-editable, .cf-page-body) .cf-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; margin: 1rem 0; }
:is(.note-editable, .cf-page-body) :is(.cf-card, .cf-card-inline, .cf-card-compact) { border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); border-radius: .5rem; padding: .9rem 1rem; box-shadow: 0 1px 2px rgba(16, 24, 40, .06); }
:is(.note-editable, .cf-page-body) :is(.cf-card, .cf-card-compact) { text-align: center; }
:is(.note-editable, .cf-page-body) :is(.cf-card, .cf-card-inline, .cf-card-compact) h3 { font-size: 1rem; margin-top: 0; }
:is(.note-editable, .cf-page-body) .cf-media { border-left: 3px solid rgba(239, 68, 68, .35); padding-left: .9rem; margin: 1rem 0; }
:is(.note-editable, .cf-page-body) [class*="cf-icon-"]::before { display: inline-block; margin-right: .4rem; padding: 0 .35rem; border-radius: .25rem; background: rgba(239, 68, 68, .1); color: #dc2626; font-size: .7rem; font-weight: 600; font-style: normal; vertical-align: middle; }
:is(.note-editable, .cf-page-body) :is(.cf-card, .cf-card-compact, .cf-media)[class*="cf-icon-"]::before { display: table; margin: 0 auto .4rem; }
:is(.note-editable, .cf-page-body) .cf-icon-pencil::before { content: "pencil"; }
:is(.note-editable, .cf-page-body) .cf-icon-target::before { content: "target"; }
:is(.note-editable, .cf-page-body) .cf-icon-users::before { content: "users"; }
:is(.note-editable, .cf-page-body) .cf-icon-user::before { content: "user"; }
:is(.note-editable, .cf-page-body) .cf-icon-heart::before { content: "heart"; }
:is(.note-editable, .cf-page-body) .cf-icon-code::before { content: "code"; }
:is(.note-editable, .cf-page-body) .cf-icon-map-pin::before { content: "map pin"; }
:is(.note-editable, .cf-page-body) .cf-icon-mail::before { content: "mail"; }
:is(.note-editable, .cf-page-body) .cf-icon-chrome::before { content: "chrome"; }
:is(.note-editable, .cf-page-body) .cf-icon-message::before { content: "message"; }
:is(.note-editable, .cf-page-body) .cf-icon-bug::before { content: "bug"; }
:is(.note-editable, .cf-page-body) .cf-icon-help-circle::before { content: "help"; }
:is(.note-editable, .cf-page-body) .cf-icon-zap::before { content: "zap"; }
:is(.note-editable, .cf-page-body) .cf-icon-star::before { content: "star"; }
:is(.note-editable, .cf-page-body) .cf-icon-lock::before { content: "lock"; }
:is(.note-editable, .cf-page-body) .cf-icon-shield::before { content: "shield"; }
:is(.note-editable, .cf-page-body) .cf-icon-info::before { content: "info"; }
:is(.note-editable, .cf-page-body) .cf-icon-globe::before { content: "globe"; }
:is(.note-editable, .cf-page-body) .cf-icon-file-text::before { content: "document"; }
:is(.note-editable, .cf-page-body) .cf-icon-cookie::before { content: "cookie"; }
:is(.note-editable, .cf-page-body) .cf-icon-settings::before { content: "settings"; }
:is(.note-editable, .cf-page-body) :is(.cf-button, .cf-button-outline) { display: inline-block; border-radius: .5rem; padding: .3rem .9rem; font-weight: 600; font-size: .9rem; text-decoration: none; }
:is(.note-editable, .cf-page-body) .cf-button { background: #ef4444; color: #fff; }
:is(.note-editable, .cf-page-body) .cf-button-outline { border: 2px solid var(--bs-border-color); color: var(--bs-body-color); }
:is(.note-editable, .cf-page-body) .cf-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; }
:is(.note-editable, .cf-page-body) .cf-widget-chrome-download { display: inline-block; background: #dc2626; color: #fff; border-radius: .5rem; padding: .35rem .9rem; font-weight: 600; font-size: .9rem; }
:is(.note-editable, .cf-page-body) ul.cf-boxed { list-style: none; padding-left: 0; }
:is(.note-editable, .cf-page-body) ul.cf-boxed > li { background: var(--bs-tertiary-bg); border-radius: .4rem; padding: .4rem .75rem; margin-bottom: .35rem; font-size: .9rem; }
:is(.note-editable, .cf-page-body) h3.cf-eyebrow { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color); border-top: 1px solid var(--bs-border-color); padding-top: .75rem; }
:is(.note-editable, .cf-page-body) :is(.cf-small, ul.cf-small) { font-size: .875rem; }
:is(.note-editable, .cf-page-body) .cf-center { text-align: center; }
:is(.note-editable, .cf-page-body) .cf-footnote { text-align: center; font-size: .875rem; color: var(--bs-secondary-color); }
/* Homepage sections */
.cf-hp-row { cursor: grab; }
.cf-hp-row.cf-hp-dragging { opacity: .5; }
.cf-hp-row :is(input, select, button) { cursor: auto; }
.cf-hp-grip { font-size: 1.1rem; }
.cf-hp-swatch { width: 1rem; height: 1rem; border-radius: .3rem; background: #9ca3af; flex-shrink: 0; }
.cf-hp-swatch[data-color="cyan"] { background: #06b6d4; } .cf-hp-swatch[data-color="blue"] { background: #3b82f6; }
.cf-hp-swatch[data-color="teal"] { background: #14b8a6; } .cf-hp-swatch[data-color="green"] { background: #22c55e; }
.cf-hp-swatch[data-color="purple"] { background: #a855f7; } .cf-hp-swatch[data-color="orange"] { background: #f97316; }
.cf-hp-swatch[data-color="red"] { background: #ef4444; } .cf-hp-swatch[data-color="pink"] { background: #ec4899; }
.cf-hp-swatch[data-color="indigo"] { background: #6366f1; }
/* Tool page editor */
.cf-tl-row { cursor: grab; }
.cf-tl-row :is(input, textarea, button) { cursor: auto; }
.cf-tl-num { min-width: 1.5rem; }
/* Chrome extension (tile colours match the extension popup) */
.cf-ext-icon { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%); }
.cf-ext-icon img { display: block; }
.cf-ext-icon-lg { width: 48px; height: 48px; border-radius: 12px; font-size: 1.25rem; }
.cf-ext-icon[data-color="green"] { background: linear-gradient(135deg, #34d399 0%, #10b981 100%); }
.cf-ext-icon[data-color="purple"] { background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%); }
.cf-ext-icon[data-color="indigo"] { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); }
.cf-ext-icon[data-color="pink"] { background: linear-gradient(135deg, #f472b6 0%, #ec4899 100%); }
.cf-ext-icon[data-color="red"] { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
.cf-ext-icon[data-color="orange"] { background: linear-gradient(135deg, #fb923c 0%, #f97316 100%); }
.cf-ext-icon[data-color="teal"] { background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%); }
.cf-ext-icon[data-color="cyan"] { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); }
.cf-ext-hidden td:not(:last-child) { opacity: .55; }