/* ═══════════════════════════════════════════════════════
   TechWayFit CMS — Admin Styles
   Design system based on CourseWorkflow Dashboard spec.
   Light / Dark themes via CSS custom properties.
   ══════════════════════════════════════════════════════ */

/* ── Theme: Light (default) ──────────────────────────── */
:root {
    /* Layout */
    --cms-topnav-h:        46px;
    --cms-sidebar-w:       240px;

    /* Navigation */
    --cms-topnav-bg:       #0F2044;
    --cms-topnav-text:     rgba(255,255,255,0.9);
    --cms-topnav-muted:    rgba(255,255,255,0.55);
    --cms-topnav-border:   rgba(255,255,255,0.1);
    --cms-topnav-hover-bg: rgba(255,255,255,0.08);

    /* Sidebar */
    --cms-sidebar-bg:      #ffffff;
    --cms-sidebar-border:  #D1DCE8;

    /* Accent */
    --cms-accent:          #0078D4;
    --cms-accent-hover:    #006CBE;
    --cms-accent-light:    #EBF5FF;

    /* Nav links */
    --cms-nav-hover-bg:    #F3F6FB;
    --cms-nav-active-bg:   #EBF5FF;
    --cms-nav-active-border: #0078D4;
    --cms-section-lbl:     #A0AEC0;
    --cms-link-color:      #6B7C93;
    --cms-link-active:     #0078D4;

    /* Page chrome */
    --cms-body-bg:         #E8EEF4;
    --cms-text:            #1B2A3B;
    --cms-muted:           #6B7C93;
    --cms-border:          #D1DCE8;

    /* Cards & surfaces */
    --cms-card-bg:         #ffffff;
    --cms-card-radius:     6px;
    --cms-card-shadow:     0 1px 4px rgba(0,0,0,.07);
    --cms-card-shadow-hover: 0 4px 12px rgba(0,0,0,.11);

    /* Tables */
    --cms-table-head-bg:   #F0F4F8;
    --cms-table-row-hover: #F8FAFE;

    /* Inputs */
    --cms-input-bg:        #ffffff;
    --cms-input-border:    #D1DCE8;
    --cms-input-focus:     #0078D4;
    --cms-input-ring:      rgba(0,120,212,0.15);

    /* Badges */
    --cms-badge-draft-bg:    #fef3c7;
    --cms-badge-draft-text:  #92400e;
    --cms-badge-pub-bg:      #d1fae5;
    --cms-badge-pub-text:    #065f46;
    --cms-badge-health-green-bg:   #d1fae5;
    --cms-badge-health-green-text: #065f46;
    --cms-badge-health-amber-bg:   #fef3c7;
    --cms-badge-health-amber-text: #92400e;
    --cms-badge-health-red-bg:     #fee2e2;
    --cms-badge-health-red-text:   #991b1b;

    /* Attention items */
    --cms-attention-bg:             #fafafa;
    --cms-attention-border:         #e5e7eb;
    --cms-attention-warn-bg:        #fffbeb;
    --cms-attention-warn-border:    #fde68a;
    --cms-attention-danger-bg:      #fef2f2;
    --cms-attention-danger-border:  #fca5a5;
    --cms-attention-info-bg:        #eff6ff;
    --cms-attention-info-border:    #bfdbfe;

    /* Terminals / login */
    --cms-terminal-bg:     #1e1e2e;
    --cms-terminal-text:   #a6e3a1;
    --cms-login-bg:        #ffffff;
    --cms-login-shadow:    0 4px 24px rgba(0,0,0,.10);
}

/* ── Theme: Dark ─────────────────────────────────────── */
body.theme-dark {
    --cms-topnav-bg:       #0F2044;
    --cms-topnav-text:     rgba(255,255,255,0.9);
    --cms-topnav-muted:    rgba(255,255,255,0.45);
    --cms-topnav-border:   rgba(255,255,255,0.08);
    --cms-topnav-hover-bg: rgba(255,255,255,0.08);

    --cms-sidebar-bg:      #1e1e2e;
    --cms-sidebar-border:  rgba(255,255,255,0.07);

    --cms-accent:          #7c6ff7;
    --cms-accent-hover:    #6558e0;
    --cms-accent-light:    rgba(124,111,247,0.15);

    --cms-nav-hover-bg:    rgba(124,111,247,0.12);
    --cms-nav-active-bg:   rgba(124,111,247,0.22);
    --cms-nav-active-border: #7c6ff7;
    --cms-section-lbl:     rgba(255,255,255,0.32);
    --cms-link-color:      rgba(255,255,255,0.65);
    --cms-link-active:     #ffffff;

    --cms-body-bg:         #121218;
    --cms-text:            #e2e8f0;
    --cms-muted:           #94a3b8;
    --cms-border:          #2d2d44;

    --cms-card-bg:         #1e1e2e;
    --cms-card-shadow:     0 1px 4px rgba(0,0,0,.30);
    --cms-card-shadow-hover: 0 4px 14px rgba(0,0,0,.40);

    --cms-table-head-bg:   #16162a;
    --cms-table-row-hover: rgba(255,255,255,0.03);

    --cms-input-bg:        #16162a;
    --cms-input-border:    #2d2d44;
    --cms-input-focus:     #7c6ff7;
    --cms-input-ring:      rgba(124,111,247,0.18);

    --cms-badge-draft-bg:    rgba(254,243,199,0.15);
    --cms-badge-draft-text:  #fbbf24;
    --cms-badge-pub-bg:      rgba(209,250,229,0.12);
    --cms-badge-pub-text:    #34d399;
    --cms-badge-health-green-bg:   rgba(209,250,229,0.12);
    --cms-badge-health-green-text: #34d399;
    --cms-badge-health-amber-bg:   rgba(254,243,199,0.15);
    --cms-badge-health-amber-text: #fbbf24;
    --cms-badge-health-red-bg:     rgba(254,226,226,0.12);
    --cms-badge-health-red-text:   #f87171;

    --cms-attention-bg:             #1a1a2e;
    --cms-attention-border:         #2d2d44;
    --cms-attention-warn-bg:        rgba(254,243,199,0.05);
    --cms-attention-warn-border:    rgba(253,230,138,0.25);
    --cms-attention-danger-bg:      rgba(254,226,226,0.05);
    --cms-attention-danger-border:  rgba(252,165,165,0.25);
    --cms-attention-info-bg:        rgba(239,246,255,0.05);
    --cms-attention-info-border:    rgba(191,219,254,0.25);

    --cms-terminal-bg:     #0d0d16;
    --cms-terminal-text:   #a6e3a1;
    --cms-login-bg:        #1e1e2e;
    --cms-login-shadow:    0 4px 24px rgba(0,0,0,.40);
}

/* ── Base ────────────────────────────────────────────── */
* { box-sizing: border-box; }

body.cms-body {
    background: var(--cms-body-bg);
    font-family: 'Segoe UI', system-ui, sans-serif;
    color: var(--cms-text);
    font-size: 14px;
}

/* ── Top Navigation Bar ──────────────────────────────── */
.cms-topnav {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--cms-topnav-h);
    background: var(--cms-topnav-bg);
    color: var(--cms-topnav-text);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 12px;
    z-index: 1100;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    flex-shrink: 0;
}

.cms-topnav-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #29B6F6;
    text-decoration: none;
    letter-spacing: 0.3px;
}
.cms-topnav-brand .fa { font-size: 14px; }
.cms-topnav-brand:hover { color: #64D0FF; }

.cms-topnav-sep {
    width: 1px;
    height: 22px;
    background: var(--cms-topnav-border);
    flex-shrink: 0;
}

.cms-topnav-spacer { flex: 1; }

.cms-topnav-btn {
    background: none;
    border: 1px solid var(--cms-topnav-border);
    color: var(--cms-topnav-text);
    cursor: pointer;
    width: 30px; height: 30px;
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    transition: background .15s, border-color .15s;
    text-decoration: none;
}
.cms-topnav-btn:hover {
    background: var(--cms-topnav-hover-bg);
    border-color: rgba(255,255,255,0.25);
    color: #fff;
}

.cms-topnav-label {
    font-size: 11px;
    color: var(--cms-topnav-muted);
    white-space: nowrap;
}

.cms-topnav-user {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--cms-topnav-muted);
}

.cms-topnav-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--cms-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: #fff;
    flex-shrink: 0;
    text-transform: uppercase;
}

/* ── Sidebar ─────────────────────────────────────────── */
.cms-sidebar {
    position: fixed;
    top: var(--cms-topnav-h);
    left: 0;
    bottom: 0;
    width: var(--cms-sidebar-w);
    background: var(--cms-sidebar-bg);
    border-right: 1px solid var(--cms-sidebar-border);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    overflow-y: auto;
}

.cms-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 12px;
    color: var(--cms-text);
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid var(--cms-sidebar-border);
    flex-shrink: 0;
    display: none; /* hidden — branding moved to topnav */
}

.cms-sidebar-nav {
    flex: 1;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cms-nav-section {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--cms-section-lbl);
    padding: 14px 10px 4px;
}

.cms-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 10px;
    border-radius: 4px;
    color: var(--cms-link-color);
    text-decoration: none;
    font-size: .855rem;
    transition: background .12s, color .12s;
    border: none;
    border-left: 3px solid transparent;
    background: transparent;
    cursor: pointer;
    text-align: left;
    width: 100%;
}
.cms-nav-link .fa {
    width: 16px; text-align: center;
    flex-shrink: 0; font-size: .88rem;
}
.cms-nav-link:hover {
    background: var(--cms-nav-hover-bg);
    color: var(--cms-text);
    border-left-color: transparent;
}
.cms-nav-link.active {
    background: var(--cms-nav-active-bg);
    color: var(--cms-link-active);
    border-left-color: var(--cms-nav-active-border);
    font-weight: 600;
}
.cms-nav-link.active .fa { color: var(--cms-accent); }

.cms-sidebar-footer {
    padding: 10px;
    border-top: 1px solid var(--cms-sidebar-border);
    flex-shrink: 0;
}
.cms-nav-logout { color: var(--cms-muted); }
.cms-nav-logout:hover {
    background: rgba(239,68,68,.10);
    color: #ef4444;
    border-left-color: transparent;
}

/* ── Main content ────────────────────────────────────── */
.cms-main {
    padding: 24px 28px;
    margin-top: var(--cms-topnav-h);
}
.cms-main.with-sidebar {
    margin-left: var(--cms-sidebar-w);
}

/* ── Sticky edit sidebar ─────────────────────────────── */
.cms-sidebar-col {
    position: sticky;
    top: 24px;
    align-self: flex-start;
}
.cms-edit-sidebar {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--cms-border) transparent;
}

/* ── Stat Cards ──────────────────────────────────────── */
.stat-card {
    background: var(--cms-card-bg);
    border-radius: var(--cms-card-radius);
    padding: 20px 18px;
    box-shadow: var(--cms-card-shadow);
    border: 1px solid var(--cms-border);
    transition: box-shadow .15s;
}
.stat-card:hover { box-shadow: var(--cms-card-shadow-hover); }
.stat-card .stat-num {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--cms-accent);
}

/* ── Tables ──────────────────────────────────────────── */
.cms-table {
    background: var(--cms-card-bg);
    border-radius: var(--cms-card-radius);
    overflow: hidden;
    box-shadow: var(--cms-card-shadow);
    border: 1px solid var(--cms-border);
}
.cms-table table { margin: 0; }
.cms-table thead th {
    background: var(--cms-table-head-bg);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--cms-muted);
    border-bottom: 1px solid var(--cms-border);
    padding: 10px 14px;
}
.cms-table tbody td {
    padding: 10px 14px;
    font-size: .855rem;
    color: var(--cms-text);
    border-bottom: 1px solid var(--cms-border);
}
.cms-table tbody tr:last-child td { border-bottom: none; }
.cms-table tbody tr:hover td { background: var(--cms-table-row-hover); }

/* ── Badges ──────────────────────────────────────────── */
.badge-draft {
    background: var(--cms-badge-draft-bg);
    color: var(--cms-badge-draft-text);
    font-size: .74rem;
    border-radius: 12px;
    padding: 3px 9px;
}
.badge-published {
    background: var(--cms-badge-pub-bg);
    color: var(--cms-badge-pub-text);
    font-size: .74rem;
    border-radius: 12px;
    padding: 3px 9px;
}
.badge-health-green {
    background: var(--cms-badge-health-green-bg);
    color: var(--cms-badge-health-green-text);
    font-size: .71rem; border-radius: 12px; padding: 3px 8px;
}
.badge-health-amber {
    background: var(--cms-badge-health-amber-bg);
    color: var(--cms-badge-health-amber-text);
    font-size: .71rem; border-radius: 12px; padding: 3px 8px;
}
.badge-health-red {
    background: var(--cms-badge-health-red-bg);
    color: var(--cms-badge-health-red-text);
    font-size: .71rem; border-radius: 12px; padding: 3px 8px;
}

/* ── Needs Attention items ───────────────────────────── */
.attention-item {
    border: 1px solid var(--cms-attention-border);
    background: var(--cms-attention-bg);
    border-radius: var(--cms-card-radius);
}
.attention-item.attention-warning {
    border-color: var(--cms-attention-warn-border);
    background: var(--cms-attention-warn-bg);
}
.attention-item.attention-danger {
    border-color: var(--cms-attention-danger-border);
    background: var(--cms-attention-danger-bg);
}
.attention-item.attention-info {
    border-color: var(--cms-attention-info-border);
    background: var(--cms-attention-info-bg);
}
.attention-item.attention-secondary {
    border-color: var(--cms-attention-border);
    background: var(--cms-attention-bg);
}

/* ── Editor card ─────────────────────────────────────── */
.editor-card {
    background: var(--cms-card-bg);
    border-radius: var(--cms-card-radius);
    padding: 24px 28px;
    box-shadow: var(--cms-card-shadow);
    border: 1px solid var(--cms-border);
}

.card-section-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--cms-accent);
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--cms-accent-light);
}

/* ── Tag picker ──────────────────────────────────────── */
.tag-picker-wrap { background: var(--cms-table-head-bg); }
.tag-picker { background: var(--cms-table-head-bg); }
.tag-picker .form-check { padding-left: 1.6rem; }

/* ── Publish terminal ────────────────────────────────── */
.publish-log {
    background: var(--cms-terminal-bg);
    color: var(--cms-terminal-text);
    font-family: monospace;
    font-size: .84rem;
    border-radius: 6px;
    padding: 16px;
    max-height: 400px;
    overflow-y: auto;
}

/* ── Login ───────────────────────────────────────────── */
.login-card {
    max-width: 380px;
    margin: 80px auto;
    background: var(--cms-login-bg);
    border-radius: 10px;
    padding: 36px;
    box-shadow: var(--cms-login-shadow);
    border: 1px solid var(--cms-border);
}
.login-card .brand {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--cms-accent);
}

/* ── Action buttons ──────────────────────────────────── */
.btn-cms-primary {
    background: var(--cms-accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 7px 16px;
    font-size: .84rem;
    font-weight: 600;
}
.btn-cms-primary:hover {
    background: var(--cms-accent-hover);
    color: #fff;
}

/* ── Bootstrap dark-mode overrides ──────────────────── */
body.theme-dark .form-control,
body.theme-dark .form-select,
body.theme-dark .input-group-text {
    background-color: var(--cms-input-bg);
    border-color: var(--cms-input-border);
    color: var(--cms-text);
}
body.theme-dark .form-control:focus,
body.theme-dark .form-select:focus {
    background-color: var(--cms-input-bg);
    border-color: var(--cms-input-focus);
    box-shadow: 0 0 0 3px var(--cms-input-ring);
    color: var(--cms-text);
}
body.theme-dark .form-control::placeholder { color: var(--cms-muted); opacity: 1; }
body.theme-dark .card {
    background-color: var(--cms-card-bg);
    border-color: var(--cms-border);
}
body.theme-dark .card-header,
body.theme-dark .card-footer {
    background-color: var(--cms-table-head-bg);
    border-color: var(--cms-border);
}
body.theme-dark .table {
    --bs-table-bg: var(--cms-card-bg);
    --bs-table-striped-bg: var(--cms-table-head-bg);
    --bs-table-hover-bg: var(--cms-table-row-hover);
    --bs-table-border-color: var(--cms-border);
    color: var(--cms-text);
}
body.theme-dark .modal-content {
    background-color: var(--cms-card-bg);
    border-color: var(--cms-border);
}
body.theme-dark .modal-header,
body.theme-dark .modal-footer {
    background-color: var(--cms-table-head-bg);
    border-color: var(--cms-border);
    color: var(--cms-text);
}
body.theme-dark .btn-outline-secondary {
    color: var(--cms-muted);
    border-color: var(--cms-border);
}
body.theme-dark .btn-outline-secondary:hover {
    background-color: var(--cms-nav-hover-bg);
    color: var(--cms-text);
    border-color: var(--cms-border);
}
body.theme-dark .alert-success {
    background-color: rgba(52,211,153,.12);
    border-color: rgba(52,211,153,.25);
    color: #34d399;
}
body.theme-dark .alert-danger {
    background-color: rgba(248,113,113,.1);
    border-color: rgba(248,113,113,.25);
    color: #f87171;
}
body.theme-dark .alert-info {
    background-color: rgba(96,165,250,.1);
    border-color: rgba(96,165,250,.25);
    color: #60a5fa;
}
body.theme-dark .text-muted { color: var(--cms-muted) !important; }
body.theme-dark .border,
body.theme-dark .border-top,
body.theme-dark .border-bottom { border-color: var(--cms-border) !important; }
body.theme-dark .bg-white { background-color: var(--cms-card-bg) !important; }
body.theme-dark .bg-light { background-color: var(--cms-table-head-bg) !important; }
body.theme-dark .dropdown-menu {
    background-color: var(--cms-card-bg);
    border-color: var(--cms-border);
}
body.theme-dark .dropdown-item { color: var(--cms-text); }
body.theme-dark .dropdown-item:hover {
    background-color: var(--cms-nav-hover-bg);
    color: var(--cms-text);
}

/* ── Jodit editor isolation ──────────────────────────── */
.jodit-container { contain: layout; }
.jodit-wysiwyg {
    overflow: auto !important;
    display: block !important;
}
.jodit-wysiwyg header,
.jodit-wysiwyg section,
.jodit-wysiwyg footer,
.jodit-wysiwyg nav { all: revert; }

/* ── SEO form ────────────────────────────────────────── */
.seo-score-badge { font-size: .7rem; padding: 3px 8px; }
.seo-serp-preview {
    font-family: Arial, sans-serif;
    border-color: #dadce0 !important;
}
.seo-counter { font-size: .75rem; }

/* ── Member list ─────────────────────────────────────── */
.member-list .badge { font-size: .8rem; margin: 2px; }

/* ══════════════════════════════════════════════════════
   CoPilot Slide-out
   ══════════════════════════════════════════════════════ */

/* Bubble */
.cp-so-bubble {
    position: fixed; bottom: 24px; right: 24px; z-index: 1050;
    width: 52px; height: 52px;
    border-radius: 50%; border: none; cursor: pointer;
    background: linear-gradient(135deg, var(--cms-accent), var(--cms-accent-hover));
    color: #fff; font-size: 1.25rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.28);
    display: flex; align-items: center; justify-content: center;
    transition: transform .2s, box-shadow .2s;
}
.cp-so-bubble:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(0,0,0,0.38);
}
.cp-so-bubble-dot {
    position: absolute; top: 4px; right: 4px;
    width: 10px; height: 10px; border-radius: 50%;
    background: #f59e0b; border: 2px solid var(--cms-body-bg);
}

/* Panel */
.cp-so-panel {
    position: fixed; bottom: 88px; right: 24px; z-index: 1049;
    width: 520px; max-width: calc(100vw - 32px);
    height: 640px; max-height: calc(100vh - 112px);
    background: var(--cms-card-bg); border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0,0,0,.20);
    display: none; flex-direction: column; overflow: hidden;
    border: 1px solid var(--cms-border);
    animation: cpSoSlideIn .2s ease;
}
.cp-so-panel.open { display: flex; }
@keyframes cpSoSlideIn {
    from { opacity:0; transform: translateY(12px) scale(.97); }
    to   { opacity:1; transform: translateY(0)   scale(1); }
}

/* Panel header */
.cp-so-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; gap: 8px;
    background: var(--cms-topnav-bg); color: #e2e8f0;
    border-bottom: 1px solid rgba(255,255,255,0.08); flex-shrink: 0;
}
.cp-so-title { font-size: .88rem; color: #e2e8f0; }
.cp-so-ctx-badge {
    font-size: .65rem; background: rgba(245,158,11,.2); color: #f59e0b;
    border: 1px solid rgba(245,158,11,.3); border-radius: 4px;
    padding: 1px 6px; white-space: nowrap; flex-shrink: 0; max-width: 120px;
    overflow: hidden; text-overflow: ellipsis;
}
.cp-so-link, .cp-so-btn-icon {
    background: none; border: none; color: #94a3b8; cursor: pointer;
    font-size: .8rem; padding: 2px 4px; line-height: 1;
    transition: color .15s;
}
.cp-so-link:hover, .cp-so-btn-icon:hover { color: #e2e8f0; }
.cp-so-link { text-decoration: none; }

/* Messages */
.cp-so-messages {
    flex: 1; overflow-y: auto; padding: 12px;
    display: flex; flex-direction: column; gap: 10px;
    background: var(--cms-body-bg);
}
.cp-so-intro { text-align: center; padding: 32px 16px; color: var(--cms-muted); }
.cp-so-msg { max-width: 88%; font-size: .83rem; line-height: 1.55; }
.cp-so-msg.user {
    align-self: flex-end;
    background: var(--cms-accent); color: #fff;
    border-radius: 12px 12px 3px 12px; padding: 8px 12px;
}
.cp-so-msg.assistant {
    align-self: flex-start;
    background: var(--cms-card-bg); color: var(--cms-text);
    border-radius: 12px 12px 12px 3px; padding: 8px 12px;
    border: 1px solid var(--cms-border);
}
.cp-so-msg.assistant p { margin: 0 0 4px; }
.cp-so-msg.assistant p:last-child { margin: 0; }
.cp-so-msg.error {
    align-self: stretch; background: #fef2f2; color: #dc2626;
    border: 1px solid #fecaca; border-radius: 6px; padding: 8px 12px;
}
.cp-so-typing {
    align-self: flex-start; padding: 8px 12px;
    background: var(--cms-card-bg);
    border: 1px solid var(--cms-border);
    border-radius: 12px 12px 12px 3px;
}
.cp-so-dots { display: flex; gap: 3px; }
.cp-so-dots span {
    width: 6px; height: 6px; background: var(--cms-muted);
    border-radius: 50%; animation: cpSoBounce 1.2s infinite ease-in-out;
}
.cp-so-dots span:nth-child(2) { animation-delay: .2s; }
.cp-so-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes cpSoBounce {
    0%,80%,100%{transform:translateY(0);opacity:.4}
    40%{transform:translateY(-4px);opacity:1}
}

/* Input */
.cp-so-input-row {
    display: flex; align-items: flex-end; gap: 6px;
    padding: 8px 10px; border-top: 1px solid var(--cms-border);
    background: var(--cms-card-bg); flex-shrink: 0;
}
.cp-so-textarea {
    flex: 1; resize: none;
    border: 1px solid var(--cms-input-border); border-radius: 6px;
    padding: 7px 10px; font-size: .82rem; line-height: 1.45;
    max-height: 100px; overflow-y: auto; outline: none;
    background: var(--cms-input-bg); color: var(--cms-text);
    transition: border-color .15s;
    font-family: inherit;
}
.cp-so-textarea:focus { border-color: var(--cms-accent); }
.cp-so-send-btn {
    width: 34px; height: 34px; border-radius: 6px; border: none; flex-shrink: 0;
    background: var(--cms-accent); color: #fff; cursor: pointer; font-size: .85rem;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.cp-so-send-btn:hover { background: var(--cms-accent-hover); }
.cp-so-send-btn:disabled { background: var(--cms-muted); cursor: not-allowed; }

/* Scrollbar */
.cp-so-messages::-webkit-scrollbar { width: 4px; }
.cp-so-messages::-webkit-scrollbar-thumb {
    background: var(--cms-border); border-radius: 2px;
}

/* Tool confirm card */
.cp-so-tool-card {
    display: flex; flex-direction: column; gap: 0;
    background: var(--cms-accent-light);
    border: 1px solid rgba(0,120,212,0.2);
    border-radius: 8px; padding: 10px 12px; font-size: .82rem;
}
.cp-so-tool-card.destructive {
    background: rgba(249,115,22,.08);
    border-color: rgba(249,115,22,.25);
}
.cp-so-tool-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
.cp-so-tool-cancel {
    background: none; border: 1px solid var(--cms-border); border-radius: 4px;
    color: var(--cms-muted); font-size: .75rem; padding: 3px 10px; cursor: pointer;
    transition: border-color .15s, color .15s;
}
.cp-so-tool-cancel:hover { border-color: var(--cms-accent); color: var(--cms-text); }
.cp-so-tool-confirm {
    background: var(--cms-accent); border: none; border-radius: 4px;
    color: #fff; font-size: .75rem; padding: 3px 10px; cursor: pointer;
    transition: background .15s;
}
.cp-so-tool-confirm:hover { background: var(--cms-accent-hover); }
.cp-so-tool-confirm.warn { background: #f97316; }
.cp-so-tool-confirm.warn:hover { background: #ea6c0a; }

/* Tool card layout */
.cp-so-tool-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cp-so-tool-icon-sm { font-size: .85rem; color: var(--cms-accent); flex-shrink: 0; }
.cp-so-tool-card.destructive .cp-so-tool-icon-sm { color: #f97316; }
.cp-so-tool-title {
    flex: 1; font-size: .82rem; font-weight: 600; color: var(--cms-text);
    min-width: 0; word-break: break-word; line-height: 1.35;
}
.cp-so-tool-title em { font-style: normal; color: var(--cms-accent); }
.cp-so-tool-id { font-weight: 400; color: var(--cms-muted); font-size: .75rem; }

/* Preview table */
.cp-so-preview {
    background: var(--cms-input-bg); border: 1px solid var(--cms-border);
    border-radius: 4px; padding: 4px 0; font-size: .78rem;
    max-height: 220px; overflow-y: auto; margin-top: 2px;
}
.cp-so-preview-row { padding: 5px 12px; border-bottom: 1px solid var(--cms-border); }
.cp-so-preview-row:last-child { border-bottom: none; }
.cp-so-preview-lbl {
    display: block; color: var(--cms-muted); font-weight: 700; font-size: .68rem;
    text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1px;
}
.cp-so-preview-val { display: block; color: var(--cms-text); word-break: break-word; line-height: 1.45; }
.cp-so-preview-raw {
    font-size: .7rem; color: var(--cms-muted); margin: 4px 12px;
    white-space: pre-wrap; word-break: break-word;
}
.cp-so-preview::-webkit-scrollbar { width: 3px; }
.cp-so-preview::-webkit-scrollbar-thumb { background: var(--cms-border); border-radius: 2px; }
/* ── Sticky edit sidebar ─────────────────────────────── */
.cms-sidebar-col {
    position: sticky;
    top: 24px;
    align-self: flex-start;
}
.cms-edit-sidebar {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--cms-border) transparent;
}

/* ── Stat Cards ──────────────────────────────────────── */
.stat-card {
    background: var(--cms-card-bg);
    border-radius: var(--cms-card-radius);
    padding: 20px 18px;
    box-shadow: var(--cms-card-shadow);
    border: 1px solid var(--cms-border);
    transition: box-shadow .15s;
}
.stat-card:hover { box-shadow: var(--cms-card-shadow-hover); }
.stat-card .stat-num {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--cms-accent);
}

/* ── Tables ──────────────────────────────────────────── */
.cms-table {
    background: var(--cms-card-bg);
    border-radius: var(--cms-card-radius);
    overflow: hidden;
    box-shadow: var(--cms-card-shadow);
    border: 1px solid var(--cms-border);
}
.cms-table table { margin: 0; }
.cms-table thead th {
    background: var(--cms-table-head-bg);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--cms-muted);
    border-bottom: 1px solid var(--cms-border);
    padding: 10px 14px;
}
.cms-table tbody td {
    padding: 10px 14px;
    font-size: .855rem;
    color: var(--cms-text);
    border-bottom: 1px solid var(--cms-border);
}
.cms-table tbody tr:last-child td { border-bottom: none; }
.cms-table tbody tr:hover td { background: var(--cms-table-row-hover); }

/* ── Badges ──────────────────────────────────────────── */
.badge-draft {
    background: var(--cms-badge-draft-bg);
    color: var(--cms-badge-draft-text);
    font-size: .74rem; border-radius: 12px; padding: 3px 9px;
}
.badge-published {
    background: var(--cms-badge-pub-bg);
    color: var(--cms-badge-pub-text);
    font-size: .74rem; border-radius: 12px; padding: 3px 9px;
}
.badge-health-green {
    background: var(--cms-badge-health-green-bg);
    color: var(--cms-badge-health-green-text);
    font-size: .71rem; border-radius: 12px; padding: 3px 8px;
}
.badge-health-amber {
    background: var(--cms-badge-health-amber-bg);
    color: var(--cms-badge-health-amber-text);
    font-size: .71rem; border-radius: 12px; padding: 3px 8px;
}
.badge-health-red {
    background: var(--cms-badge-health-red-bg);
    color: var(--cms-badge-health-red-text);
    font-size: .71rem; border-radius: 12px; padding: 3px 8px;
}

/* ── Needs Attention items ───────────────────────────── */
.attention-item {
    border: 1px solid var(--cms-attention-border);
    background: var(--cms-attention-bg);
    border-radius: var(--cms-card-radius);
}
.attention-item.attention-warning {
    border-color: var(--cms-attention-warn-border);
    background: var(--cms-attention-warn-bg);
}
.attention-item.attention-danger {
    border-color: var(--cms-attention-danger-border);
    background: var(--cms-attention-danger-bg);
}
.attention-item.attention-info {
    border-color: var(--cms-attention-info-border);
    background: var(--cms-attention-info-bg);
}
.attention-item.attention-secondary {
    border-color: var(--cms-attention-border);
    background: var(--cms-attention-bg);
}

/* ── Editor card ─────────────────────────────────────── */
.editor-card {
    background: var(--cms-card-bg);
    border-radius: var(--cms-card-radius);
    padding: 24px 28px;
    box-shadow: var(--cms-card-shadow);
    border: 1px solid var(--cms-border);
}
.card-section-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--cms-accent);
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--cms-accent-light);
}

/* ── Tag picker ──────────────────────────────────────── */
.tag-picker-wrap { background: var(--cms-table-head-bg); }
.tag-picker { background: var(--cms-table-head-bg); }
.tag-picker .form-check { padding-left: 1.6rem; }

/* ── Publish terminal ────────────────────────────────── */
.publish-log {
    background: var(--cms-terminal-bg);
    color: var(--cms-terminal-text);
    font-family: monospace; font-size: .84rem;
    border-radius: 6px; padding: 16px;
    max-height: 400px; overflow-y: auto;
}

/* ── Login ───────────────────────────────────────────── */
.login-card {
    max-width: 380px;
    margin: 80px auto;
    background: var(--cms-login-bg);
    border-radius: 10px; padding: 36px;
    box-shadow: var(--cms-login-shadow);
    border: 1px solid var(--cms-border);
}
.login-card .brand { font-size: 1.4rem; font-weight: 700; color: var(--cms-accent); }

/* ── Buttons ─────────────────────────────────────────── */
.btn-cms-primary {
    background: var(--cms-accent); color: #fff;
    border: none; border-radius: 4px;
    padding: 7px 16px; font-size: .84rem; font-weight: 600;
}
.btn-cms-primary:hover { background: var(--cms-accent-hover); color: #fff; }

/* ── Bootstrap dark-mode overrides ──────────────────── */
body.theme-dark .form-control,
body.theme-dark .form-select,
body.theme-dark .input-group-text {
    background-color: var(--cms-input-bg);
    border-color: var(--cms-input-border);
    color: var(--cms-text);
}
body.theme-dark .form-control:focus,
body.theme-dark .form-select:focus {
    background-color: var(--cms-input-bg);
    border-color: var(--cms-input-focus);
    box-shadow: 0 0 0 3px var(--cms-input-ring);
    color: var(--cms-text);
}
body.theme-dark .form-control::placeholder { color: var(--cms-muted); opacity: 1; }
body.theme-dark .card { background-color: var(--cms-card-bg); border-color: var(--cms-border); }
body.theme-dark .card-header,
body.theme-dark .card-footer {
    background-color: var(--cms-table-head-bg); border-color: var(--cms-border);
}
body.theme-dark .table {
    --bs-table-bg: var(--cms-card-bg);
    --bs-table-striped-bg: var(--cms-table-head-bg);
    --bs-table-hover-bg: var(--cms-table-row-hover);
    --bs-table-border-color: var(--cms-border);
    color: var(--cms-text);
}
body.theme-dark .modal-content { background-color: var(--cms-card-bg); border-color: var(--cms-border); }
body.theme-dark .modal-header,
body.theme-dark .modal-footer {
    background-color: var(--cms-table-head-bg); border-color: var(--cms-border); color: var(--cms-text);
}
body.theme-dark .btn-outline-secondary { color: var(--cms-muted); border-color: var(--cms-border); }
body.theme-dark .btn-outline-secondary:hover {
    background-color: var(--cms-nav-hover-bg); color: var(--cms-text); border-color: var(--cms-border);
}
body.theme-dark .alert-success { background-color: rgba(52,211,153,.12); border-color: rgba(52,211,153,.25); color: #34d399; }
body.theme-dark .alert-danger  { background-color: rgba(248,113,113,.1); border-color: rgba(248,113,113,.25); color: #f87171; }
body.theme-dark .alert-info    { background-color: rgba(96,165,250,.1);  border-color: rgba(96,165,250,.25);  color: #60a5fa; }
body.theme-dark .text-muted { color: var(--cms-muted) !important; }
body.theme-dark .border,
body.theme-dark .border-top,
body.theme-dark .border-bottom { border-color: var(--cms-border) !important; }
body.theme-dark .bg-white { background-color: var(--cms-card-bg) !important; }
body.theme-dark .bg-light { background-color: var(--cms-table-head-bg) !important; }
body.theme-dark .dropdown-menu { background-color: var(--cms-card-bg); border-color: var(--cms-border); }
body.theme-dark .dropdown-item { color: var(--cms-text); }
body.theme-dark .dropdown-item:hover { background-color: var(--cms-nav-hover-bg); color: var(--cms-text); }

/* ── Jodit editor isolation ──────────────────────────── */
.jodit-container { contain: layout; }
.jodit-wysiwyg { overflow: auto !important; display: block !important; }
.jodit-wysiwyg header,
.jodit-wysiwyg section,
.jodit-wysiwyg footer,
.jodit-wysiwyg nav { all: revert; }

/* ── SEO form ────────────────────────────────────────── */
.seo-score-badge { font-size: .7rem; padding: 3px 8px; }
.seo-serp-preview { font-family: Arial, sans-serif; border-color: #dadce0 !important; }
.seo-counter { font-size: .75rem; }
.member-list .badge { font-size: .8rem; margin: 2px; }

/* ══════════════════════════════════════════════════════
   CoPilot Slide-out
   ══════════════════════════════════════════════════════ */
.cp-so-bubble {
    position: fixed; bottom: 24px; right: 24px; z-index: 1050;
    width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
    background: linear-gradient(135deg, var(--cms-accent), var(--cms-accent-hover));
    color: #fff; font-size: 1.25rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.28);
    display: flex; align-items: center; justify-content: center;
    transition: transform .2s, box-shadow .2s;
}
.cp-so-bubble:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(0,0,0,0.38); }
.cp-so-bubble-dot {
    position: absolute; top: 4px; right: 4px;
    width: 10px; height: 10px; border-radius: 50%;
    background: #f59e0b; border: 2px solid var(--cms-body-bg);
}

.cp-so-panel {
    position: fixed; bottom: 88px; right: 24px; z-index: 1049;
    width: 520px; max-width: calc(100vw - 32px);
    height: 640px; max-height: calc(100vh - 112px);
    background: var(--cms-card-bg); border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0,0,0,.20);
    display: none; flex-direction: column; overflow: hidden;
    border: 1px solid var(--cms-border);
    animation: cpSoSlideIn .2s ease;
}
.cp-so-panel.open { display: flex; }
@keyframes cpSoSlideIn {
    from { opacity:0; transform: translateY(12px) scale(.97); }
    to   { opacity:1; transform: translateY(0)   scale(1); }
}

.cp-so-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; gap: 8px;
    background: var(--cms-topnav-bg); color: #e2e8f0;
    border-bottom: 1px solid rgba(255,255,255,0.08); flex-shrink: 0;
}
.cp-so-title { font-size: .88rem; color: #e2e8f0; }
.cp-so-ctx-badge {
    font-size: .65rem; background: rgba(245,158,11,.2); color: #f59e0b;
    border: 1px solid rgba(245,158,11,.3); border-radius: 4px;
    padding: 1px 6px; white-space: nowrap; flex-shrink: 0; max-width: 120px;
    overflow: hidden; text-overflow: ellipsis;
}
.cp-so-link, .cp-so-btn-icon {
    background: none; border: none; color: #94a3b8; cursor: pointer;
    font-size: .8rem; padding: 2px 4px; line-height: 1; transition: color .15s;
}
.cp-so-link:hover, .cp-so-btn-icon:hover { color: #e2e8f0; }
.cp-so-link { text-decoration: none; }

.cp-so-messages {
    flex: 1; overflow-y: auto; padding: 12px;
    display: flex; flex-direction: column; gap: 10px;
    background: var(--cms-body-bg);
}
.cp-so-intro { text-align: center; padding: 32px 16px; color: var(--cms-muted); }
.cp-so-msg { max-width: 88%; font-size: .83rem; line-height: 1.55; }
.cp-so-msg.user {
    align-self: flex-end; background: var(--cms-accent); color: #fff;
    border-radius: 12px 12px 3px 12px; padding: 8px 12px;
}
.cp-so-msg.assistant {
    align-self: flex-start; background: var(--cms-card-bg); color: var(--cms-text);
    border-radius: 12px 12px 12px 3px; padding: 8px 12px;
    border: 1px solid var(--cms-border);
}
.cp-so-msg.assistant p { margin: 0 0 4px; }
.cp-so-msg.assistant p:last-child { margin: 0; }
.cp-so-msg.error {
    align-self: stretch; background: #fef2f2; color: #dc2626;
    border: 1px solid #fecaca; border-radius: 6px; padding: 8px 12px;
}
.cp-so-typing {
    align-self: flex-start; padding: 8px 12px;
    background: var(--cms-card-bg); border: 1px solid var(--cms-border);
    border-radius: 12px 12px 12px 3px;
}
.cp-so-dots { display: flex; gap: 3px; }
.cp-so-dots span {
    width: 6px; height: 6px; background: var(--cms-muted); border-radius: 50%;
    animation: cpSoBounce 1.2s infinite ease-in-out;
}
.cp-so-dots span:nth-child(2) { animation-delay: .2s; }
.cp-so-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes cpSoBounce {
    0%,80%,100%{transform:translateY(0);opacity:.4}
    40%{transform:translateY(-4px);opacity:1}
}

.cp-so-input-row {
    display: flex; align-items: flex-end; gap: 6px;
    padding: 8px 10px; border-top: 1px solid var(--cms-border);
    background: var(--cms-card-bg); flex-shrink: 0;
}
.cp-so-textarea {
    flex: 1; resize: none; border: 1px solid var(--cms-input-border);
    border-radius: 6px; padding: 7px 10px; font-size: .82rem;
    line-height: 1.45; max-height: 100px; overflow-y: auto; outline: none;
    background: var(--cms-input-bg); color: var(--cms-text);
    transition: border-color .15s; font-family: inherit;
}
.cp-so-textarea:focus { border-color: var(--cms-accent); }
.cp-so-send-btn {
    width: 34px; height: 34px; border-radius: 6px; border: none; flex-shrink: 0;
    background: var(--cms-accent); color: #fff; cursor: pointer; font-size: .85rem;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.cp-so-send-btn:hover { background: var(--cms-accent-hover); }
.cp-so-send-btn:disabled { background: var(--cms-muted); cursor: not-allowed; }
.cp-so-messages::-webkit-scrollbar { width: 4px; }
.cp-so-messages::-webkit-scrollbar-thumb { background: var(--cms-border); border-radius: 2px; }

.cp-so-tool-card {
    display: flex; flex-direction: column; gap: 0;
    background: var(--cms-accent-light);
    border: 1px solid rgba(0,120,212,0.2);
    border-radius: 8px; padding: 10px 12px; font-size: .82rem;
}
.cp-so-tool-card.destructive { background: rgba(249,115,22,.08); border-color: rgba(249,115,22,.25); }
.cp-so-tool-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
.cp-so-tool-cancel {
    background: none; border: 1px solid var(--cms-border); border-radius: 4px;
    color: var(--cms-muted); font-size: .75rem; padding: 3px 10px; cursor: pointer;
    transition: border-color .15s, color .15s;
}
.cp-so-tool-cancel:hover { border-color: var(--cms-accent); color: var(--cms-text); }
.cp-so-tool-confirm {
    background: var(--cms-accent); border: none; border-radius: 4px;
    color: #fff; font-size: .75rem; padding: 3px 10px; cursor: pointer;
    transition: background .15s;
}
.cp-so-tool-confirm:hover { background: var(--cms-accent-hover); }
.cp-so-tool-confirm.warn { background: #f97316; }
.cp-so-tool-confirm.warn:hover { background: #ea6c0a; }

.cp-so-tool-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cp-so-tool-icon-sm { font-size: .85rem; color: var(--cms-accent); flex-shrink: 0; }
.cp-so-tool-card.destructive .cp-so-tool-icon-sm { color: #f97316; }
.cp-so-tool-title {
    flex: 1; font-size: .82rem; font-weight: 600; color: var(--cms-text);
    min-width: 0; word-break: break-word; line-height: 1.35;
}
.cp-so-tool-title em { font-style: normal; color: var(--cms-accent); }
.cp-so-tool-id { font-weight: 400; color: var(--cms-muted); font-size: .75rem; }

.cp-so-preview {
    background: var(--cms-input-bg); border: 1px solid var(--cms-border);
    border-radius: 4px; padding: 4px 0; font-size: .78rem;
    max-height: 220px; overflow-y: auto; margin-top: 2px;
}
.cp-so-preview-row { padding: 5px 12px; border-bottom: 1px solid var(--cms-border); }
.cp-so-preview-row:last-child { border-bottom: none; }
.cp-so-preview-lbl {
    display: block; color: var(--cms-muted); font-weight: 700; font-size: .68rem;
    text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1px;
}
.cp-so-preview-val { display: block; color: var(--cms-text); word-break: break-word; line-height: 1.45; }
.cp-so-preview-raw { font-size: .7rem; color: var(--cms-muted); margin: 4px 12px; white-space: pre-wrap; word-break: break-word; }
.cp-so-preview::-webkit-scrollbar { width: 3px; }
.cp-so-preview::-webkit-scrollbar-thumb { background: var(--cms-border); border-radius: 2px; }

/* ══════════════════════════════════════════════════════
   Mobile Responsive — Sidebar toggles
   Breakpoint: ≤ 991px (below Bootstrap lg)
   ══════════════════════════════════════════════════════ */

/* Hamburger button — hidden on desktop */
.cms-topnav-hamburger {
    display: none;
    background: none;
    border: 1px solid var(--cms-topnav-border);
    color: var(--cms-topnav-text);
    cursor: pointer;
    width: 34px; height: 34px;
    border-radius: 4px;
    align-items: center; justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    transition: background .15s;
}
.cms-topnav-hamburger:hover { background: var(--cms-topnav-hover-bg); }

/* Overlay backdrop */
.cms-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1099;
}
.cms-sidebar-overlay.open { display: block; }

/* Right edit sidebar toggle button — hidden on desktop */
.cms-edit-sidebar-toggle {
    display: none;
    width: 100%;
    background: var(--cms-table-head-bg);
    border: 1px solid var(--cms-border);
    border-radius: 4px;
    color: var(--cms-text);
    font-size: .84rem;
    font-weight: 600;
    padding: 8px 14px;
    cursor: pointer;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    transition: background .15s;
}
.cms-edit-sidebar-toggle:hover { background: var(--cms-nav-hover-bg); }
.cms-edit-sidebar-toggle .cms-toggle-icon { margin-left: auto; transition: transform .2s; }
.cms-edit-sidebar-toggle.open .cms-toggle-icon { transform: rotate(180deg); }

@media (max-width: 991px) {
    /* Show hamburger */
    .cms-topnav-hamburger { display: flex; }

    /* Left sidebar — off-canvas, slides in from left */
    .cms-sidebar {
        transform: translateX(-100%);
        transition: transform .25s ease;
        z-index: 1100;
        box-shadow: none;
    }
    .cms-sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: 4px 0 32px rgba(0, 0, 0, 0.28);
    }

    /* Main content — full width (sidebar is off-canvas) */
    .cms-main.with-sidebar { margin-left: 0; }
    .cms-main { padding: 16px; }

    /* Right edit sidebar — collapsible */
    .cms-sidebar-col {
        position: static !important;
        align-self: auto !important;
    }
    .cms-edit-sidebar-toggle { display: flex; }
    .cms-edit-sidebar {
        max-height: 0 !important;
        overflow: hidden;
        transition: max-height .35s ease;
    }
    .cms-edit-sidebar.mobile-open {
        max-height: 9999px !important;
        overflow: visible;
    }

    /* CoPilot panel — full width on mobile */
    .cp-so-panel {
        right: 8px;
        left: 8px;
        width: auto;
        bottom: 80px;
    }
    .cp-so-bubble { bottom: 16px; right: 16px; }
}