/* ==========================================================================
           FULLSCREEN WORKSPACE ZERO-SCROLLPORT ENGINE & STRICT FORCED CHROME HIDING
           ========================================================================== */
        html:has(#right-analysis-panel),
        body:has(#right-analysis-panel),
        html.co-fullscreen-mode,
        body.co-fullscreen-mode {
            overflow: hidden !important;
            height: 100vh !important;
            max-height: 100vh !important;
            width: 100vw !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        body:has(#right-analysis-panel) .app-layout-wrapper,
        body.co-fullscreen-mode .app-layout-wrapper {
            height: 100vh !important;
            max-height: 100vh !important;
            overflow: hidden !important;
            padding: 0 !important;
            margin: 0 !important;
        }

        body:has(#right-analysis-panel) .page-content,
        body.co-fullscreen-mode .page-content,
        body:has(#right-analysis-panel) #page-content,
        body.co-fullscreen-mode #page-content {
            height: 100vh !important;
            max-height: 100vh !important;
            padding: 0 !important;
            margin: 0 !important;
            max-width: 100vw !important;
            width: 100vw !important;
            overflow: hidden !important;
        }

        body:has(#right-analysis-panel) .tool-page-holder,
        body.co-fullscreen-mode .tool-page-holder,
        .tool-page-holder.is-fullscreen-workspace {
            height: 100vh !important;
            max-height: 100vh !important;
            overflow: hidden !important;
            padding: 0 !important;
            margin: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
        }

        body:has(#right-analysis-panel) .tool-content-viewport,
        body.co-fullscreen-mode .tool-content-viewport,
        .tool-page-holder.is-fullscreen-workspace .tool-content-viewport {
            height: 100vh !important;
            max-height: 100vh !important;
            overflow: hidden !important;
            padding: 0 !important;
            margin: 0 !important;
            width: 100% !important;
        }

        /* STRICT FORCED HIDING: Breadcrumbs & Pagination */
        .hub-hero-breadcrumbs,
        .tool-page-breadcrumbs-wrapper,
        .sections-hub-container.tool-page-breadcrumbs-wrapper,
        .tool-page-pagination-wrapper,
        .sections-hub-container.tool-page-pagination-wrapper,
        .tool-page-pagination,
        .sections-hub-container:has(.tool-page-pagination) {
            display: none !important;
            height: 0 !important;
            min-height: 0 !important;
            max-height: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            overflow: hidden !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }

        /* Native Mac Dock Fold Support in Content Optimizer */
        #mac-dock-container {
            z-index: 9999;
        }
        #dock-reveal-trigger {
            z-index: 10000;
        }

        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

        .iso-flag-badge {
            font-family: monospace;
            font-size: 11px;
            font-weight: 800;
            color: var(--primary-color);
            background: var(--primary-light);
            padding: 2px 6px;
            border-radius: 4px;
            border: none;
            display: inline-block;
            vertical-align: middle;
        }

        /* ==========================================================================
           2026 BORDERLESS ELEVATION & TONAL SURFACE ARCHITECTURE (ZERO-BORDER STANDARD)
           ========================================================================== */
        :root,
        .tool-page-holder {
            --co-shadow-surface: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
            --co-shadow-card: 0 3px 12px -2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02);
            --co-shadow-card-hover: 0 8px 24px -4px rgba(0, 0, 0, 0.09), 0 2px 6px rgba(0, 0, 0, 0.03);
            --co-shadow-panel: 0 6px 28px -3px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.02);
            --co-shadow-floating: 0 16px 42px -4px rgba(0, 0, 0, 0.16), 0 4px 14px -2px rgba(0, 0, 0, 0.06);
            --co-shadow-modal: 0 24px 60px -8px rgba(0, 0, 0, 0.28);
            --co-surface-recessed: color-mix(in srgb, var(--bg-body) 70%, var(--card-bg));
            --co-surface-subtle: color-mix(in srgb, var(--card-bg) 85%, var(--bg-body));
        }

        [data-theme="dark"],
        [data-theme="sunmoon"] {
            --co-shadow-surface: 0 1px 4px rgba(0, 0, 0, 0.35);
            --co-shadow-card: 0 4px 16px -2px rgba(0, 0, 0, 0.45);
            --co-shadow-card-hover: 0 8px 26px -4px rgba(0, 0, 0, 0.6);
            --co-shadow-panel: 0 8px 32px -4px rgba(0, 0, 0, 0.55);
            --co-shadow-floating: 0 20px 50px -4px rgba(0, 0, 0, 0.65), 0 6px 16px rgba(0, 0, 0, 0.35);
            --co-shadow-modal: 0 30px 80px -10px rgba(0, 0, 0, 0.85);
            --co-surface-recessed: rgba(255, 255, 255, 0.04);
            --co-surface-subtle: rgba(255, 255, 255, 0.06);
        }

        /* =========================================
           INTEGRATED MASTER HEADER (MERGED WITH TARGET BAR)
           ========================================= */
        .app-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px 14px;
            min-height: 46px;
            background: color-mix(in srgb, var(--bg-body) 60%, var(--card-bg));
            border: none !important;
            box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.05);
            z-index: 30;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            box-sizing: border-box;
            gap: 8px;
            flex-wrap: nowrap;
        }
        .header-left { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
        .article-header-row { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
        .hdr-divider { width: 1px; height: 22px; background: color-mix(in srgb, var(--text-muted) 18%, transparent); margin: 0 2px; }

        .project-info { position: relative; padding: 2px 4px; border-radius: 8px; transition: 0.2s; display: flex; align-items: center; }
        .project-info:hover { background: rgba(255,255,255,0.04); }
        .project-info h1.article-title-heading { font-size: 14.5px; font-weight: 800; display: flex; align-items: center; gap: 6px; margin: 0; color: var(--text-main); line-height: 1.2; white-space: nowrap; }
        #current-article-title { outline: none; border-radius: 6px; padding: 2px 6px; transition: background-color 0.2s, box-shadow 0.2s; cursor: text; border: none; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        #current-article-title:hover { background: rgba(255, 255, 255, 0.06); }
        #current-article-title:focus, #current-article-title.editing { background: var(--bg-body); box-shadow: 0 0 0 1.5px var(--primary-color); }
        
        .project-badge-pill {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: var(--co-surface-recessed);
            padding: 3px 8px;
            border-radius: 7px;
            font-size: 11px;
            font-weight: 700;
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.15s ease;
            white-space: nowrap;
            box-shadow: var(--co-shadow-surface);
            border: none;
        }
        .project-badge-pill:hover {
            background: var(--co-surface-subtle);
            color: var(--text-main);
            transform: translateY(-0.5px);
        }
        .project-badge-pill.guest-mode {
            background: color-mix(in srgb, #f59e0b 12%, var(--card-bg));
            color: #f59e0b;
            border: 1px solid color-mix(in srgb, #f59e0b 25%, transparent);
        }

        .header-workspace-actions-cluster {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            margin-inline-start: 4px;
        }

        .btn-head-action {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            height: 27px;
            padding: 0 9px;
            border-radius: 7px;
            font-size: 11.5px;
            font-weight: 700;
            border: 1px solid transparent;
            cursor: pointer;
            transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
            user-select: none;
            white-space: nowrap;
        }

        .btn-head-workspace {
            background: color-mix(in srgb, var(--primary-color) 10%, var(--card-bg));
            color: var(--primary-color);
            border-color: color-mix(in srgb, var(--primary-color) 22%, transparent);
        }

        .btn-head-workspace:hover {
            background: color-mix(in srgb, var(--primary-color) 20%, var(--card-bg));
            border-color: var(--primary-color);
            transform: translateY(-0.5px);
            box-shadow: 0 2px 8px color-mix(in srgb, var(--primary-color) 25%, transparent);
        }

        .btn-head-new-art {
            background: color-mix(in srgb, #10b981 12%, var(--card-bg));
            color: #10b981;
            border-color: color-mix(in srgb, #10b981 25%, transparent);
        }

        .btn-head-new-art:hover {
            background: color-mix(in srgb, #10b981 22%, var(--card-bg));
            border-color: #10b981;
            transform: translateY(-0.5px);
            box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
        }

        @media (max-width: 1200px) {
            .btn-head-action-label {
                display: none;
            }
            .btn-head-action {
                padding: 0 6px;
            }
        }
        .project-dropdown { position: absolute; top: 100%; left: 0; right: auto; margin-top: 8px; width: 330px; background: var(--card-bg); border: none !important; border-radius: 14px; box-shadow: var(--co-shadow-floating); opacity: 0; visibility: hidden; transform: translateY(6px); transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); z-index: 200; padding: 10px; }
        html[dir="rtl"] .project-dropdown, [dir="rtl"] .project-dropdown { left: auto; right: 0; }
        .project-info.open .project-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
        .proj-group { margin-bottom: 6px; }
        .proj-group-title { font-size: 11px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; padding: 4px 8px; }
        .proj-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 12.5px; color: var(--text-main); border-radius: 8px; transition: 0.15s ease; cursor: pointer; user-select: none; text-decoration: none; }
        .proj-item:hover { background: var(--primary-light); color: var(--primary-color); }
        .proj-item.active { background: color-mix(in srgb, var(--primary-color) 14%, var(--card-bg)); border: none !important; color: var(--primary-color); font-weight: 600; }
        .proj-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
        .proj-item-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
        .proj-item-meta { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1; }
        .proj-item-badge { font-size: 10px; padding: 2px 6px; border-radius: 6px; background: color-mix(in srgb, var(--text-muted) 15%, var(--card-bg)); color: var(--text-muted); border: none !important; }
        .proj-item.active .proj-item-badge { background: var(--primary-color); color: #fff; }
        .proj-empty-hint { padding: 16px; text-align: center; color: var(--text-muted); font-size: 12px; }
        
        /* Target Meta Group in Status Bar */
        .target-meta-group { 
            display: flex; 
            align-items: center; 
            gap: 5px; 
            flex-wrap: nowrap; 
        }

        .target-chip { 
            display: inline-flex; 
            align-items: center; 
            gap: 5px; 
            padding: 0 8px; 
            border-radius: 7px; 
            background: color-mix(in srgb, var(--bg-body) 65%, var(--card-bg)); 
            border: 1px solid color-mix(in srgb, var(--border-color) 45%, transparent); 
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); 
            font-size: 11px; 
            color: var(--text-muted); 
            height: 25px; 
            box-sizing: border-box; 
            transition: all 0.2s ease; 
        }

        .target-chip.kw { 
            background: color-mix(in srgb, var(--primary-color) 10%, var(--card-bg)); 
            border-color: color-mix(in srgb, var(--primary-color) 30%, transparent); 
            color: var(--primary-color); 
            position: relative; 
        }

        .target-chip.kw.clickable { 
            cursor: pointer; 
            user-select: none; 
        }

        .target-chip.kw.clickable:hover { 
            background: color-mix(in srgb, var(--primary-color) 20%, var(--card-bg)); 
            border-color: var(--primary-color); 
            transform: translateY(-0.5px); 
            box-shadow: 0 2px 8px rgba(244, 106, 37, 0.2); 
        }

        .target-chip strong { 
            color: var(--text-main); 
            font-weight: 700; 
        }

        .target-chip.kw strong { 
            color: var(--primary-color); 
            font-size: 11px; 
            font-weight: 700;
            max-width: 130px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: inline-block;
            vertical-align: middle;
        }

        .target-flag-img {
            width: 15px;
            height: 11px;
            border-radius: 2px;
            object-fit: cover;
            vertical-align: middle;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
            display: inline-block;
        }

        .status-divider {
            width: 1px;
            height: 16px;
            background: color-mix(in srgb, var(--text-muted) 18%, transparent);
            margin: 0 4px;
            flex-shrink: 0;
        }

        /* Keyword Navigation Dropdown Menu */
        .kw-nav-dropdown {
            position: absolute;
            bottom: calc(100% + 8px);
            left: 0;
            background: var(--card-bg);
            border: none !important;
            border-radius: 12px;
            box-shadow: var(--co-shadow-floating);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            min-width: 180px;
            padding: 6px;
            display: none;
            flex-direction: column;
            gap: 4px;
            z-index: 100;
            animation: fadeInKwNav 0.15s ease-out;
        }

        .kw-nav-dropdown.open {
            display: flex;
        }

        @keyframes fadeInKwNav {
            from { opacity: 0; transform: translateY(6px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .kw-nav-header {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            font-size: 11px;
            font-weight: 800;
            color: var(--text-main);
            border: none !important;
            background: color-mix(in srgb, var(--bg-body) 60%, var(--card-bg));
            border-radius: 6px;
            margin-bottom: 2px;
            user-select: none;
        }

        .kw-nav-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 10px;
            border-radius: 6px;
            font-size: 11.5px;
            font-weight: 600;
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.15s ease;
            user-select: none;
        }

        .kw-nav-item:hover {
            background: color-mix(in srgb, var(--primary-color) 14%, var(--card-bg));
            color: var(--primary-color);
            transform: translateX(2px);
        }

        .kw-nav-item svg {
            color: currentColor;
            flex-shrink: 0;
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: nowrap;
            flex-shrink: 0 !important;
        }

        .hdr-action-group {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            background: color-mix(in srgb, var(--bg-body) 80%, var(--card-bg));
            border: 1px solid color-mix(in srgb, var(--border-color) 45%, transparent);
            padding: 3px 5px;
            border-radius: 10px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
            transition: all 0.2s ease;
        }

        .hdr-action-group:hover {
            border-color: color-mix(in srgb, var(--border-color) 75%, transparent);
            box-shadow: var(--co-shadow-card);
        }

        .hdr-action-group.group-tools {
            background: color-mix(in srgb, var(--bg-body) 82%, var(--card-bg));
            border: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.05);
            gap: 2px;
            padding: 3px 4px;
        }

        .group-tools-dropdown-wrapper {
            position: relative;
            display: inline-flex;
            align-items: center;
        }

        .btn-hdr-tools {
            width: 30px;
            height: 30px;
            border-radius: 7px;
            background: transparent;
            border: none;
            color: var(--text-muted);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .btn-hdr-tools:hover,
        .group-tools-dropdown-wrapper.open .btn-hdr-tools {
            color: var(--primary-color);
            background: color-mix(in srgb, var(--primary-color) 12%, var(--card-bg));
        }

        .tools-dropdown-menu {
            min-width: 235px !important;
            padding: 6px !important;
            right: 0 !important;
            left: auto !important;
        }

        [dir="rtl"] .tools-dropdown-menu,
        html[dir="rtl"] .tools-dropdown-menu,
        body.rtl .tools-dropdown-menu {
            right: auto !important;
            left: 0 !important;
        }

        .tools-menu-section-title {
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            color: var(--text-muted);
            padding: 6px 12px 3px 12px;
            letter-spacing: 0.5px;
            opacity: 0.75;
        }

        .save-indicator {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            color: var(--text-muted);
            font-size: 11.5px;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 6px;
            transition: all 0.2s ease;
            user-select: none;
            background: color-mix(in srgb, var(--text-muted) 8%, transparent);
        }
        .save-indicator svg { width: 13px; height: 13px; flex-shrink: 0; }
        .save-indicator .save-icon-wrap { display: inline-flex; align-items: center; justify-content: center; }
        .save-indicator.pending { color: var(--text-muted); }
        .save-indicator.pending svg { color: var(--text-muted); }
        .save-indicator.saving { color: var(--primary-color); background: color-mix(in srgb, var(--primary-color) 12%, transparent); }
        .save-indicator.saving svg { color: var(--primary-color); }
        .save-indicator.saved { color: #10b981; }
        .save-indicator.saved svg { color: #10b981; }

        /* Floating Ephemeral Auto-Save Micro Badge */
        .floating-save-badge {
            position: absolute;
            bottom: 22px;
            right: 28px;
            z-index: 95;
            background: color-mix(in srgb, var(--card-bg, #ffffff) 88%, transparent) !important;
            backdrop-filter: blur(14px) saturate(180%);
            -webkit-backdrop-filter: blur(14px) saturate(180%);
            border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08)) !important;
            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.09), 0 1px 3px rgba(0, 0, 0, 0.04);
            border-radius: 20px;
            padding: 4px 12px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            font-weight: 700;
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            pointer-events: none;
            opacity: 0;
            transform: translateY(8px);
        }

        [dir="rtl"] .floating-save-badge,
        html[dir="rtl"] .floating-save-badge,
        body.rtl .floating-save-badge {
            right: auto;
            left: 28px;
        }

        html[data-theme="dark"] .floating-save-badge,
        body.dark-mode .floating-save-badge,
        .dark-theme .floating-save-badge {
            background: rgba(24, 27, 34, 0.9) !important;
            border-color: rgba(255, 255, 255, 0.12) !important;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
        }

        html[data-theme="sunset"] .floating-save-badge,
        body.sunset-mode .floating-save-badge {
            background: rgba(45, 39, 37, 0.9) !important;
            border-color: rgba(255, 255, 255, 0.12) !important;
        }

        .floating-save-badge.pending,
        .floating-save-badge.saving {
            opacity: 1 !important;
            pointer-events: auto !important;
            transform: translateY(0) !important;
            animation: none !important;
        }

        .floating-save-badge.saved {
            animation: fadeOutSavedBadge 2.4s forwards cubic-bezier(0.16, 1, 0.3, 1);
        }

        @keyframes fadeOutSavedBadge {
            0% {
                opacity: 1;
                transform: translateY(0);
                pointer-events: auto;
            }
            70% {
                opacity: 1;
                transform: translateY(0);
                pointer-events: auto;
            }
            100% {
                opacity: 0;
                transform: translateY(8px);
                pointer-events: none;
            }
        }

        .floating-save-badge.error,
        .floating-save-badge.failed {
            opacity: 1 !important;
            pointer-events: auto !important;
            transform: translateY(0) !important;
            animation: none !important;
            color: #ef4444 !important;
            border-color: rgba(239, 68, 68, 0.4) !important;
            background: color-mix(in srgb, var(--card-bg) 88%, rgba(239, 68, 68, 0.12)) !important;
        }

        .btn-icon {
            width: 30px;
            height: 30px;
            border-radius: 7px;
            background: transparent;
            border: none;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.15s ease;
            position: relative;
        }
        .btn-icon svg { width: 15px; height: 15px; }
        .btn-icon:hover, .btn-icon.active {
            color: var(--primary-color);
            background: color-mix(in srgb, var(--primary-color) 12%, var(--card-bg));
            transform: translateY(-0.5px);
        }
        
        .btn-auto-workspace {
            border: none;
            color: var(--ai-color);
            padding: 0 11px;
            height: 30px;
            border-radius: 7px;
            font-size: 11.5px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: color-mix(in srgb, var(--ai-color) 12%, var(--card-bg));
            box-shadow: 0 0 8px var(--ai-glow);
            cursor: pointer;
            transition: all 0.18s ease;
            white-space: nowrap;
        }
        .btn-auto-workspace svg { width: 14px; height: 14px; }
        .btn-auto-workspace:hover {
            background: color-mix(in srgb, var(--ai-color) 20%, var(--card-bg));
            transform: translateY(-0.5px);
        }
        
        /* Professional AI Analyze Action Button - Compact Elevated */
        .btn-ai-analyze {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            height: 30px;
            padding: 0 12px;
            background: color-mix(in srgb, var(--primary-color) 15%, var(--card-bg));
            color: var(--primary-color);
            border: none;
            border-radius: 8px;
            box-shadow: 0 0 10px var(--primary-glow);
            font-size: 11.5px;
            font-weight: 800;
            letter-spacing: 0.2px;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            font-family: inherit;
            user-select: none;
            white-space: nowrap;
        }
        .btn-ai-analyze svg {
            width: 13px;
            height: 13px;
            stroke-width: 2.2;
            color: var(--primary-color);
            transition: transform 0.3s ease;
        }
        .btn-ai-analyze:hover {
            transform: translateY(-0.5px);
            background: color-mix(in srgb, var(--primary-color) 22%, var(--card-bg));
            box-shadow: 0 0 14px var(--primary-glow), 0 3px 8px rgba(0, 0, 0, 0.08);
            color: var(--primary-color);
        }
        .btn-ai-analyze:hover svg {
            transform: rotate(45deg);
        }
        .btn-ai-analyze:active {
            transform: translateY(0) scale(0.98);
            box-shadow: 0 0 6px var(--primary-glow);
        }
        .btn-ai-analyze.loading svg {
            animation: spin 0.8s linear infinite;
        }

        @keyframes spin { 100% { transform: rotate(360deg); } }
        .spin { animation: spin 1s linear infinite; }

        .toast-container { position: fixed; bottom: 20px; left: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 999999; pointer-events: none; }
        .toast { background: var(--card-bg); border-right: 4px solid var(--success); color: var(--text-main); padding: 12px 20px; border-radius: 8px; box-shadow: var(--co-shadow-floating); font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 10px; transform: translateX(-120%); transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        .toast.show { transform: translateX(0); }
        
        .dropdown { position: relative; }
        .dropdown-menu { position: absolute; top: 120%; left: 0; background: var(--glass-bg); backdrop-filter: blur(30px); border: none !important; border-radius: 12px; padding: 8px; min-width: 160px; box-shadow: var(--co-shadow-floating); opacity: 0; visibility: hidden; transform: translateY(6px); transition: 0.2s; z-index: 50; }
        .dropdown.open .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
        .dp-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: var(--text-main); border-radius: 8px; cursor: pointer; font-size: 12.5px; font-family: var(--font-main); white-space: nowrap;}
        .dp-item:hover { background: var(--primary-light); color: var(--primary-color); }

        /* Ensure header actions dropdowns open strictly INWARDS towards editor */
        .header-actions .dropdown-menu,
        #export-dropdown-wrapper .dropdown-menu,
        #tools-dropdown-wrapper .dropdown-menu {
            right: 0 !important;
            left: auto !important;
            top: calc(100% + 6px) !important;
            z-index: 3000 !important;
        }

        [dir="rtl"] .header-actions .dropdown-menu,
        [dir="rtl"] #export-dropdown-wrapper .dropdown-menu,
        [dir="rtl"] #tools-dropdown-wrapper .dropdown-menu,
        html[dir="rtl"] .header-actions .dropdown-menu,
        html[dir="rtl"] #export-dropdown-wrapper .dropdown-menu,
        html[dir="rtl"] #tools-dropdown-wrapper .dropdown-menu,
        body.rtl .header-actions .dropdown-menu,
        body.rtl #export-dropdown-wrapper .dropdown-menu,
        body.rtl #tools-dropdown-wrapper .dropdown-menu {
            left: 0 !important;
            right: auto !important;
        }

        /* =========================================
           MAIN LAYOUT (ZERO-SCROLL FIXED VIEWPORT)
           ========================================= */
        .main-layout {
            display: flex;
            height: 100vh !important;
            max-height: 100vh !important;
            padding: 8px 12px !important;
            gap: 6px !important;
            position: relative;
            box-sizing: border-box !important;
            overflow: hidden !important;
            width: 100% !important;
        }

        /* -----------------------------------------
           LEFT PANEL: INTEGRATED EDITOR CONTAINER
           ----------------------------------------- */
        .editor-container {
            flex: 1 1 0% !important;
            min-width: 0 !important;
            min-height: 0 !important;
            display: flex;
            flex-direction: column;
            background: var(--card-bg);
            border: none !important;
            border-radius: 18px;
            overflow: visible !important;
            box-shadow: var(--co-shadow-panel);
            position: relative;
            height: 100% !important;
            max-height: 100% !important;
        }

        /* =========================================
           3-DOT INTERACTIVE RESIZABLE SPLITTER
           ========================================= */
        .layout-splitter {
            width: 8px;
            min-width: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: col-resize;
            position: relative;
            user-select: none;
            z-index: 45;
            transition: background 0.2s ease;
            margin: 0 -1px;
            border-radius: 4px;
        }

        .layout-splitter:hover,
        .layout-splitter.is-dragging {
            background: color-mix(in srgb, var(--primary-color, #f46a25) 15%, transparent);
        }

        .splitter-handle {
            width: 5px;
            height: 38px;
            border-radius: 6px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 3.5px;
            background: color-mix(in srgb, var(--card-bg, #ffffff) 85%, var(--text-muted, #94a3b8));
            border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
            pointer-events: none;
        }

        .layout-splitter:hover .splitter-handle,
        .layout-splitter.is-dragging .splitter-handle {
            height: 52px;
            background: var(--primary-color, #f46a25);
            border-color: var(--primary-color, #f46a25);
            box-shadow: 0 0 10px var(--primary-glow, rgba(244, 106, 37, 0.4));
            transform: scale(1.1);
        }

        .splitter-dot {
            width: 2.5px;
            height: 2.5px;
            border-radius: 50%;
            background: var(--text-muted, #64748b);
            transition: all 0.2s ease;
        }

        .layout-splitter:hover .splitter-dot,
        .layout-splitter.is-dragging .splitter-dot {
            background: #ffffff;
        }

        /* Body state during active splitter dragging */
        body.is-splitter-resizing {
            cursor: col-resize !important;
            user-select: none !important;
        }
        body.is-splitter-resizing * {
            user-select: none !important;
            pointer-events: none !important;
        }
        body.is-splitter-resizing .layout-splitter {
            pointer-events: auto !important;
        }

        .editor-content-wrapper {
            flex: 1 1 0% !important;
            min-height: 0 !important;
            display: flex;
            flex-direction: column;
            overflow: hidden !important;
            position: relative;
            height: 100%;
            background: var(--card-bg);
            container-type: inline-size;
        }
        
        /* Dynamic Header Toolbar Center Slot */
        .toolbar-center-slot {
            flex: 1 1 0% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: visible !important;
            container-type: inline-size;
            container-name: toolbarSlot;
            transition: opacity 0.15s ease;
        }
        
        .editor-toolbar {
            position: relative;
            top: auto;
            left: auto;
            transform: none;
            z-index: 10;
            background: transparent !important;
            border: none !important;
            border-radius: 0;
            padding: 0 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 3px;
            flex-wrap: nowrap !important;
            direction: ltr;
            height: 32px;
            min-height: 32px;
            width: auto;
            max-width: 100% !important;
            min-width: 0 !important;
            flex-shrink: 1;
            box-sizing: border-box;
            box-shadow: none !important;
            overflow: visible !important;
            transition: none;
        }

        .editor-toolbar:hover {
            box-shadow: none !important;
        }

        html[data-theme="dark"] .editor-toolbar,
        body.dark-mode .editor-toolbar,
        .dark-theme .editor-toolbar {
            background: transparent !important;
            border-color: transparent !important;
            box-shadow: none !important;
        }

        html[data-theme="sunset"] .editor-toolbar,
        body.sunset-mode .editor-toolbar {
            background: transparent !important;
            border-color: transparent !important;
            box-shadow: none !important;
        }

        html[data-theme="light"] .editor-toolbar,
        body.light-mode .editor-toolbar {
            background: transparent !important;
            border-color: transparent !important;
            box-shadow: none !important;
        }

        .tb-group {
            display: flex;
            align-items: center;
            gap: 2px;
            background: color-mix(in srgb, var(--bg-body, #f3f4f6) 65%, var(--card-bg, #ffffff));
            padding: 2px 3px;
            border-radius: 7px;
            border: 1px solid var(--border-color, rgba(0, 0, 0, 0.06));
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
            flex-shrink: 0;
        }

        html[data-theme="dark"] .tb-group,
        body.dark-mode .tb-group,
        .dark-theme .tb-group {
            background: rgba(255, 255, 255, 0.05) !important;
            border-color: rgba(255, 255, 255, 0.08) !important;
        }

        html[data-theme="sunset"] .tb-group,
        body.sunset-mode .tb-group {
            background: rgba(255, 255, 255, 0.06) !important;
            border-color: rgba(255, 255, 255, 0.09) !important;
        }

        html[data-theme="light"] .tb-group,
        body.light-mode .tb-group {
            background: #f1f3f5 !important;
            border-color: #e2e8f0 !important;
        }

        .tb-dropdown-wrapper {
            position: relative;
            display: inline-flex;
            align-items: center;
        }

        .tb-block-btn {
            background: transparent;
            border: none;
            color: var(--text-main, #111827);
            height: 26px;
            padding: 0 6px 0 8px;
            border-radius: 5px;
            font-size: 11.5px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
            transition: all 0.15s ease;
            min-width: 60px;
            justify-content: space-between;
            flex-shrink: 0;
        }

        .tb-block-btn span {
            display: inline-flex;
            align-items: center;
            pointer-events: none;
        }

        .tb-block-btn svg,
        .tb-block-btn i {
            width: 12px;
            height: 12px;
            pointer-events: none;
        }

        .tb-block-btn:hover {
            background: var(--primary-light, rgba(244, 106, 37, 0.12));
            color: var(--primary-color);
        }

        .tb-block-btn.active {
            background: var(--primary-light, rgba(244, 106, 37, 0.18));
            color: var(--primary-color);
        }

        .tb-popover {
            position: absolute;
            top: calc(100% + 6px);
            left: 0;
            background: var(--card-bg, #ffffff);
            border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
            border-radius: 10px;
            box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.1);
            padding: 5px;
            display: flex;
            flex-direction: column;
            gap: 2px;
            z-index: 2500 !important;
            min-width: 165px;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            max-height: min(380px, calc(100vh - 120px));
            overflow-y: auto;
        }

        html[data-theme="dark"] .tb-popover,
        body.dark-mode .tb-popover,
        .dark-theme .tb-popover {
            background: #1a1d25 !important;
            border-color: #323644 !important;
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
        }

        html[data-theme="sunset"] .tb-popover,
        body.sunset-mode .tb-popover {
            background: #2d2725 !important;
            border-color: #483e3c !important;
        }

        html[data-theme="light"] .tb-popover,
        body.light-mode .tb-popover {
            background: #ffffff !important;
            border-color: #e5e7eb !important;
        }

        .tb-popover.d-none {
            display: none !important;
        }

        .tb-popover-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 7px 10px;
            border-radius: 6px;
            background: transparent;
            border: none;
            color: var(--text-main);
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            text-align: left;
            width: 100%;
            transition: all 0.12s ease;
        }

        .tb-popover-item:hover,
        .tb-popover-item.active {
            background: var(--primary-light, rgba(244, 106, 37, 0.12));
            color: var(--primary-color);
            font-weight: 600;
        }

        .tb-tag {
            font-size: 10px;
            font-weight: 700;
            opacity: 0.8;
            font-family: monospace;
            background: color-mix(in srgb, var(--bg-body) 80%, var(--card-bg));
            padding: 2px 6px;
            border-radius: 4px;
        }

        .tb-btn {
            background: transparent;
            border: none;
            color: var(--text-muted, #6b7280);
            width: 26px;
            height: 26px;
            border-radius: 5px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
            position: relative;
            padding: 0;
            flex-shrink: 0;
        }

        .tb-btn span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            line-height: 0;
        }

        .tb-btn svg,
        .tb-btn i {
            width: 13px;
            height: 13px;
            pointer-events: none;
            stroke-width: 2;
        }

        .tb-btn:hover {
            background: var(--primary-light, rgba(244, 106, 37, 0.12));
            color: var(--primary-color);
            transform: translateY(-1px);
        }

        .tb-btn:active {
            transform: translateY(0);
        }

        .tb-btn.active {
            background: var(--primary-light, rgba(244, 106, 37, 0.18)) !important;
            color: var(--primary-color) !important;
            font-weight: 700;
            box-shadow: 0 1px 3px rgba(244, 106, 37, 0.25);
        }

        .tb-btn.text-danger:hover {
            color: #ef4444 !important;
            background: rgba(239, 68, 68, 0.12) !important;
        }

        .tb-divider {
            width: 1px;
            height: 14px;
            background: var(--border-color, rgba(125, 125, 125, 0.2));
            margin: 0 2px;
            flex-shrink: 0;
        }

        /* Toolbar Overflow Dropdown ('More ...') */
        .tb-overflow-wrapper {
            position: relative;
            display: none;
            align-items: center;
        }

        .tb-overflow-divider {
            display: none;
        }

        .tb-overflow-popover {
            min-width: 210px !important;
            max-width: 250px !important;
            right: 0 !important;
            left: auto !important;
            padding: 8px !important;
            z-index: 2600 !important;
        }

        [dir="rtl"] .tb-overflow-popover,
        html[dir="rtl"] .tb-overflow-popover,
        body.rtl .tb-overflow-popover {
            right: auto !important;
            left: 0 !important;
        }

        .tb-overflow-section {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .tb-overflow-label {
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            color: var(--text-muted);
            padding: 3px 8px;
            letter-spacing: 0.5px;
            opacity: 0.75;
        }

        .tb-overflow-grid {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .tb-overflow-popover .tb-popover-item {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 8px;
            padding: 6px 10px;
            border-radius: 6px;
            background: transparent;
            border: none;
            color: var(--text-main);
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            text-align: left;
            width: 100%;
            transition: all 0.12s ease;
        }

        [dir="rtl"] .tb-overflow-popover .tb-popover-item,
        html[dir="rtl"] .tb-overflow-popover .tb-popover-item,
        body.rtl .tb-overflow-popover .tb-popover-item {
            text-align: right;
        }

        .tb-overflow-popover .tb-popover-item:hover {
            background: var(--primary-light, rgba(244, 106, 37, 0.12));
            color: var(--primary-color);
        }

        .tb-overflow-popover .tb-popover-item svg,
        .tb-overflow-popover .tb-popover-item i {
            width: 13px;
            height: 13px;
            flex-shrink: 0;
        }

        .highlight-nav { position: absolute; top: 120px; left: 50%; transform: translateX(-50%); background: var(--glass-bg); backdrop-filter: blur(20px); border: none !important; padding: 8px 16px; border-radius: 14px; z-index: 100; display: none; align-items: center; gap: 12px; box-shadow: 0 12px 35px rgba(244, 106, 37, 0.25), var(--co-shadow-floating); direction: rtl;}
        .hl-info { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
        .hl-term { color: var(--primary-color); }
        .hl-count { color: var(--text-muted); font-family: monospace; }
        .hl-controls { display: flex; gap: 4px; border-left: none !important; padding-left: 8px; margin-left: 4px;}
        .hl-btn { background: var(--bg-body); border: none !important; color: var(--text-main); width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; box-shadow: var(--co-shadow-surface); }
        .hl-btn.text-btn { width: auto; padding: 0 10px; font-size: 12px; font-weight: 700;}
        .hl-btn:hover { background: var(--primary-light); color: var(--primary-color); }
        .hl-input { background: var(--co-surface-recessed); border: none !important; color: var(--text-main); padding: 4px 8px; border-radius: 7px; width: 120px; font-size: 13px; outline: none; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08); }
        .hl-close { color: var(--danger); border: none !important; background: transparent; }
        .hl-close:hover { background: var(--danger-light); color: var(--danger); }
        mark.kw-highlight { background: rgba(245, 158, 11, 0.3); color: var(--text-main); border-radius: 3px; padding: 0 2px; transition: 0.2s;}
        mark.kw-active, mark.gr-kw-highlight.kw-active { background: var(--primary-color); color: white; font-weight: bold; box-shadow: 0 0 10px var(--primary-glow);}

        /* =========================================
           EDITOR WORKSPACE & LINE NUMBERS GUTTER
           ========================================= */
        .editor-workspace-wrap {
            flex: 1 1 0% !important;
            min-height: 0 !important;
            display: flex;
            flex-direction: row;
            overflow: hidden !important;
            position: relative;
            background: var(--card-bg);
            height: 100%;
        }

        .line-numbers {
            width: 44px;
            min-width: 44px;
            background: color-mix(in srgb, var(--bg-body, #f8fafc) 75%, var(--card-bg, #ffffff));
            border-right: 1px solid var(--border-color, rgba(0, 0, 0, 0.08)) !important;
            padding: 24px 0 68px 0 !important;
            overflow: hidden;
            user-select: none;
            pointer-events: none;
            flex-shrink: 0;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        [dir="rtl"] .line-numbers,
        .line-numbers[dir="rtl"],
        html[dir="rtl"] .line-numbers,
        body.rtl .line-numbers {
            border-right: none !important;
            border-left: 1px solid var(--border-color, rgba(0, 0, 0, 0.08)) !important;
            padding: 24px 0 68px 0 !important;
        }

        html[data-theme="dark"] .line-numbers,
        body.dark-mode .line-numbers,
        .dark-theme .line-numbers {
            background: #171a22 !important;
            border-color: #272b38 !important;
        }

        html[data-theme="sunset"] .line-numbers,
        body.sunset-mode .line-numbers {
            background: #25201f !important;
            border-color: #3b3230 !important;
        }

        html[data-theme="light"] .line-numbers,
        body.light-mode .line-numbers {
            background: #f8fafc !important;
            border-color: #e2e8f0 !important;
        }

        .ln-row {
            font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
            font-size: 11px;
            font-weight: 600;
            color: var(--text-muted, #94a3b8);
            opacity: 0.75;
            text-align: right;
            padding-right: 8px;
            padding-left: 4px;
            height: 28.8px;
            min-height: 28.8px;
            max-height: 28.8px;
            line-height: 28.8px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            transition: color 0.15s, opacity 0.15s;
            box-sizing: border-box;
            user-select: none;
        }

        [dir="rtl"] .ln-row,
        .line-numbers[dir="rtl"] .ln-row,
        html[dir="rtl"] .ln-row,
        body.rtl .ln-row {
            text-align: left;
            padding-right: 4px;
            padding-left: 8px;
            justify-content: flex-start;
        }

        .editor-content { 
            flex: 1 1 0% !important; 
            min-height: 0 !important; 
            height: 100% !important; 
            padding: 24px 32px 68px 32px !important; 
            overflow-y: auto !important; 
            overscroll-behavior: contain;
            font-family: var(--font-editor, inherit); 
            font-size: 16px; 
            line-height: 1.8; 
            color: var(--text-main); 
            outline: none;  
            position: relative;
        }

        [dir="rtl"] .editor-content,
        .editor-content[dir="rtl"],
        html[dir="rtl"] .editor-content,
        body.rtl .editor-content {
            padding: 24px 60px 68px 32px !important;
        }

        /* =======================================================
           INTEGRATED HEADER TOOLBAR RESPONSIVENESS
           Adapts dynamically to the space allocated to the toolbar slot
           ======================================================= */
        
        /* 1. COMPACT STAGE (< 840px): Hide extra and optional buttons, show overflow menu */
        @container toolbarSlot (max-width: 840px) {
            .tb-extra-btn,
            .tb-opt-btn {
                display: none !important;
            }
            .tb-overflow-wrapper {
                display: inline-flex !important;
            }
            .tb-overflow-divider {
                display: block !important;
            }
            .editor-toolbar {
                height: 28px !important;
                min-height: 28px !important;
                gap: 2px !important;
            }
            .editor-toolbar .tb-btn {
                width: 24px !important;
                height: 24px !important;
            }
            .editor-toolbar .tb-btn svg,
            .editor-toolbar .tb-btn i {
                width: 12px !important;
                height: 12px !important;
            }
            .editor-toolbar .tb-block-btn {
                height: 24px !important;
                min-width: 52px !important;
                font-size: 11px !important;
                padding: 0 4px 0 6px !important;
            }
            .editor-toolbar .tb-group {
                padding: 1px 2px !important;
            }
        }

        .toolbar-center-slot.slot-compact .tb-extra-btn,
        .toolbar-center-slot.slot-compact .tb-opt-btn {
            display: none !important;
        }
        .toolbar-center-slot.slot-compact .tb-overflow-wrapper {
            display: inline-flex !important;
        }
        .toolbar-center-slot.slot-compact .tb-overflow-divider {
            display: block !important;
        }
        .toolbar-center-slot.slot-compact .editor-toolbar {
            height: 28px !important;
            min-height: 28px !important;
            gap: 2px !important;
        }
        .toolbar-center-slot.slot-compact .editor-toolbar .tb-btn {
            width: 24px !important;
            height: 24px !important;
        }
        .toolbar-center-slot.slot-compact .editor-toolbar .tb-btn svg,
        .toolbar-center-slot.slot-compact .editor-toolbar .tb-btn i {
            width: 12px !important;
            height: 12px !important;
        }
        .toolbar-center-slot.slot-compact .editor-toolbar .tb-block-btn {
            height: 24px !important;
            min-width: 52px !important;
            font-size: 11px !important;
            padding: 0 4px 0 6px !important;
        }
        .toolbar-center-slot.slot-compact .editor-toolbar .tb-group {
            padding: 1px 2px !important;
        }

        /* 2. MINIMAL STAGE (< 540px): Keep only core essentials, hide optional buttons and groups */
        @container toolbarSlot (max-width: 540px) {
            .tb-extra-btn,
            .tb-opt-btn,
            .tb-opt-divider,
            .tb-opt-group {
                display: none !important;
            }
            .tb-overflow-wrapper {
                display: inline-flex !important;
            }
            .tb-overflow-divider {
                display: block !important;
            }
            #tbUnderlineBtn,
            #tbRedoBtn {
                display: none !important;
            }
        }

        .toolbar-center-slot.slot-minimal .tb-extra-btn,
        .toolbar-center-slot.slot-minimal .tb-opt-btn,
        .toolbar-center-slot.slot-minimal .tb-opt-divider,
        .toolbar-center-slot.slot-minimal .tb-opt-group {
            display: none !important;
        }
        .toolbar-center-slot.slot-minimal .tb-overflow-wrapper {
            display: inline-flex !important;
        }
        .toolbar-center-slot.slot-minimal .tb-overflow-divider {
            display: block !important;
        }
        .toolbar-center-slot.slot-minimal #tbUnderlineBtn,
        .toolbar-center-slot.slot-minimal #tbRedoBtn {
            display: none !important;
        }
        .toolbar-center-slot.slot-minimal .editor-toolbar {
            height: 28px !important;
            min-height: 28px !important;
            gap: 2px !important;
        }
        .toolbar-center-slot.slot-minimal .editor-toolbar .tb-btn {
            width: 24px !important;
            height: 24px !important;
        }
        .toolbar-center-slot.slot-minimal .editor-toolbar .tb-block-btn {
            height: 24px !important;
            min-width: 50px !important;
            font-size: 11px !important;
            padding: 0 4px 0 6px !important;
        }

        /* 3. HIDDEN STAGE (< 340px): Hide toolbar completely, rely on floating bubble toolbar */
        @container toolbarSlot (max-width: 340px) {
            #mainEditorToolbar {
                display: none !important;
            }
        }

        .toolbar-center-slot.slot-hidden #mainEditorToolbar,
        .toolbar-center-slot.slot-hidden {
            display: none !important;
            width: 0 !important;
            min-width: 0 !important;
            max-width: 0 !important;
            overflow: hidden !important;
        }

        /* =========================================
           MOBILE VIEW SWITCHER & RESPONSIVE LAYOUT (< 900px)
           ========================================= */
        .mobile-layout-switcher {
            display: none;
            position: fixed;
            bottom: 14px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 999;
            background: color-mix(in srgb, var(--card-bg, #ffffff) 88%, transparent);
            backdrop-filter: blur(16px) saturate(180%);
            -webkit-backdrop-filter: blur(16px) saturate(180%);
            border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
            border-radius: 30px;
            padding: 4px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.08);
            gap: 4px;
            align-items: center;
        }

        .btn-mobile-switch {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 16px;
            border-radius: 20px;
            border: none;
            background: transparent;
            color: var(--text-muted);
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
            white-space: nowrap;
        }

        .btn-mobile-switch.active {
            background: var(--primary-color, #f46a25);
            color: #ffffff;
            box-shadow: 0 2px 8px color-mix(in srgb, var(--primary-color) 40%, transparent);
        }

        @media (max-width: 900px) {
            .main-layout {
                padding: 6px 6px 66px 6px !important;
                gap: 0 !important;
            }

            .layout-splitter {
                display: none !important;
            }

            .mobile-layout-switcher {
                display: flex !important;
            }

            /* Responsive view switching on mobile */
            body[data-mobile-view="analysis"] .editor-container {
                display: none !important;
            }
            body[data-mobile-view="analysis"] .analysis-panel.co-unified-console {
                display: flex !important;
                width: 100% !important;
                max-width: 100% !important;
                min-width: 100% !important;
                flex: 1 1 auto !important;
                height: 100% !important;
            }

            body:not([data-mobile-view="analysis"]) .analysis-panel.co-unified-console {
                display: none !important;
            }
            body:not([data-mobile-view="analysis"]) .editor-container {
                display: flex !important;
                width: 100% !important;
                max-width: 100% !important;
                flex: 1 1 auto !important;
                height: 100% !important;
            }
        }

        @media (max-width: 768px) {
            .line-numbers {
                padding-top: 20px !important;
                width: 38px !important;
                min-width: 38px !important;
            }
            .editor-content,
            [dir="rtl"] .editor-content {
                padding: 20px 16px 60px 16px !important;
            }
        }

        /* =========================================
           ART-ED CONTENT & HEADING BADGES ENGINE
           ========================================= */
        .art-ed {
            position: relative;
            outline: none;
        }

        .art-ed h1, .art-ed h2, .art-ed h3, .art-ed h4, .art-ed h5, .art-ed h6 {
            position: relative;
            padding-left: 36px;
            margin-top: 1.2em;
            margin-bottom: 0.6em;
            color: var(--text-main);
            font-weight: 700;
            line-height: 1.35;
        }

        [dir="rtl"] .art-ed h1,
        [dir="rtl"] .art-ed h2,
        [dir="rtl"] .art-ed h3,
        [dir="rtl"] .art-ed h4,
        [dir="rtl"] .art-ed h5,
        [dir="rtl"] .art-ed h6,
        .art-ed[dir="rtl"] h1,
        .art-ed[dir="rtl"] h2,
        .art-ed[dir="rtl"] h3,
        .art-ed[dir="rtl"] h4,
        .art-ed[dir="rtl"] h5,
        .art-ed[dir="rtl"] h6 {
            padding-left: 0;
            padding-right: 36px;
        }

        .art-ed h1 { font-size: 1.95em; }
        .art-ed h2 { font-size: 1.55em; }
        .art-ed h3 { font-size: 1.3em; }
        .art-ed h4 { font-size: 1.15em; }
        .art-ed h5 { font-size: 1.05em; }
        .art-ed h6 { font-size: 0.95em; }

        .art-ed h1:before,
        .art-ed h2:before,
        .art-ed h3:before,
        .art-ed h4:before,
        .art-ed h5:before,
        .art-ed h6:before {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            font-size: 10px;
            font-weight: 800;
            line-height: 17px;
            height: 17px;
            padding: 0 5px;
            border-radius: 4px;
            font-family: var(--font-mono, monospace);
            letter-spacing: 0.5px;
            user-select: none;
            pointer-events: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid transparent;
            opacity: 0.9;
            transition: opacity 0.2s;
        }

        [dir="rtl"] .art-ed h1:before,
        [dir="rtl"] .art-ed h2:before,
        [dir="rtl"] .art-ed h3:before,
        [dir="rtl"] .art-ed h4:before,
        [dir="rtl"] .art-ed h5:before,
        [dir="rtl"] .art-ed h6:before,
        .art-ed[dir="rtl"] h1:before,
        .art-ed[dir="rtl"] h2:before,
        .art-ed[dir="rtl"] h3:before,
        .art-ed[dir="rtl"] h4:before,
        .art-ed[dir="rtl"] h5:before,
        .art-ed[dir="rtl"] h6:before,
        .rtlWrite .art-ed h1:before,
        .rtlWrite .art-ed h2:before,
        .rtlWrite .art-ed h3:before,
        .rtlWrite .art-ed h4:before,
        .rtlWrite .art-ed h5:before,
        .rtlWrite .art-ed h6:before {
            left: auto;
            right: 0;
        }

        .art-ed h1:hover:before,
        .art-ed h2:hover:before,
        .art-ed h3:hover:before,
        .art-ed h4:hover:before,
        .art-ed h5:hover:before,
        .art-ed h6:hover:before {
            opacity: 1;
        }

        .art-ed h1:before {
            content: "H1";
            color: #3b82f6;
            background: rgba(59, 130, 246, 0.12);
            border-color: rgba(59, 130, 246, 0.3);
        }

        .art-ed h2:before {
            content: "H2";
            color: #10b981;
            background: rgba(16, 185, 129, 0.12);
            border-color: rgba(16, 185, 129, 0.3);
        }

        .art-ed h3:before {
            content: "H3";
            color: #8b5cf6;
            background: rgba(139, 92, 246, 0.12);
            border-color: rgba(139, 92, 246, 0.3);
        }

        .art-ed h4:before {
            content: "H4";
            color: #f59e0b;
            background: rgba(245, 158, 11, 0.12);
            border-color: rgba(245, 158, 11, 0.3);
        }

        .art-ed h5:before {
            content: "H5";
            color: #ec4899;
            background: rgba(236, 72, 153, 0.12);
            border-color: rgba(236, 72, 153, 0.3);
        }

        .art-ed h6:before {
            content: "H6";
            color: #6b7280;
            background: rgba(107, 114, 128, 0.12);
            border-color: rgba(107, 114, 128, 0.3);
        }

        /* RTL Handling for Heading Badges */
        [dir="rtl"] .art-ed h1:before,
        [dir="rtl"] .art-ed h2:before,
        [dir="rtl"] .art-ed h3:before,
        [dir="rtl"] .art-ed h4:before,
        [dir="rtl"] .art-ed h5:before,
        [dir="rtl"] .art-ed h6:before,
        .art-ed[dir="rtl"] h1:before,
        .art-ed[dir="rtl"] h2:before,
        .art-ed[dir="rtl"] h3:before,
        .art-ed[dir="rtl"] h4:before,
        .art-ed[dir="rtl"] h5:before,
        .art-ed[dir="rtl"] h6:before,
        .rtlWrite .art-ed h1:before,
        .rtlWrite .art-ed h2:before,
        .rtlWrite .art-ed h3:before,
        .rtlWrite .art-ed h4:before,
        .rtlWrite .art-ed h5:before,
        .rtlWrite .art-ed h6:before {
            left: auto;
            right: -44px;
        }

        .art-ed p {
            margin-top: 0;
            margin-bottom: 1.1em;
            line-height: 1.8;
            font-size: 1em;
            cursor: text;
        }

        .art-ed blockquote {
            position: relative;
            border-left: 3px solid var(--primary-color);
            padding: 8px 16px;
            margin: 16px 0;
            background: color-mix(in srgb, var(--primary-color) 8%, var(--card-bg));
            border-radius: 0 8px 8px 0;
            font-style: italic;
            color: var(--text-main);
        }

        [dir="rtl"] .art-ed blockquote,
        .art-ed[dir="rtl"] blockquote {
            border-left: none;
            border-right: 3px solid var(--primary-color);
            border-radius: 8px 0 0 8px;
        }

        .art-ed ul, .art-ed ol {
            margin-top: 0;
            margin-bottom: 1.2em;
            padding-inline-start: 24px;
        }

        .art-ed li {
            margin-bottom: 4px;
            line-height: 1.7;
        }

        .art-ed hr {
            cursor: default;
            background: transparent;
            border: 0;
            border-top: 1px dashed var(--border-color);
            margin: 24px 0;
        }

        .art-ed mark {
            background: rgba(245, 158, 11, 0.3);
            color: var(--text-main);
            border-radius: 4px;
            padding: 2px 4px;
        }

        .art-ed a {
            color: var(--primary-color);
            text-decoration: underline;
            text-underline-offset: 3px;
        }

        .art-ed img {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
            margin: 14px 0;
            box-shadow: var(--shadow-sm);
        }

        .art-ed table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0 4px;
            margin: 16px 0;
            border-radius: 8px;
            overflow: hidden;
            border: none !important;
        }

        .art-ed th {
            background: color-mix(in srgb, var(--primary-color) 12%, var(--card-bg));
            color: var(--text-main);
            font-weight: 700;
            padding: 10px 14px;
            border: none !important;
            text-align: inherit;
        }

        .art-ed td {
            padding: 8px 14px;
            border: none !important;
            color: var(--text-main);
        }

        /* Competitor Bottom Bar & Tooltip */
        .competitor-bar { background: var(--co-surface-subtle); border: none !important; border-top: none !important; padding: 8px 16px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; z-index: 10; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.02); }
        .comp-btn { background: var(--card-bg); border: none !important; color: var(--text-muted); padding: 6px 16px; border-radius: 8px; display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 700; transition: 0.2s; font-family: inherit; box-shadow: var(--co-shadow-surface); }
        .comp-btn:hover { background: var(--ai-light); color: var(--ai-color); }
        .comp-btn.success { background: var(--success-light); color: var(--success); }
        
        .comp-tooltip { position: fixed; background: var(--glass-bg); backdrop-filter: blur(25px); border: none !important; padding: 12px; border-radius: 14px; box-shadow: var(--co-shadow-floating); z-index: 1000; display: none; max-width: 320px; font-size: 13px; line-height: 1.6; color: var(--text-main); pointer-events: none; transition: opacity 0.2s;}
        .comp-tooltip.show { display: block; animation: fadeInUp 0.2s ease;}
        .comp-tt-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-weight: 700; font-size: 11px; color: var(--text-muted); border-bottom: none !important; padding-bottom: 4px;}
        .comp-tt-header img { width: 14px; height: 14px; border-radius: 3px; }
        @keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* Streaming Controls */
        .stream-controls { position: absolute; bottom: 120px; left: 50%; transform: translateX(-50%); background: var(--card-bg); backdrop-filter: blur(20px); border: none !important; padding: 10px 20px; border-radius: 30px; display: none; align-items: center; gap: 12px; z-index: 50; box-shadow: 0 12px 40px var(--ai-glow); }
        .stream-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-body); color: var(--text-main); border: none !important; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; box-shadow: var(--co-shadow-surface); }
        .stream-btn:hover { background: var(--card-bg); color: var(--primary-color); }
        .stream-btn.danger { color: var(--danger); }
        .stream-btn.danger:hover { background: var(--danger-light); }
        .stream-text { font-size: 13.5px; font-weight: 700; color: var(--ai-color); display: flex; align-items: center; gap: 8px; }

        /* AI Floating Wand */
        .ai-wand-container { position: absolute; bottom: 80px; right: 30px; z-index: 60; }
        .floating-ai-btn { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, var(--ai-color), #c084fc); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 10px 30px var(--ai-glow); transition: 0.3s; }
        .floating-ai-btn:hover { transform: scale(1.1) rotate(15deg); }
        .floating-ai-btn[style*="pointer-events: none"] { opacity: 0.7; transform: none !important; }
        .main-ai-menu { position: absolute; bottom: 65px; right: 0; width: 300px; background: var(--card-bg); border: none !important; border-radius: 16px; padding: 8px; box-shadow: var(--co-shadow-floating); display: none; flex-direction: column; gap: 2px; z-index: 100; }
        .ai-wand-container.open .main-ai-menu { display: flex; animation: fadeInUp 0.2s ease; }
        .mai-section-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); padding: 4px 14px 2px; opacity: 0.7; }
        .mai-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--text-main); cursor: pointer; transition: 0.2s; }
        .mai-item:hover { background: var(--ai-light); color: var(--ai-color); }
        .mai-item i { flex-shrink: 0; }
        .mai-badge { margin-right: auto; margin-left: 4px; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; background: color-mix(in srgb, var(--ai-color) 15%, transparent); color: var(--ai-color); white-space: nowrap; flex-shrink: 0; letter-spacing: 0; }
        .mai-divider { height: 1px; background: color-mix(in srgb, var(--text-muted) 18%, transparent); margin: 4px 0; }
        .mai-selection-badge { display: flex; align-items: center; gap: 6px; padding: 6px 12px; margin: 2px 0 4px; border-radius: 8px; background: color-mix(in srgb, var(--ai-color) 12%, transparent); border: none !important; color: var(--ai-color); font-size: 11px; font-weight: 700; line-height: 1.3; word-break: break-word; }


        /* Editor AI Loading state */
        #editor [data-ai-loading="true"],
        #main-editor [data-ai-loading="true"] {
            position: relative;
            border-radius: 6px;
        }
        #editor [data-ai-loading="true"]::after,
        #main-editor [data-ai-loading="true"]::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ai-color) 20%, transparent), transparent);
            background-size: 200% 100%;
            animation: aiShimmer 1s infinite;
            border-radius: inherit;
            pointer-events: none;
        }
        #editor [data-ai-insert="true"],
        #main-editor [data-ai-insert="true"] {
            border-right: 3px solid var(--ai-color);
            border-radius: 0 6px 6px 0;
            padding-right: 8px;
        }
        @keyframes aiShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }




        /* -----------------------------------------
           RIGHT PANEL: RADAR & ANALYSIS
           ----------------------------------------- */
        /* -----------------------------------------
           RIGHT PANEL: UNIFIED INTELLIGENCE CONSOLE (2026 Live-Vertex & Equalizer Standard)
           ----------------------------------------- */
        .analysis-panel.co-unified-console {
            width: var(--side-panel-width, 390px);
            min-width: 350px;
            max-width: min(600px, 50vw);
            display: flex;
            flex-direction: column;
            height: 100% !important;
            max-height: 100% !important;
            min-height: 0 !important;
            background: var(--bg-body);
            border: none !important;
            border-radius: 18px;
            overflow: hidden !important;
            box-shadow: var(--co-shadow-panel);
            transition: box-shadow 0.3s ease;
            position: relative;
            flex-shrink: 0;
        }

        body.is-splitter-resizing .analysis-panel.co-unified-console {
            transition: none !important;
        }

        .analysis-panel.co-unified-console:hover {
            border: none !important;
            box-shadow: var(--co-shadow-card-hover);
        }

        /* Top Section: Integrated Quantum Radar Section */
        .co-console-radar-section {
            background: transparent !important;
            border: none !important;
            border-bottom: none !important;
            border-radius: 0 !important;
            padding: 10px 12px 8px;
            box-shadow: none !important;
            position: relative;
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* ==========================================================================
           2026 NEURAL CONTENT INTELLIGENCE SCORE HUB & AGENT COMMAND DECK
           ========================================================================== */
        .co-neural-score-card {
            background: transparent !important;
            border: none !important;
            border-radius: 0 !important;
            padding: 12px !important;
            margin: 0 !important;
            position: relative;
            overflow: hidden;
            box-shadow: none !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        [data-theme="dark"] .co-neural-score-card,
        [data-theme="sunmoon"] .co-neural-score-card {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
        }

        .co-neural-score-card:hover {
            border: none !important;
            box-shadow: none !important;
        }

        /* Neural Header */
        .co-neural-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            margin-bottom: 8px;
        }

        .co-neural-title-group {
            display: flex;
            align-items: center;
            gap: 9px;
        }

        .co-neural-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: 8px;
            background: color-mix(in srgb, var(--primary-color) 12%, transparent);
            color: var(--primary-color);
            border: none !important;
            box-shadow: 0 2px 6px var(--primary-glow);
            flex-shrink: 0;
        }

        .co-neural-title-texts {
            display: flex;
            flex-direction: column;
            gap: 1px;
        }

        .co-neural-title {
            font-size: 13px;
            font-weight: 800;
            color: var(--text-main);
            line-height: 1.2;
            letter-spacing: -0.2px;
        }

        .co-neural-status-hint {
            font-size: 10.5px;
            font-weight: 700;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: 5px;
            line-height: 1;
        }

        .pulse-dot-mini {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #10b981;
            box-shadow: 0 0 6px #10b981;
            animation: pulseMiniDot 2s infinite ease-in-out;
        }
        .pulse-dot-mini.good { background: #3b82f6; box-shadow: 0 0 6px #3b82f6; }
        .pulse-dot-mini.low { background: #f59e0b; box-shadow: 0 0 6px #f59e0b; }
        .pulse-dot-mini.weak { background: #ef4444; box-shadow: 0 0 6px #ef4444; }

        @keyframes pulseMiniDot {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.35; transform: scale(0.7); }
        }

        .co-neural-actions {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .btn-check-rank {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 4px 10px;
            height: 26px;
            border-radius: 7px;
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
            border: none !important;
            color: #ffffff !important;
            background: linear-gradient(135deg, var(--primary-color, #f46a25) 0%, #ff8c42 100%) !important;
            box-shadow: 0 2px 8px color-mix(in srgb, var(--primary-color, #f46a25) 35%, transparent);
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
            white-space: nowrap;
            flex-shrink: 0;
            line-height: 1;
            user-select: none;
        }

        .btn-check-rank:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-color, #f46a25) 50%, transparent);
            filter: brightness(1.06);
        }

        .btn-check-rank:active {
            transform: translateY(0);
        }

        .btn-check-rank svg,
        .btn-check-rank i {
            width: 12px;
            height: 12px;
            flex-shrink: 0;
        }

        .btn-check-rank.analyzing svg,
        .btn-check-rank.analyzing i {
            animation: spin 1s linear infinite;
        }

        .co-neural-tier-pill {
            display: inline-flex;
            align-items: center;
            padding: 3px 9px;
            border-radius: 20px;
            font-size: 10.5px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.4px;
            line-height: 1;
            border: none !important;
        }

        .co-neural-tier-pill.optimal {
            background: rgba(16, 185, 129, 0.14);
            color: #10b981;
        }

        .co-neural-tier-pill.good {
            background: rgba(59, 130, 246, 0.14);
            color: #3b82f6;
        }

        .co-neural-tier-pill.low {
            background: rgba(245, 158, 11, 0.14);
            color: #f59e0b;
        }

        .co-neural-tier-pill.weak {
            background: rgba(239, 68, 68, 0.14);
            color: #ef4444;
        }

        .toggle-radar-btn {
            background: var(--card-bg);
            border: none !important;
            border-radius: 7px;
            color: var(--text-muted);
            cursor: pointer;
            width: 26px;
            height: 26px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            box-shadow: var(--co-shadow-surface);
        }
        .toggle-radar-btn:hover {
            color: var(--text-main);
            background: color-mix(in srgb, var(--primary-color) 10%, var(--card-bg));
            transform: scale(1.05);
        }
        .toggle-radar-btn svg { width: 13px; height: 13px; }

        /* Body Collapse */
        .co-neural-body-wrap {
            transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
            max-height: 400px;
            opacity: 1;
            overflow: visible;
        }

        .co-neural-score-card.compact .co-neural-body-wrap {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            pointer-events: none;
            margin: 0;
        }

        /* -------------------------------------------------------------
           ORBITAL STAGE & TELEMETRY PILLARS
           ------------------------------------------------------------- */
        .co-orbit-stage {
            display: flex;
            align-items: center;
            gap: 16px;
            position: relative;
            padding: 4px 2px 2px;
        }

        .orbit-ambient-aura {
            position: absolute;
            top: 50%;
            left: 20%;
            transform: translate(-50%, -50%);
            width: 140px;
            height: 100px;
            border-radius: 50%;
            background: rgba(16, 185, 129, 0.1);
            filter: blur(35px);
            opacity: 0.6;
            pointer-events: none;
            transition: background 0.5s ease;
        }
        [data-theme="dark"] .orbit-ambient-aura,
        [data-theme="sunmoon"] .orbit-ambient-aura {
            opacity: 0.8;
            background: rgba(16, 185, 129, 0.18);
        }

        /* Left: Quantum Orbit Ring */
        .co-orbit-dial-wrap {
            position: relative;
            width: 98px;
            height: 98px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 4px 6px;
        }

        .co-orbit-svg {
            width: 100%;
            height: 100%;
            transform: rotate(-90deg);
            overflow: visible;
        }

        .co-orbit-needle-svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform-origin: 50% 50%;
            overflow: visible;
            pointer-events: none;
            z-index: 20;
            transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        /* 4-Quadrant Colored Outer Tracks (0-25% Red, 26-50% Yellow, 51-75% Cyan, 76-100% Green) */
        .orbit-track-seg {
            fill: none;
            stroke-width: 1.8;
            stroke-dasharray: 2.5 5;
            opacity: 0.88;
            transition: all 0.3s ease;
        }
        .orbit-track-seg.seg-red { stroke: #ef4444; }
        .orbit-track-seg.seg-yellow { stroke: #f59e0b; }
        .orbit-track-seg.seg-cyan { stroke: #06b6d4; }
        .orbit-track-seg.seg-green { stroke: #10b981; }

        [data-theme="dark"] .orbit-track-seg,
        [data-theme="sunmoon"] .orbit-track-seg,
        .dark-theme .orbit-track-seg {
            stroke-width: 2.1;
            opacity: 0.98;
            filter: drop-shadow(0 0 3px currentColor);
        }

        /* Cardinal Station Pin Dots on SVG Track */
        .orbit-station-dot {
            opacity: 0.95;
            transition: all 0.3s ease;
        }
        .orbit-station-dot.dot-100 { fill: #10b981; }
        .orbit-station-dot.dot-25 { fill: #f59e0b; }
        .orbit-station-dot.dot-50 { fill: #06b6d4; }
        .orbit-station-dot.dot-75 { fill: #10b981; }

        /* Milestone Station Numbers around Dial (100, 25, 50, 75) */
        .orbit-station-pin {
            position: absolute;
            font-size: 8px;
            font-weight: 900;
            font-family: 'JetBrains Mono', monospace;
            line-height: 1;
            padding: 1px 3px;
            border-radius: 4px;
            background: color-mix(in srgb, var(--card-bg) 88%, var(--bg-body));
            border: 1px solid color-mix(in srgb, var(--border-color) 40%, transparent);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
            pointer-events: none;
            user-select: none;
            z-index: 5;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .orbit-station-pin.st-top {
            top: -7px;
            left: 50%;
            transform: translateX(-50%);
            color: #10b981;
        }

        .orbit-station-pin.st-right {
            top: 50%;
            right: -9px;
            transform: translateY(-50%);
            color: #f59e0b;
        }

        .orbit-station-pin.st-bottom {
            bottom: -7px;
            left: 50%;
            transform: translateX(-50%);
            color: #06b6d4;
        }

        .orbit-station-pin.st-left {
            top: 50%;
            left: -9px;
            transform: translateY(-50%);
            color: #10b981;
        }

        [data-theme="dark"] .orbit-station-pin,
        [data-theme="sunmoon"] .orbit-station-pin,
        .dark-theme .orbit-station-pin {
            background: color-mix(in srgb, var(--card-bg) 92%, #000);
            border-color: color-mix(in srgb, var(--border-color) 65%, transparent);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
        }

        .orbit-track-outer {
            fill: none;
            stroke: color-mix(in srgb, var(--primary-color) 45%, #94a3b8);
            stroke-width: 1.8;
            stroke-dasharray: 2.5 5;
            opacity: 0.85;
            transition: stroke 0.3s ease, opacity 0.3s ease;
        }

        .orbit-track-inner {
            fill: none;
            stroke: color-mix(in srgb, var(--border-color) 70%, transparent);
            stroke-width: 5.5;
        }

        .orbit-progress-ring {
            fill: none;
            stroke-width: 6.5;
            stroke-linecap: butt;
            stroke-dasharray: 263.89;
            transition: stroke-dashoffset 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), stroke 0.4s ease;
            filter: drop-shadow(0 2px 6px rgba(16, 185, 129, 0.35));
        }

        /* Dynamic Needle Indicator Line (خط العقرب: أسمر بالنهاري وأبيض خافت بالليلي) */
        .orbit-needle-group {
            pointer-events: none;
        }

        .orbit-needle-line {
            stroke-width: 2;
            stroke-linecap: round;
            stroke: #18181b;
            filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.3));
            transition: stroke 0.3s ease, filter 0.3s ease;
        }

        .orbit-needle-head {
            display: none;
        }

        [data-theme="dark"] .orbit-needle-line,
        [data-theme="sunmoon"] .orbit-needle-line,
        .dark-theme .orbit-needle-line {
            stroke: rgba(255, 255, 255, 0.72);
            filter: drop-shadow(0 0 2.5px rgba(255, 255, 255, 0.3));
        }

        .co-orbit-score-center {
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            line-height: 1;
            user-select: none;
        }

        .orbit-score-number {
            font-size: 24px;
            font-weight: 900;
            font-family: 'JetBrains Mono', monospace;
            color: var(--text-main);
            letter-spacing: -0.8px;
            line-height: 1;
        }

        .orbit-score-number.optimal { color: #10b981; }
        .orbit-score-number.good { color: #3b82f6; }
        .orbit-score-number.low { color: #f59e0b; }
        .orbit-score-number.weak { color: #ef4444; }

        [data-theme="dark"] .orbit-score-number.optimal,
        [data-theme="sunmoon"] .orbit-score-number.optimal {
            text-shadow: 0 0 14px rgba(16, 185, 129, 0.55);
        }
        [data-theme="dark"] .orbit-score-number.good,
        [data-theme="sunmoon"] .orbit-score-number.good {
            text-shadow: 0 0 14px rgba(59, 130, 246, 0.55);
        }
        [data-theme="dark"] .orbit-score-number.low,
        [data-theme="sunmoon"] .orbit-score-number.low {
            text-shadow: 0 0 14px rgba(245, 158, 11, 0.55);
        }
        [data-theme="dark"] .orbit-score-number.weak,
        [data-theme="sunmoon"] .orbit-score-number.weak {
            text-shadow: 0 0 14px rgba(239, 68, 68, 0.55);
        }

        .orbit-pct {
            font-size: 12px;
            font-weight: 700;
            opacity: 0.85;
            margin-left: 1px;
        }

        .orbit-score-label {
            font-size: 8.5px;
            font-weight: 800;
            color: var(--text-muted);
            letter-spacing: 0.8px;
            margin-top: 2px;
            text-transform: uppercase;
        }

        /* Right: 3 AI Telemetry Pillars */
        .co-orbit-pillars {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 8px;
            justify-content: center;
        }

        .co-pillar-row {
            display: flex;
            flex-direction: column;
            gap: 3.5px;
        }

        .pillar-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 11.5px;
            font-weight: 700;
            line-height: 1;
        }

        .pillar-name {
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--text-muted);
        }

        .pillar-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        .pillar-dot.dot-emerald { background: #10b981; box-shadow: 0 0 5px rgba(16, 185, 129, 0.6); }
        .pillar-dot.dot-cyan { background: #06b6d4; box-shadow: 0 0 5px rgba(6, 182, 212, 0.6); }
        .pillar-dot.dot-blue { background: #3b82f6; box-shadow: 0 0 5px rgba(59, 130, 246, 0.6); }

        .pillar-val {
            font-size: 11.5px;
            font-weight: 800;
            font-family: 'JetBrains Mono', monospace;
            color: var(--text-main);
        }

        .pillar-track {
            width: 100%;
            height: 7px;
            background-color: color-mix(in srgb, var(--bg-body) 70%, var(--card-bg));
            background-image: linear-gradient(
                to right,
                transparent 24.3%,
                color-mix(in srgb, var(--border-color) 70%, transparent) 24.3%,
                color-mix(in srgb, var(--border-color) 70%, transparent) 25.7%,
                transparent 25.7%,
                transparent 49.3%,
                color-mix(in srgb, var(--border-color) 70%, transparent) 49.3%,
                color-mix(in srgb, var(--border-color) 70%, transparent) 50.7%,
                transparent 50.7%,
                transparent 74.3%,
                color-mix(in srgb, var(--border-color) 70%, transparent) 74.3%,
                color-mix(in srgb, var(--border-color) 70%, transparent) 75.7%,
                transparent 75.7%
            );
            border: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
            border-radius: 10px;
            overflow: visible;
            position: relative;
        }

        .pillar-fill {
            height: 100%;
            border-radius: 10px;
            position: relative;
            transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .pillar-fill::after {
            content: '';
            position: absolute;
            top: 50%;
            right: -1px;
            transform: translateY(-50%);
            width: 3.5px;
            height: 10.5px;
            border-radius: 2px;
            background: #ffffff;
            box-shadow: 0 0 5px currentColor, 0 1px 3px rgba(0, 0, 0, 0.4);
            pointer-events: none;
        }
        [dir="rtl"] .pillar-fill::after {
            right: auto;
            left: -1px;
        }
        [data-theme="dark"] .pillar-fill::after,
        [data-theme="sunmoon"] .pillar-fill::after,
        .dark-theme .pillar-fill::after {
            background: #ffffff;
            box-shadow: 0 0 6px currentColor, 0 1px 3px rgba(0, 0, 0, 0.7);
        }

        .fill-emerald {
            background: linear-gradient(90deg, #059669, #10b981);
            color: #10b981;
            box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
        }
        .fill-cyan {
            background: linear-gradient(90deg, #0891b2, #06b6d4);
            color: #06b6d4;
            box-shadow: 0 0 8px rgba(6, 182, 212, 0.4);
        }
        .fill-blue {
            background: linear-gradient(90deg, #2563eb, #3b82f6);
            color: #3b82f6;
            box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
        }

        /* -------------------------------------------------------------
           MILESTONE STATIONS LEGEND BAR (0-25, 26-50, 51-75, 76-100)
           ------------------------------------------------------------- */
        .co-orbit-milestones-bar {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 4px;
            margin-top: 6px;
            padding: 5px 2px 2px;
            border-top: 1px dashed color-mix(in srgb, var(--border-color) 40%, transparent);
            width: 100%;
            box-sizing: border-box;
        }

        .ms-pill {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            padding: 3px 4px;
            border-radius: 6px;
            background: color-mix(in srgb, var(--bg-body) 70%, var(--card-bg));
            border: 1px solid color-mix(in srgb, var(--border-color) 30%, transparent);
            font-size: 10px;
            color: var(--text-muted);
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            white-space: nowrap;
            user-select: none;
            line-height: 1.1;
        }

        .ms-pill .ms-range {
            font-family: 'JetBrains Mono', monospace;
            font-weight: 800;
            font-size: 9px;
            letter-spacing: -0.3px;
        }

        .ms-pill .ms-txt {
            font-size: 9px;
            font-weight: 700;
        }

        .ms-dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        .ms-pill-dot.dot-red { background: #ef4444; box-shadow: 0 0 5px rgba(239, 68, 68, 0.6); }
        .ms-pill-dot.dot-yellow { background: #f59e0b; box-shadow: 0 0 5px rgba(245, 158, 11, 0.6); }
        .ms-pill-dot.dot-cyan { background: #06b6d4; box-shadow: 0 0 5px rgba(6, 182, 212, 0.6); }
        .ms-pill-dot.dot-green { background: #10b981; box-shadow: 0 0 5px rgba(16, 185, 129, 0.6); }

        /* Active Current Milestone Highlight */
        .ms-pill.is-current {
            font-weight: 800;
            box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
            transform: translateY(-0.5px);
        }
        .ms-pill.ms-red.is-current {
            background: color-mix(in srgb, #ef4444 14%, var(--card-bg));
            border-color: color-mix(in srgb, #ef4444 40%, transparent);
            color: #ef4444;
        }
        .ms-pill.ms-yellow.is-current {
            background: color-mix(in srgb, #f59e0b 14%, var(--card-bg));
            border-color: color-mix(in srgb, #f59e0b 40%, transparent);
            color: #d97706;
        }
        .ms-pill.ms-cyan.is-current {
            background: color-mix(in srgb, #06b6d4 14%, var(--card-bg));
            border-color: color-mix(in srgb, #06b6d4 40%, transparent);
            color: #0891b2;
        }
        .ms-pill.ms-green.is-current {
            background: color-mix(in srgb, #10b981 14%, var(--card-bg));
            border-color: color-mix(in srgb, #10b981 40%, transparent);
            color: #059669;
        }

        [data-theme="dark"] .ms-pill,
        [data-theme="sunmoon"] .ms-pill,
        .dark-theme .ms-pill {
            background: color-mix(in srgb, var(--card-bg) 75%, #000);
            border-color: color-mix(in srgb, var(--border-color) 45%, transparent);
        }

        [data-theme="dark"] .ms-pill.ms-red.is-current {
            background: rgba(239, 68, 68, 0.2);
            color: #f87171;
            border-color: rgba(239, 68, 68, 0.45);
        }
        [data-theme="dark"] .ms-pill.ms-yellow.is-current {
            background: rgba(245, 158, 11, 0.2);
            color: #fbbf24;
            border-color: rgba(245, 158, 11, 0.45);
        }
        [data-theme="dark"] .ms-pill.ms-cyan.is-current {
            background: rgba(6, 182, 212, 0.2);
            color: #38bdf8;
            border-color: rgba(6, 182, 212, 0.45);
        }
        [data-theme="dark"] .ms-pill.ms-green.is-current {
            background: rgba(16, 185, 129, 0.2);
            color: #34d399;
            border-color: rgba(16, 185, 129, 0.45);
        }

        /* -------------------------------------------------------------
           AGENT MODE CAPSULE STRIP & SUB-TOOL PILLS
           ------------------------------------------------------------- */
        .co-unified-header-deck {
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding: 4px 12px 6px;
            box-sizing: border-box;
            background: transparent !important;
            border-bottom: none !important;
            position: relative;
            z-index: 25;
            user-select: none;
        }

        /* Agent Mode Strip (Clean Borderless Floating Track) */
        .co-agent-mode-strip {
            display: flex;
            align-items: center;
            position: relative;
            width: 100%;
            background: rgba(0, 0, 0, 0.05);
            border: none !important;
            border-radius: 10px;
            padding: 3px;
            box-sizing: border-box;
            box-shadow: none !important;
            isolation: isolate;
        }

        [data-theme="dark"] .co-agent-mode-strip {
            background: rgba(255, 255, 255, 0.05);
            border: none !important;
        }

        [data-theme="sunmoon"] .co-agent-mode-strip {
            background: rgba(255, 255, 255, 0.06);
            border: none !important;
        }

        /* Animated Active Glider Pill (Pure, Seamless, Zero-Border) */
        .co-mode-glider {
            position: absolute;
            top: 3px;
            bottom: 3px;
            left: 3px;
            width: calc((100% - 6px) / 4);
            background: #ffffff;
            border-radius: 8px;
            border: none !important;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
            transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, box-shadow 0.2s ease;
            z-index: 0;
            pointer-events: none;
        }

        [data-theme="dark"] .co-mode-glider {
            background: rgba(255, 255, 255, 0.12);
            border: none !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
        }

        [data-theme="sunmoon"] .co-mode-glider {
            background: rgba(255, 255, 255, 0.12);
            border: none !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
        }

        .co-agent-mode-strip[data-active-tab="keywords"] .co-mode-glider {
            transform: translateX(0);
        }
        .co-agent-mode-strip[data-active-tab="outlines"] .co-mode-glider {
            transform: translateX(100%);
        }
        .co-agent-mode-strip[data-active-tab="gaps"] .co-mode-glider {
            transform: translateX(200%);
        }
        .co-agent-mode-strip[data-active-tab="statics"] .co-mode-glider {
            transform: translateX(300%);
        }

        [dir="rtl"] .co-agent-mode-strip .co-mode-glider {
            left: auto;
            right: 3px;
        }
        [dir="rtl"] .co-agent-mode-strip[data-active-tab="keywords"] .co-mode-glider {
            transform: translateX(0);
        }
        [dir="rtl"] .co-agent-mode-strip[data-active-tab="outlines"] .co-mode-glider {
            transform: translateX(-100%);
        }
        [dir="rtl"] .co-agent-mode-strip[data-active-tab="gaps"] .co-mode-glider {
            transform: translateX(-200%);
        }
        [dir="rtl"] .co-agent-mode-strip[data-active-tab="statics"] .co-mode-glider {
            transform: translateX(-300%);
        }

        .co-mode-tab {
            flex: 1;
            min-width: 0;
            height: 30px;
            border-radius: 8px;
            border: none !important;
            background: transparent !important;
            color: var(--text-muted);
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            transition: color 0.2s ease;
            user-select: none;
            line-height: 1;
            padding: 0 6px;
            position: relative;
            z-index: 1;
            box-shadow: none !important;
        }

        .co-mode-tab:hover {
            color: var(--text-main);
        }

        .co-mode-tab.active {
            background: transparent !important;
            color: var(--primary-color) !important;
            border: none !important;
            box-shadow: none !important;
            font-weight: 800;
        }

        [data-theme="dark"] .co-mode-tab.active,
        [data-theme="sunmoon"] .co-mode-tab.active {
            color: var(--text-main) !important;
        }

        .co-mode-tab.ai-mode-tab.active {
            color: var(--ai-color, #8b5cf6) !important;
            border: none !important;
            box-shadow: none !important;
        }

        .mode-tab-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .mode-tab-label {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .mode-tab-badge {
            font-size: 9.5px;
            font-weight: 800;
            font-family: 'JetBrains Mono', monospace;
            padding: 1.5px 5px;
            border-radius: 8px;
            background: color-mix(in srgb, var(--primary-color) 14%, transparent);
            color: var(--primary-color);
            line-height: 1;
        }

        .mode-tab-tag {
            font-size: 8.5px;
            font-weight: 900;
            background: linear-gradient(135deg, #8b5cf6, #6366f1);
            color: #ffffff;
            padding: 1px 4.5px;
            border-radius: 6px;
            line-height: 1;
            box-shadow: 0 0 6px rgba(139, 92, 246, 0.4);
        }

        /* Sub-Tool Strip */
        .co-subtool-row {
            display: flex;
            align-items: center;
            width: 100%;
            position: relative;
        }

        /* Sleek Glassmorphic Floating Popover */
        .co-export-dropdown-popover {
            position: absolute;
            top: calc(100% + 6px);
            right: 0;
            width: 245px;
            background: color-mix(in srgb, var(--card-bg) 96%, var(--bg-body));
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
            border-radius: 12px;
            box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.22), 0 4px 12px rgba(0, 0, 0, 0.1);
            padding: 10px;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            gap: 8px;
            animation: coFadeDown 0.16s cubic-bezier(0.16, 1, 0.3, 1);
        }

        [dir="rtl"] .co-export-dropdown-popover,
        html[dir="rtl"] .co-export-dropdown-popover,
        body[dir="rtl"] .co-export-dropdown-popover {
            right: auto;
            left: 0;
            direction: rtl;
        }

        @keyframes coFadeDown {
            from { opacity: 0; transform: translateY(-6px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .export-popover-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 6px;
            border-bottom: 1px solid color-mix(in srgb, var(--border-color) 35%, transparent);
        }

        .export-scope-title {
            font-size: 11px;
            font-weight: 800;
            color: var(--text-main);
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .export-scope-count {
            font-size: 10px;
            font-weight: 700;
            color: var(--text-muted);
            background: color-mix(in srgb, var(--border-color) 25%, transparent);
            padding: 1px 6px;
            border-radius: 6px;
        }

        .export-scope-pills {
            display: flex;
            gap: 4px;
            background: color-mix(in srgb, var(--bg-body) 80%, var(--card-bg));
            padding: 2px;
            border-radius: 7px;
            border: 1px solid color-mix(in srgb, var(--border-color) 30%, transparent);
        }

        .export-scope-pill {
            flex: 1;
            height: 23px;
            border: none !important;
            background: transparent;
            color: var(--text-muted);
            font-size: 10px;
            font-weight: 700;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.14s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .export-scope-pill:hover {
            color: var(--text-main);
        }

        .export-scope-pill.active {
            background: var(--card-bg) !important;
            color: var(--primary-color) !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
            font-weight: 800;
        }

        .export-format-block {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .export-format-header {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-top: 2px;
        }

        .fmt-badge {
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 0.5px;
            padding: 1px 5px;
            border-radius: 4px;
            text-transform: uppercase;
        }

        .fmt-csv {
            background: rgba(16, 185, 129, 0.15);
            color: #10b981;
            border: 1px solid rgba(16, 185, 129, 0.3);
        }

        .fmt-json {
            background: rgba(99, 102, 241, 0.15);
            color: #6366f1;
            border: 1px solid rgba(99, 102, 241, 0.3);
        }

        .fmt-title {
            font-size: 10px;
            font-weight: 600;
            color: var(--text-muted);
        }

        .export-format-buttons {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 5px;
        }

        .export-action-item {
            height: 27px;
            border-radius: 7px;
            background: color-mix(in srgb, var(--card-bg) 80%, var(--bg-body));
            border: 1px solid color-mix(in srgb, var(--border-color) 35%, transparent) !important;
            color: var(--text-main);
            font-size: 10px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            cursor: pointer;
            transition: all 0.14s ease;
        }

        .export-action-item:hover {
            background: var(--card-bg);
            border-color: var(--primary-color) !important;
            color: var(--primary-color);
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
            transform: translateY(-1px);
        }

        .export-format-divider {
            height: 1px;
            background: color-mix(in srgb, var(--border-color) 35%, transparent);
            margin: 2px 0;
        }

        /* Quick Export actions in FAQs status bar */
        .faqs-quick-export-actions {
            display: flex;
            align-items: center;
            gap: 4px;
            margin-left: auto;
        }

        [dir="rtl"] .faqs-quick-export-actions,
        html[dir="rtl"] .faqs-quick-export-actions,
        body[dir="rtl"] .faqs-quick-export-actions {
            margin-left: 0;
            margin-right: auto;
        }

        .faq-mini-export-btn {
            height: 22px;
            padding: 0 7px;
            border-radius: 6px;
            background: color-mix(in srgb, var(--card-bg) 85%, var(--bg-body));
            border: 1px solid color-mix(in srgb, var(--border-color) 40%, transparent) !important;
            color: var(--text-muted);
            font-size: 10px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 3px;
            cursor: pointer;
            transition: all 0.14s ease;
        }

        .faq-mini-export-btn:hover {
            background: var(--card-bg);
            color: var(--primary-color);
            border-color: var(--primary-color) !important;
        }

        .co-subtool-pills {
            display: flex;
            align-items: center;
            gap: 3px;
            width: 100%;
            overflow-x: auto;
            padding: 3px;
            border-radius: 10px;
            background: color-mix(in srgb, var(--bg-body) 85%, var(--card-bg));
            border: 1px solid color-mix(in srgb, var(--border-color) 40%, transparent);
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
            scrollbar-width: none;
            box-sizing: border-box;
        }
        .co-subtool-pills::-webkit-scrollbar { display: none; }

        .subtool-pill {
            flex: 1;
            height: 28px;
            border-radius: 7px;
            border: none !important;
            background: transparent;
            color: var(--text-muted);
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            transition: all 0.16s cubic-bezier(0.4, 0, 0.2, 1);
            white-space: nowrap;
            padding: 0 8px;
            box-shadow: none;
        }

        .subtool-pill:hover {
            color: var(--text-main);
            background: color-mix(in srgb, var(--card-bg) 65%, transparent);
        }

        .subtool-pill.active {
            background: var(--card-bg) !important;
            color: var(--primary-color) !important;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 0 0 1px color-mix(in srgb, var(--border-color) 35%, transparent) !important;
            font-weight: 800;
        }

        .subtool-pill.ai-pill.active {
            background: var(--card-bg) !important;
            color: var(--ai-color, #8b5cf6) !important;
            box-shadow: 0 1px 4px rgba(139, 92, 246, 0.18), 0 0 0 1px color-mix(in srgb, var(--ai-color, #8b5cf6) 25%, transparent) !important;
            font-weight: 800;
        }

        .subtool-pill svg {
            width: 13px;
            height: 13px;
            stroke-width: 2.2;
            flex-shrink: 0;
        }

        .co-subtool-pills.outline-pills .subtool-pill {
            flex: 1;
        }

        .top-tool-divider {
            width: 1px;
            height: 16px;
            background: color-mix(in srgb, var(--text-muted) 18%, transparent);
            margin: 0 2px;
            flex-shrink: 0;
        }

        .top-tool-info-text {
            font-size: 12px;
            font-weight: 700;
            color: var(--text-muted);
            letter-spacing: 0.1px;
        }

        /* Lower Section: Dynamic Console Panes Body */
        .co-console-body {
            flex: 1 1 0% !important;
            min-height: 0 !important;
            display: flex;
            flex-direction: column;
            overflow: hidden !important;
            background: transparent !important;
            height: 100%;
        }

        .tab-pane {
            display: none;
            flex-direction: column;
            flex: 1 1 0% !important;
            min-height: 0 !important;
            overflow: hidden !important;
            height: 100%;
            position: relative !important;
        }

        .tab-pane.active {
            display: flex !important;
        }

        /* -------------------------------------------------------------
           FLOATING ANALYTICAL HUD CAPSULE (Aero-Space Frosted Glass Command Capsule)
           ------------------------------------------------------------- */
        .kw-floating-hud {
            position: absolute;
            bottom: 8px;
            left: 8px;
            right: 8px;
            z-index: 30;
            background: color-mix(in srgb, var(--card-bg) 92%, transparent);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: none !important;
            border-radius: 14px;
            box-shadow: var(--co-shadow-floating);
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            padding: 5px 8px;
            gap: 4px;
            overflow: visible !important;
            box-sizing: border-box;
            transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
            user-select: none;
        }

        /* Left Column: Status Tabs + Spectrum Indicator directly below them */
        .kw-hud-metrics-col {
            flex: 1 1 auto;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 3px;
            overflow: hidden;
        }

        /* 4 Status Tabs Belt */
        .hud-status-belt {
            display: flex;
            align-items: center;
            gap: 2px;
            width: 100%;
            min-width: 0;
        }

        .hud-tab {
            flex: 1 1 0;
            min-width: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 3px;
            padding: 3px 4px;
            background: transparent;
            border: none !important;
            border-radius: 7px;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
            user-select: none;
            line-height: 1;
            box-sizing: border-box;
        }
        .hud-tab:hover {
            background: color-mix(in srgb, var(--card-bg) 70%, var(--bg-body));
        }

        .hud-tab.tab-missing.active {
            box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2) !important;
            background: color-mix(in srgb, #ef4444 14%, var(--card-bg)) !important;
            color: #ef4444 !important;
        }

        .hud-tab.tab-low.active {
            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2) !important;
            background: color-mix(in srgb, #3b82f6 14%, var(--card-bg)) !important;
            color: #3b82f6 !important;
        }

        .hud-tab.tab-good.active {
            box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2) !important;
            background: color-mix(in srgb, #10b981 14%, var(--card-bg)) !important;
            color: #10b981 !important;
        }

        .hud-tab.tab-overused.active {
            box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2) !important;
            background: color-mix(in srgb, #f59e0b 14%, var(--card-bg)) !important;
            color: #f59e0b !important;
        }

        .hud-dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        .hud-dot.dot-red { background: #ef4444; box-shadow: 0 0 6px #ef4444; }
        .hud-dot.dot-blue { background: #3b82f6; box-shadow: 0 0 6px #3b82f6; }
        .hud-dot.dot-green { background: #10b981; box-shadow: 0 0 6px #10b981; }
        .hud-dot.dot-orange { background: #f59e0b; box-shadow: 0 0 6px #f59e0b; }

        .hud-count {
            font-size: 12.5px;
            font-weight: 800;
            font-family: 'JetBrains Mono', 'Fira Code', monospace;
            line-height: 1;
            letter-spacing: -0.3px;
            flex-shrink: 0;
        }

        .hud-label {
            font-size: 8.5px;
            font-weight: 700;
            color: var(--text-muted);
            letter-spacing: 0;
            text-transform: uppercase;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1;
        }

        .hud-tab.active .hud-label {
            color: var(--text-main);
            font-weight: 800;
        }

        /* Floating Health Micro Spectrum Runway (Confined strictly under the 4 status tabs) */
        .kw-hud-spectrum-deck {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 4px 1px 4px;
            width: 100%;
            box-sizing: border-box;
        }

        .kw-hud-spectrum {
            width: 92%;
            height: 2.5px;
            display: flex;
            overflow: hidden;
            background: color-mix(in srgb, var(--border-color) 80%, transparent);
            border-radius: 10px;
            transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .kw-floating-hud:hover .kw-hud-spectrum {
            width: 98%;
        }
        .hud-spec-seg {
            height: 100%;
            transition: width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .seg-red { background: linear-gradient(90deg, #ef4444, #f87171); box-shadow: 0 0 6px rgba(239, 68, 68, 0.5); }
        .seg-blue { background: linear-gradient(90deg, #3b82f6, #60a5fa); box-shadow: 0 0 6px rgba(59, 130, 246, 0.5); }
        .seg-green { background: linear-gradient(90deg, #10b981, #34d399); box-shadow: 0 0 6px rgba(16, 185, 129, 0.5); }
        .seg-orange { background: linear-gradient(90deg, #f59e0b, #fbbf24); box-shadow: 0 0 6px rgba(245, 158, 11, 0.5); }

        /* Vertical Separator */
        .hud-divider {
            width: 1px;
            height: 24px;
            background: color-mix(in srgb, var(--text-muted) 18%, transparent);
            margin: 0 1px;
            flex-shrink: 0;
            align-self: center;
        }

        /* Right Actions Column: Centered Search & Export Buttons */
        .kw-hud-actions-col {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            flex-shrink: 0;
            align-self: center;
        }

        .hud-export-wrapper {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .hud-export-trigger {
            width: 30px !important;
            height: 30px !important;
            min-width: 30px !important;
            max-width: 30px !important;
            border-radius: 8px;
            border: none !important;
            background: color-mix(in srgb, var(--bg-body) 80%, var(--card-bg));
            color: var(--text-main) !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
            flex-shrink: 0 !important;
            padding: 0 !important;
            margin: 0 !important;
            outline: none;
            box-sizing: border-box !important;
            align-self: center;
            box-shadow: var(--co-shadow-surface);
        }

        .hud-export-trigger svg,
        .hud-export-trigger i,
        .hud-export-trigger span {
            pointer-events: none !important;
        }

        .hud-export-trigger svg,
        .hud-export-trigger i {
            width: 14px !important;
            height: 14px !important;
            color: inherit !important;
            stroke: currentColor !important;
            fill: none !important;
            display: block !important;
            opacity: 0.9;
            transition: all 0.2s ease;
        }

        .hud-export-trigger:hover,
        .hud-export-trigger.active {
            color: var(--primary-color) !important;
            background: color-mix(in srgb, var(--primary-color) 12%, var(--card-bg));
            box-shadow: 0 2px 10px var(--primary-glow);
            transform: scale(1.05);
        }

        .hud-export-wrapper .co-export-dropdown-popover {
            position: absolute !important;
            bottom: calc(100% + 10px) !important;
            top: auto !important;
            right: 0 !important;
            left: auto !important;
            width: 255px !important;
            z-index: 99999 !important;
            box-shadow: 0 -10px 32px -4px rgba(0, 0, 0, 0.28), 0 -3px 12px rgba(0, 0, 0, 0.14) !important;
            animation: coFadeUp 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }

        [dir="rtl"] .hud-export-wrapper .co-export-dropdown-popover,
        html[dir="rtl"] .hud-export-wrapper .co-export-dropdown-popover,
        body[dir="rtl"] .hud-export-wrapper .co-export-dropdown-popover {
            right: auto !important;
            left: 0 !important;
        }

        @keyframes coFadeUp {
            from { opacity: 0; transform: translateY(6px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .hud-search-trigger {
            width: 30px !important;
            height: 30px !important;
            min-width: 30px !important;
            max-width: 30px !important;
            border-radius: 8px;
            border: none !important;
            background: color-mix(in srgb, var(--bg-body) 80%, var(--card-bg));
            color: var(--text-main) !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
            flex-shrink: 0 !important;
            position: relative;
            padding: 0 !important;
            margin: 0 !important;
            outline: none;
            box-sizing: border-box !important;
            align-self: center;
            box-shadow: var(--co-shadow-surface);
        }

        .hud-search-trigger span {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            line-height: 1;
        }
        .hud-search-trigger svg,
        .hud-search-trigger i {
            width: 14px !important;
            height: 14px !important;
            color: inherit !important;
            stroke: currentColor !important;
            fill: none !important;
            display: block !important;
            opacity: 0.9;
            transition: all 0.2s ease;
        }
        .hud-search-trigger:hover,
        .hud-search-trigger.active {
            color: var(--primary-color) !important;
            background: color-mix(in srgb, var(--primary-color) 12%, var(--card-bg));
            box-shadow: 0 2px 10px var(--primary-glow);
            transform: scale(1.05);
        }

        .hud-search-trigger:hover svg,
        .hud-search-trigger.active svg {
            color: var(--primary-color) !important;
            opacity: 1;
            filter: drop-shadow(0 0 5px var(--primary-color));
        }
        .hud-search-dot {
            position: absolute;
            top: 4px;
            right: 4px;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--primary-color);
            box-shadow: 0 0 8px var(--primary-color);
            animation: pulseSearchDot 1.5s infinite;
        }
        @keyframes pulseSearchDot {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.4); opacity: 0.7; }
        }

        /* Floating Spotlight Search Bar Overlay */
        .kw-floating-search-overlay {
            position: absolute;
            bottom: 52px;
            left: 8px;
            right: 8px;
            z-index: 35;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 7px 10px;
            background: var(--card-bg);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: none !important;
            border-radius: 12px;
            box-shadow: var(--co-shadow-floating);
            animation: floatingSearchSlideUp 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        @keyframes floatingSearchSlideUp {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .spotlight-icon {
            color: var(--primary-color);
            display: inline-flex;
            align-items: center;
            flex-shrink: 0;
        }
        .spotlight-input {
            flex: 1;
            min-width: 0;
            border: none;
            background: transparent;
            outline: none;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-main);
            padding: 2px 0;
        }

        .spotlight-clear-btn,
        .spotlight-close-btn {
            background: color-mix(in srgb, var(--border-color) 60%, transparent);
            border: none !important;
            border-radius: 5px;
            width: 22px;
            height: 22px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.15s ease;
            padding: 0;
        }
        .spotlight-clear-btn:hover {
            background: rgba(239, 68, 68, 0.15);
            color: #ef4444;
        }
        .spotlight-close-btn:hover {
            background: rgba(16, 185, 129, 0.15);
            color: #10b981;
        }

        /* Utility colors handled in atomic utilities */

        /* -------------------------------------------------------------
           KEYWORDS LIST & QUANTUM CONTIGUOUS TELEMETRY STREAM
           ------------------------------------------------------------- */
        #keywords-list-container,
        .kw-list {
            flex: 1 1 0% !important;
            min-height: 0 !important;
            max-height: 100% !important;
            overflow-y: auto !important;
            overscroll-behavior: contain;
            padding: 4px 10px 72px 10px;
            display: flex;
            flex-direction: column;
            gap: 0 !important;
            list-style: none;
            margin: 0;
            box-sizing: border-box;
            background: transparent !important;
            border: none !important;
        }

        .co-keyword-card {
            flex-shrink: 0 !important;
            min-height: 52px !important;
            box-sizing: border-box !important;
            background: var(--card-bg);
            border: none !important;
            border-radius: 10px !important;
            margin-bottom: 6px !important;
            padding: 7px 10px 8px 15px !important;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 5px;
            transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
            position: relative;
            user-select: none;
            overflow: visible;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
        }

        [dir="rtl"] .co-keyword-card {
            padding: 7px 15px 8px 10px !important;
        }

        /* 1/3 Height Centered Rounded Status Indicator Pill */
        .co-keyword-card::before {
            content: "";
            position: absolute;
            left: 4.5px;
            top: 50%;
            transform: translateY(-50%);
            width: 3.5px;
            height: 38%;
            border-radius: 6px;
            transition: all 0.22s ease;
            opacity: 0.9;
        }

        [dir="rtl"] .co-keyword-card::before {
            left: auto;
            right: 4.5px;
        }

        .co-keyword-card:hover::before {
            height: 56%;
            opacity: 1;
            width: 4px;
        }

        .co-keyword-card.missing::before { background: #ef4444; box-shadow: 0 0 6px rgba(239, 68, 68, 0.5); }
        .co-keyword-card.low::before { background: #3b82f6; box-shadow: 0 0 6px rgba(59, 130, 246, 0.5); }
        .co-keyword-card.good::before { background: #10b981; box-shadow: 0 0 6px rgba(16, 185, 129, 0.5); }
        .co-keyword-card.overused::before { background: #f59e0b; box-shadow: 0 0 6px rgba(245, 158, 11, 0.5); }

        /* Ambient Micro-Glow per Status (Ultra-Soft Seamless Color Tint) */
        .co-keyword-card.missing {
            background: linear-gradient(90deg, color-mix(in srgb, #ef4444 6%, var(--card-bg)) 0%, var(--card-bg) 40%);
        }
        .co-keyword-card.low {
            background: linear-gradient(90deg, color-mix(in srgb, #3b82f6 6%, var(--card-bg)) 0%, var(--card-bg) 40%);
        }
        .co-keyword-card.good {
            background: linear-gradient(90deg, color-mix(in srgb, #10b981 6%, var(--card-bg)) 0%, var(--card-bg) 40%);
        }
        .co-keyword-card.overused {
            background: linear-gradient(90deg, color-mix(in srgb, #f59e0b 6%, var(--card-bg)) 0%, var(--card-bg) 40%);
        }

        [dir="rtl"] .co-keyword-card.missing {
            background: linear-gradient(270deg, color-mix(in srgb, #ef4444 6%, var(--card-bg)) 0%, var(--card-bg) 40%);
        }
        [dir="rtl"] .co-keyword-card.low {
            background: linear-gradient(270deg, color-mix(in srgb, #3b82f6 6%, var(--card-bg)) 0%, var(--card-bg) 40%);
        }
        [dir="rtl"] .co-keyword-card.good {
            background: linear-gradient(270deg, color-mix(in srgb, #10b981 6%, var(--card-bg)) 0%, var(--card-bg) 40%);
        }
        [dir="rtl"] .co-keyword-card.overused {
            background: linear-gradient(270deg, color-mix(in srgb, #f59e0b 6%, var(--card-bg)) 0%, var(--card-bg) 40%);
        }

        /* The Spotlight Elevator Hover Reaction */
        .co-keyword-card:hover {
            transform: translateY(-1.5px) scale(1.004);
            border: none !important;
            box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.12) !important;
            z-index: 10;
        }

        .co-keyword-card.is-favorite {
            background: color-mix(in srgb, #f59e0b 8%, var(--card-bg)) !important;
            border: none !important;
        }

        /* Floor 1: Card Header */
        .kw-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
            height: 20px;
        }

        .kw-fav-btn {
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            opacity: 0.55;
            transition: all 0.2s ease;
            line-height: 1;
        }
        .co-keyword-card:hover .kw-fav-btn {
            opacity: 0.95;
        }
        .kw-fav-btn:hover {
            transform: scale(1.2);
            color: #f59e0b;
            opacity: 1;
        }
        .kw-fav-btn i.fav-active, .kw-fav-btn svg.fav-active {
            fill: #f59e0b !important;
            color: #f59e0b !important;
            opacity: 1 !important;
        }

        .kw-card-title-wrap {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 6px;
            min-width: 0;
            cursor: pointer;
        }
        .kw-card-title {
            font-size: 13.5px;
            font-weight: 700;
            color: var(--text-main);
            letter-spacing: -0.1px;
            transition: color 0.15s ease;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.2;
        }

        .kw-card-title-wrap:hover .kw-card-title {
            color: var(--primary-color) !important;
        }

        .kw-card-pill-type {
            font-size: 9px;
            font-weight: 800;
            font-family: 'JetBrains Mono', monospace;
            padding: 1px 4.5px;
            border-radius: 4px;
            background: color-mix(in srgb, var(--primary-color) 12%, var(--card-bg));
            color: var(--primary-color);
            border: none !important;
            white-space: nowrap;
            line-height: 1.1;
        }

        .kw-card-actions-strip {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .kw-card-quick-action {
            background: color-mix(in srgb, var(--border-color) 60%, transparent);
            border: none !important;
            border-radius: 4px;
            width: 18px;
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: var(--text-muted);
            opacity: 0.6;
            transition: all 0.18s ease;
            padding: 0;
        }
        .co-keyword-card:hover .kw-card-quick-action {
            opacity: 0.95;
        }
        .kw-card-quick-action:hover {
            background: color-mix(in srgb, var(--primary-color) 15%, var(--card-bg));
            color: var(--primary-color);
            transform: scale(1.15);
            opacity: 1;
        }

        /* Micro Precision Score Chip (Sleek, Compact, Monospace) */
        .kw-card-score-pill {
            font-size: 10.5px;
            font-weight: 700;
            font-family: 'JetBrains Mono', 'Fira Code', monospace;
            color: #f59e0b;
            background: color-mix(in srgb, #f59e0b 12%, var(--card-bg));
            border: none !important;
            padding: 1px 5px;
            height: 18px;
            box-sizing: border-box;
            border-radius: 4px;
            display: inline-flex;
            align-items: center;
            gap: 2.5px;
            line-height: 1;
            white-space: nowrap;
            transition: all 0.15s ease;
        }
        .kw-card-score-pill i, .kw-card-score-pill svg {
            width: 9.5px;
            height: 9.5px;
            color: inherit;
            opacity: 0.95;
        }
        .co-keyword-card:hover .kw-card-score-pill {
            filter: brightness(1.05);
        }

        .kw-card-rank-badge {
            font-size: 10.5px;
            font-weight: 700;
            font-family: 'JetBrains Mono', 'Fira Code', monospace;
            color: var(--text-muted);
            background: color-mix(in srgb, var(--border-color) 60%, transparent);
            border: none !important;
            padding: 1px 5px;
            height: 18px;
            box-sizing: border-box;
            border-radius: 4px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            white-space: nowrap;
            transition: all 0.15s ease;
        }
        .co-keyword-card:hover .kw-card-rank-badge {
            color: var(--text-main);
            background: color-mix(in srgb, var(--primary-color) 12%, var(--card-bg));
        }

        /* Floor 2: Recessed Cyber Telemetry Deck (Split 50% Gauge / 50% Metrics) */
        .kw-card-telemetry-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            width: 100%;
            height: 22px;
            min-height: 22px;
            background: color-mix(in srgb, var(--bg-body) 70%, var(--card-bg));
            border: none !important;
            border-radius: 6px;
            padding: 2px 8px;
            box-sizing: border-box;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .co-keyword-card:hover .kw-card-telemetry-row {
            background: color-mix(in srgb, var(--bg-body) 50%, var(--card-bg));
            border: none !important;
        }

        /* Left: Mathematically Accurate Target SEO Range Gauge (Pro Audio / Flight HUD Style) */
        .kw-card-telemetry-row .kw-gauge-wrap {
            flex: 1 1 48%;
            min-width: 0;
            cursor: pointer;
            padding: 0;
            height: 18px;
            display: flex;
            align-items: center;
            direction: ltr !important;
        }
        .kw-gauge-track {
            width: 100%;
            height: 5px;
            background: color-mix(in srgb, var(--border-color) 80%, transparent);
            border-radius: 6px;
            position: relative;
            overflow: visible;
            direction: ltr !important;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
        }

        .kw-gauge-optimal-zone {
            position: absolute;
            top: 0;
            bottom: 0;
            background: linear-gradient(90deg, rgba(16, 185, 129, 0.35) 0%, rgba(52, 211, 153, 0.6) 100%);
            border-radius: 3px;
            box-shadow: 0 0 6px rgba(16, 185, 129, 0.25);
            transition: left 0.3s ease, width 0.3s ease;
        }

        .kw-gauge-needle {
            position: absolute;
            top: 50%;
            width: 11px;
            height: 11px;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0 0 10px currentColor, 0 1px 3px rgba(0, 0, 0, 0.25);
            transition: left 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.18s ease;
            z-index: 3;
            border: 2px solid var(--card-bg);
        }

        .co-keyword-card:hover .kw-gauge-needle {
            transform: translate(-50%, -50%) scale(1.2);
        }
        .kw-gauge-needle.missing { background: #ef4444; color: #ef4444; }
        .kw-gauge-needle.low { background: #3b82f6; color: #3b82f6; }
        .kw-gauge-needle.good { background: #10b981; color: #10b981; }
        .kw-gauge-needle.overused { background: #f59e0b; color: #f59e0b; }

        /* Right: High-Legibility Abbreviated Telemetry Deck */
        .kw-card-telemetry-row .kw-card-bottom-deck {
            flex: 1 1 52%;
            min-width: 0;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 6px;
            height: 18px;
            cursor: pointer;
        }

        .kw-deck-item {
            display: flex;
            align-items: center;
            gap: 3px;
            white-space: nowrap;
        }

        .deck-abbr {
            font-size: 9px;
            font-weight: 800;
            font-family: 'JetBrains Mono', 'Fira Code', monospace;
            color: var(--text-muted);
            background: color-mix(in srgb, var(--border-color) 60%, transparent);
            padding: 1px 3.5px;
            border-radius: 3px;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            letter-spacing: 0.2px;
        }

        .deck-val {
            font-family: 'JetBrains Mono', 'Fira Code', monospace;
            font-size: 11px;
            line-height: 1;
        }
        .deck-val .c-val {
            font-weight: 800;
            color: var(--text-main) !important;
        }

        .deck-val .c-slash {
            color: var(--text-muted);
            opacity: 0.5;
            margin: 0 1px;
        }
        .deck-val .c-target {
            font-weight: 600;
            color: var(--text-muted);
            font-size: 10px;
        }

        .deck-opt-range {
            font-size: 9.5px;
            font-weight: 800;
            font-family: 'JetBrains Mono', 'Fira Code', monospace;
            color: var(--text-muted);
            background: color-mix(in srgb, var(--border-color) 60%, transparent);
            border: none !important;
            padding: 1px 4px;
            border-radius: 3px;
            line-height: 1;
            white-space: nowrap;
        }

        .empty-kw-notice {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 30px 15px;
            color: var(--text-muted);
            font-size: 13px;
            font-weight: 600;
            text-align: center;
        }

        /* Backward Compatibility .kw-row */
        .kw-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 12px;
            background: var(--card-bg);
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            user-select: none;
            margin-bottom: 6px;
            box-shadow: var(--co-shadow-card);
        }
        .kw-row:hover {
            background: color-mix(in srgb, var(--primary-color) 8%, var(--card-bg));
            transform: translateX(-2px);
            box-shadow: var(--co-shadow-floating);
        }
        [dir="rtl"] .kw-row:hover { transform: translateX(2px); }
        .kw-row.missing { box-shadow: inset 3.5px 0 0 #ef4444, var(--co-shadow-card); }
        [dir="rtl"] .kw-row.missing { box-shadow: inset -3.5px 0 0 #ef4444, var(--co-shadow-card); }
        .kw-row.low { box-shadow: inset 3.5px 0 0 #3b82f6, var(--co-shadow-card); }
        [dir="rtl"] .kw-row.low { box-shadow: inset -3.5px 0 0 #3b82f6, var(--co-shadow-card); }
        .kw-row.good { box-shadow: inset 3.5px 0 0 #10b981, var(--co-shadow-card); }
        [dir="rtl"] .kw-row.good { box-shadow: inset -3.5px 0 0 #10b981, var(--co-shadow-card); }
        .kw-row.overused { box-shadow: inset 3.5px 0 0 #f59e0b, var(--co-shadow-card); }
        [dir="rtl"] .kw-row.overused { box-shadow: inset -3.5px 0 0 #f59e0b, var(--co-shadow-card); }

        .kw-word-col { flex: 1; display: flex; align-items: center; gap: 8px; overflow: hidden; }
        .kw-text { font-size: 13px; font-weight: 700; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .kw-stat-col-legacy { display: flex; align-items: baseline; gap: 3px; font-family: 'JetBrains Mono', monospace; font-size: 12px; flex-shrink: 0; }
        .kw-count { font-weight: 800; color: var(--text-main); }
        .kw-target { font-size: 10.5px; color: var(--text-muted); }

        /* -------------------------------------------------------------
           FAQS / QUESTIONS LIST (SCROLLABLE CONTAINER)
           ------------------------------------------------------------- */
        #faqs-list-container,
        .faqs-list,
        #gaps-list-container,
        .gaps-list,
        #ai-pred-list-container,
        .ai-pred-list {
            flex: 1 1 0% !important;
            min-height: 0 !important;
            max-height: 100% !important;
            overflow-y: auto !important;
            overscroll-behavior: contain;
            padding: 8px 10px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            box-sizing: border-box;
        }

        .faq-item-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 10px 12px;
            background: var(--card-bg);
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            user-select: none;
            box-shadow: var(--co-shadow-card);
        }

        .faq-item-row:hover {
            background: color-mix(in srgb, var(--primary-color) 8%, var(--card-bg));
            transform: translateX(-2px);
            box-shadow: var(--co-shadow-floating);
        }

        [dir="rtl"] .faq-item-row:hover {
            transform: translateX(2px);
        }

        .faq-text {
            font-size: 12.5px;
            font-weight: 600;
            color: var(--text-main);
            line-height: 1.4;
            flex: 1;
        }

        .faq-insert-btn {
            color: var(--primary-color);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            opacity: 0.8;
            transition: opacity 0.2s;
        }

        .faq-item-row:hover .faq-insert-btn {
            opacity: 1;
        }

        /* Keyword in-editor highlight */
        mark.gr-kw-highlight {
            background-color: rgba(99, 102, 241, 0.28) !important;
            color: inherit !important;
            border-bottom: 2px solid var(--primary-color, #6366f1) !important;
            border-radius: 2px;
            padding: 0 2px;
            transition: all 0.15s ease;
            box-decoration-break: clone;
            -webkit-box-decoration-break: clone;
        }

        html[data-theme="dark"] mark.gr-kw-highlight,
        body.dark-mode mark.gr-kw-highlight,
        .dark-theme mark.gr-kw-highlight {
            background-color: rgba(129, 140, 248, 0.35) !important;
            border-bottom: 2px solid #818cf8 !important;
        }

        /* -------------------------------------------------------------
           OUTLINES PANE & INTERNAL INDEPENDENT SCROLL AREA
           ------------------------------------------------------------- */
        .outlines-subtool-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            width: 100%;
        }

        .outlines-global-actions {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-inline-start: auto;
        }

        .outlines-action-pill {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 8px;
            font-size: 11px;
            font-weight: 600;
            border-radius: 6px;
            border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
            background: var(--bg-card, rgba(255, 255, 255, 0.03));
            color: var(--text-muted, #94a3b8);
            cursor: pointer;
            transition: all 0.15s ease;
            white-space: nowrap;
        }

        .outlines-action-pill:hover {
            background: var(--bg-card-hover, rgba(255, 255, 255, 0.08));
            color: var(--primary-color, #6366f1);
            border-color: rgba(99, 102, 241, 0.3);
        }

        .outlines-pane-header {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 8px 12px;
            background: color-mix(in srgb, var(--card-bg) 80%, var(--bg-body));
            border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
            flex-shrink: 0;
        }

        .outlines-search-wrap {
            display: flex;
            align-items: center;
            gap: 6px;
            background: var(--bg-body);
            border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
            border-radius: 8px;
            padding: 5px 9px;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .outlines-search-wrap:focus-within {
            border-color: var(--primary-color, #6366f1);
            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.18);
        }

        .outlines-search-icon {
            color: var(--text-muted, #94a3b8);
            display: flex;
            align-items: center;
            flex-shrink: 0;
        }

        .outlines-search-input {
            border: none;
            background: transparent;
            outline: none;
            font-size: 12px;
            color: var(--text-main, #f1f5f9);
            width: 100%;
        }

        .outlines-search-input::placeholder {
            color: var(--text-muted, #94a3b8);
            opacity: 0.7;
        }

        .outlines-search-clear {
            background: transparent;
            border: none;
            color: var(--text-muted, #94a3b8);
            cursor: pointer;
            padding: 2px;
            display: flex;
            align-items: center;
            border-radius: 4px;
        }

        .outlines-search-clear:hover {
            color: var(--text-main, #f1f5f9);
            background: rgba(255, 255, 255, 0.08);
        }

        .outlines-meta-stats {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            color: var(--text-muted, #94a3b8);
            padding: 0 2px;
        }

        .outlines-stat-item {
            display: inline-flex;
            align-items: center;
            gap: 3px;
        }

        .outlines-stat-item .stat-num {
            font-weight: 700;
            color: var(--text-main, #f1f5f9);
        }

        .outlines-stat-item.stat-questions .stat-num {
            color: #a78bfa;
        }

        .stat-sep {
            color: var(--border-color, rgba(255, 255, 255, 0.2));
            font-size: 10px;
        }

        #outlines-list-container,
        .outlines-list {
            flex: 1 1 0% !important;
            min-height: 0 !important;
            max-height: 100% !important;
            overflow-y: auto !important;
            overscroll-behavior: contain;
            padding: 10px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            box-sizing: border-box;
        }

        .outline-site-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
            border-radius: 10px;
            padding: 10px 12px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            box-shadow: var(--co-shadow-card);
            transition: all 0.2s ease;
        }

        .outline-site-card:hover {
            border-color: rgba(99, 102, 241, 0.25);
        }

        .outline-site-card.is-collapsed {
            padding: 8px 12px;
            opacity: 0.92;
        }

        .outline-site-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            cursor: pointer;
            user-select: none;
        }

        .site-header-left {
            display: flex;
            align-items: center;
            gap: 6px;
            min-width: 0;
            flex: 1;
        }

        .site-collapse-chevron {
            background: transparent;
            border: none;
            color: var(--text-muted, #94a3b8);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            cursor: pointer;
            border-radius: 4px;
            padding: 0;
            flex-shrink: 0;
            transition: background 0.15s ease, color 0.15s ease;
        }

        .site-collapse-chevron:hover {
            background: rgba(255, 255, 255, 0.08);
            color: var(--text-main, #f1f5f9);
        }

        .site-rank-badge {
            font-size: 10px;
            font-weight: 800;
            font-family: monospace;
            color: var(--text-muted, #94a3b8);
            background: rgba(255, 255, 255, 0.06);
            padding: 1px 5px;
            border-radius: 4px;
            flex-shrink: 0;
        }

        .site-favicon {
            width: 16px;
            height: 16px;
            border-radius: 3px;
            object-fit: cover;
            flex-shrink: 0;
        }

        .site-name {
            font-size: 12px;
            font-weight: 700;
            color: var(--text-main, #f1f5f9);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            min-width: 0;
        }

        .site-ext-link {
            color: var(--text-muted, #94a3b8);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 16px;
            height: 16px;
            border-radius: 3px;
            opacity: 0.6;
            transition: all 0.15s ease;
            flex-shrink: 0;
        }

        .site-ext-link:hover {
            opacity: 1;
            color: var(--primary-color, #6366f1);
        }

        .site-header-right {
            display: flex;
            align-items: center;
            gap: 5px;
            flex-shrink: 0;
        }

        .site-stat-badge {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            font-size: 10px;
            font-weight: 700;
            padding: 2px 6px;
            border-radius: 6px;
        }

        .site-stat-badge.badge-headings {
            background: rgba(59, 130, 246, 0.12);
            color: #3b82f6;
        }

        .site-stat-badge.badge-questions {
            background: rgba(139, 92, 246, 0.15);
            color: #a78bfa;
            border: 1px solid rgba(139, 92, 246, 0.25);
        }

        .site-score-pill {
            font-size: 10px;
            font-weight: 800;
            padding: 2px 6px;
            border-radius: 6px;
            background: rgba(234, 179, 8, 0.14);
            color: #eab308;
        }

        .site-copy-action-btn {
            background: transparent;
            border: none;
            color: var(--text-muted, #94a3b8);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .site-copy-action-btn:hover {
            background: rgba(255, 255, 255, 0.08);
            color: var(--primary-color, #6366f1);
        }

        .outline-site-body {
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding-top: 6px;
            border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.06));
        }

        .site-view-tabs {
            display: flex;
            gap: 4px;
            background: var(--bg-body);
            padding: 2px;
            border-radius: 6px;
            margin-bottom: 2px;
        }

        .site-view-tab {
            flex: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            padding: 4px 6px;
            font-size: 11px;
            font-weight: 600;
            border-radius: 5px;
            border: none;
            background: transparent;
            color: var(--text-muted, #94a3b8);
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .site-view-tab:hover {
            color: var(--text-main, #f1f5f9);
        }

        .site-view-tab.active {
            background: var(--card-bg);
            color: var(--primary-color, #6366f1);
            font-weight: 700;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
        }

        .site-view-tab.tab-questions.active {
            color: #a78bfa;
        }

        .outline-headings-list,
        .outline-questions-list {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .outline-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 8px;
            border-radius: 8px;
            background: var(--bg-body);
            border: 1px solid transparent;
            box-shadow: var(--co-shadow-surface);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .outline-item:hover {
            background: color-mix(in srgb, var(--primary-color) 8%, var(--card-bg));
            border-color: rgba(99, 102, 241, 0.2);
            transform: translateX(-2px);
            box-shadow: var(--co-shadow-card);
        }

        [dir="rtl"] .outline-item:hover {
            transform: translateX(2px);
        }

        .tag-badge {
            font-family: monospace;
            font-size: 10px;
            font-weight: 800;
            padding: 1px 5px;
            border-radius: 4px;
            flex-shrink: 0;
            background: rgba(59, 130, 246, 0.14);
            color: #3b82f6;
        }

        .outline-item.h1 .tag-badge { background: rgba(239, 68, 68, 0.14); color: #ef4444; border: none; }
        .outline-item.h2 .tag-badge { background: rgba(59, 130, 246, 0.14); color: #3b82f6; border: none; }
        .outline-item.h3 .tag-badge { background: rgba(16, 185, 129, 0.14); color: #10b981; border: none; }
        .tag-badge-q { background: rgba(139, 92, 246, 0.14) !important; color: #a78bfa !important; }

        .tag-text {
            font-size: 12px;
            font-weight: 600;
            color: var(--text-main, #f1f5f9);
            flex: 1;
            line-height: 1.35;
        }

        .tag-action {
            color: var(--primary-color);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            opacity: 0.7;
            transition: opacity 0.15s ease;
        }

        .outline-item:hover .tag-action {
            opacity: 1;
        }

        .outline-empty-sub {
            font-size: 11px;
            color: var(--text-muted, #94a3b8);
            text-align: center;
            padding: 10px 4px;
            font-style: italic;
        }

        /* -------------------------------------------------------------
           STATICS PANE & INTERNAL INDEPENDENT SCROLL AREA
           ------------------------------------------------------------- */
        .statics-scroll-area {
            flex: 1 1 0% !important;
            min-height: 0 !important;
            max-height: 100% !important;
            overflow-y: auto !important;
            overscroll-behavior: contain;
            padding: 12px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            box-sizing: border-box;
        }
        .statics-metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .metric-card {
            background: var(--card-bg);
            border: none;
            border-radius: 12px;
            padding: 12px;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: var(--co-shadow-card);
        }

        .metric-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
        .metric-data { display: flex; flex-direction: column; }
        .metric-lbl { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }
        .metric-val { font-size: 16px; font-weight: 900; font-family: monospace; color: var(--text-main); }

        .stat-box {
            background: var(--card-bg);
            border: none;
            border-radius: 12px;
            padding: 14px;
            box-shadow: var(--co-shadow-card);
        }

        .stat-box-title { font-size: 13px; font-weight: 800; color: var(--text-main); margin: 0 0 10px; display: flex; align-items: center; gap: 6px; }

        .readability-bar { width: 100%; height: 6px; background: color-mix(in srgb, var(--border-color) 80%, transparent); border-radius: 4px; overflow: hidden; }
        .readability-fill { width: 85%; height: 100%; background: #10b981; border-radius: 4px; }

        .stat-list { display: flex; flex-direction: column; gap: 8px; }
        .stat-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--bg-body); border-radius: 8px; border: none; box-shadow: var(--co-shadow-surface); }
        .stat-num { font-size: 14px; font-weight: 700; color: #10b981; font-family: monospace; background: rgba(16, 185, 129, 0.14); padding: 2px 8px; border-radius: 6px; border: none; }

        /* -----------------------------------------
           TOOL VIEWS: QUESTIONS, GAPS, AI PREDICT, CUSTOM
           ----------------------------------------- */
        
        /* 1. Competitor Questions */
        .q-card {
            background: var(--card-bg);
            border: none;
            border-radius: 12px;
            padding: 12px 14px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: var(--co-shadow-card);
        }

        .q-card:hover {
            transform: translateY(-2px);
            box-shadow: var(--co-shadow-panel), 0 0 16px var(--primary-glow);
        }

        .q-head {
            display: flex;
            align-items: flex-start;
            gap: 8px;
        }

        .q-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            border-radius: 6px;
            background: color-mix(in srgb, var(--primary-color) 12%, transparent);
            color: var(--primary-color);
            border: none;
            flex-shrink: 0;
            margin-top: 1px;
        }

        .q-icon svg {
            width: 14px;
            height: 14px;
        }

        .q-text {
            font-size: 13px;
            font-weight: 800;
            color: var(--text-main);
            line-height: 1.45;
            flex: 1;
        }

        .q-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding-top: 8px;
            border: none;
            box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-muted) 12%, transparent);
        }

        .q-freq-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 11px;
            font-weight: 700;
            color: var(--text-muted);
            background: color-mix(in srgb, var(--border-color) 60%, transparent);
            border: none;
            padding: 2px 8px;
            border-radius: 12px;
        }

        .q-actions {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .q-action-btn {
            background: var(--bg-body);
            border: none;
            box-shadow: var(--co-shadow-surface);
            border-radius: 6px;
            padding: 4px 8px;
            font-size: 11.5px;
            font-weight: 700;
            color: var(--text-muted);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
            transition: all 0.2s ease;
        }

        .q-action-btn:hover {
            color: var(--text-main);
            background: color-mix(in srgb, var(--primary-color) 10%, var(--card-bg));
            box-shadow: var(--co-shadow-card);
        }

        .q-action-btn.primary {
            background: color-mix(in srgb, var(--primary-color) 14%, var(--card-bg));
            color: var(--primary-color);
            border: none;
            box-shadow: 0 1px 6px var(--primary-glow);
        }

        .q-action-btn.primary:hover {
            background: var(--primary-color);
            color: #ffffff;
            box-shadow: 0 2px 8px var(--primary-glow);
        }

        /* 2. Content Gaps */
        .gaps-header-alert {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            background: color-mix(in srgb, var(--warning, #f59e0b) 12%, var(--card-bg));
            border: none;
            box-shadow: var(--co-shadow-surface);
            border-radius: 10px;
            font-size: 12px;
            font-weight: 800;
            color: var(--warning, #f59e0b);
            margin-bottom: 10px;
        }

        .cg-card {
            background: var(--card-bg);
            border: none;
            border-radius: 14px;
            padding: 14px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            transition: all 0.25s ease;
            box-shadow: var(--co-shadow-card);
        }

        .cg-card:hover {
            box-shadow: var(--co-shadow-panel), 0 4px 18px rgba(139, 92, 246, 0.2);
            transform: translateY(-2px);
        }

        .cg-title-wrap {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .cg-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            border-radius: 6px;
            background: rgba(239, 68, 68, 0.14);
            color: #ef4444;
            border: none;
            flex-shrink: 0;
        }

        .cg-title {
            font-size: 13.5px;
            font-weight: 800;
            color: var(--text-main);
            line-height: 1.3;
        }

        .cg-desc {
            font-size: 12px;
            color: var(--text-muted);
            line-height: 1.55;
        }

        .cg-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 8px 14px;
            border-radius: 8px;
            background: linear-gradient(135deg, var(--ai-color, #8b5cf6), #6366f1);
            color: #ffffff;
            border: none;
            font-size: 12px;
            font-weight: 800;
            cursor: pointer;
            transition: all 0.25s ease;
            box-shadow: 0 3px 12px rgba(139, 92, 246, 0.3);
            width: 100%;
        }

        .cg-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(139, 92, 246, 0.45);
            filter: brightness(1.1);
        }

        /* 3. AI Predict & Entities */
        .ai-pred-card {
            background: var(--card-bg);
            border: none;
            border-radius: 12px;
            padding: 12px 14px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            transition: all 0.25s ease;
            box-shadow: var(--co-shadow-card);
        }

        .ai-pred-card:hover {
            transform: translateY(-2px);
            box-shadow: var(--co-shadow-panel), 0 4px 16px rgba(139, 92, 246, 0.2);
        }

        .ai-pred-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }

        .ai-pred-title-wrap {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .ai-pred-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            border-radius: 6px;
            background: color-mix(in srgb, var(--ai-color, #8b5cf6) 12%, transparent);
            color: var(--ai-color, #8b5cf6);
            border: none;
            flex-shrink: 0;
        }

        .ai-pred-word {
            font-size: 13.5px;
            font-weight: 800;
            color: var(--text-main);
        }

        .ai-pred-score {
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 10.5px;
            font-weight: 900;
            font-family: 'JetBrains Mono', 'Fira Code', monospace;
            background: color-mix(in srgb, var(--ai-color, #8b5cf6) 14%, var(--card-bg));
            color: var(--ai-color, #8b5cf6);
            border: none;
        }

        .ai-pred-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 11.5px;
            color: var(--text-muted);
        }

        .ai-pred-rank-badge {
            font-weight: 800;
            font-family: monospace;
            background: color-mix(in srgb, var(--border-color) 60%, transparent);
            border: none;
            padding: 2px 6px;
            border-radius: 6px;
            color: var(--text-muted);
        }

        .ai-pred-track {
            width: 100%;
            height: 4px;
            background: color-mix(in srgb, var(--border-color) 80%, transparent);
            border-radius: 4px;
            overflow: hidden;
        }

        .ai-pred-fill {
            height: 100%;
            background: linear-gradient(90deg, #6366f1, var(--ai-color, #8b5cf6));
            border-radius: 4px;
            transition: width 0.4s ease;
        }

        /* ── Rank Score Diagnosis Banner & Target Highlight ── */
        .ai-pred-results-wrap {
            display: flex;
            flex-direction: column;
            gap: 10px;
            width: 100%;
        }

        .ai-pred-cards-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            width: 100%;
        }

        .ai-rank-diagnosis-banner {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 10px 12px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            box-shadow: var(--co-shadow-card, 0 2px 10px rgba(0, 0, 0, 0.05));
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .ai-rank-diagnosis-banner.optimal {
            border-color: rgba(16, 185, 129, 0.35);
            background: color-mix(in srgb, var(--card-bg) 95%, #10b981);
            box-shadow: 0 3px 14px rgba(16, 185, 129, 0.08);
        }

        .ai-rank-diagnosis-banner.good {
            border-color: rgba(59, 130, 246, 0.35);
            background: color-mix(in srgb, var(--card-bg) 95%, #3b82f6);
            box-shadow: 0 3px 14px rgba(59, 130, 246, 0.08);
        }

        .ai-rank-diagnosis-banner.warning {
            border-color: rgba(245, 158, 11, 0.35);
            background: color-mix(in srgb, var(--card-bg) 95%, #f59e0b);
            box-shadow: 0 3px 14px rgba(245, 158, 11, 0.08);
        }

        .ai-rank-diagnosis-banner.error {
            border-color: rgba(239, 68, 68, 0.35);
            background: color-mix(in srgb, var(--card-bg) 95%, #ef4444);
            box-shadow: 0 3px 14px rgba(239, 68, 68, 0.08);
        }

        .rank-diag-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }

        .rank-diag-title-wrap {
            display: flex;
            align-items: center;
            gap: 7px;
            min-width: 0;
            flex: 1;
        }

        .rank-diag-pulse-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--ai-color, #8b5cf6);
            flex-shrink: 0;
            box-shadow: 0 0 6px var(--ai-color, #8b5cf6);
            animation: diagPulse 2s infinite ease-in-out;
        }

        .rank-diag-pulse-dot.optimal { background: #10b981; box-shadow: 0 0 6px #10b981; }
        .rank-diag-pulse-dot.good { background: #3b82f6; box-shadow: 0 0 6px #3b82f6; }
        .rank-diag-pulse-dot.warning { background: #f59e0b; box-shadow: 0 0 6px #f59e0b; }
        .rank-diag-pulse-dot.error { background: #ef4444; box-shadow: 0 0 6px #ef4444; }

        @keyframes diagPulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.55; transform: scale(0.85); }
        }

        .rank-diag-title {
            font-size: 12px;
            font-weight: 800;
            color: var(--text-main);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .rank-diag-score-pill {
            display: inline-flex;
            align-items: baseline;
            gap: 2px;
            padding: 2px 8px;
            border-radius: 20px;
            background: color-mix(in srgb, var(--card-bg) 80%, transparent);
            border: 1px solid var(--border-color);
            font-family: 'JetBrains Mono', 'Fira Code', monospace;
            flex-shrink: 0;
            line-height: 1.2;
        }

        .rank-diag-score-pill .score-cur {
            font-size: 12px;
            font-weight: 900;
            color: var(--text-main);
        }

        .rank-diag-score-pill .score-div,
        .rank-diag-score-pill .score-tot {
            font-size: 10px;
            font-weight: 700;
            color: var(--text-muted);
            opacity: 0.8;
        }

        .rank-diag-score-pill.optimal { border-color: rgba(16, 185, 129, 0.4); background: rgba(16, 185, 129, 0.12); }
        .rank-diag-score-pill.optimal .score-cur { color: #10b981; }

        .rank-diag-score-pill.good { border-color: rgba(59, 130, 246, 0.4); background: rgba(59, 130, 246, 0.12); }
        .rank-diag-score-pill.good .score-cur { color: #3b82f6; }

        .rank-diag-score-pill.warning { border-color: rgba(245, 158, 11, 0.4); background: rgba(245, 158, 11, 0.12); }
        .rank-diag-score-pill.warning .score-cur { color: #f59e0b; }

        .rank-diag-score-pill.error { border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.12); }
        .rank-diag-score-pill.error .score-cur { color: #ef4444; }

        /* Target Keyword & Status Strip */
        .rank-diag-targets-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
            padding: 5px 8px;
            border-radius: 8px;
            background: color-mix(in srgb, var(--card-bg) 60%, transparent);
            border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
        }

        .rank-diag-chip {
            display: flex;
            align-items: center;
            gap: 5px;
            min-width: 0;
            flex: 1;
        }

        .rank-diag-chip .chip-ico {
            display: inline-flex;
            align-items: center;
            color: var(--ai-color, #8b5cf6);
            flex-shrink: 0;
        }

        .rank-diag-chip .chip-val {
            font-size: 11.5px;
            font-weight: 800;
            color: var(--text-main);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .rank-diag-badge-pill {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 10.5px;
            font-weight: 800;
            padding: 2px 7px;
            border-radius: 6px;
            flex-shrink: 0;
            white-space: nowrap;
            background: color-mix(in srgb, var(--text-main) 8%, transparent);
            color: var(--text-main);
            border: 1px solid transparent;
        }

        .rank-diag-badge-pill.optimal { background: rgba(16, 185, 129, 0.15); color: #10b981; border-color: rgba(16, 185, 129, 0.3); }
        .rank-diag-badge-pill.good { background: rgba(59, 130, 246, 0.15); color: #3b82f6; border-color: rgba(59, 130, 246, 0.3); }
        .rank-diag-badge-pill.warning { background: rgba(245, 158, 11, 0.15); color: #f59e0b; border-color: rgba(245, 158, 11, 0.3); }
        .rank-diag-badge-pill.error { background: rgba(239, 68, 68, 0.15); color: #ef4444; border-color: rgba(239, 68, 68, 0.3); }

        /* 3-Pillar Horizontal Mini-Factors Strip */
        .rank-diag-factors-strip {
            display: flex;
            align-items: center;
            gap: 6px;
            width: 100%;
        }

        .diag-factor-pill {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1px;
            padding: 4px 5px;
            border-radius: 7px;
            background: color-mix(in srgb, var(--card-bg) 80%, transparent);
            border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
            text-align: center;
            transition: background 0.2s ease;
        }

        .diag-factor-pill:hover {
            background: color-mix(in srgb, var(--card-bg) 95%, var(--ai-color, #8b5cf6));
        }

        .diag-factor-lbl {
            font-size: 9.5px;
            font-weight: 700;
            color: var(--text-muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
            line-height: 1.2;
        }

        .diag-factor-val {
            font-size: 11px;
            font-weight: 900;
            color: var(--text-main);
            font-family: 'JetBrains Mono', 'Fira Code', monospace;
            white-space: nowrap;
            line-height: 1.2;
        }

        .diag-factor-val small {
            font-size: 9px;
            color: var(--text-muted);
            font-weight: 600;
            margin-inline-start: 1px;
        }

        /* Reason and Actionable Advice Box */
        .rank-diag-insight-box {
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding: 7px 9px;
            background: color-mix(in srgb, var(--card-bg) 80%, var(--bg-body, #0f172a));
            border: 1px solid color-mix(in srgb, var(--border-color) 65%, transparent);
            border-radius: 8px;
            font-size: 11px;
            line-height: 1.45;
        }

        .insight-row {
            display: flex;
            align-items: flex-start;
            gap: 6px;
        }

        .insight-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 17px;
            height: 17px;
            border-radius: 4px;
            flex-shrink: 0;
            margin-top: 1px;
        }

        .insight-icon.info-icon {
            color: #3b82f6;
            background: rgba(59, 130, 246, 0.12);
        }

        .insight-icon.tip-icon {
            color: #10b981;
            background: rgba(16, 185, 129, 0.12);
        }

        .insight-text {
            color: var(--text-muted);
            flex: 1;
            min-width: 0;
        }

        .insight-text strong {
            font-weight: 800;
            color: var(--text-main);
            margin-inline-end: 3px;
        }

        /* ── Matched Entity & Winner Highlight Card ── */
        .ai-pred-card.is-matched-target {
            border: 1.5px solid rgba(59, 130, 246, 0.5) !important;
            background: color-mix(in srgb, var(--card-bg) 88%, #3b82f6) !important;
            box-shadow: 0 4px 18px rgba(59, 130, 246, 0.18) !important;
            position: relative;
        }

        .ai-pred-card.is-matched-target::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 11px;
            pointer-events: none;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
        }

        /* Ultimate Winner: Exact Match at #1 */
        .ai-pred-card.is-winner-target {
            border: 1.5px solid #10b981 !important;
            background: color-mix(in srgb, var(--card-bg) 86%, #10b981) !important;
            box-shadow: 0 6px 24px rgba(16, 185, 129, 0.25), 0 0 0 1px rgba(16, 185, 129, 0.35) !important;
            position: relative;
            overflow: hidden;
        }

        .ai-pred-card.is-winner-target::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 11px;
            pointer-events: none;
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, transparent 60%);
            box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.3);
        }

        .ai-pred-card.is-partial-match {
            border-color: rgba(245, 158, 11, 0.6) !important;
            background: color-mix(in srgb, var(--card-bg) 88%, #f59e0b) !important;
            box-shadow: 0 4px 18px rgba(245, 158, 11, 0.18) !important;
        }

        /* Distinct Icon Variations */
        .ai-pred-icon.winner-icon {
            background: rgba(16, 185, 129, 0.22) !important;
            color: #10b981 !important;
            box-shadow: 0 0 10px rgba(16, 185, 129, 0.35);
        }

        .ai-pred-icon.matched-icon {
            background: rgba(59, 130, 246, 0.22) !important;
            color: #3b82f6 !important;
            box-shadow: 0 0 10px rgba(59, 130, 246, 0.25);
        }

        .ai-pred-icon.partial-icon {
            background: rgba(245, 158, 11, 0.22) !important;
            color: #f59e0b !important;
            box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
        }

        /* Matched / Winner Status Tag */
        .ai-matched-tag {
            font-size: 10px;
            font-weight: 800;
            padding: 2px 7px;
            border-radius: 6px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            line-height: 1.3;
            white-space: nowrap;
            background: rgba(139, 92, 246, 0.2);
            color: var(--ai-color, #8b5cf6);
            border: 1px solid rgba(139, 92, 246, 0.35);
        }

        .ai-matched-tag .tag-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .ai-matched-tag.optimal {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.2));
            color: #10b981;
            border-color: rgba(16, 185, 129, 0.5);
            box-shadow: 0 1px 6px rgba(16, 185, 129, 0.15);
        }

        .ai-matched-tag.good {
            background: rgba(59, 130, 246, 0.2);
            color: #3b82f6;
            border-color: rgba(59, 130, 246, 0.45);
        }

        .ai-matched-tag.warning {
            background: rgba(245, 158, 11, 0.2);
            color: #f59e0b;
            border-color: rgba(245, 158, 11, 0.45);
        }

        /* Winner Rank Trophy Badge */
        .ai-pred-rank-badge.winner-rank {
            background: linear-gradient(135deg, #10b981, #059669) !important;
            color: #ffffff !important;
            font-weight: 900 !important;
            box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
            display: inline-flex;
            align-items: center;
            gap: 3px;
            padding: 2px 7px;
        }

        .ai-pred-rank-badge.winner-rank .winner-rank-trophy {
            display: inline-flex;
            align-items: center;
            color: #fef08a;
        }

        /* Specialized Progress Bars for Matched Cards */
        .ai-pred-card.is-winner-target .ai-pred-fill {
            background: linear-gradient(90deg, #10b981, #34d399) !important;
            box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
        }

        .ai-pred-card.is-matched-target:not(.is-winner-target) .ai-pred-fill {
            background: linear-gradient(90deg, #3b82f6, #60a5fa) !important;
            box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
        }

        .ai-pred-card.is-partial-match .ai-pred-fill {
            background: linear-gradient(90deg, #f59e0b, #fbbf24) !important;
            box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
        }

        .ai-pred-sentiment {
            font-size: 10px;
            font-weight: 700;
            text-transform: capitalize;
            padding: 1px 6px;
            border-radius: 4px;
            background: color-mix(in srgb, var(--border-color) 60%, transparent);
            color: var(--text-muted);
        }

        .ai-pred-sentiment.positive {
            color: #10b981;
            background: rgba(16, 185, 129, 0.12);
        }

        .ai-pred-sentiment.negative {
            color: #ef4444;
            background: rgba(239, 68, 68, 0.12);
        }

        /* ── AI Predict Tab Empty & Scanner States ── */
        @keyframes aiTabSlidePulse {
            0% {
                opacity: 0.35;
                transform: translateY(8px) scale(0.98);
            }
            50% {
                opacity: 0.85;
                transform: translateY(-2px) scale(1.01);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .ai-tab-activating {
            animation: aiTabSlidePulse 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
        }

        .ai-pred-analyzing-stage {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 34px 18px;
            background: color-mix(in srgb, var(--card-bg) 90%, transparent);
            border-radius: 16px;
            border: 1px dashed color-mix(in srgb, var(--ai-color, #8b5cf6) 40%, transparent);
            margin: 8px 0;
            gap: 16px;
            box-shadow: var(--co-shadow-card);
        }

        .ai-radar-scanner {
            position: relative;
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .ai-scanner-ring {
            position: absolute;
            border-radius: 50%;
            border: 1.5px solid color-mix(in srgb, var(--ai-color, #8b5cf6) 35%, transparent);
            animation: aiRadarPulse 2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
        }
        .ai-scanner-ring.ring-1 { width: 40px; height: 40px; animation-delay: 0s; }
        .ai-scanner-ring.ring-2 { width: 62px; height: 62px; animation-delay: 0.4s; }
        .ai-scanner-ring.ring-3 { width: 80px; height: 80px; animation-delay: 0.8s; }

        @keyframes aiRadarPulse {
            0% { transform: scale(0.8); opacity: 0.8; }
            50% { transform: scale(1.15); opacity: 0.3; border-color: var(--ai-color, #8b5cf6); }
            100% { transform: scale(0.8); opacity: 0.8; }
        }

        .ai-scanner-core {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: color-mix(in srgb, var(--ai-color, #8b5cf6) 18%, var(--card-bg));
            color: var(--ai-color, #8b5cf6);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 20px color-mix(in srgb, var(--ai-color, #8b5cf6) 40%, transparent);
            z-index: 2;
            animation: aiCoreRotate 3s linear infinite;
        }

        @keyframes aiCoreRotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .ai-analyzing-text {
            display: flex;
            flex-direction: column;
            gap: 4px;
            align-items: center;
        }

        .ai-analyzing-title {
            font-size: 14px;
            font-weight: 800;
            color: var(--text-main);
        }

        .ai-analyzing-desc {
            font-size: 11.5px;
            color: var(--text-muted);
            max-width: 270px;
            line-height: 1.5;
        }

        /* Empty State */
        .ai-pred-empty-stage {
            display: flex;
            flex-direction: column;
            gap: 14px;
            padding: 16px 12px;
            background: color-mix(in srgb, var(--card-bg) 60%, transparent);
            border-radius: 16px;
            border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
        }

        .ai-empty-hero {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 8px 4px;
            gap: 8px;
        }

        .ai-empty-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 10.5px;
            font-weight: 700;
            background: color-mix(in srgb, var(--ai-color, #8b5cf6) 14%, transparent);
            color: var(--ai-color, #8b5cf6);
            border: 1px solid color-mix(in srgb, var(--ai-color, #8b5cf6) 25%, transparent);
        }

        .ai-empty-icon-wrap {
            position: relative;
            width: 56px;
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 2px 0;
        }

        .ai-empty-glow {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background: radial-gradient(circle, color-mix(in srgb, var(--ai-color, #8b5cf6) 35%, transparent) 0%, transparent 70%);
            filter: blur(8px);
        }

        .ai-empty-icon {
            position: relative;
            width: 48px;
            height: 48px;
            border-radius: 14px;
            background: color-mix(in srgb, var(--ai-color, #8b5cf6) 12%, var(--card-bg));
            border: 1px solid color-mix(in srgb, var(--ai-color, #8b5cf6) 30%, transparent);
            color: var(--ai-color, #8b5cf6);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 16px color-mix(in srgb, var(--ai-color, #8b5cf6) 20%, transparent);
        }

        .ai-empty-title {
            font-size: 14px;
            font-weight: 800;
            color: var(--text-main);
            margin: 0;
            line-height: 1.3;
        }

        .ai-empty-subtitle {
            font-size: 11.5px;
            color: var(--text-muted);
            line-height: 1.55;
            margin: 0;
            max-width: 320px;
        }

        .ai-how-it-works {
            display: flex;
            flex-direction: column;
            gap: 7px;
        }

        .ai-step-card {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 9px 11px;
            background: var(--card-bg);
            border-radius: 11px;
            border: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
            box-shadow: var(--co-shadow-card);
            transition: all 0.2s ease;
        }

        .ai-step-card:hover {
            border-color: color-mix(in srgb, var(--ai-color, #8b5cf6) 40%, transparent);
            transform: translateY(-1px);
        }

        .ai-step-num {
            width: 20px;
            height: 20px;
            border-radius: 6px;
            background: color-mix(in srgb, var(--ai-color, #8b5cf6) 15%, transparent);
            color: var(--ai-color, #8b5cf6);
            font-size: 10.5px;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-top: 1px;
        }

        .ai-step-body {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .ai-step-title {
            font-size: 11.8px;
            font-weight: 700;
            color: var(--text-main);
        }

        .ai-step-desc {
            font-size: 10.8px;
            color: var(--text-muted);
            line-height: 1.45;
        }

        .btn-ai-predict-trigger {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 9px 14px;
            border-radius: 11px;
            background: linear-gradient(135deg, #6366f1 0%, var(--ai-color, #8b5cf6) 100%);
            color: #ffffff;
            font-size: 12px;
            font-weight: 700;
            border: none;
            cursor: pointer;
            box-shadow: 0 4px 14px color-mix(in srgb, var(--ai-color, #8b5cf6) 35%, transparent);
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            margin-top: 2px;
        }

        .btn-ai-predict-trigger:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px color-mix(in srgb, var(--ai-color, #8b5cf6) 50%, transparent);
            filter: brightness(1.08);
        }

        .btn-ai-predict-trigger:active {
            transform: translateY(0);
        }

        /* 4. Custom Keywords Add Box */
        .custom-add-box {
            display: flex;
            gap: 8px;
            padding: 10px;
            background: var(--card-bg);
            border: none;
            border-radius: 12px;
            margin-bottom: 10px;
            box-shadow: var(--co-shadow-card);
        }

        .custom-add-btn {
            background: var(--primary-color);
            color: #ffffff;
            border: none;
            border-radius: 8px;
            padding: 0 16px;
            font-size: 12px;
            font-weight: 800;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
            transition: all 0.2s ease;
            white-space: nowrap;
        }

        .custom-add-btn:hover {
            filter: brightness(1.1);
            transform: translateY(-1px);
        }

        /* Density Table */
        .density-table { width: 100%; border-collapse: collapse; text-align: right; }
        .density-table th { padding: 10px; font-size: 12px; color: var(--text-muted); border-bottom: 1px solid color-mix(in srgb, var(--text-muted) 12%, transparent); }
        .density-table td { padding: 10px; font-size: 14px; color: var(--text-main); border-bottom: 1px solid color-mix(in srgb, var(--text-muted) 8%, transparent); direction: ltr; text-align: left;}
        .density-badge { background: rgba(59, 130, 246, 0.15); color: #3b82f6; padding: 4px 8px; border-radius: 6px; font-weight: 700; font-size: 12px; }

        /* =========================================
           CUSTOM SELECT DROPDOWNS & WIZARD
           ========================================= */
        .custom-select { position: relative; width: 100%; user-select: none;}
        .select-trigger { background: var(--bg-body); border: none; box-shadow: var(--co-shadow-surface); padding: 12px 16px; border-radius: 12px; color: var(--text-main); font-size: 14px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: 0.2s; }
        .select-trigger:hover { background: color-mix(in srgb, var(--ai-color) 6%, var(--bg-body)); box-shadow: var(--co-shadow-card); }
        .custom-options { position: absolute; top: 100%; left: 0; right: 0; background: var(--card-bg); border: none; border-radius: 12px; margin-top: 8px; box-shadow: var(--co-shadow-floating); opacity: 0; visibility: hidden; transform: translateY(10px); transition: 0.2s; z-index: 200; max-height: 250px; overflow-y: auto; padding: 4px;}
        .custom-select.open .custom-options { opacity: 1; visibility: visible; transform: translateY(0); }
        .select-search-box { padding: 4px; position: sticky; top: 0; background: var(--card-bg); z-index: 2;}
        .select-search-box input { width: 100%; background: var(--co-surface-recessed); border: none; box-shadow: inset 0 1px 2px rgba(0,0,0,0.06); color: var(--text-main); padding: 8px; border-radius: 8px; outline: none; font-size: 12px;}
        .custom-option { padding: 10px 12px; cursor: pointer; transition: 0.2s; color: var(--text-main); font-size: 13px; font-weight: 600; border-radius: 8px; display: flex; align-items: center; gap: 8px;}
        .custom-option:hover { background: var(--primary-light); color: var(--primary-color); }


        /* AI Wizard General */
        .ai-wizard-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(10px); display: none; align-items: center; justify-content: center; z-index: 100000; opacity: 0; transition: 0.3s; }
        .ai-wizard-overlay.active { display: flex; opacity: 1; }
        .wizard-container { width: 95vw; height: 90vh; max-width: 1400px; background: var(--card-bg); border: none; border-radius: 24px; display: flex; overflow: hidden; box-shadow: var(--co-shadow-floating), 0 30px 100px rgba(0,0,0,0.8); transform: scale(0.95) translateY(20px); transition: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
        .ai-wizard-overlay.active .wizard-container { transform: scale(1) translateY(0); }
        .w-sidebar { width: 280px; background: var(--bg-body); border-left: none; box-shadow: inset -1px 0 0 color-mix(in srgb, var(--text-muted) 12%, transparent); padding: 30px 20px; display: flex; flex-direction: column; }
        .w-logo { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; color: var(--text-main); margin-bottom: 40px; }
        .w-logo svg { color: var(--ai-color); width: 28px; height: 28px; }
        .w-steps { display: flex; flex-direction: column; gap: 8px; flex: 1; }
        .w-step { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; color: var(--text-muted); font-size: 14px; font-weight: 700; cursor: pointer; transition: 0.2s; }
        .w-step .s-num { width: 24px; height: 24px; border-radius: 50%; background: var(--card-bg); border: none; box-shadow: var(--co-shadow-surface); display: flex; align-items: center; justify-content: center; font-size: 12px; font-family: monospace;}
        .w-step.active { background: var(--ai-light); color: var(--text-main); }
        .w-step.active .s-num { background: var(--ai-color); color: white; }
        .w-step.completed { color: var(--text-main); }
        .w-step.completed .s-num { background: var(--success); color: white; }
        .w-content-area { flex: 1; display: flex; flex-direction: column; background: var(--card-bg); position: relative; }
        .w-header { padding: 20px 40px; border-bottom: none; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--text-muted) 12%, transparent); display: flex; justify-content: space-between; align-items: center; }
        .w-header-actions { display: flex; gap: 12px; align-items: center; }
        .w-body { flex: 1; overflow-y: auto; padding: 40px; }
        .w-pane { display: none; animation: fadeIn 0.3s ease; }
        .w-pane.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        .w-footer { padding: 20px 40px; border-top: none; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-muted) 12%, transparent); background: var(--bg-body); display: flex; justify-content: space-between; align-items: center; }
        .w-footer .btn-outline { padding: 12px 24px; border-radius: 12px; border: none; box-shadow: var(--co-shadow-surface); background: var(--card-bg); color: var(--text-main); font-weight: 700; cursor: pointer; transition: 0.2s; font-family: inherit;}
        .w-footer .btn-outline:hover { background: color-mix(in srgb, var(--text-muted) 12%, var(--card-bg)); box-shadow: var(--co-shadow-card); }
        .btn-ai-primary { padding: 12px 30px; border-radius: 12px; border: none; background: linear-gradient(135deg, var(--ai-color), #c084fc); color: #fff; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 8px; box-shadow: 0 8px 20px var(--ai-glow); transition: 0.2s; font-family: inherit; font-size: 16px;}
        .btn-ai-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 25px var(--ai-glow); }
        
        .form-group { margin-bottom: 24px; }
        .form-group label { display: block; font-size: 14px; font-weight: 700; color: var(--text-muted); margin-bottom: 10px; }
        .form-control { width: 100%; background: var(--co-surface-recessed); border: none; box-shadow: inset 0 1px 2px rgba(0,0,0,0.06); padding: 14px 16px; border-radius: 12px; color: var(--text-main); font-size: 15px; outline: none; transition: 0.2s; font-family: inherit;}
        .form-control:focus { box-shadow: inset 0 1px 2px rgba(0,0,0,0.06), 0 0 0 2px var(--ai-color); }
        textarea.form-control { resize: vertical; min-height: 100px; }
        .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
        .select-card { background: var(--bg-body); border: none; box-shadow: var(--co-shadow-surface); border-radius: 12px; padding: 16px; text-align: center; cursor: pointer; transition: 0.2s; display: flex; flex-direction: column; align-items: center; gap: 8px; }
        .select-card svg { width: 24px; height: 24px; color: var(--text-muted); }
        .select-card.active { background: var(--ai-light); box-shadow: 0 4px 15px var(--ai-glow); }
        .select-card.active svg { color: var(--ai-color); }
        
        .range-wrapper { display: flex; align-items: center; gap: 16px; direction: ltr;}
        .range-slider { flex: 1; -webkit-appearance: none; background: color-mix(in srgb, var(--text-muted) 25%, transparent); height: 6px; border-radius: 6px; outline: none; }
        .range-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ai-color); cursor: pointer; box-shadow: 0 0 10px var(--ai-glow); }
        .range-val { width: 50px; text-align: center; font-family: monospace; font-weight: 800; font-size: 14px; color: var(--ai-color); background: var(--ai-light); padding: 4px; border-radius: 6px;}

        /* Outline Drag Drop */
        .ob-container { border: none; box-shadow: var(--co-shadow-card); border-radius: 16px; background: var(--bg-body); overflow: hidden; }
        .ob-header { padding: 16px; border-bottom: none; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--text-muted) 12%, transparent); display: flex; justify-content: space-between; align-items: center; }
        .ob-list { padding: 16px; display: flex; flex-direction: column; gap: 4px; min-height: 200px; }
        .ob-item { display: flex; align-items: center; gap: 12px; background: var(--card-bg); border: none; box-shadow: var(--co-shadow-surface); padding: 10px 12px; border-radius: 10px; transition: transform 0.2s, box-shadow 0.2s; position:relative;}
        .ob-item.dragging { opacity: 0.5; box-shadow: 0 8px 24px var(--ai-glow); z-index:100; }
        .ob-drag { cursor: grab; color: var(--text-muted); padding: 4px;}
        .ob-drag:active { cursor: grabbing; }
        .ob-tag-sel { background: var(--bg-body); border: none; box-shadow: var(--co-shadow-surface); color: var(--text-main); border-radius: 6px; padding: 4px 8px; font-weight: 800; font-family: monospace; outline: none; cursor: pointer;}
        .ob-tag-sel:focus { box-shadow: 0 0 0 2px var(--primary-color);}
        .ob-input { flex: 1; background: transparent; border: none; color: var(--text-main); font-size: 14px; font-weight: 600; outline: none; }
        .ob-actions { display: flex; gap: 4px; }
        .ob-btn { width: 28px; height: 28px; border-radius: 6px; background: var(--bg-body); color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; box-shadow: var(--co-shadow-surface); transition: 0.2s;}
        .ob-btn:hover { background: var(--primary-light); color: var(--primary-color); box-shadow: var(--co-shadow-card);}
        .ob-btn.danger:hover { background: var(--danger-light); color: var(--danger); }
        .ob-add-between { height: 8px; margin: 2px 0; border-radius: 4px; background: transparent; cursor: pointer; transition: 0.2s; position: relative; display: flex; align-items: center; justify-content: center;}
        .ob-add-between:hover { background: var(--primary-light); }
        .ob-add-between::after { content: '+'; position: absolute; opacity: 0; color: var(--primary-color); font-weight: bold; font-size: 18px;}
        .ob-add-between:hover::after { opacity: 1; }

        /* Secondary Keywords Manager */
        .sec-kw-manager { background: var(--bg-body); border: none; box-shadow: var(--co-shadow-card); border-radius: 12px; padding: 16px; margin-bottom: 16px;}
        .sec-kw-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;}
        .sec-kw-list { display: flex; flex-wrap: wrap; gap: 8px; max-height: 200px; overflow-y: auto; padding: 4px;}
        .sec-kw-item { background: var(--card-bg); border: none; box-shadow: var(--co-shadow-surface); padding: 4px 8px; border-radius: 8px; display: flex; align-items: center; gap: 6px; font-size: 12px;}
        .sec-kw-target { width: 40px; background: var(--co-surface-recessed); border: none; box-shadow: inset 0 1px 2px rgba(0,0,0,0.06); color: var(--text-main); text-align: center; border-radius: 4px; outline: none; font-family: monospace;}
        .sec-kw-del { color: var(--text-muted); cursor: pointer; }
        .sec-kw-del:hover { color: var(--danger); }

        /* FAQ Manager */
        .faq-manager { background: var(--bg-body); border: none; box-shadow: var(--co-shadow-card); border-radius: 12px; padding: 16px; }
        .faq-list { display: flex; flex-direction: column; gap: 8px; max-height: 200px; overflow-y: auto;}
        .faq-item { background: var(--card-bg); border: none; box-shadow: var(--co-shadow-surface); padding: 10px 12px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; font-size: 13px;}
        .faq-check { accent-color: var(--ai-color); width: 16px; height: 16px; cursor: pointer;}
        
        /* Generating Screen */
        .generating-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; padding: 60px 0;}
        .orb { width: 100px; height: 100px; border-radius: 50%; background: conic-gradient(from 0deg, var(--ai-color), #c084fc, var(--ai-color)); animation: spinOrb 2s linear infinite; position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; box-shadow: 0 0 50px var(--ai-glow); }
        .orb::after { content: ''; position: absolute; inset: 4px; background: var(--card-bg); border-radius: 50%; }
        .orb svg { position: relative; z-index: 2; width: 30px; height: 30px; color: #fff; }
        @keyframes spinOrb { 100% { transform: rotate(360deg); } }
        .gen-status { font-size: 20px; font-weight: 800; color: var(--text-main); margin-bottom: 10px; }
        .gen-sub { font-size: 14px; color: var(--text-muted); font-weight: 600;}


        .editor.art-ed {
            flex: 1;
            padding: 24px 30px 40px 30px;
            overflow-y: auto;
            outline: none;
            font-size: 15.5px;
            line-height: 1.8;
            color: var(--text-main);
            font-family: inherit;
            position: relative;
        }
        .editor.art-ed h1 { font-size: 24px; font-weight: 800; margin: 0 0 16px; color: var(--text-main); line-height: 1.3; }
        .editor.art-ed h2 { font-size: 20px; font-weight: 700; margin: 20px 0 12px; color: var(--text-main); }
        .editor.art-ed h3 { font-size: 17px; font-weight: 700; margin: 16px 0 10px; color: var(--text-main); }
        .editor.art-ed h4 { font-size: 15px; font-weight: 700; margin: 14px 0 8px; color: var(--text-main); }
        .editor.art-ed h5, .editor.art-ed h6 { font-size: 14px; font-weight: 700; margin: 12px 0 6px; color: var(--text-muted); }
        .editor.art-ed p { margin-bottom: 14px; }
        .editor.art-ed blockquote { border-left: 3px solid var(--primary-color); padding: 8px 16px; margin: 14px 0; background: color-mix(in srgb, var(--primary-color) 8%, transparent); border-radius: 0 8px 8px 0; font-style: italic; color: var(--text-muted); }
        .editor.art-ed hr { border: none; height: 1px; background: color-mix(in srgb, var(--text-muted) 15%, transparent); margin: 20px 0; }
        .editor.art-ed a { color: var(--primary-color); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
        .editor.art-ed img { max-width: 100%; border-radius: 12px; margin: 12px 0; box-shadow: var(--co-shadow-card); border: none; }
        .editor.art-ed table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
        .editor.art-ed th, .editor.art-ed td { border: none; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--text-muted) 12%, transparent); padding: 8px 12px; text-align: left; }
        .editor.art-ed th { background: color-mix(in srgb, var(--primary-color) 10%, var(--card-bg)); font-weight: 700; }


        /* VS Code Style Find & Replace Section */
        .toggle-search-btn {
            position: absolute;
            top: 12px;
            right: 18px;
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background: color-mix(in srgb, var(--card-bg) 90%, var(--bg-body));
            border: none;
            box-shadow: var(--co-shadow-surface);
            color: var(--text-muted);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 40;
            transition: 0.2s;
        }
        .toggle-search-btn:hover { color: var(--primary-color); background: var(--primary-light); box-shadow: var(--co-shadow-card); }
        
        /* LTR / English: toggle-search-btn on the RIGHT of Editor */
        html[dir="ltr"] .toggle-search-btn,
        html[lang="en"] .toggle-search-btn,
        body[dir="ltr"] .toggle-search-btn,
        body[lang="en"] .toggle-search-btn,
        .search-btn-ltr.toggle-search-btn,
        #bodyEditor.is-lang-en .toggle-search-btn {
            right: 18px !important;
            left: auto !important;
        }

        html[dir="ltr"] #find-replace-section,
        html[lang="en"] #find-replace-section,
        body[dir="ltr"] #find-replace-section,
        body[lang="en"] #find-replace-section,
        .search-box-ltr#find-replace-section,
        #bodyEditor.is-lang-en #find-replace-section {
            right: 58px !important;
            left: auto !important;
            direction: ltr !important;
        }

        /* RTL / Arabic: toggle-search-btn on the LEFT of Editor */
        html[dir="rtl"] .toggle-search-btn,
        html[lang="ar"] .toggle-search-btn,
        body[dir="rtl"] .toggle-search-btn,
        body[lang="ar"] .toggle-search-btn,
        body.rtl .toggle-search-btn,
        body.rtlWrite .toggle-search-btn,
        .search-btn-rtl.toggle-search-btn,
        #bodyEditor.is-lang-ar .toggle-search-btn {
            right: auto !important;
            left: 18px !important;
        }

        html[dir="rtl"] #find-replace-section,
        html[lang="ar"] #find-replace-section,
        body[dir="rtl"] #find-replace-section,
        body[lang="ar"] #find-replace-section,
        body.rtl #find-replace-section,
        body.rtlWrite #find-replace-section,
        .search-box-rtl#find-replace-section,
        #bodyEditor.is-lang-ar #find-replace-section {
            right: auto !important;
            left: 58px !important;
            direction: rtl !important;
        }
        #find-replace-section.hidden { display: none !important; }
        .search-container, .replace-container { display: flex; align-items: center; gap: 6px; }
        .search-input-wrapper, .replace-input-wrapper { flex: 1; position: relative; }
        .search-input-wrapper input, .replace-input-wrapper input {
            width: 100%;
            background: var(--co-surface-recessed);
            border: none;
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
            color: var(--text-main);
            padding: 5px 10px;
            border-radius: 6px;
            font-size: 12.5px;
            outline: none;
            box-sizing: border-box;
            font-family: inherit;
        }
        .search-input-wrapper input:focus, .replace-input-wrapper input:focus { box-shadow: inset 0 1px 2px rgba(0,0,0,0.06), 0 0 0 2px var(--primary-color); }
        .search-controls {
            display: flex;
            align-items: center;
            gap: 2px;
            background: color-mix(in srgb, var(--text-muted) 10%, var(--bg-body));
            border: none;
            border-radius: 7px;
            padding: 2px 3px;
        }
        .nav-controls, .replace-controls { display: flex; align-items: center; gap: 2px; }
        .search-btn, .nav-btn, .replace-btn {
            background: transparent;
            border: none;
            color: var(--text-muted);
            width: 24px;
            height: 24px;
            border-radius: 5px;
            font-size: 11px;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: 0.15s;
        }
        .search-btn:hover, .nav-btn:hover, .replace-btn:hover { background: color-mix(in srgb, var(--text-muted) 14%, var(--card-bg)); color: var(--text-main); }
        .search-btn.active { background: color-mix(in srgb, var(--primary-color) 20%, var(--card-bg)); color: var(--primary-color); }
        #result-count { font-size: 11px; font-family: monospace; font-weight: 700; color: var(--text-muted); padding: 0 4px; white-space: nowrap; }
        .close-btn { background: transparent; border: none; color: var(--text-muted); font-size: 18px; cursor: pointer; padding: 0 4px; }
        .close-btn:hover { color: var(--danger); }

        /* Find & Replace Match Highlighting */
        mark.gr-find-match {
            background-color: rgba(245, 158, 11, 0.22) !important;
            color: inherit !important;
            border-radius: 3px;
            padding: 1px 3px;
            margin: 0;
            border-bottom: 2px solid rgba(245, 158, 11, 0.75);
            outline: none !important;
            transition: all 0.15s ease;
            box-decoration-break: clone;
            -webkit-box-decoration-break: clone;
        }

        mark.gr-find-match.active {
            background-color: rgba(249, 115, 22, 0.35) !important;
            color: inherit !important;
            font-weight: 700 !important;
            border-bottom: 2px solid #f97316 !important;
            box-shadow: 0 0 0 1.5px rgba(249, 115, 22, 0.6), 0 1px 4px rgba(249, 115, 22, 0.2) !important;
            outline: none !important;
            border-radius: 3px;
        }

        html[data-theme="dark"] mark.gr-find-match,
        body.dark-mode mark.gr-find-match,
        .dark-theme mark.gr-find-match {
            background-color: rgba(251, 191, 36, 0.25) !important;
            border-bottom: 2px solid rgba(251, 191, 36, 0.85);
            color: inherit !important;
        }

        html[data-theme="dark"] mark.gr-find-match.active,
        body.dark-mode mark.gr-find-match.active,
        .dark-theme mark.gr-find-match.active {
            background-color: rgba(249, 115, 22, 0.45) !important;
            color: #ffffff !important;
            border-bottom: 2px solid #fb923c !important;
            box-shadow: 0 0 0 1.5px rgba(249, 115, 22, 0.7), 0 0 10px rgba(249, 115, 22, 0.3) !important;
        }

        /* ==========================================================================
   2026 GUINRANK COPILOT V5: ULTRA-COMPACT SINGLE BAR & BOLD DIGITAL BRAIN
   ========================================================================== */

/* Main Dock Container — Anchored gracefully in bottom corner of editor */
#Vue-EditorHelper,
.copilot-siri-dock {
    position: absolute;
    bottom: 22px;
    inset-inline-start: 24px;
    z-index: 80;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    pointer-events: none;
    user-select: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    left: 55px;
}
[dir="rtl"] #Vue-EditorHelper,
html[dir="rtl"] #Vue-EditorHelper,
[dir="rtl"] .copilot-siri-dock,
html[dir="rtl"] .copilot-siri-dock {
    inset-inline-start: 24px;
    align-items: flex-start;
    left: auto;
    right: 55px;
}
#Vue-EditorHelper.hud-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* Smart Ghost / X-Ray Mode: When typing or cursor is colliding underneath */
#Vue-EditorHelper.is-ghost-mode {
    pointer-events: none !important;
}
#Vue-EditorHelper.is-ghost-mode * {
    pointer-events: none !important;
}
#Vue-EditorHelper.is-ghost-mode .copilot-speech-bubble,
#Vue-EditorHelper.is-ghost-mode .copilot-single-bar {
    opacity: 0.07 !important;
    pointer-events: none !important;
    transform: scale(0.985);
    filter: blur(0.3px);
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), filter 0.28s ease !important;
}
#Vue-EditorHelper.is-ghost-mode .copilot-siri-orb {
    opacity: 0.35 !important;
    pointer-events: none !important;
    transform: scale(0.85) !important;
    box-shadow: 0 0 10px rgba(255, 157, 43, 0.2) !important;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 1. Native GuinRank Bold Digital Brain AI Orb (Clear, Bold, Unmistakable AI — Zero Religious Resemblance) */
.copilot-siri-orb {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #2b3342, #181f2b 60%, #0d121a 100%);
    box-shadow: 0 4px 20px -2px rgba(255, 107, 0, 0.5), 0 0 25px -4px rgba(255, 157, 43, 0.35);
    border: 2px solid rgba(255, 157, 43, 0.55);
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease;
    animation: grOrbBreathing 3.6s infinite ease-in-out;
}
.copilot-siri-orb:hover {
    transform: scale(1.12);
    border-color: #ff9d2b;
    box-shadow: 0 6px 28px -1px rgba(255, 107, 0, 0.7), 0 0 35px 2px rgba(255, 157, 43, 0.5);
}
.siri-orb-core {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.copilot-siri-orb:hover .siri-orb-core {
    transform: scale(1.1);
}
.guinrank-copilot-icon {
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 2px 6px rgba(255, 107, 0, 0.7));
    transition: all 0.25s ease;
}
.copilot-siri-orb:hover .guinrank-copilot-icon {
    filter: drop-shadow(0 0 10px rgba(255, 157, 43, 0.95));
}

/* GuinRank Ambient Breathing Animation */
@keyframes grOrbBreathing {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 18px -2px rgba(255, 107, 0, 0.45), 0 0 20px -4px rgba(255, 157, 43, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 6px 26px 0px rgba(255, 107, 0, 0.65), 0 0 32px 0px rgba(255, 157, 43, 0.5);
    }
}

/* Active Typing Listening Ripple (GuinRank Amber Pulse) */
.siri-typing-ripple {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid #ff9d2b;
    opacity: 0;
    pointer-events: none;
    animation: grRippleWave 1.8s infinite cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes grRippleWave {
    0% { transform: scale(0.92); opacity: 0.85; border-color: #ff9d2b; }
    50% { transform: scale(1.3); opacity: 0.35; border-color: #ff6b00; }
    100% { transform: scale(1.65); opacity: 0; border-color: rgba(255, 107, 0, 0); }
}

/* ==========================================================================
   GuinRank Copilot: Collapsed Ambient Insight Hint & Beacon Architecture
   ========================================================================== */

.copilot-orb-dock-row {
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    position: relative;
}

/* Enhanced Golden Pulse Aura for Orb when Insights are Ready */
.copilot-siri-orb.has-insights {
    border-color: #ff9d2b !important;
    box-shadow: 0 4px 24px -2px rgba(255, 107, 0, 0.7), 0 0 28px 0px rgba(255, 157, 43, 0.5) !important;
    animation: grOrbInsightPulse 2.4s infinite ease-in-out !important;
}

@keyframes grOrbInsightPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 20px -2px rgba(255, 107, 0, 0.6), 0 0 22px -2px rgba(255, 157, 43, 0.4);
    }
    50% {
        transform: scale(1.07);
        box-shadow: 0 6px 30px 2px rgba(255, 107, 0, 0.85), 0 0 36px 4px rgba(255, 157, 43, 0.65);
        border-color: #ffb74d;
    }
}

/* Glowing Notification Beacon Pip on Orb Corner */
.copilot-orb-beacon {
    position: absolute;
    top: -3px;
    inset-inline-end: -3px;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 10;
}

.beacon-pip-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff9d2b, #ff4500);
    border: 2px solid var(--card-bg, #1a202c);
    box-shadow: 0 0 8px #ff6b00;
}

.beacon-pip-ring {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid #ff9d2b;
    animation: beaconPipWave 1.6s infinite cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
}

@keyframes beaconPipWave {
    0% { transform: scale(0.6); opacity: 1; }
    100% { transform: scale(1.9); opacity: 0; }
}

/* Smart Ambient Insight Hint Capsule (Frosted Glass Pill) */
.copilot-orb-hint-capsule {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 12px 0 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--card-bg, #151b26) 88%, transparent);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid color-mix(in srgb, #ff9d2b 38%, var(--border-color, transparent));
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.35), 0 0 16px -2px rgba(255, 107, 0, 0.2);
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
    max-width: min(380px, calc(100vw - 120px));
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}

.copilot-orb-hint-capsule:hover {
    transform: translateY(-2px) scale(1.02);
    border-color: #ff9d2b;
    box-shadow: 0 10px 28px -2px rgba(0, 0, 0, 0.45), 0 0 22px 0px rgba(255, 107, 0, 0.35);
}

.hint-cap-sparkle {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff9d2b;
    flex-shrink: 0;
    animation: sparkleSpin 4s infinite linear;
}

@keyframes sparkleSpin {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(15deg) scale(1.15); }
}

.hint-cap-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--primary-color, #ff6b00) 15%, transparent);
    color: #ff9d2b;
    border: 1px solid color-mix(in srgb, #ff9d2b 30%, transparent);
    white-space: nowrap;
    flex-shrink: 0;
}

.hint-cap-snippet {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-main, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
}

[data-theme="dark"] .hint-cap-snippet,
body.dark-theme .hint-cap-snippet,
.dark .hint-cap-snippet {
    color: var(--text-main, #f8fafc);
}

.hint-cap-count {
    font-size: 10px;
    font-weight: 800;
    background: linear-gradient(135deg, #ff9d2b, #ff6b00);
    color: #ffffff;
    padding: 2px 6px;
    border-radius: 999px;
    flex-shrink: 0;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(255, 107, 0, 0.4);
}

.hint-cap-action {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #94a3b8);
    flex-shrink: 0;
    transition: transform 0.15s ease, color 0.15s ease;
}

.copilot-orb-hint-capsule:hover .hint-cap-action {
    color: #ff9d2b;
    transform: translate(2px, -2px);
}
[dir="rtl"] .copilot-orb-hint-capsule:hover .hint-cap-action {
    transform: translate(-2px, -2px);
}

/* Vue Hint Capsule Pop Transition */
.hint-capsule-pop-enter-active {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.hint-capsule-pop-leave-active {
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.hint-capsule-pop-enter-from {
    opacity: 0;
    transform: translateX(-14px) scale(0.9);
}
[dir="rtl"] .hint-capsule-pop-enter-from {
    transform: translateX(14px) scale(0.9);
}
.hint-capsule-pop-leave-to {
    opacity: 0;
    transform: translateX(-10px) scale(0.92);
}
[dir="rtl"] .hint-capsule-pop-leave-to {
    transform: translateX(10px) scale(0.92);
}

/* 2. Floating Competitor Sites Row (Zero background, border or shadow — Pure floating icons) */
.copilot-single-bar {
    width: min(460px, calc(100vw - 48px));
    height: auto;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;
    padding: 0 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    pointer-events: auto;
    margin-bottom: 2px;
    animation: ribbonFloatUp 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ribbonFloatUp {
    from { opacity: 0; transform: translateY(8px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Left Side: Competitor Mini Circles Row (No overflow-x: auto) */
.copilot-sites-mini-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    padding: 2px 0;
}

/* Individual Site Circle Button */
.copilot-site-circle-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--bg-body) 40%, var(--card-bg));
    border: 1.5px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 22%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.copilot-site-circle-btn:hover {
    transform: scale(1.1);
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(255, 107, 0, 0.25);
}
.copilot-site-circle-btn.active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-color);
    transform: scale(1.06);
    background: var(--card-bg);
}

/* Site Favicon (Crisp, Centered, Zero Clipping!) */
.site-circle-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

/* Rank Micro-Pip (Clean, Subtle, Cleanly Attached) */
.site-circle-rank {
    position: absolute;
    bottom: -2px;
    inset-inline-end: -2px;
    font-size: 7.5px;
    font-weight: 800;
    line-height: 1;
    padding: 1px 3px;
    border-radius: 4px;
    background: var(--card-bg);
    color: var(--text-muted);
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 22%, transparent);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.copilot-site-circle-btn.active .site-circle-rank {
    background: var(--primary-color);
    color: #ffffff;
    border-color: var(--primary-color);
}

/* Right Side: Minimize Container */
.copilot-bar-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.bubble-dock-btn {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 20%, transparent);
    background: color-mix(in srgb, var(--bg-body) 40%, var(--card-bg));
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
.bubble-dock-btn:hover {
    background: color-mix(in srgb, var(--danger, #ef4444) 12%, var(--card-bg));
    border-color: color-mix(in srgb, var(--danger, #ef4444) 30%, transparent);
    color: var(--danger, #ef4444);
}

/* 3. Emergent Content Speech Bubble */
.copilot-speech-bubble {
    width: min(460px, calc(100vw - 48px));
    background: color-mix(in srgb, var(--card-bg) 94%, transparent);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 26%, transparent);
    border-radius: 20px;
    box-shadow: 0 20px 50px -8px rgba(0, 0, 0, 0.4), 0 0 24px -4px rgba(255, 107, 0, 0.15);
    padding: 12px 16px 8px 16px;
    pointer-events: auto;
    position: relative;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    animation: bubbleBloom 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: bottom left;
}
[dir="rtl"] .copilot-speech-bubble,
html[dir="rtl"] .copilot-speech-bubble {
    transform-origin: bottom left;
}
@keyframes bubbleBloom {
    from { opacity: 0; transform: translateY(14px) scale(0.92); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Speech Tail connecting bubble to GuinRank AI Orb */
.copilot-speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -7px;
    inset-inline-start: 22px;
    width: 14px;
    height: 14px;
    background: var(--card-bg);
    transform: rotate(45deg);
    border-right: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 26%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 26%, transparent);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.08);
    pointer-events: none;
}

/* 4. Studio Body & Fixed Bottom Navigation */
.bubble-studio-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Text Stage with Dedicated Height Window */
.bubble-text-stage {
    min-height: 72px;
    max-height: 130px;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Sentence Card Container */
.bubble-sentence-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.bubble-sentence-item {
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-body) 45%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 18%, transparent);
    transition: all 0.15s ease;
}
.bubble-sentence-item:hover,
.bubble-sentence-item.active {
    background: color-mix(in srgb, var(--primary-color) 8%, var(--card-bg));
    border-color: color-mix(in srgb, var(--primary-color) 35%, transparent);
}
.bubble-sentence-text {
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-main);
    display: block;
    font-weight: 500;
}
.bubble-sentence-text mark,
.bubble-sentence-text .highlight-kw {
    background: color-mix(in srgb, var(--primary-color) 20%, transparent);
    color: var(--primary-color);
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 4px;
    border-bottom: 1.5px solid var(--primary-color);
}
.bubble-empty-hint {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    text-align: center;
    padding: 14px 6px;
}

/* Fixed Bottom Navigation Bar (Arrows on Left, Actions in Middle, Shortcut Hint on Right) */
.bubble-bottom-nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 18%, transparent);
    pointer-events: auto;
}
.bubble-nav-arrows-dock {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.bubble-nav-arrow-btn {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 22%, transparent);
    background: color-mix(in srgb, var(--bg-body) 50%, var(--card-bg));
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.bubble-nav-arrow-btn:hover {
    background: var(--card-bg);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: scale(1.1);
    box-shadow: 0 2px 6px rgba(255, 107, 0, 0.2);
}
.bubble-page-counter {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-main);
    padding: 2px 6px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--bg-body) 60%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 18%, transparent);
}

/* Center: Quick Action Buttons (Insert & AI Rephrase located in bottom bar) */
.bubble-actions-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 1;
    min-width: 0;
}
.btn-bubble-action {
    height: 24px;
    padding: 0 7px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 24%, transparent) !important;
    background: color-mix(in srgb, var(--bg-body) 45%, var(--card-bg));
    color: var(--text-main);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    white-space: nowrap;
    transition: all 0.15s ease;
}
.btn-bubble-action:hover {
    background: color-mix(in srgb, var(--text-main) 10%, var(--card-bg));
}
.btn-bubble-action.primary {
    background: var(--primary-color);
    color: #ffffff;
    border-color: var(--primary-color) !important;
    box-shadow: 0 2px 6px var(--primary-shadow, rgba(244, 106, 37, 0.25));
}
.btn-bubble-action.primary:hover {
    filter: brightness(1.08);
}
.btn-bubble-action.ai {
    background: color-mix(in srgb, #ff9d2b 12%, var(--card-bg));
    color: #ff9d2b;
    border-color: color-mix(in srgb, #ff9d2b 28%, transparent) !important;
}
.btn-bubble-action.ai:hover {
    background: #ff9d2b;
    color: #ffffff;
    border-color: #ff9d2b !important;
}

/* Right: Shortcut Hint */
.bubble-nav-hint {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--text-muted);
    opacity: 0.75;
    letter-spacing: 0.3px;
    white-space: nowrap;
    flex-shrink: 0;
}
@media (max-width: 420px) {
    .bubble-nav-hint {
        display: none;
    }
}

/* 5. Fluid Card Deck Slide Animations */
.quote-deck-next-enter-active,
.quote-deck-next-leave-active,
.quote-deck-prev-enter-active,
.quote-deck-prev-leave-active {
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}
.quote-deck-next-enter-from {
    opacity: 0;
    transform: translateY(16px);
}
.quote-deck-next-leave-to {
    opacity: 0;
    transform: translateY(-16px);
}
.quote-deck-prev-enter-from {
    opacity: 0;
    transform: translateY(-16px);
}
.quote-deck-prev-leave-to {
    opacity: 0;
    transform: translateY(16px);
}

/* 6. Selection Popover & Loading State inside the card */
.bubble-selection-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bubble-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bubble-card-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    color: var(--text-main);
}
.bubble-card-desc {
    font-size: 10.5px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.35;
}
.bubble-candidates-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    max-height: 130px;
    overflow-y: auto;
    padding: 2px;
}
.bubble-candidate-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: color-mix(in srgb, var(--bg-body) 60%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 22%, transparent);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.14s ease;
}
.bubble-candidate-chip:hover {
    background: var(--card-bg);
    border-color: var(--primary-color);
}
.bubble-candidate-chip.is-selected {
    background: color-mix(in srgb, var(--primary-color) 10%, var(--card-bg));
    border-color: var(--primary-color);
}
.cand-icon {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    object-fit: contain;
}
.cand-domain {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.cand-rank {
    font-size: 9px;
    color: var(--text-muted);
}
.bubble-card-actions {
    margin-top: 4px;
}
.btn-bubble-fetch {
    width: 100%;
    height: 32px;
    border-radius: 8px;
    background: var(--primary-color);
    color: #ffffff;
    border: none;
    font-size: 11.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    box-shadow: 0 2px 8px var(--primary-shadow, rgba(244, 106, 37, 0.3));
    transition: all 0.15s ease;
}
.btn-bubble-fetch:hover:not(:disabled) {
    filter: brightness(1.08);
}
.btn-bubble-fetch:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.fetch-credit-pill {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 800;
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 12%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
    padding: 2px 6px;
    border-radius: 6px;
}

/* Loading Card */
.bubble-loading-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px 2px;
}
.bubble-radar-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.bubble-radar-spinner {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary-color) 10%, var(--card-bg));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.bubble-loading-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.bubble-loading-status {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bubble-progress-track {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--bg-body) 60%, var(--card-bg));
    overflow: hidden;
}
.bubble-progress-bar {
    height: 100%;
    background: var(--primary-color);
    transition: width 0.25s ease;
}
.bubble-abort-row {
    display: flex;
    justify-content: flex-end;
}
.btn-bubble-abort {
    height: 24px;
    padding: 0 8px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--danger, #ef4444) 12%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--danger, #ef4444) 28%, transparent);
    color: var(--danger, #ef4444);
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.14s ease;
}
.btn-bubble-abort:hover {
    background: var(--danger, #ef4444);
    color: #ffffff;
}

        /* ========================================================= */
        /* DOCKED COLLAPSIBLE SEO CONSOLE & SEO AUDIT DRAWERS (V6+)  */
        /* ========================================================= */
        .docked-drawer-panel {
            position: relative;
            width: 100%;
            background: var(--card-bg);
            border-top: none;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s ease;
            z-index: 40;
        }

        .docked-drawer-panel.collapsed {
            max-height: 0 !important;
            height: 0 !important;
            min-height: 0 !important;
            opacity: 0 !important;
            pointer-events: none !important;
            overflow: hidden !important;
            padding: 0 !important;
            margin: 0 !important;
            border: none !important;
            box-shadow: none !important;
        }

        .docked-drawer-panel:not(.collapsed) {
            max-height: 320px;
            height: 280px;
            box-shadow: var(--co-shadow-floating);
            border-top: 1px solid color-mix(in srgb, var(--border-color) 40%, transparent);
        }

        .docked-drawer-panel.hidden-panel {
            display: none !important;
        }

        .drawer-header-strip {
            height: 40px;
            min-height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
            background: color-mix(in srgb, var(--bg-body) 70%, var(--card-bg));
            border-bottom: none;
            box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--text-muted) 12%, transparent);
            cursor: pointer;
            user-select: none;
            gap: 12px;
        }

        .drawer-header-left {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .drawer-header-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 11.5px;
            font-weight: 800;
            padding: 3px 9px;
            border-radius: 8px;
        }

        .drawer-header-badge.console {
            background: color-mix(in srgb, #3b82f6 14%, var(--card-bg));
            color: #3b82f6;
            border: none;
        }

        .drawer-header-badge.audit {
            background: color-mix(in srgb, var(--primary-color) 14%, var(--card-bg));
            color: var(--primary-color);
            border: none;
        }

        .console-category-tabs {
            display: flex;
            align-items: center;
            gap: 4px;
            background: var(--bg-body);
            padding: 2px;
            border-radius: 8px;
            border: none;
            box-shadow: var(--co-shadow-surface);
        }

        .cat-tab {
            font-size: 11px;
            font-weight: 700;
            color: var(--text-muted);
            padding: 3px 8px;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
            transition: 0.15s;
        }

        .cat-tab:hover {
            color: var(--text-main);
        }

        .cat-tab.active {
            background: var(--card-bg);
            color: var(--text-main);
            font-weight: 800;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
        }

        .console-filter-tabs {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .fc-tab {
            font-size: 11px;
            font-weight: 700;
            color: var(--text-muted);
            background: var(--bg-body);
            border: none;
            box-shadow: var(--co-shadow-surface);
            padding: 3px 8px;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
            transition: 0.15s;
        }

        .fc-tab.active {
            background: var(--primary-color);
            color: #fff;
            box-shadow: var(--co-shadow-card);
            font-weight: 800;
        }

        .c-badge {
            font-size: 10px;
            font-weight: 800;
            padding: 1px 5px;
            border-radius: 10px;
            background: color-mix(in srgb, var(--text-muted) 20%, transparent);
        }

        .c-badge.red {
            background: #ef4444;
            color: #fff;
        }

        .c-badge.yellow {
            background: #f59e0b;
            color: #fff;
        }

        .c-badge.green {
            background: #10b981;
            color: #fff;
        }

        .drawer-header-center {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .drawer-center-hint {
            font-size: 11.5px;
            color: var(--text-muted);
            font-weight: 600;
        }

        .drawer-header-right {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .drawer-toggle-btn, .drawer-close-btn {
            background: transparent;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            border-radius: 6px;
            transition: 0.15s;
        }

        .drawer-toggle-btn:hover, .drawer-close-btn:hover {
            background: color-mix(in srgb, var(--text-muted) 12%, transparent);
            color: var(--text-main);
        }

        .btn-drawer-action {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: var(--bg-body);
            border: none;
            box-shadow: var(--co-shadow-surface);
            color: var(--text-main);
            font-size: 11px;
            font-weight: 800;
            padding: 3px 8px;
            border-radius: 6px;
            cursor: pointer;
            transition: 0.15s;
        }

        .btn-drawer-action:hover {
            color: var(--primary-color);
            box-shadow: var(--co-shadow-card);
        }

        .audit-score-pill {
            font-size: 10.5px;
            font-weight: 800;
            color: #10b981;
            background: color-mix(in srgb, #10b981 12%, var(--card-bg));
            border: none;
            padding: 2px 7px;
            border-radius: 6px;
        }

        .drawer-body-wrap {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            padding: 10px 16px;
            background: var(--card-bg);
        }

        /* Diagnostic List Item Rows (V7 Pro Modern Card System) */
        .item-console-v7 {
            position: relative;
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 8.5px 14px 8.5px 18px;
            border-radius: 9px;
            margin-bottom: 6px;
            background: var(--card-bg);
            border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
            font-size: 12px;
            transition: all 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
            overflow: hidden;
        }

        [dir="rtl"] .item-console-v7 {
            padding: 8.5px 18px 8.5px 14px;
        }

        .item-console-v7:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            border-color: color-mix(in srgb, var(--border-color) 85%, transparent);
        }

        /* 1/3 Height Centered Rounded Status Indicator Pill (Matching .co-keyword-card::before) */
        .item-console-v7::before {
            content: "";
            position: absolute;
            left: 5px;
            top: 50%;
            transform: translateY(-50%);
            width: 3.5px;
            height: 38%;
            border-radius: 6px;
            transition: all 0.22s ease;
            opacity: 0.9;
        }

        [dir="rtl"] .item-console-v7::before {
            left: auto;
            right: 5px;
        }

        .item-console-v7:hover::before {
            height: 56%;
            opacity: 1;
            width: 4px;
        }

        /* Status-specific Pill Colors with Micro-Glow */
        .item-console-v7.error::before {
            background: #ef4444;
            box-shadow: 0 0 7px rgba(239, 68, 68, 0.55);
        }
        .item-console-v7.warning::before {
            background: #f59e0b;
            box-shadow: 0 0 7px rgba(245, 158, 11, 0.55);
        }
        .item-console-v7.passed::before {
            background: #10b981;
            box-shadow: 0 0 7px rgba(16, 185, 129, 0.55);
        }

        /* Ambient Micro-Glow per Status (Ultra-Soft Seamless Color Tint matching .co-keyword-card) */
        .item-console-v7.error {
            background: linear-gradient(90deg, color-mix(in srgb, #ef4444 5%, var(--card-bg)) 0%, var(--card-bg) 35%);
        }
        .item-console-v7.warning {
            background: linear-gradient(90deg, color-mix(in srgb, #f59e0b 5%, var(--card-bg)) 0%, var(--card-bg) 35%);
        }
        .item-console-v7.passed {
            background: linear-gradient(90deg, color-mix(in srgb, #10b981 5%, var(--card-bg)) 0%, var(--card-bg) 35%);
        }

        [dir="rtl"] .item-console-v7.error {
            background: linear-gradient(270deg, color-mix(in srgb, #ef4444 5%, var(--card-bg)) 0%, var(--card-bg) 35%);
        }
        [dir="rtl"] .item-console-v7.warning {
            background: linear-gradient(270deg, color-mix(in srgb, #f59e0b 5%, var(--card-bg)) 0%, var(--card-bg) 35%);
        }
        [dir="rtl"] .item-console-v7.passed {
            background: linear-gradient(270deg, color-mix(in srgb, #10b981 5%, var(--card-bg)) 0%, var(--card-bg) 35%);
        }

        .console-item-icon {
            padding-top: 2px;
            display: flex;
            align-items: center;
        }

        .console-item-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .console-item-title-row {
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .focus-pill {
            font-weight: 800;
            font-size: 10px;
            padding: 1.5px 7px;
            border-radius: 5px;
            background: color-mix(in srgb, var(--text-muted) 14%, transparent);
            color: var(--text-main);
            letter-spacing: 0.15px;
            display: inline-flex;
            align-items: center;
        }

        .focus-pill.red, .focus-pill.error {
            background: color-mix(in srgb, #ef4444 12%, transparent);
            color: #ef4444;
            border: 1px solid rgba(239, 68, 68, 0.22);
        }

        .focus-pill.yellow, .focus-pill.warning {
            background: color-mix(in srgb, #f59e0b 12%, transparent);
            color: #f59e0b;
            border: 1px solid rgba(245, 158, 11, 0.22);
        }

        .focus-pill.green, .focus-pill.passed {
            background: color-mix(in srgb, #10b981 12%, transparent);
            color: #10b981;
            border: 1px solid rgba(16, 185, 129, 0.22);
        }

        .console-item-msg {
            color: var(--text-main);
            font-size: 12px;
            font-weight: 500;
            line-height: 1.45;
        }

        .fix-hint {
            font-size: 11px;
            color: var(--primary-color);
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            margin-top: 3px;
            padding: 2.5px 8.5px;
            background: color-mix(in srgb, var(--primary-color) 8%, var(--card-bg));
            border: 1px solid color-mix(in srgb, var(--primary-color) 20%, transparent);
            border-radius: 6px;
            width: fit-content;
        }

        /* SEO Audit Dashboard */
        .audit-dashboard-grid {
            display: grid;
            grid-template-columns: 1fr 340px;
            gap: 14px;
            height: 100%;
        }

        .audit-box {
            background: var(--bg-body);
            border: none;
            box-shadow: var(--co-shadow-surface);
            border-radius: 10px;
            padding: 8px 12px;
            display: flex;
            flex-direction: column;
            gap: 4px;
            margin-bottom: 8px;
        }

        .audit-box-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 11.5px;
            font-weight: 800;
            color: var(--text-main);
        }

        .audit-char-count {
            font-size: 10.5px;
            font-weight: 700;
            color: var(--text-muted);
        }

        .audit-input {
            background: var(--co-surface-recessed);
            border: none;
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
            border-radius: 6px;
            padding: 6px 10px;
            font-size: 12px;
            color: var(--text-main);
            outline: none;
            font-family: inherit;
            width: 100%;
            box-sizing: border-box;
        }

        .audit-input:focus {
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.06), 0 0 0 2px var(--primary-color);
        }

        .audit-meta-goals {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-top: 3px;
        }

        .goal-pill {
            font-size: 10px;
            font-weight: 700;
            padding: 1px 6px;
            border-radius: 4px;
            display: inline-flex;
            align-items: center;
            gap: 3px;
        }

        .goal-pill.passed {
            background: color-mix(in srgb, #10b981 12%, var(--card-bg));
            color: #10b981;
            border: none;
        }

        .goal-pill.failed {
            background: color-mix(in srgb, #ef4444 12%, var(--card-bg));
            color: #ef4444;
            border: none;
        }

        .audit-score-card {
            display: flex;
            align-items: center;
            gap: 12px;
            background: var(--bg-body);
            border: none;
            box-shadow: var(--co-shadow-surface);
            border-radius: 10px;
            padding: 10px;
            margin-bottom: 8px;
        }

        .audit-circle-dial {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            background: conic-gradient(#10b981 100%, color-mix(in srgb, var(--text-muted) 20%, transparent) 0%);
            flex-shrink: 0;
            transition: background 0.4s ease;
        }

        .audit-dial-inner {
            width: 38px;
            height: 38px;
            background: var(--card-bg);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 900;
            font-size: 12px;
            color: var(--text-main);
        }

        .audit-score-details h4 {
            font-size: 12.5px;
            font-weight: 800;
            color: var(--text-main);
            margin: 0 0 2px 0;
        }

        .audit-score-details p {
            font-size: 11px;
            color: var(--text-muted);
            margin: 0;
            line-height: 1.3;
        }

        .audit-result {
            max-height: 140px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .audit-res-item {
            font-size: 11.5px;
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 8px;
            border-radius: 6px;
            background: var(--bg-body);
        }

        .audit-res-item.pro { color: #10b981; }
        .audit-res-item.sug { color: #f59e0b; }
        .audit-res-item.con { color: #ef4444; }

        /* =========================================
           INTEGRATED STATUS BAR (MULTI-DECK DOCK)
           Sleek, Coordinated, and Responsive Telemetry Strip
           ========================================= */
        .status-bar.multi-deck-dock {
            height: 36px !important;
            min-height: 36px !important;
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            align-items: center !important;
            justify-content: space-between !important;
            padding: 0 10px !important;
            background: color-mix(in srgb, var(--card-bg, #ffffff) 88%, var(--bg-body, #f8fafc));
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border-top: 1px solid color-mix(in srgb, var(--border-color, rgba(0, 0, 0, 0.08)) 60%, transparent);
            border-bottom-left-radius: 18px;
            border-bottom-right-radius: 18px;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
            font-size: 11px;
            color: var(--text-muted);
            flex-shrink: 0;
            user-select: none;
            gap: 8px;
            position: relative;
            overflow: visible !important;
            box-sizing: border-box;
            z-index: 25;
            container-type: inline-size;
            container-name: statusDock;
        }

        html[data-theme="dark"] .status-bar.multi-deck-dock,
        body.dark-mode .status-bar.multi-deck-dock,
        .dark-theme .status-bar.multi-deck-dock {
            background: #14161d !important;
            border-color: rgba(255, 255, 255, 0.07) !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
        }

        html[data-theme="sunset"] .status-bar.multi-deck-dock,
        body.sunset-mode .status-bar.multi-deck-dock {
            background: #241e1d !important;
            border-color: rgba(255, 255, 255, 0.08) !important;
        }

        html[data-theme="light"] .status-bar.multi-deck-dock,
        body.light-mode .status-bar.multi-deck-dock {
            background: #f8fafc !important;
            border-color: #e2e8f0 !important;
        }

        /* Status Left: Target & Telemetry */
        .status-left {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            align-items: center !important;
            gap: 5px !important;
            min-width: 0 !important;
            flex: 1 1 auto !important;
            overflow: hidden !important;
        }

        .status-divider {
            width: 1px;
            height: 16px;
            background: color-mix(in srgb, var(--text-muted) 20%, transparent);
            margin: 0 2px;
            flex-shrink: 0;
        }

        /* Telemetry Stat Micro-Chips */
        .status-stat-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 0 7px;
            border-radius: 6px;
            height: 25px;
            box-sizing: border-box;
            background: color-mix(in srgb, var(--bg-body) 60%, var(--card-bg));
            border: 1px solid color-mix(in srgb, var(--border-color) 35%, transparent);
            font-size: 11px;
            color: var(--text-muted);
            transition: all 0.15s ease;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .status-stat-chip:hover {
            background: color-mix(in srgb, var(--bg-body) 85%, var(--card-bg));
            border-color: color-mix(in srgb, var(--border-color) 70%, transparent);
        }

        .status-stat-chip span {
            display: inline-flex;
            align-items: center;
            line-height: 0;
        }

        .status-stat-chip svg,
        .status-stat-chip i {
            width: 12px;
            height: 12px;
            opacity: 0.85;
        }

        .stat-num-val {
            font-weight: 700;
            color: var(--text-main);
            font-family: var(--font-mono, 'JetBrains Mono', monospace);
            font-size: 10.5px;
        }

        .stat-target-val {
            color: var(--text-muted);
            font-size: 10px;
            opacity: 0.8;
            margin-inline-start: 1px;
        }

        /* Status Right: Multi-Deck Controls */
        .status-right {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            align-items: center !important;
            gap: 6px !important;
            flex-shrink: 0 !important;
            margin-inline-start: auto !important;
        }

        .status-btn {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 0 8px;
            height: 25px;
            border-radius: 7px;
            background: var(--card-bg);
            border: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
            font-weight: 700;
            font-size: 11px;
            cursor: pointer;
            color: var(--text-main);
            transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
            white-space: nowrap;
            box-sizing: border-box;
        }

        .status-btn span {
            display: inline-flex;
            align-items: center;
            line-height: 0;
        }

        .status-btn svg,
        .status-btn i {
            width: 12.5px;
            height: 12.5px;
        }

        .status-btn:hover {
            transform: translateY(-0.5px);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
        }

        /* Deck 1: SERP Insights Trigger */
        .status-btn.serp-trigger:hover,
        .status-btn.copilot-trigger:hover {
            border-color: rgba(168, 85, 247, 0.45);
            color: #a855f7;
        }

        .status-btn.serp-trigger.active,
        .status-btn.copilot-trigger.active {
            background: color-mix(in srgb, #a855f7 14%, var(--card-bg));
            border-color: #a855f7;
            color: #a855f7;
            box-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
        }

        /* Deck 2: SEO Audit Trigger */
        .status-btn.audit-trigger:hover {
            border-color: rgba(16, 185, 129, 0.45);
            color: #10b981;
        }

        .status-btn.audit-trigger.active {
            background: color-mix(in srgb, #10b981 14%, var(--card-bg));
            border-color: #10b981;
            color: #10b981;
            box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
        }

        /* Deck 3: SEO Console Trigger */
        .status-btn.console-trigger:hover {
            border-color: rgba(59, 130, 246, 0.45);
            color: #3b82f6;
        }

        .status-btn.console-trigger.active {
            background: color-mix(in srgb, #3b82f6 14%, var(--card-bg));
            border-color: #3b82f6;
            color: #3b82f6;
            box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
        }

        .status-pill-score {
            background: color-mix(in srgb, #10b981 14%, var(--card-bg));
            color: #10b981;
            font-size: 10px;
            font-weight: 800;
            padding: 1px 5px;
            border-radius: 4px;
            font-family: var(--font-mono, monospace);
            border: 1px solid rgba(16, 185, 129, 0.25);
        }

        .copilot-dock-badge {
            background: color-mix(in srgb, #a855f7 14%, var(--card-bg));
            color: #a855f7;
            font-size: 10px;
            font-weight: 800;
            padding: 1px 5px;
            border-radius: 4px;
            font-family: var(--font-mono, monospace);
            border: 1px solid rgba(168, 85, 247, 0.25);
        }

        .status-badge-pills {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            margin-inline-start: 2px;
        }

        .status-badge-pills .badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 16px;
            height: 15px;
            padding: 0 4px;
            border-radius: 4px;
            font-size: 9.5px;
            font-weight: 800;
            font-family: var(--font-mono, monospace);
            line-height: 1;
            transition: all 0.2s ease;
        }

        .status-badge-pills .badge.red {
            color: #ef4444;
            background: color-mix(in srgb, #ef4444 14%, var(--card-bg));
            border: 1px solid rgba(239, 68, 68, 0.3);
        }

        .status-badge-pills .badge.yellow {
            color: #f59e0b;
            background: color-mix(in srgb, #f59e0b 14%, var(--card-bg));
            border: 1px solid rgba(245, 158, 11, 0.3);
        }

        .status-badge-pills .badge.green {
            color: #10b981;
            background: color-mix(in srgb, #10b981 14%, var(--card-bg));
            border: 1px solid rgba(16, 185, 129, 0.3);
        }

        /* =======================================================
           DYNAMIC STATUS BAR RESPONSIVENESS (CONTAINER QUERIES & OBSERVER)
           ======================================================= */
        
        /* 1. BALANCED STAGE (< 920px): Hide verbose text labels in stat chips */
        @container statusDock (max-width: 920px) {
            .status-stat-chip .stat-label {
                display: none !important;
            }
            .target-chip.kw strong {
                max-width: 100px;
            }
        }
        .status-bar.dock-stage-balanced .status-stat-chip .stat-label {
            display: none !important;
        }
        .status-bar.dock-stage-balanced .target-chip.kw strong {
            max-width: 100px;
        }

        /* 2. COMPACT STAGE (< 760px): Hide deck button text labels & secondary stats */
        @container statusDock (max-width: 760px) {
            .status-stat-chip.chip-read,
            .status-stat-chip.chip-lines {
                display: none !important;
            }
            .status-stat-chip .stat-label {
                display: none !important;
            }
            .status-btn .dock-btn-label {
                display: none !important;
            }
            .target-chip.kw strong {
                max-width: 90px;
            }
        }
        .status-bar.dock-stage-compact .status-stat-chip.chip-read,
        .status-bar.dock-stage-compact .status-stat-chip.chip-lines {
            display: none !important;
        }
        .status-bar.dock-stage-compact .status-stat-chip .stat-label {
            display: none !important;
        }
        .status-bar.dock-stage-compact .status-btn .dock-btn-label {
            display: none !important;
        }
        .status-bar.dock-stage-compact .target-chip.kw strong {
            max-width: 90px;
        }

        /* 3. MINIMAL STAGE (< 560px): Keep only core word count & micro icons */
        @container statusDock (max-width: 560px) {
            .status-stat-chip.chip-read,
            .status-stat-chip.chip-lines,
            .status-stat-chip.chip-chars,
            .target-chip.lang,
            .status-divider {
                display: none !important;
            }
            .status-stat-chip .stat-label,
            .status-btn .dock-btn-label {
                display: none !important;
            }
            .target-chip.kw strong {
                max-width: 75px;
            }
            .status-stat-chip #word-target-val {
                display: none !important;
            }
            .copilot-dock-badge {
                display: none !important;
            }
        }
        .status-bar.dock-stage-minimal .status-stat-chip.chip-read,
        .status-bar.dock-stage-minimal .status-stat-chip.chip-lines,
        .status-bar.dock-stage-minimal .status-stat-chip.chip-chars,
        .status-bar.dock-stage-minimal .target-chip.lang,
        .status-bar.dock-stage-minimal .status-divider {
            display: none !important;
        }
        .status-bar.dock-stage-minimal .status-stat-chip .stat-label,
        .status-bar.dock-stage-minimal .status-btn .dock-btn-label {
            display: none !important;
        }
        .status-bar.dock-stage-minimal .target-chip.kw strong {
            max-width: 75px;
        }
        .status-bar.dock-stage-minimal .status-stat-chip #word-target-val {
            display: none !important;
        }
        .status-bar.dock-stage-minimal .copilot-dock-badge {
            display: none !important;
        }

        /* 4. MICRO STAGE (< 420px): Icon-only compact status strip */
        @container statusDock (max-width: 420px) {
            .status-btn {
                padding: 0 5px !important;
            }
            .status-pill-score {
                display: none !important;
            }
            .status-badge-pills .badge.yellow,
            .status-badge-pills .badge.green {
                display: none !important;
            }
            .target-chip.kw strong {
                max-width: 60px;
            }
        }
        .status-bar.dock-stage-micro .status-btn {
            padding: 0 5px !important;
        }
        .status-bar.dock-stage-micro .status-pill-score {
            display: none !important;
        }
        .status-bar.dock-stage-micro .status-badge-pills .badge.yellow,
        .status-bar.dock-stage-micro .status-badge-pills .badge.green {
            display: none !important;
        }
        .status-bar.dock-stage-micro .target-chip.kw strong {
            max-width: 60px;
        }

        /* Console Filter Tabs Badge Colors */
        .console-filter-tabs .c-badge.red {
            color: #ef4444 !important;
            background: color-mix(in srgb, #ef4444 14%, var(--card-bg)) !important;
            border: 1px solid rgba(239, 68, 68, 0.3) !important;
        }
        .console-filter-tabs .c-badge.yellow {
            color: #f59e0b !important;
            background: color-mix(in srgb, #f59e0b 14%, var(--card-bg)) !important;
            border: 1px solid rgba(245, 158, 11, 0.3) !important;
        }
        .console-filter-tabs .c-badge.green {
            color: #10b981 !important;
            background: color-mix(in srgb, #10b981 14%, var(--card-bg)) !important;
            border: 1px solid rgba(16, 185, 129, 0.3) !important;
        }

        /* =========================================
           FLOATING SELECTION TOOLBAR (NEXT-GEN V7 PILL RIBBON)
           ========================================= */
        #floatingMenu.co-floating-bubble {
            position: absolute;
            z-index: 9999;
            filter: none !important;
            user-select: none;
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            transform-origin: center bottom;
            animation: floatMenuIn 0.16s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            pointer-events: auto;
            opacity: 1;
            visibility: visible;
        }

        #floatingMenu.none {
            display: none !important;
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }

        .floating-bubble-inner {
            display: inline-flex;
            align-items: center;
            height: 38px;
            padding: 3px 6px;
            background: color-mix(in srgb, var(--card-bg) 92%, var(--bg-body));
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border: 1px solid color-mix(in srgb, var(--border-color) 75%, transparent);
            border-radius: 10px;
            box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.22), 0 4px 12px -2px rgba(0, 0, 0, 0.1);
            gap: 2px;
            position: relative;
            box-sizing: border-box;
            white-space: nowrap;
        }

        .bubble-btn-group {
            display: inline-flex;
            align-items: center;
            gap: 1px;
        }

        .bubble-btn {
            height: 30px;
            min-width: 30px;
            padding: 0 6px;
            border: none;
            border-radius: 6px;
            background: transparent;
            color: var(--text-muted);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 0.12s ease, color 0.12s ease, transform 0.1s ease;
            position: relative;
            box-sizing: border-box;
        }

        .bubble-btn span,
        .bubble-btn i,
        .bubble-btn svg {
            pointer-events: none;
        }

        .bubble-btn:hover {
            background: color-mix(in srgb, var(--primary-color) 12%, var(--card-bg));
            color: var(--primary-color);
        }

        .bubble-btn:active {
            transform: scale(0.95);
        }

        .bubble-block-btn:active,
        .color-trigger-btn:active,
        #floatingMoreBtn:active,
        .tb-block-btn:active {
            transform: none !important;
        }

        .bubble-btn.is-active {
            background: color-mix(in srgb, var(--primary-color) 18%, var(--card-bg)) !important;
            color: var(--primary-color) !important;
            font-weight: 700;
        }

        .bubble-block-btn {
            padding: 0 8px;
            gap: 2px;
            font-size: 11.5px;
            font-weight: 700;
            color: var(--text-main);
            background: color-mix(in srgb, var(--text-muted) 10%, transparent);
        }

        .bubble-block-btn:hover {
            background: color-mix(in srgb, var(--primary-color) 15%, var(--card-bg));
            color: var(--primary-color);
        }

        .bubble-divider {
            width: 1px;
            height: 18px;
            background: color-mix(in srgb, var(--border-color) 70%, transparent);
            margin: 0 2px;
            flex-shrink: 0;
        }

        .bubble-dropdown-wrapper {
            position: relative;
            display: inline-flex;
        }

        /* Bubble Popovers */
        .bubble-popover {
            position: absolute;
            top: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%);
            background: var(--card-bg);
            border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
            border-radius: 12px;
            box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.28), 0 6px 14px -2px rgba(0, 0, 0, 0.12);
            padding: 6px;
            z-index: 10050;
            box-sizing: border-box;
            max-height: min(340px, 62vh);
            overflow-y: auto;
            animation: popoverInCenter 0.13s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        .bubble-popover::-webkit-scrollbar {
            width: 4px;
        }
        .bubble-popover::-webkit-scrollbar-track {
            background: transparent;
        }
        .bubble-popover::-webkit-scrollbar-thumb {
            background: color-mix(in srgb, var(--border-color) 70%, transparent);
            border-radius: 4px;
        }

        .bubble-popover.popover-flip-up {
            top: auto !important;
            bottom: calc(100% + 8px) !important;
        }

        .block-popover {
            left: 0 !important;
            right: auto !important;
            transform: none !important;
            width: 190px;
            display: flex;
            flex-direction: column;
            gap: 2px;
            animation: popoverInLeft 0.13s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
        }

        /* Slash Command Palette Mode */
        #floatingMenu.is-slash-mode {
            padding: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
            border: none !important;
        }

        #floatingMenu.is-slash-mode .floating-bubble-inner {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            padding: 0 !important;
            height: auto !important;
        }

        #floatingMenu.is-slash-mode .bubble-btn-group,
        #floatingMenu.is-slash-mode .bubble-divider,
        #floatingMenu.is-slash-mode #floatingSelStat,
        #floatingMenu.is-slash-mode .floating-bubble-arrow,
        #floatingMenu.is-slash-mode #floatingBlockBtn,
        #floatingMenu.is-slash-mode #floatingColorWrapper,
        #floatingMenu.is-slash-mode #floatingLinkWrapper,
        #floatingMenu.is-slash-mode #floatingAiWrapper,
        #floatingMenu.is-slash-mode #floatingMoreWrapper {
            display: none !important;
        }

        #floatingMenu.is-slash-mode #floatingBlockWrapper {
            position: static !important;
            display: block !important;
        }

        #floatingMenu.is-slash-mode #floatingBlockMenu {
            position: relative !important;
            top: 0 !important;
            left: 0 !important;
            transform: none !important;
            width: 224px !important;
            max-width: 280px !important;
            background: var(--card-bg) !important;
            border: 1px solid color-mix(in srgb, var(--border-color) 85%, transparent) !important;
            border-radius: 12px !important;
            box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.28), 0 6px 16px -2px rgba(0, 0, 0, 0.14) !important;
            padding: 6px !important;
            display: flex !important;
            flex-direction: column !important;
            gap: 2px !important;
            max-height: min(340px, calc(100vh - 140px));
            overflow-y: auto !important;
            z-index: 10050 !important;
            animation: popoverInCenter 0.14s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
        }

        #floatingMenu.is-slash-mode .bubble-pop-item {
            padding: 7px 10px;
            font-size: 12px;
            border-radius: 8px;
        }

        .bubble-pop-item {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
            padding: 6px 8px;
            border: none;
            border-radius: 6px;
            background: transparent;
            color: var(--text-main);
            font-size: 11.5px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.1s ease, color 0.1s ease;
            box-sizing: border-box;
            text-align: start;
        }

        .bubble-pop-item:hover,
        .bubble-pop-item:focus,
        .bubble-pop-item.is-active {
            background: color-mix(in srgb, var(--primary-color) 14%, var(--card-bg));
            color: var(--primary-color);
            outline: none;
        }

        .bubble-pop-item .pop-tag {
            font-size: 10px;
            font-weight: 800;
            padding: 1px 5px;
            border-radius: 4px;
            background: color-mix(in srgb, var(--text-muted) 16%, transparent);
            color: var(--text-main);
            min-width: 18px;
            text-align: center;
        }

        .bubble-pop-item .tag-h1 { background: #3b82f6; color: #fff; }
        .bubble-pop-item .tag-h2 { background: #10b981; color: #fff; }
        .bubble-pop-item .tag-h3 { background: #8b5cf6; color: #fff; }
        .bubble-pop-item .tag-h4 { background: #f59e0b; color: #fff; }
        .bubble-pop-item .tag-h5 { background: #ec4899; color: #fff; }
        .bubble-pop-item .tag-h6 { background: #6b7280; color: #fff; }

        .bubble-pop-item .pop-kbd {
            margin-left: auto;
            font-size: 9px;
            font-family: monospace;
            color: var(--text-muted);
            background: color-mix(in srgb, var(--border-color) 60%, transparent);
            padding: 1px 4px;
            border-radius: 4px;
        }

        .bubble-pop-divider {
            height: 1px;
            background: color-mix(in srgb, var(--border-color) 50%, transparent);
            margin: 4px 0;
            width: 100%;
        }

        /* Color Studio Popover */
        .color-studio-popover {
            width: 256px;
            padding: 10px;
        }

        .color-studio-popover.tb-color-popover-mode {
            position: absolute !important;
            top: calc(100% + 6px) !important;
            left: 0 !important;
            right: auto !important;
            transform: none !important;
            z-index: 2500 !important;
        }

        [dir="rtl"] .color-studio-popover.tb-color-popover-mode,
        html[dir="rtl"] .color-studio-popover.tb-color-popover-mode,
        body.rtl .color-studio-popover.tb-color-popover-mode {
            left: auto !important;
            right: 0 !important;
        }

        .color-indicator-wrap {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }

        .color-indicator-wrap .char-a {
            font-size: 13px;
            font-weight: 900;
            color: var(--text-main);
        }

        .active-color-line {
            width: 14px;
            height: 3px;
            border-radius: 2px;
            background: var(--primary-color);
            margin-top: 1px;
            transition: background 0.15s ease;
        }

        .color-studio-tabs {
            display: flex;
            gap: 4px;
            background: color-mix(in srgb, var(--bg-body) 70%, var(--card-bg));
            border-radius: 8px;
            padding: 2px;
            margin-bottom: 8px;
        }

        .color-tab-btn {
            flex: 1;
            height: 27px;
            border: none;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 700;
            color: var(--text-muted);
            background: transparent;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.12s ease;
        }

        .color-tab-btn.active {
            background: var(--card-bg);
            color: var(--primary-color);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        }

        .color-studio-section {
            margin-bottom: 8px;
        }

        .color-studio-label {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.4px;
            color: var(--text-muted);
            margin-bottom: 5px;
        }

        .swatches-grid {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 5px;
        }

        .swatch-dot {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid transparent;
            transition: transform 0.12s ease, box-shadow 0.12s ease;
            box-sizing: border-box;
            outline: none;
        }

        .swatch-dot:hover {
            transform: scale(1.2);
            box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 3px var(--primary-color);
            z-index: 2;
        }

        .swatch-dot.is-selected {
            box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 4px var(--primary-color);
        }

        .color-studio-custom {
            display: flex;
            gap: 6px;
            align-items: center;
        }

        .hex-input-wrap {
            flex: 1;
            display: flex;
            align-items: center;
            background: var(--co-surface-recessed);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            height: 28px;
            padding: 0 6px;
            box-sizing: border-box;
        }

        .hex-prefix {
            color: var(--text-muted);
            font-size: 11px;
            font-weight: 700;
            margin-right: 2px;
        }

        .color-hex-field {
            width: 100%;
            border: none;
            background: transparent;
            outline: none;
            font-size: 11px;
            font-weight: 600;
            color: var(--text-main);
            font-family: monospace;
        }

        .native-color-pick {
            width: 20px;
            height: 20px;
            border: none;
            padding: 0;
            background: transparent;
            cursor: pointer;
            border-radius: 4px;
        }

        .btn-clear-color {
            height: 28px;
            padding: 0 8px;
            border: 1px solid var(--border-color);
            background: transparent;
            border-radius: 6px;
            color: var(--text-muted);
            font-size: 10.5px;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.12s ease;
        }

        .btn-clear-color:hover {
            background: color-mix(in srgb, var(--danger-color) 10%, var(--card-bg));
            color: var(--danger-color);
            border-color: var(--danger-color);
        }

        /* Quick Link Popover */
        .link-quick-popover {
            width: 260px;
            padding: 6px;
        }

        .link-quick-form {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .link-quick-input {
            flex: 1;
            height: 28px;
            border: 1px solid var(--border-color);
            background: var(--co-surface-recessed);
            color: var(--text-main);
            font-size: 11.5px;
            border-radius: 6px;
            padding: 0 8px;
            outline: none;
        }

        .link-quick-input:focus {
            border-color: var(--primary-color);
        }

        .link-quick-save-btn, .link-quick-del-btn {
            width: 28px;
            height: 28px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background 0.12s ease;
        }

        .link-quick-save-btn {
            background: var(--primary-color);
            color: #fff;
        }

        .link-quick-save-btn:hover {
            opacity: 0.9;
        }

        .link-quick-del-btn {
            background: color-mix(in srgb, var(--danger-color) 12%, var(--card-bg));
            color: var(--danger-color);
        }

        /* AI Quick Popover */
        .ai-spark-btn {
            color: var(--ai-color);
            font-weight: 700;
            gap: 3px;
        }

        .ai-spark-btn:hover {
            background: color-mix(in srgb, var(--ai-color) 14%, var(--card-bg));
            color: var(--ai-color);
        }

        .ai-btn-text {
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.2px;
        }

        .ai-quick-popover {
            width: 200px;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .ai-pop-header {
            font-size: 10.5px;
            font-weight: 700;
            color: var(--ai-color);
            padding: 4px 6px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
            margin-bottom: 4px;
        }

        /* More Options Popover */
        .more-quick-popover {
            width: 190px;
            display: flex;
            flex-direction: column;
            gap: 2px;
            left: auto !important;
            right: 0 !important;
            transform: none !important;
            animation: popoverInRight 0.13s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
        }

        .more-row-group {
            padding: 2px 4px;
        }

        .more-row-title {
            font-size: 9.5px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            color: var(--text-muted);
            margin-bottom: 4px;
        }

        .more-row-btns {
            display: flex;
            gap: 4px;
        }

        .bubble-mini-btn {
            flex: 1;
            height: 26px;
            border: 1px solid var(--border-color);
            border-radius: 5px;
            background: transparent;
            color: var(--text-muted);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            gap: 2px;
            transition: all 0.12s ease;
        }

        .bubble-mini-btn .mini-lbl {
            font-size: 9px;
            font-weight: 700;
        }

        .bubble-mini-btn:hover {
            background: color-mix(in srgb, var(--primary-color) 12%, var(--card-bg));
            color: var(--primary-color);
            border-color: var(--primary-color);
        }

        /* Pointer Arrow */
        .floating-bubble-arrow {
            width: 10px;
            height: 10px;
            background: color-mix(in srgb, var(--card-bg) 92%, var(--bg-body));
            backdrop-filter: blur(18px);
            transform: rotate(45deg);
            position: absolute;
            bottom: -5px;
            left: 50%;
            margin-left: -5px;
            border-right: 1px solid color-mix(in srgb, var(--border-color) 75%, transparent);
            border-bottom: 1px solid color-mix(in srgb, var(--border-color) 75%, transparent);
            z-index: -1;
        }

        #floatingMenu.flipped-down .floating-bubble-arrow {
            bottom: auto;
            top: -5px;
            border-right: none;
            border-bottom: none;
            border-left: 1px solid color-mix(in srgb, var(--border-color) 75%, transparent);
            border-top: 1px solid color-mix(in srgb, var(--border-color) 75%, transparent);
        }

        /* Selection Word Count Badge */
        .bubble-stat-badge {
            font-size: 10px;
            font-weight: 700;
            color: var(--text-muted);
            padding: 0 6px;
            border-left: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
            line-height: 1;
        }

        @keyframes floatMenuIn {
            0% { opacity: 0; transform: scale(0.96) translateY(4px); }
            100% { opacity: 1; transform: scale(1) translateY(0); }
        }

        @keyframes popoverInCenter {
            0% { opacity: 0; transform: translateX(-50%) scale(0.96) translateY(3px); }
            100% { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); }
        }

        @keyframes popoverInLeft {
            0% { opacity: 0; transform: scale(0.96) translateY(3px); }
            100% { opacity: 1; transform: scale(1) translateY(0); }
        }

        @keyframes popoverInRight {
            0% { opacity: 0; transform: scale(0.96) translateY(3px); }
            100% { opacity: 1; transform: scale(1) translateY(0); }
        }

        .ul-boxbar-ed {
            background: var(--card-bg);
            border: none;
            border-radius: 12px;
            padding: 5px;
            margin: 0;
            list-style: none;
            width: 250px;
            display: flex;
            flex-direction: column;
            gap: 2px;
            box-sizing: border-box;
            box-shadow: var(--co-shadow-floating);
            position: relative;
        }

        .he-boxbar-ed {
            width: 100%;
            position: relative;
            z-index: 10;
        }

        .he-boxbar-ed:hover,
        .he-boxbar-ed:focus-within,
        .he-boxbar-ed.active-sub {
            z-index: 3000 !important;
        }

        /* Top Format Pill Strip (Floor 1) */
        .ul-top-bb-ed {
            list-style: none;
            padding: 2px;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: color-mix(in srgb, var(--bg-body) 70%, var(--card-bg));
            border: none;
            box-shadow: var(--co-shadow-surface);
            border-radius: 8px;
            gap: 2px;
            position: relative;
        }

        .t-ul-top-bb-ed {
            margin-top: 3px;
        }

        .li-l-bb-ed {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .li-l-bb-ed:hover,
        .li-l-bb-ed:focus-within,
        .li-l-bb-ed.active-sub {
            z-index: 3500 !important;
        }

        .item-t-bb-ed {
            width: 28px;
            height: 28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            border: none;
            background: transparent;
            color: var(--text-muted);
            cursor: pointer;
            transition: background 0.12s ease, color 0.12s ease;
            padding: 0;
            position: relative;
        }

        .item-t-bb-ed svg {
            width: 14px;
            height: 14px;
            pointer-events: none;
        }

        .item-t-bb-ed:hover {
            background: color-mix(in srgb, var(--primary-color) 14%, var(--card-bg));
            color: var(--primary-color);
        }

        .item-t-bb-ed.active {
            background: var(--primary-color) !important;
            color: #ffffff !important;
        }

        .item-t-bb-ed.active svg {
            color: #ffffff !important;
        }

        .li-boxbar-ed {
            position: relative;
            width: 100%;
            z-index: 5;
        }

        .li-boxbar-ed:hover,
        .li-boxbar-ed:focus-within,
        .li-boxbar-ed.active-sub {
            z-index: 2000 !important;
        }

        /* Menu Item Rows */
        .item-bb-ed {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 6px 10px;
            border-radius: 7px;
            color: var(--text-main);
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            border: none;
            background: transparent;
            width: 100%;
            box-sizing: border-box;
            transition: background 0.12s ease, color 0.12s ease;
            user-select: none;
        }

        .item-bb-ed svg {
            width: 14px;
            height: 14px;
            color: var(--text-muted);
        }

        .item-bb-ed .name-i-bb-ed {
            flex: 1;
            text-align: start;
            margin: 0 8px;
            font-size: 12px;
            font-weight: 600;
        }

        .item-bb-ed:hover {
            background: color-mix(in srgb, var(--primary-color) 12%, var(--card-bg));
            color: var(--primary-color);
        }

        .item-bb-ed:hover svg {
            color: var(--primary-color);
        }

        /* Submenus & Popups Layering */
        .ul-boxbar-ed.child {
            position: absolute;
            left: 100%;
            top: 0;
            display: none;
            background: var(--card-bg);
            border: none;
            border-radius: 11px;
            box-shadow: var(--co-shadow-floating);
            z-index: 2500 !important;
            padding: 8px;
            box-sizing: border-box;
            margin-left: 6px;
        }

        /* Invisible Hover Bridge Pseudo-Element */
        .ul-boxbar-ed.child::before {
            content: '';
            position: absolute;
            top: -10px;
            bottom: -10px;
            left: -16px;
            width: 20px;
            z-index: 10;
        }

        /* Bidirectional Submenu Positioning */
        .boxbar-ed.left .ul-boxbar-ed.child,
        .boxbar-ed[data-pop-direction="left"] .ul-boxbar-ed.child {
            left: auto;
            right: 100%;
            margin-left: 0;
            margin-right: 6px;
        }

        .boxbar-ed.left .ul-boxbar-ed.child::before,
        .boxbar-ed[data-pop-direction="left"] .ul-boxbar-ed.child::before {
            left: auto;
            right: -16px;
            width: 20px;
        }

        .boxbar-ed.left .ul-boxbar-ed.child .ul-options-ed,
        .boxbar-ed[data-pop-direction="left"] .ul-boxbar-ed.child .ul-options-ed {
            left: auto;
            right: 100%;
            margin-left: 0;
            margin-right: 6px;
        }

        .li-boxbar-ed:hover > .ul-boxbar-ed.child,
        .item-bb-ed:hover > .ul-boxbar-ed.child,
        .item-t-bb-ed:hover > .ul-boxbar-ed.child,
        .item-t-bb-ed:focus-within > .ul-boxbar-ed.child,
        .li-boxbar-ed:focus-within > .ul-boxbar-ed.child,
        .li-boxbar-ed.active-sub > .ul-boxbar-ed.child,
        .item-t-bb-ed.active-sub > .ul-boxbar-ed.child {
            display: flex !important;
            flex-direction: column;
            animation: floatMenuIn 0.15s ease forwards;
        }

        /* Top Dropdown Child (Floor 2 Shelf Row) */
        .ul-top-bb-ed.child {
            position: absolute;
            top: 34px;
            right: -4px;
            left: auto;
            width: 236px;
            background: var(--card-bg) !important;
            background-color: var(--card-bg) !important;
            border: none;
            border-radius: 8px;
            box-shadow: var(--co-shadow-floating);
            padding: 2px 4px;
            margin: 0;
            list-style: none;
            display: none;
            z-index: 4000 !important;
            gap: 2px;
            box-sizing: border-box;
            align-items: center;
            justify-content: space-between;
            opacity: 1 !important;
        }

        /* Dedicated AI Wand Dropdown Shelf on Floor 1 */
        .item-ai-wand {
            cursor: pointer;
            position: relative;
        }

        .item-ai-wand:hover {
            background: color-mix(in srgb, var(--ai-color) 16%, var(--card-bg)) !important;
        }

        .bb-shelf-ai {
            position: absolute !important;
            top: calc(100% + 6px) !important;
            right: 0 !important;
            left: auto !important;
            min-width: 230px !important;
            width: 230px !important;
            z-index: 5000 !important;
            background: var(--card-bg) !important;
            border: none !important;
            border-radius: 12px !important;
            box-shadow: var(--co-shadow-floating) !important;
            padding: 6px !important;
            display: none;
            gap: 2px;
        }

        .item-ai-wand:hover .bb-shelf-ai,
        .item-ai-wand:focus-within .bb-shelf-ai,
        .item-ai-wand.active-sub .bb-shelf-ai,
        .item-ai-wand.open .bb-shelf-ai {
            display: flex !important;
            flex-direction: column !important;
            animation: floatMenuIn 0.15s ease forwards;
        }

        .badge-ai-pill {
            background: linear-gradient(135deg, var(--primary-color), #a855f7);
            color: #fff;
            font-size: 10px;
            font-weight: 800;
            padding: 1px 6px;
            border-radius: 6px;
        }

        .ul-top-bb-ed.child::before {
            content: '';
            position: absolute;
            top: -12px;
            left: 0;
            right: 0;
            height: 14px;
            z-index: 10;
        }

        .line-keep-ed {
            display: none;
            width: 100%;
            height: 14px;
            position: absolute;
            left: 0;
            right: 0;
            top: 24px;
            z-index: 1400;
        }

        .item-t-bb-ed:hover > .line-keep-ed,
        .item-t-bb-ed.click:hover > .line-keep-ed {
            display: block !important;
        }

        .item-t-bb-ed:hover > .ul-top-bb-ed.child,
        .item-t-bb-ed.click:hover > .ul-top-bb-ed.child,
        .item-t-bb-ed:focus-within > .ul-top-bb-ed.child,
        .item-t-bb-ed.active-sub > .ul-top-bb-ed.child,
        .li-l-bb-ed:hover > .ul-top-bb-ed.child,
        .li-l-bb-ed:focus-within > .ul-top-bb-ed.child,
        .li-l-bb-ed.active-sub > .ul-top-bb-ed.child {
            display: flex !important;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
        }

        /* Secondary nested dropdown (Floor 3 Shelf Row) */
        .ul-top-bb-ed.child .ul-top-bb-ed.child {
            top: 34px;
            right: -4px;
            left: auto;
            width: 236px;
            background: var(--card-bg) !important;
            background-color: var(--card-bg) !important;
            z-index: 5000 !important;
            box-shadow: var(--co-shadow-floating);
            opacity: 1 !important;
        }

        .menu-pill-hint {
            font-size: 9.5px;
            font-weight: 700;
            color: var(--text-muted);
            background: color-mix(in srgb, var(--text-muted) 12%, transparent);
            padding: 1px 5px;
            border-radius: 4px;
            margin-right: 6px;
        }

        .kbd-pill {
            font-size: 9.5px;
            font-weight: 700;
            font-family: monospace;
            color: var(--text-muted);
            background: color-mix(in srgb, var(--border-color) 60%, transparent);
            border: none;
            padding: 1px 5px;
            border-radius: 4px;
            letter-spacing: -0.2px;
        }

        /* Heading Selection Badges */
        .h-badge-tag {
            font-size: 10.5px;
            font-weight: 900;
            padding: 2px 6px;
            border-radius: 4px;
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 20px;
        }

        .h2-tag { background: #10b981; }
        .h3-tag { background: #8b5cf6; }
        .h4-tag { background: #f59e0b; }
        .h5-tag { background: #ec4899; }
        .h6-tag { background: #6b7280; }

        .li-insert-ed {
            padding: 4px 0;
            width: 100%;
        }

        .title-bb-ed {
            font-size: 11px;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.3px;
            margin-bottom: 4px;
            padding: 0 2px;
        }

        .input-ed {
            width: 100%;
            height: 32px;
            background: var(--co-surface-recessed);
            border: none;
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
            color: var(--text-main);
            padding: 0 10px;
            border-radius: 6px;
            font-size: 12px;
            outline: none;
            box-sizing: border-box;
            transition: box-shadow 0.15s ease;
            font-family: inherit;
        }

        .input-ed:focus {
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.06), 0 0 0 2px var(--primary-color);
            background: var(--card-bg);
        }

        .box-image-ed {
            width: 100%;
            height: 100px;
            border: none;
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--co-surface-recessed);
            overflow: hidden;
            margin: 6px 0;
        }

        .img-image-ed {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            border-radius: 6px;
        }

        .btn-insert-ed {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--primary-color);
            color: #ffffff;
            font-weight: 700;
            font-size: 12px;
            height: 32px;
            padding: 0 14px;
            border-radius: 6px;
            cursor: pointer;
            transition: opacity 0.15s ease;
            width: 100%;
            box-sizing: border-box;
            border: none;
        }

        .btn-insert-ed:hover {
            opacity: 0.9;
        }

        .ul-options-ed {
            list-style: none;
            padding: 4px;
            margin: 0;
            background: var(--card-bg);
            border: none;
            border-radius: 8px;
            box-shadow: var(--co-shadow-floating);
            display: none;
            position: absolute;
            left: 100%;
            top: 0;
            margin-left: 6px;
            min-width: 150px;
            z-index: 2005;
        }

        .ul-options-ed::before {
            content: '';
            position: absolute;
            top: -10px;
            bottom: -10px;
            left: -16px;
            width: 20px;
        }

        .ul-options-ed.active {
            display: block;
        }

        .item-o-ed {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 5px 8px;
            border-radius: 5px;
            font-size: 11.5px;
            color: var(--text-muted);
            cursor: pointer;
            transition: background 0.12s ease, color 0.12s ease;
        }

        .item-o-ed:hover, .item-o-ed.select {
            background: color-mix(in srgb, var(--primary-color) 12%, var(--card-bg));
            color: var(--primary-color);
            font-weight: 700;
        }

        /* Color Palette & Emojis */
        .ul-boxbar-ed.child.color {
            bottom: -6px;
            top: auto;
            width: 325px;
            max-height: 390px;
            z-index: 2500 !important;
        }

        .ul-boxbar-ed.child.emoji {
            bottom: -6px;
            top: auto;
            width: 320px;
            max-height: 360px;
            z-index: 2500 !important;
        }

        .boxbar-ed.left .ul-boxbar-ed.child.color,
        .boxbar-ed.left .ul-boxbar-ed.child.emoji {
            left: auto;
            right: 100%;
            margin-left: 0;
            margin-right: 6px;
        }

        .color-i-t-bb-ed {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            cursor: pointer;
            border: none;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
            transition: transform 0.12s ease;
        }

        .color-i-t-bb-ed:hover {
            transform: scale(1.3);
        }

        .scroll-boxbar-ed {
            max-height: 220px;
            overflow-y: auto;
            padding-right: 4px;
        }

        .scroll-boxbar-ed.color {
            max-height: 260px;
        }

        .emoji-input {
            width: 100%;
            height: 30px;
            background: var(--co-surface-recessed);
            border: none;
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
            color: var(--text-main);
            padding: 0 8px;
            border-radius: 6px;
            font-size: 12px;
            outline: none;
            box-sizing: border-box;
            margin-bottom: 6px;
        }

        .emoji-input:focus {
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.06), 0 0 0 2px var(--primary-color);
            background: var(--card-bg);
        }

        .ul-emoji-boxbar-ed {
            display: flex;
            flex-wrap: wrap;
            gap: 3px;
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .li-emoji-ed {
            cursor: pointer;
            font-size: 19px;
            width: 30px;
            height: 30px;
            border-radius: 6px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.1s;
            user-select: none;
        }

        .li-emoji-ed:hover {
            background: color-mix(in srgb, var(--primary-color) 12%, var(--card-bg));
            transform: scale(1.25);
        }

        .title-emoji {
            font-size: 11px;
            font-weight: 700;
            color: var(--text-muted);
            padding: 4px 2px;
        }

        /* Shortcuts Guide Flyout */
        .shortcuts-boxbar {
            padding: 8px;
            z-index: 2000 !important;
        }

        .boxbar-ed.left .shortcuts-boxbar,
        .boxbar-ed[data-pop-direction="left"] .shortcuts-boxbar {
            left: auto;
            right: 100%;
            margin-left: 0;
            margin-right: 6px;
        }

        .shortcut-item-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 4px 6px;
            border-radius: 5px;
            font-size: 11.5px;
            font-weight: 600;
            color: var(--text-main);
            transition: background 0.1s;
        }

        .shortcut-item-row:hover {
            background: color-mix(in srgb, var(--primary-color) 10%, var(--card-bg));
            color: var(--primary-color);
        }

        /* Live Selection Analytics Mini-Pill */
        .sel-stat-strip {
            margin-top: 3px;
            padding: 0 2px;
        }

        .sel-stat-content {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 2px 6px;
            border-radius: 5px;
            background: color-mix(in srgb, var(--bg-body) 60%, var(--card-bg));
            border: 1px dashed var(--border-color);
            font-size: 10.5px;
            font-weight: 700;
            color: var(--text-muted);
        }

        .sel-stat-dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--primary-color);
        }

        /* Shortcuts Modal Dialog */
        .shortcuts-pop {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.65);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: 100000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            box-sizing: border-box;
        }

        .shortcuts-pop.none {
            display: none !important;
        }

        .shortcuts-pop-content {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
            width: 100%;
            max-width: 880px;
            max-height: 85vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            animation: floatMenuIn 0.18s ease forwards;
        }

        .shortcuts-pop-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 20px;
            border-bottom: 1px solid var(--border-color);
            background: color-mix(in srgb, var(--bg-body) 60%, var(--card-bg));
        }

        .shortcuts-pop-header h3 {
            margin: 0;
            font-size: 15px;
            font-weight: 800;
            color: var(--text-main);
        }

        .shortcuts-pop-header .close {
            width: 26px;
            height: 26px;
            border-radius: 6px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border: 1px solid var(--border-color);
            background: transparent;
            color: var(--text-muted);
            font-size: 18px;
            transition: all 0.12s ease;
            line-height: 1;
        }

        .shortcuts-pop-header .close:hover {
            background: var(--danger-light, rgba(239, 68, 68, 0.15));
            color: var(--danger-color, #ef4444);
            border-color: var(--danger-color, #ef4444);
        }

        .container-shortcut {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 14px;
            padding: 18px;
            overflow-y: auto;
        }

        .category-shortcut {
            background: color-mix(in srgb, var(--bg-body) 60%, var(--card-bg));
            border: 1px solid var(--border-color);
            border-radius: 9px;
            padding: 12px;
        }

        .category-shortcut h4 {
            margin: 0 0 8px 0;
            font-size: 12.5px;
            font-weight: 800;
            color: var(--primary-color);
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 5px;
        }

        .category-shortcut ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .category-shortcut li {
            font-size: 11.5px;
            color: var(--text-main);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
        }

        .shortcut-key {
            background: color-mix(in srgb, var(--card-bg) 85%, #000);
            border: 1px solid var(--border-color);
            padding: 1px 5px;
            border-radius: 4px;
            font-family: monospace;
            font-size: 10.5px;
            font-weight: 700;
            color: var(--text-main);
        }

        /* Contextual Inspector Toolbars (Link, Image, Table, Media) */
        .context-bar {
            position: absolute;
            z-index: 6000 !important;
            display: block;
            animation: floatMenuIn 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            user-select: none;
            pointer-events: auto;
            isolation: isolate;
        }

        .context-bar.none {
            display: none !important;
        }

        .context-bar-inner {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            background: var(--card-bg, #ffffff) !important;
            background-color: var(--card-bg, #ffffff) !important;
            border: 1px solid var(--border-color, #e5e7eb) !important;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2) !important;
            max-width: 95vw;
            box-sizing: border-box;
            flex-wrap: nowrap !important;
            white-space: nowrap !important;
            opacity: 1 !important;
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }

        html[data-theme="dark"] .context-bar-inner,
        body.dark-mode .context-bar-inner,
        .dark-theme .context-bar-inner {
            background: #1a1d25 !important;
            background-color: #1a1d25 !important;
            border-color: #323644 !important;
            box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7), 0 2px 10px rgba(0, 0, 0, 0.4) !important;
        }

        html[data-theme="sunset"] .context-bar-inner,
        body.sunset-mode .context-bar-inner {
            background: #2d2725 !important;
            background-color: #2d2725 !important;
            border-color: #483e3c !important;
        }

        html[data-theme="light"] .context-bar-inner,
        body.light-mode .context-bar-inner {
            background: #ffffff !important;
            background-color: #ffffff !important;
            border-color: #e5e7eb !important;
        }

        .context-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-color);
            width: 20px;
            height: 20px;
        }

        .context-icon svg {
            width: 15px;
            height: 15px;
        }

        .context-label {
            font-size: 11.5px;
            font-weight: 700;
            color: var(--text-main);
            margin-right: 2px;
        }

        .context-input {
            background: color-mix(in srgb, var(--bg-body, #f3f4f6) 70%, var(--card-bg, #ffffff)) !important;
            background-color: color-mix(in srgb, var(--bg-body, #f3f4f6) 70%, var(--card-bg, #ffffff)) !important;
            border: 1px solid var(--border-color, #e5e7eb) !important;
            border-radius: 6px;
            padding: 4px 8px;
            font-size: 12px;
            color: var(--text-main) !important;
            outline: none;
            min-width: 140px;
            transition: border-color 0.15s ease;
            opacity: 1 !important;
        }

        .context-input.short {
            min-width: 90px;
            max-width: 120px;
        }

        .context-input:focus {
            border-color: var(--primary-color) !important;
        }

        /* Link Context Bar Custom Dropdown */
        .ctx-custom-select {
            position: relative;
            display: inline-flex;
            user-select: none;
        }

        .ctx-custom-select .custom-select-trigger {
            height: 28px;
            padding: 0 10px;
            background: color-mix(in srgb, var(--bg-body, #f3f4f6) 75%, var(--card-bg, #ffffff));
            border: 1px solid var(--border-color, #e5e7eb);
            border-radius: 7px;
            color: var(--text-main, #1e293b);
            font-size: 11.5px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            outline: none;
            transition: all 0.15s ease-in-out;
            white-space: nowrap;
        }

        .ctx-custom-select .custom-select-trigger:hover {
            border-color: var(--primary-color);
            background: color-mix(in srgb, var(--primary-color) 8%, var(--card-bg, #ffffff));
        }

        .ctx-custom-select.open .custom-select-trigger {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 18%, transparent);
        }

        .ctx-custom-select .custom-select-dropdown {
            position: absolute;
            top: calc(100% + 6px);
            left: 0;
            min-width: 145px;
            background: var(--card-bg, #ffffff);
            border: 1px solid var(--border-color, #e5e7eb);
            border-radius: 9px;
            box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.22), 0 4px 10px -2px rgba(0, 0, 0, 0.1);
            padding: 4px;
            display: none;
            flex-direction: column;
            gap: 2px;
            z-index: 10050;
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            animation: popoverInCenter 0.12s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        [dir="rtl"] .ctx-custom-select .custom-select-dropdown,
        html[dir="rtl"] .ctx-custom-select .custom-select-dropdown {
            left: auto;
            right: 0;
        }

        .ctx-custom-select.open .custom-select-dropdown {
            display: flex;
        }

        .ctx-custom-select.dropdown-flip-up .custom-select-dropdown {
            top: auto !important;
            bottom: calc(100% + 6px) !important;
        }

        .ctx-custom-select .custom-option {
            padding: 6px 10px;
            border-radius: 6px;
            font-size: 11.5px;
            font-weight: 500;
            color: var(--text-main, #1e293b);
            cursor: pointer;
            transition: all 0.1s ease;
            white-space: nowrap;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .ctx-custom-select .custom-option:hover {
            background: color-mix(in srgb, var(--primary-color) 12%, var(--card-bg, #ffffff));
            color: var(--primary-color);
        }

        .ctx-custom-select .custom-option.selected {
            background: color-mix(in srgb, var(--primary-color) 16%, var(--card-bg, #ffffff));
            color: var(--primary-color);
            font-weight: 700;
        }

        /* Dark Theme Support */
        html[data-theme="dark"] .ctx-custom-select .custom-select-trigger,
        body.dark-mode .ctx-custom-select .custom-select-trigger,
        .dark-theme .ctx-custom-select .custom-select-trigger {
            background: #1e222d;
            border-color: #333a4d;
            color: #f1f5f9;
        }

        html[data-theme="dark"] .ctx-custom-select .custom-select-dropdown,
        body.dark-mode .ctx-custom-select .custom-select-dropdown,
        .dark-theme .ctx-custom-select .custom-select-dropdown {
            background: #1a1d25;
            border-color: #323644;
            box-shadow: 0 14px 35px rgba(0, 0, 0, 0.6);
        }

        html[data-theme="dark"] .ctx-custom-select .custom-option,
        body.dark-mode .ctx-custom-select .custom-option,
        .dark-theme .ctx-custom-select .custom-option {
            color: #f1f5f9;
        }

        /* Sunset Theme Support */
        html[data-theme="sunset"] .ctx-custom-select .custom-select-trigger,
        body.sunset-mode .ctx-custom-select .custom-select-trigger {
            background: #2b2221;
            border-color: #4a3c39;
            color: #fdf8f6;
        }

        html[data-theme="sunset"] .ctx-custom-select .custom-select-dropdown,
        body.sunset-mode .ctx-custom-select .custom-select-dropdown {
            background: #2d2725;
            border-color: #483e3c;
        }

        html[data-theme="sunset"] .ctx-custom-select .custom-option,
        body.sunset-mode .ctx-custom-select .custom-option {
            color: #fdf8f6;
        }

        .context-btn-group {
            display: inline-flex !important;
            align-items: center !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            gap: 2px !important;
            background: color-mix(in srgb, var(--bg-body, #f3f4f6) 60%, var(--card-bg, #ffffff)) !important;
            padding: 2px !important;
            border-radius: 6px !important;
            border: 1px solid var(--border-color, #e5e7eb) !important;
            flex-shrink: 0 !important;
        }

        .context-btn {
            min-width: 26px;
            width: auto !important;
            height: 28px !important;
            border-radius: 5px;
            border: none;
            background: transparent;
            color: var(--text-muted);
            display: inline-flex !important;
            flex-direction: row !important;
            align-items: center !important;
            justify-content: center !important;
            cursor: pointer;
            padding: 0 8px !important;
            font-size: 11.5px !important;
            font-weight: 600 !important;
            transition: all 0.12s ease;
            gap: 4px !important;
            white-space: nowrap !important;
            box-sizing: border-box !important;
            flex-shrink: 0 !important;
        }

        .context-btn span,
        .context-btn * {
            white-space: nowrap !important;
            word-break: keep-all !important;
        }

        /* Specific anti-squish styling for Table Inspector bar */
        #tableContextBar .context-bar-inner {
            width: max-content !important;
            max-width: 96vw !important;
            overflow-x: auto !important;
            gap: 6px !important;
            padding: 5px 10px !important;
            white-space: nowrap !important;
        }

        #tableContextBar .context-btn-group {
            padding: 3px !important;
            gap: 3px !important;
            flex-shrink: 0 !important;
        }

        #tableContextBar .context-btn {
            height: 28px !important;
            padding: 0 8px !important;
            font-size: 11.5px !important;
            font-weight: 600 !important;
            flex-shrink: 0 !important;
        }

        #tableContextBar .context-btn span,
        #tableContextBar .context-btn * {
            white-space: nowrap !important;
            word-break: keep-all !important;
        }

        .context-btn.text-btn {
            width: auto;
            padding: 2px 8px;
            font-size: 11px;
            font-weight: 700;
        }

        .context-btn svg {
            width: 13px;
            height: 13px;
            pointer-events: none;
            flex-shrink: 0;
        }

        .context-btn:hover, .context-btn.active {
            background: color-mix(in srgb, var(--primary-color) 15%, var(--card-bg, #ffffff));
            color: var(--primary-color);
        }

        .context-btn.danger {
            color: var(--danger-color, #ef4444);
        }

        .context-btn.danger:hover {
            background: var(--danger-color, #ef4444);
            color: #fff;
        }

        .context-btn.danger-hover:hover {
            background: var(--danger-light, rgba(239, 68, 68, 0.15));
            color: var(--danger-color, #ef4444);
        }

        .context-btn.close {
            font-size: 16px;
            line-height: 1;
            font-weight: 700;
            width: 22px !important;
            min-width: 22px !important;
            height: 22px;
            padding: 0 !important;
            margin-left: 2px;
        }

        .context-divider {
            width: 1px;
            height: 18px;
            background: var(--border-color);
            margin: 0 2px;
        }

        /* ── Utility ── */
        .hidden { display: none !important; }

        /* ── Search Highlight ── */
        mark.search-highlight,
        span.search-highlight,
        .search-highlight {
            background: rgba(250, 204, 21, 0.22) !important;
            color: inherit !important;
            border-radius: 3px !important;
            padding: 1px 3px !important;
            border-bottom: 2px solid rgba(234, 179, 8, 0.75) !important;
            box-shadow: inset 0 0 0 1px rgba(234, 179, 8, 0.2) !important;
            display: inline !important;
            transition: all 0.15s ease;
        }
        mark.search-highlight.active-match,
        mark.search-highlight.current,
        span.search-highlight.active-match,
        span.search-highlight.current,
        .search-highlight.active-match,
        .search-highlight.current {
            background: rgba(249, 115, 22, 0.35) !important;
            color: inherit !important;
            border-radius: 3px !important;
            padding: 1px 3px !important;
            border-bottom: 2px solid #f97316 !important;
            box-shadow: 0 0 0 1.5px rgba(249, 115, 22, 0.6), 0 1px 4px rgba(249, 115, 22, 0.2) !important;
            font-weight: 700 !important;
            display: inline !important;
        }

        [data-theme="dark"] mark.search-highlight,
        [data-theme="sunmoon"] mark.search-highlight,
        .dark-theme mark.search-highlight,
        [data-theme="dark"] span.search-highlight,
        .dark-theme span.search-highlight,
        [data-theme="dark"] .search-highlight,
        .dark-theme .search-highlight {
            background: rgba(250, 204, 21, 0.25) !important;
            color: inherit !important;
            border-bottom: 2px solid rgba(250, 204, 21, 0.85) !important;
            box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.25) !important;
        }

        [data-theme="dark"] mark.search-highlight.active-match,
        [data-theme="dark"] mark.search-highlight.current,
        .dark-theme mark.search-highlight.active-match,
        .dark-theme mark.search-highlight.current,
        [data-theme="dark"] .search-highlight.active-match,
        [data-theme="dark"] .search-highlight.current {
            background: rgba(249, 115, 22, 0.45) !important;
            color: #ffffff !important;
            border-bottom: 2px solid #fb923c !important;
            box-shadow: 0 0 0 1.5px rgba(249, 115, 22, 0.75), 0 0 8px rgba(249, 115, 22, 0.3) !important;
        }
        mark.gr-kw-highlight,
        mark.kw-highlight,
        mark.kw-hl {
            background: color-mix(in srgb, var(--primary-color, #4f46e5) 22%, transparent) !important;
            color: var(--primary-color, #4f46e5) !important;
            border-radius: 3px !important;
            padding: 1px 3px !important;
            cursor: pointer;
            box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-color, #4f46e5) 30%, transparent) !important;
            display: inline !important;
        }
        mark.gr-kw-highlight:hover,
        mark.kw-highlight:hover,
        mark.kw-hl:hover {
            background: color-mix(in srgb, var(--primary-color, #4f46e5) 35%, transparent) !important;
        }
        mark.gr-kw-highlight.kw-active,
        mark.kw-highlight.kw-active,
        mark.kw-hl.kw-active,
        mark.active-focus {
            background: var(--primary-color, #4f46e5) !important;
            color: #ffffff !important;
            font-weight: 700 !important;
            border-radius: 3px !important;
            padding: 1px 4px !important;
            box-shadow: 0 0 12px var(--primary-glow, rgba(79, 70, 229, 0.5)) !important;
            display: inline !important;
        }

        /* SEO Audit Goal Pills & Results handled by docked SEO drawer */

        /* ── AI Wand Loading State on Editor Blocks ── */
        #editor [data-ai-loading="true"] { opacity: 0.5; transition: opacity 0.2s; pointer-events: none; }
        #editor [data-ai-insert="true"] { animation: fadeSlideIn 0.35s ease; }
        @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

        /* ── Onboarding / Empty State Overlay (Full Modal Dialog) ── */
        .co-empty-workspace-overlay {
            position: fixed !important;
            inset: 0 !important;
            background: color-mix(in srgb, var(--card-bg) 95%, transparent) !important;
            backdrop-filter: blur(20px) !important;
            -webkit-backdrop-filter: blur(20px) !important;
            z-index: 99999 !important;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            overflow-y: auto;
            animation: fadeInModal 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        .co-onboarding-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 24px;
            padding: 40px 32px;
            max-width: 860px;
            width: 100%;
            text-align: center;
            position: relative;
            box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5);
            overflow: hidden;
            animation: slideUpModal 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        @keyframes fadeInModal {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes slideUpModal {
            from { opacity: 0; transform: translateY(20px) scale(0.98); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        .co-onboarding-close {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 36px;
            height: 36px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            background: var(--bg-body);
            border: 1px solid var(--border-color);
            color: var(--text-muted);
            transition: all 0.2s ease;
            z-index: 10;
        }
        html[dir="rtl"] .co-onboarding-close, [dir="rtl"] .co-onboarding-close {
            right: auto;
            left: 20px;
        }
        .co-onboarding-close:hover {
            background: color-mix(in srgb, var(--danger, #ef4444) 15%, var(--card-bg));
            color: var(--danger, #ef4444);
            border-color: color-mix(in srgb, var(--danger, #ef4444) 30%, transparent);
            transform: scale(1.05);
        }

        .onboarding-art-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }
        .art-source-badge {
            font-size: 9.5px;
            font-weight: 800;
            padding: 1px 6px;
            border-radius: 4px;
            text-transform: uppercase;
        }
        .art-source-badge.db {
            background: color-mix(in srgb, var(--primary-color) 15%, transparent);
            color: var(--primary-color);
            border: 1px solid color-mix(in srgb, var(--primary-color) 30%, transparent);
        }
        .art-source-badge.local {
            background: color-mix(in srgb, var(--blue, #3b82f6) 15%, transparent);
            color: var(--blue, #3b82f6);
            border: 1px solid color-mix(in srgb, var(--blue, #3b82f6) 30%, transparent);
        }

        .co-onboarding-ambient {
            position: absolute;
            top: -50px;
            left: 50%;
            transform: translateX(-50%);
            width: 300px;
            height: 150px;
            background: radial-gradient(circle, color-mix(in srgb, var(--primary-color) 35%, transparent) 0%, transparent 70%);
            pointer-events: none;
            filter: blur(40px);
        }

        .co-onboarding-icon {
            width: 68px;
            height: 68px;
            margin: 0 auto 20px;
            border-radius: 20px;
            background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 20%, transparent), color-mix(in srgb, var(--primary-color) 5%, transparent));
            border: 1px solid color-mix(in srgb, var(--primary-color) 40%, transparent);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-color);
            box-shadow: 0 10px 25px color-mix(in srgb, var(--primary-color) 25%, transparent);
        }
        .co-onboarding-icon i, .co-onboarding-icon svg {
            width: 32px;
            height: 32px;
        }

        .co-onboarding-title {
            font-size: 22px;
            font-weight: 800;
            color: var(--text-main);
            margin: 0 0 10px;
        }

        .co-onboarding-subtitle {
            font-size: 14px;
            color: var(--text-muted);
            margin: 0 auto 32px;
            max-width: 600px;
            line-height: 1.6;
        }

        .co-steps-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            margin-bottom: 32px;
            text-align: right;
        }
        @media (max-width: 768px) {
            .co-steps-grid {
                grid-template-columns: 1fr;
            }
        }

        .co-step-card {
            background: var(--bg-body);
            border: 1px solid var(--border-color);
            border-radius: 18px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            position: relative;
            transition: all 0.25s ease;
        }
        .co-step-card:hover {
            border-color: var(--primary-color);
            transform: translateY(-2px);
            box-shadow: var(--shadow-sm);
        }
        .co-step-card.highlighted {
            border-color: color-mix(in srgb, var(--primary-color) 50%, var(--border-color));
            background: linear-gradient(180deg, color-mix(in srgb, var(--primary-color) 8%, var(--bg-body)), var(--bg-body));
        }

        .step-badge {
            align-self: flex-start;
            font-size: 10.5px;
            font-weight: 800;
            padding: 2px 8px;
            border-radius: 6px;
            background: var(--card-bg);
            color: var(--text-muted);
            border: 1px solid var(--border-color);
            margin-bottom: 12px;
        }
        .step-badge.highlight {
            background: var(--primary-color);
            color: #fff;
            border-color: var(--primary-color);
        }

        .step-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            margin-bottom: 12px;
        }
        .step-icon.highlight {
            color: var(--primary-color);
            background: color-mix(in srgb, var(--primary-color) 15%, transparent);
            border-color: color-mix(in srgb, var(--primary-color) 30%, transparent);
        }
        .step-icon i, .step-icon svg {
            width: 18px;
            height: 18px;
        }

        .co-step-card h4 {
            font-size: 14px;
            font-weight: 800;
            color: var(--text-main);
            margin: 0 0 6px;
        }

        .co-step-card p {
            font-size: 12px;
            color: var(--text-muted);
            margin: 0 0 16px;
            line-height: 1.5;
            flex: 1;
        }

        .btn-step-link {
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            font-size: 12px;
            font-weight: 700;
            color: var(--text-main);
            text-decoration: none;
            padding: 8px 12px;
            border-radius: 10px;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            transition: all 0.2s ease;
        }
        .btn-step-link:hover {
            color: var(--primary-color);
            border-color: var(--primary-color);
        }
        .btn-step-link.highlight {
            background: var(--primary-color);
            color: #fff;
            border-color: var(--primary-color);
            box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-color) 35%, transparent);
        }
        .btn-step-link.highlight:hover {
            filter: brightness(1.1);
            color: #fff;
        }

        .step-status {
            font-size: 11.5px;
            font-weight: 700;
            color: #10b981;
            padding: 6px 10px;
            border-radius: 8px;
            background: color-mix(in srgb, #10b981 12%, transparent);
            border: 1px solid color-mix(in srgb, #10b981 25%, transparent);
            text-align: center;
        }

        /* Onboarding Recent Articles Section */
        .onboarding-recent-section {
            margin-bottom: 24px;
            text-align: right;
        }
        .onboarding-section-head {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
        }
        .onboarding-section-head .head-icon {
            display: inline-flex;
            align-items: center;
        }
        .onboarding-section-head .head-title {
            font-size: 14px;
            font-weight: 800;
            color: var(--text-main);
            margin: 0;
        }
        .onboarding-section-head .head-badge {
            font-size: 10px;
            font-weight: 800;
            padding: 2px 7px;
            border-radius: 6px;
            background: color-mix(in srgb, var(--primary-color) 15%, transparent);
            color: var(--primary-color);
            border: 1px solid color-mix(in srgb, var(--primary-color) 30%, transparent);
            text-transform: uppercase;
        }
        .onboarding-recent-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
            gap: 12px;
            max-height: 240px;
            overflow-y: auto;
            padding: 2px 2px 6px;
        }
        .onboarding-art-card {
            background: var(--bg-body);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 12px 14px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            text-align: right;
        }
        .onboarding-art-card:hover {
            border-color: var(--primary-color);
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
            background: color-mix(in srgb, var(--primary-color) 4%, var(--card-bg));
        }
        .onboarding-art-title {
            font-size: 13px;
            font-weight: 700;
            color: var(--text-main);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .onboarding-art-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 11px;
            color: var(--text-muted);
        }
        .onboarding-art-kw {
            background: color-mix(in srgb, var(--primary-color) 10%, transparent);
            color: var(--primary-color);
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 700;
            font-size: 10.5px;
            max-width: 130px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .onboarding-divider-row {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 20px 0 24px;
        }
        .onboarding-divider-row .divider-line {
            flex: 1;
            height: 1px;
            background: var(--border-color);
        }
        .onboarding-divider-row .divider-text {
            font-size: 10.5px;
            font-weight: 800;
            letter-spacing: 0.5px;
            color: var(--text-muted);
            white-space: nowrap;
        }

        .co-onboarding-actions {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
        }

        .btn-start-blank {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 11px 20px;
            border-radius: 12px;
            background: var(--bg-body);
            color: var(--text-main);
            border: 1px solid var(--border-color);
            font-size: 13.5px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .btn-start-blank:hover {
            border-color: var(--primary-color);
            color: var(--primary-color);
            background: color-mix(in srgb, var(--primary-color) 8%, var(--card-bg));
            transform: translateY(-1px);
        }

        .btn-start-ai {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 11px 20px;
            border-radius: 12px;
            background: color-mix(in srgb, var(--ai-color, #8b5cf6) 15%, var(--card-bg));
            color: var(--ai-color, #8b5cf6);
            border: 1px solid color-mix(in srgb, var(--ai-color, #8b5cf6) 35%, transparent);
            font-size: 13.5px;
            font-weight: 800;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 0 14px color-mix(in srgb, var(--ai-color, #8b5cf6) 20%, transparent);
        }
        .btn-start-ai:hover {
            background: color-mix(in srgb, var(--ai-color, #8b5cf6) 25%, var(--card-bg));
            transform: translateY(-1px);
            box-shadow: 0 0 20px color-mix(in srgb, var(--ai-color, #8b5cf6) 35%, transparent);
        }

        .btn-start-workspace {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 11px 22px;
            border-radius: 12px;
            background: linear-gradient(135deg, var(--primary-color), #f97316);
            color: #ffffff;
            font-size: 13.5px;
            font-weight: 800;
            text-decoration: none;
            box-shadow: 0 8px 24px color-mix(in srgb, var(--primary-color) 35%, transparent);
            transition: all 0.25s ease;
        }
        .btn-start-workspace:hover {
            transform: translateY(-1px);
            box-shadow: 0 12px 30px color-mix(in srgb, var(--primary-color) 50%, transparent);
            color: #ffffff;
        }

        /* ==========================================================================
           2026 GUINRANK COMPREHENSIVE UTILITIES & SPACING ENGINE (ZERO-DUPLICATE)
           ========================================================================== */
        .d-none { display: none !important; }
        .d-block { display: block !important; }
        .d-inline-block { display: inline-block !important; }
        .d-flex { display: flex !important; }
        .flex-1 { flex: 1 1 0% !important; }
        .flex-wrap { flex-wrap: wrap !important; }
        .justify-between { justify-content: space-between !important; }
        .justify-center { justify-content: center !important; }
        .align-center { align-items: center !important; }
        .text-center { text-align: center !important; }
        .w-100 { width: 100% !important; }
        .v-hidden { visibility: hidden !important; }
        .v-mid { vertical-align: middle !important; }
        .op-75 { opacity: 0.75 !important; }
        .flip-x { transform: scaleX(-1) !important; }
        .cursor-default { cursor: default !important; }
        .cursor-pointer { cursor: pointer !important; }
        .rel { position: relative !important; }
        .full-size { width: 100% !important; height: 100% !important; }
        .ltr { direction: ltr !important; }
        .rtl { direction: rtl !important; }

        .border-rounded { border-radius: 10px !important; border: 1px solid var(--border-color) !important; }
        .scrollbar { scrollbar-width: thin; scrollbar-color: var(--border-color) transparent; }

        /* Spacing Engine */
        .mt-1 { margin-top: 4px !important; }
        .mt-2 { margin-top: 8px !important; }
        .mt-3 { margin-top: 12px !important; }
        .mt-4 { margin-top: 16px !important; }
        .mb-1 { margin-bottom: 4px !important; }
        .mb-2 { margin-bottom: 8px !important; }
        .mb-3 { margin-bottom: 12px !important; }
        .mb-4 { margin-bottom: 16px !important; }
        .ml-1 { margin-inline-start: 4px !important; }
        .ml-2 { margin-inline-start: 8px !important; }
        .mr-1 { margin-inline-end: 4px !important; }
        .mr-2 { margin-inline-end: 8px !important; }
        .p-1 { padding: 4px !important; }
        .p-2 { padding: 8px !important; }
        .p-3 { padding: 12px !important; }
        .p-4 { padding: 16px !important; }
        .mr-4 { margin-right: 4px !important; }
        .ml-3 { margin-left: 3px !important; }
        .mt-6 { margin-top: 6px !important; }
        .mb-6 { margin-bottom: 6px !important; }
        .mb-20 { margin-bottom: 20px !important; }
        .pt-2 { padding-top: 2px !important; }

        /* Font Sizes */
        .font-10 { font-size: 10px !important; }
        .font-11 { font-size: 11px !important; }
        .font-12 { font-size: 12px !important; }
        .font-13 { font-size: 13px !important; }
        .font-14 { font-size: 14px !important; }

        /* GuinRank Semantic Colors */
        .c-primary { color: var(--primary-color) !important; }
        .c-ai { color: var(--ai-color) !important; }
        .c-purple { color: var(--purple) !important; }
        .c-orange { color: var(--primary-color) !important; }
        .c-green { color: var(--success) !important; }
        .c-danger,
        .c-red { color: var(--danger) !important; }
        .c-blue { color: var(--blue) !important; }
        .c-muted { color: var(--text-muted) !important; }
        .c-success { color: var(--success) !important; }
        .c-warning { color: var(--warning) !important; }
        .c-accent { color: var(--primary-color) !important; }

        /* Icon Engine */
        .ico-10 { width: 10px !important; height: 10px !important; }
        .ico-11 { width: 11px !important; height: 11px !important; }
        .ico-12 { width: 12px !important; height: 12px !important; }
        .ico-13 { width: 13px !important; height: 13px !important; }
        .ico-14 { width: 14px !important; height: 14px !important; }
        .ico-15 { width: 15px !important; height: 15px !important; }
        .ico-16 { width: 16px !important; height: 16px !important; }
        .ico-18 { width: 18px !important; height: 18px !important; }
        .ico-20 { width: 20px !important; height: 20px !important; }
        .ico-22 { width: 22px !important; height: 22px !important; }
        .ico-24 { width: 24px !important; height: 24px !important; }
        .ico-28 { width: 28px !important; height: 28px !important; }
        .ico-36 { width: 36px !important; height: 36px !important; }
        .ico-60 { width: 60px !important; height: 60px !important; }
        .ico-down-muted { color: var(--text-muted); width: 14px; height: 14px; }

        /* Button Utilities */
        .btn-primary {
            background: var(--primary-color);
            color: #ffffff !important;
            border: none;
            border-radius: 8px;
            padding: 6px 14px;
            font-size: 12.5px;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s ease;
            box-shadow: 0 2px 8px var(--primary-shadow);
        }
        .btn-primary:hover {
            background: var(--primary-hover);
            transform: translateY(-1px);
        }
        .btn-outline {
            background: transparent;
            border: 1px solid var(--border-color);
            color: var(--text-main);
            border-radius: 8px;
            padding: 6px 12px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s;
        }
        .btn-outline:hover {
            background: var(--primary-light);
            color: var(--primary-color);
            border-color: var(--primary-border);
        }
        .btn-sm {
            padding: 4px 10px !important;
            font-size: 11.5px !important;
        }

        /* Missing Component Helpers */
        .bp-sections-list {
            flex: 1 1 auto;
            overflow-y: auto;
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            min-height: 0;
        }
        .bp-footer-bar {
            padding: 12px 20px;
            background: color-mix(in srgb, var(--bg-body) 60%, var(--card-bg));
            border-top: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-shrink: 0;
        }
        .floating-ai-custom-cmd {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            background: var(--bg-body);
            border-radius: 8px;
            border: 1px solid var(--border-color);
            margin-top: 6px;
        }
        .floating-ai-custom-input {
            flex: 1;
            border: none;
            outline: none;
            background: transparent;
            font-size: 12px;
            color: var(--text-main);
            font-family: inherit;
        }
        .floating-ai-custom-send {
            background: var(--ai-color);
            color: #fff;
            border: none;
            border-radius: 6px;
            padding: 4px 8px;
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        .floating-ai-custom-send:hover {
            filter: brightness(1.1);
            transform: translateY(-1px);
        }
        .serp-fetch-card.is-selection-mode {
            cursor: default;
            transition: all 0.25s ease;
        }
        .serp-loading-card.is-paced-loading {
            animation: pulseSlow 3s ease-in-out infinite;
        }
        .radar-pulse-ring.ring-1 { animation-delay: 0s; }
        .radar-pulse-ring.ring-3 { animation-delay: 1.2s; }
        .audit-meta-col {
            display: flex;
            flex-direction: column;
            gap: 8px;
            min-width: 0;
        }
        .audit-insights-col {
            display: flex;
            flex-direction: column;
            gap: 8px;
            min-width: 0;
        }
        .integ-modal-view {
            display: flex;
            flex-direction: column;
            gap: 16px;
            animation: modalFadeIn 0.25s ease-out;
            width: 100%;
        }
        .btn-snap-action.preview-btn {
            background: color-mix(in srgb, var(--primary-color) 10%, var(--card-bg));
            color: var(--primary-color);
        }
        .btn-snap-action.preview-btn:hover {
            background: var(--primary-color);
            color: #ffffff;
        }

        .proj-dropdown-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; padding-bottom: 6px; border-bottom: none; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--text-muted) 12%, transparent); }
        .proj-dropdown-folder-title { font-weight: 700; font-size: 13px; color: var(--text-main); }
        .proj-workspace-link {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 11.5px;
            font-weight: 700;
            padding: 3px 9px;
            height: 26px;
            border-radius: 7px;
            background: color-mix(in srgb, var(--primary-color) 10%, var(--card-bg));
            color: var(--primary-color);
            border: 1px solid color-mix(in srgb, var(--primary-color) 22%, transparent);
            text-decoration: none;
            cursor: pointer;
            transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
            user-select: none;
            white-space: nowrap;
        }
        .proj-workspace-link:hover {
            background: color-mix(in srgb, var(--primary-color) 20%, var(--card-bg));
            border-color: var(--primary-color);
            transform: translateY(-0.5px);
            box-shadow: 0 2px 8px color-mix(in srgb, var(--primary-color) 25%, transparent);
            color: var(--primary-color);
        }
        .proj-workspace-link svg, .proj-workspace-link i {
            width: 13px;
            height: 13px;
        }
        .proj-search-box { padding: 2px 0 6px 0; }
        .proj-search-box input, #proj-article-search { width: 100%; font-size: 12px; padding: 6px 10px; border-radius: 8px; border: none; background: var(--co-surface-recessed); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06); color: var(--text-main); }
        .proj-articles-list { max-height: 220px; overflow-y: auto; }
        .proj-item-loading { padding: 12px; text-align: center; color: var(--text-muted); font-size: 13px; }
        .proj-dropdown-footer { margin-top: 8px; padding-top: 8px; border-top: none; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-muted) 12%, transparent); display: flex; gap: 8px; }
        .btn-create-proj-item {
            flex: 1;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 7px;
            height: 38px;
            padding: 0 14px;
            font-family: inherit;
            font-size: 12.5px;
            font-weight: 700;
            border-radius: 9px;
            border: none;
            box-shadow: var(--co-shadow-surface);
            background: color-mix(in srgb, var(--primary-color) 16%, var(--card-bg));
            color: var(--primary-color);
            text-decoration: none;
            cursor: pointer;
            box-sizing: border-box;
            outline: none;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            user-select: none;
        }
        .btn-create-proj-item:hover {
            background: var(--primary-color) !important;
            color: #ffffff !important;
            transform: translateY(-1px);
            box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-color) 40%, transparent);
        }
        .btn-create-proj-item:active { transform: translateY(0); }
        .btn-create-proj-item span, .btn-create-proj-item i { display: inline-flex; align-items: center; }

        /* Modern Workspace Empty State & Action Buttons */
        .empty-folder {
            text-align: center;
            padding: 56px 24px;
            color: var(--text-muted);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .empty-folder-illustration {
            width: 76px;
            height: 76px;
            border-radius: 22px;
            background: color-mix(in srgb, var(--primary-color) 9%, var(--card-bg));
            border: 1.5px solid color-mix(in srgb, var(--primary-color) 20%, transparent);
            box-shadow: 0 10px 28px -6px color-mix(in srgb, var(--primary-color) 16%, transparent),
                        inset 0 1px 0 rgba(255, 255, 255, 0.25);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 18px;
            position: relative;
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .empty-folder:hover .empty-folder-illustration {
            transform: translateY(-2px) scale(1.04);
        }

        .empty-folder-illustration svg,
        .empty-folder-illustration i {
            width: 34px !important;
            height: 34px !important;
            color: var(--primary-color) !important;
            stroke-width: 1.8px !important;
            display: block;
            margin: 0 !important;
        }

        .empty-folder h3 {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-main);
            margin: 0 0 6px 0;
            letter-spacing: -0.2px;
        }

        .empty-folder-desc {
            font-size: 13.5px;
            color: var(--text-muted);
            margin: 0 auto;
            max-width: 440px;
            line-height: 1.55;
        }

        .empty-folder-actions {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-top: 22px;
            flex-wrap: wrap;
        }

        .btn-empty-action {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            height: 40px;
            padding: 0 20px;
            font-size: 13px;
            font-weight: 700;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            text-decoration: none;
            border: 1.5px solid color-mix(in srgb, var(--border-color) 85%, var(--primary-color) 15%);
            background: color-mix(in srgb, var(--card-bg) 95%, var(--text-main) 2%);
            color: var(--text-main);
            font-family: inherit;
            user-select: none;
            white-space: nowrap;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
            position: relative;
            outline: none;
        }

        .btn-empty-action .btn-empty-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .btn-empty-action svg,
        .btn-empty-action i {
            width: 15px !important;
            height: 15px !important;
            display: block !important;
            margin: 0 !important;
            stroke-width: 2.2px !important;
            flex-shrink: 0;
        }

        .btn-empty-action .btn-empty-text {
            display: inline-block;
            line-height: 1;
        }

        .btn-empty-action:hover {
            background: color-mix(in srgb, var(--primary-color) 9%, var(--card-bg));
            border-color: color-mix(in srgb, var(--primary-color) 60%, transparent);
            color: var(--primary-color) !important;
            transform: translateY(-1.5px);
            box-shadow: 0 5px 15px color-mix(in srgb, var(--primary-color) 15%, transparent);
        }

        .btn-empty-action:hover .btn-empty-icon svg,
        .btn-empty-action:hover .btn-empty-icon i,
        .btn-empty-action:hover > svg,
        .btn-empty-action:hover > i {
            transform: scale(1.12);
            color: var(--primary-color);
        }

        .btn-empty-action:active {
            transform: translateY(0) scale(0.98);
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
        }

        .btn-empty-action.primary {
            background: linear-gradient(135deg, var(--primary-color) 0%, color-mix(in srgb, var(--primary-color) 85%, #000) 100%);
            color: #ffffff !important;
            border: 1px solid color-mix(in srgb, #ffffff 22%, transparent);
            box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-color) 35%, transparent),
                        0 1px 3px rgba(0, 0, 0, 0.08);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
        }

        .btn-empty-action.primary .btn-empty-icon svg,
        .btn-empty-action.primary .btn-empty-icon i,
        .btn-empty-action.primary > svg,
        .btn-empty-action.primary > i {
            color: #ffffff !important;
        }

        .btn-empty-action.primary:hover {
            background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 92%, #ffffff) 0%, var(--primary-color) 100%);
            color: #ffffff !important;
            border-color: color-mix(in srgb, #ffffff 40%, transparent);
            transform: translateY(-2px);
            box-shadow: 0 8px 22px color-mix(in srgb, var(--primary-color) 50%, transparent),
                        0 2px 6px rgba(0, 0, 0, 0.12);
        }

        .btn-empty-action.primary:hover .btn-empty-icon svg,
        .btn-empty-action.primary:hover .btn-empty-icon i,
        .btn-empty-action.primary:hover > svg,
        .btn-empty-action.primary:hover > i {
            transform: scale(1.15) rotate(-3deg);
            color: #ffffff !important;
        }

        .btn-empty-action.primary:active {
            transform: translateY(0) scale(0.98);
            box-shadow: 0 2px 8px color-mix(in srgb, var(--primary-color) 35%, transparent);
        }

        .btn-goto-workspace-main {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 38px;
            height: 38px;
            padding: 0;
            font-family: inherit;
            font-size: 12px;
            font-weight: 600;
            border-radius: 9px;
            border: none;
            box-shadow: var(--co-shadow-surface);
            background: var(--bg-body);
            color: var(--text-muted);
            text-decoration: none;
            cursor: pointer;
            box-sizing: border-box;
            outline: none;
            transition: all 0.2s ease;
        }
        .btn-goto-workspace-main:hover {
            background: color-mix(in srgb, var(--text-muted) 15%, var(--card-bg));
            color: var(--text-main);
            transform: translateY(-1px);
        }
        .btn-goto-workspace-main:active { transform: translateY(0); }

        /* Master Header Menu Dropdown */
        .header-menu-wrapper { position: relative; display: inline-flex; align-items: center; }
        .header-menu-dropdown { position: absolute; top: 100%; left: 0; margin-top: 8px; width: 230px; background: var(--card-bg); border: none; border-radius: 12px; box-shadow: var(--co-shadow-floating); opacity: 0; visibility: hidden; transform: translateY(6px); transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); z-index: 210; padding: 6px; }
        html[dir="rtl"] .header-menu-dropdown, [dir="rtl"] .header-menu-dropdown { left: auto; right: 0; }
        .header-menu-wrapper.open .header-menu-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
        .header-menu-wrapper.open #header-menu-btn { background: var(--primary-light); color: var(--primary-color); }
        .header-menu-section-title { font-size: 10.5px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; padding: 6px 10px 4px; }
        .header-menu-dropdown .dp-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 12.5px; color: var(--text-main); border-radius: 8px; cursor: pointer; transition: 0.15s ease; text-decoration: none; }
        .header-menu-dropdown .dp-item:hover { background: var(--primary-light); color: var(--primary-color); }
        .header-menu-dropdown .dp-item span { display: inline-flex; align-items: center; }
        .header-menu-dropdown .dropdown-divider { height: 1px; background: color-mix(in srgb, var(--text-muted) 14%, transparent); margin: 4px 6px; }

        .min-w210 { min-width: 210px !important; }
        .min-w220 { min-width: 220px !important; }
        .max-h220 { max-height: 220px !important; }
        .flex-between { display: flex; justify-content: space-between; align-items: center; }
        .flex-col-center { display: flex; flex-direction: column; align-items: center; }
        .gap-6 { gap: 6px; }
        .flex-gap-8 { display: flex; gap: 8px; }

        .bb-shelf-lists { top: -44px; min-width: 210px; }
        .bb-shelf-image { width: 315px; top: -85px; }
        .bb-shelf-link { width: 315px; top: -25px; }
        .bb-shelf-embed { width: 315px; top: -25px; }
        .bb-shelf-shortcuts { width: 260px; bottom: -6px; top: auto; }
        .img-paste-hint { font-size: 11px; color: var(--text-muted); font-weight: 600; }

        .schema-output-modal { position: absolute; inset: 0; background: var(--card-bg); z-index: 60; padding: 20px; display: flex; flex-direction: column; }
        .schema-modal-header { display: flex; justify-content: space-between; margin-bottom: 10px; }
        .schema-modal-title { color: var(--text-main); font-size: 16px; margin: 0; display: flex; align-items: center; gap: 6px; }
        .schema-modal-actions { display: flex; gap: 10px; }
        .btn-sm-pad { padding: 4px 12px !important; font-size: 12px !important; }
        .btn-danger-outline { border: none !important; color: var(--danger) !important; background: color-mix(in srgb, var(--danger) 14%, var(--card-bg)) !important; box-shadow: var(--co-shadow-surface); }
        .schema-modal-textarea { flex: 1; background: var(--co-surface-recessed); color: var(--primary-color); border: none; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08); border-radius: 8px; padding: 12px; font-family: monospace; font-size: 12px; direction: ltr; resize: none; }

        .kw-search-col { width: 100%; display: flex; flex-direction: column; gap: 8px; }
        .kw-filter-pills-row { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; }

        .metric-icon-blue { color: #3b82f6 !important; background: rgba(59, 130, 246, 0.1) !important; }
        .metric-icon-green { color: #10b981 !important; background: rgba(16, 185, 129, 0.1) !important; }
        .readability-status-row { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; display: flex; justify-content: space-between; }
        .readability-score-num { color: var(--success); font-weight: 800; }
        .density-box-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }

        .btn-wiz-template { padding: 8px 16px !important; font-size: 12px !important; }
        .wiz-close-btn { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; border: none; box-shadow: var(--co-shadow-surface); cursor: pointer; }
        .wiz-target-kw-row { display: flex; gap: 10px; }
        .ltr-input { flex: 1; direction: ltr; text-align: left; }
        .wiz-loc-options { gap: 10px; }
        .sel-w140 { width: 140px !important; }
        .sel-w120 { width: 120px !important; }
        .wiz-kw-hint { color: var(--text-muted); margin-top: 4px; display: block; }
        .btn-xs { padding: 4px 10px !important; font-size: 12px !important; }
        .sec-kw-total-lbl { font-size: 12px; color: var(--text-muted); }
        .sec-kw-add-row { margin-top: 12px; display: flex; gap: 8px; border-top: none; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-muted) 12%, transparent); padding-top: 12px; }
        .kw-add-input { padding: 8px 12px !important; font-size: 13px !important; }
        .btn-add-sec-kw { padding: 8px 16px !important; font-size: 13px !important; }
        .ltr-textarea-80 { min-height: 80px; direction: ltr; text-align: left; font-size: 13px; }
        .wiz-slider-card { background: var(--card-bg); border: none; box-shadow: var(--co-shadow-card); padding: 20px; border-radius: 12px; }
        .wiz-slider-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
        .wiz-len-val { font-size: 18px; font-weight: 800; color: var(--primary-color); }
        .wiz-depth-val { font-size: 14px; font-weight: 700; color: var(--text-muted); }
        .wiz-slider-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); margin-top: 8px; direction: ltr; }
        .wiz-ai-settings-card { display: flex; flex-direction: column; gap: 16px; background: var(--card-bg); padding: 16px; border-radius: 12px; border: none; box-shadow: var(--co-shadow-card); }
        .wiz-range-header { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
        .faq-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
        .faq-hint-text { font-size: 12px; color: var(--text-muted); }
        .faq-add-row { margin-top: 12px; display: flex; gap: 8px; }
        .faq-add-input { padding: 8px 12px !important; font-size: 13px !important; }
        .btn-add-faq { padding: 8px 16px !important; font-size: 13px !important; }
        .ob-hint-text { font-size: 13px; color: var(--text-muted); }
        .btn-auto-outline { border: none !important; background: color-mix(in srgb, var(--ai-color) 12%, var(--card-bg)) !important; box-shadow: var(--co-shadow-surface); color: var(--ai-color) !important; display: flex !important; align-items: center; gap: 8px; font-size: 12px !important; padding: 6px 12px !important; }
        .ob-empty-notice { text-align: center; padding: 40px; color: var(--text-muted); }
        .ob-footer-action { padding: 12px; text-align: center; border-top: none; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-muted) 12%, transparent); }
        .btn-add-heading { padding: 6px 16px !important; font-size: 12px !important; }
        .gen-ready-card { text-align: center; padding: 40px; }
        .gen-ready-title { color: var(--text-main); margin-bottom: 10px; }
        .gen-ready-desc { color: var(--text-muted); margin-bottom: 30px; }

        /* ==========================================================================
           GUINRANK MODERN SAAS SURFACE & TONAL HIERARCHY ARCHITECTURE
           Provides layered elevation, tactile depth, and crisp subtle micro-borders
           without harsh wireframes or flat indistinguishable blobs.
           ========================================================================== */
        #AppContentOptimizer .card,
        #AppContentOptimizer .panel,
        #AppContentOptimizer .co-card {
            border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 22%, transparent);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 6px 16px -4px rgba(0, 0, 0, 0.04);
        }

        #AppContentOptimizer .modal-content,
        #AppContentOptimizer .dropdown-menu {
            border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 28%, transparent);
            box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.35);
        }

        #AppContentOptimizer .btn-outline {
            border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 26%, transparent);
            background: color-mix(in srgb, var(--bg-body) 40%, var(--card-bg));
            transition: all 0.16s ease;
        }
        #AppContentOptimizer .btn-outline:hover {
            border-color: var(--primary-color) !important;
            color: var(--primary-color) !important;
            background: color-mix(in srgb, var(--primary-color) 8%, var(--card-bg));
        }

        #AppContentOptimizer input:not([type="checkbox"]):not([type="radio"]),
        #AppContentOptimizer textarea,
        #AppContentOptimizer select {
            border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 24%, transparent);
            background: color-mix(in srgb, var(--bg-body) 60%, var(--card-bg));
            transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
        }

        #AppContentOptimizer input:not([type="checkbox"]):not([type="radio"]):focus,
        #AppContentOptimizer textarea:focus,
        #AppContentOptimizer select:focus {
            border-color: var(--primary-color) !important;
            box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--primary-color) 20%, transparent) !important;
            background: var(--card-bg);
        }

        /* ==========================================================================
           2026 MODERN EXTRACTION & WORKSPACE MODALS (#fetchUrlModal & #autoWorkspaceModal)
           ========================================================================== */
        .co-modern-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.58);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: 99999;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            box-sizing: border-box;
            animation: fadeInCoModal 0.2s ease-out;
        }

        .co-modern-modal-overlay.d-none {
            display: none !important;
        }

        @keyframes fadeInCoModal {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .co-modern-modal-card,
        .co-modal-box {
            background: var(--card-bg);
            border-radius: 18px;
            box-shadow: var(--co-shadow-modal);
            max-width: 540px;
            width: 100%;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border: none;
            animation: slideUpCoModal 0.24s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .co-modern-modal-card.max-w-560 {
            max-width: 560px;
        }

        @keyframes slideUpCoModal {
            from { opacity: 0; transform: translateY(12px) scale(0.98); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        .co-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 20px;
            border-bottom: 1px solid color-mix(in srgb, var(--border-color) 40%, transparent);
            background: color-mix(in srgb, var(--bg-body) 40%, var(--card-bg));
        }

        .co-modal-title-group {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .co-modal-icon-badge {
            width: 38px;
            height: 38px;
            border-radius: 10px;
            background: color-mix(in srgb, var(--primary-color) 12%, var(--card-bg));
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-color);
            flex-shrink: 0;
            box-shadow: var(--co-shadow-surface);
        }

        .co-modal-icon-badge.ai {
            background: color-mix(in srgb, var(--ai-color) 12%, var(--card-bg));
            color: var(--ai-color);
        }

        .co-modal-title {
            font-size: 15px;
            font-weight: 800;
            color: var(--text-main);
            margin: 0;
            line-height: 1.2;
        }

        .co-modal-sub,
        .co-modal-subtitle {
            font-size: 11.5px;
            color: var(--text-muted);
            margin: 2px 0 0 0;
            line-height: 1.3;
        }

        .co-modal-close-btn,
        .co-modal-close {
            width: 28px;
            height: 28px;
            border-radius: 7px;
            border: none;
            background: transparent;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: 0.15s;
        }

        .co-modal-close-btn:hover {
            background: color-mix(in srgb, var(--text-muted) 15%, transparent);
            color: var(--text-main);
        }

        .co-modal-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .co-modal-body {
            padding: 18px 20px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .co-form-group {
            display: flex;
            flex-direction: column;
            gap: 7px;
        }

        .co-form-label {
            font-size: 11px;
            font-weight: 800;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

        .co-input-with-action {
            display: flex;
            align-items: center;
            background: var(--bg-body);
            border-radius: 9px;
            padding: 4px 5px 4px 10px;
            gap: 8px;
            box-shadow: var(--co-shadow-surface);
            border: 1.5px solid transparent;
            transition: border-color 0.2s;
        }

        .co-input-with-action:focus-within {
            border-color: var(--primary-color);
        }

        .co-input-icon {
            color: var(--text-muted);
            display: flex;
            align-items: center;
        }

        .co-input {
            flex: 1;
            border: none !important;
            background: transparent !important;
            outline: none !important;
            font-size: 12.5px;
            color: var(--text-main);
            font-family: inherit;
        }

        .co-input-btn {
            border: none;
            background: color-mix(in srgb, var(--primary-color) 12%, var(--card-bg));
            color: var(--primary-color);
            font-size: 11.5px;
            font-weight: 700;
            padding: 5px 10px;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
            transition: 0.15s;
        }

        .co-input-btn:hover {
            background: var(--primary-color);
            color: #fff;
        }

        .co-mode-cards-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
        }

        .co-mode-cards-grid.col-2 {
            grid-template-columns: 1fr 1fr;
        }

        .co-mode-card {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 10px;
            background: color-mix(in srgb, var(--bg-body) 60%, var(--card-bg));
            border: 1.5px solid color-mix(in srgb, var(--border-color) 40%, transparent);
            cursor: pointer;
            transition: all 0.18s ease;
            user-select: none;
        }

        .co-mode-card:hover {
            background: var(--card-bg);
            border-color: color-mix(in srgb, var(--primary-color) 50%, transparent);
            box-shadow: var(--co-shadow-card);
            transform: translateY(-1px);
        }

        .co-mode-card.active {
            background: color-mix(in srgb, var(--primary-color) 8%, var(--card-bg));
            border-color: var(--primary-color);
            box-shadow: 0 0 10px rgba(59, 130, 246, 0.15);
        }

        .co-mode-card input[type="radio"] {
            margin-top: 3px;
            accent-color: var(--primary-color);
        }

        .co-mode-card-content {
            display: flex;
            flex-direction: column;
            gap: 3px;
            flex: 1;
        }

        .co-mode-card-head {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12.5px;
            color: var(--text-main);
        }

        .co-mode-card p {
            font-size: 11px;
            color: var(--text-muted);
            margin: 0;
            line-height: 1.35;
        }

        .co-toggles-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            background: var(--bg-body);
            padding: 10px 12px;
            border-radius: 9px;
            box-shadow: var(--co-shadow-surface);
        }

        .co-checkbox-label {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 11.5px;
            color: var(--text-main);
            font-weight: 600;
            cursor: pointer;
            user-select: none;
        }

        .co-checkbox-label input[type="checkbox"] {
            accent-color: var(--primary-color);
        }

        .co-modal-footer {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
            padding: 12px 20px;
            border-top: 1px solid color-mix(in srgb, var(--border-color) 40%, transparent);
            background: color-mix(in srgb, var(--bg-body) 30%, var(--card-bg));
        }

        .co-btn-cancel {
            padding: 7px 14px;
            border-radius: 7px;
            font-size: 12px;
            font-weight: 700;
            border: none !important;
            background: color-mix(in srgb, var(--text-muted) 12%, transparent);
            color: var(--text-muted);
            cursor: pointer;
            transition: 0.15s;
        }

        .co-btn-cancel:hover {
            color: var(--text-main);
            background: color-mix(in srgb, var(--text-muted) 20%, transparent);
        }

        .co-btn-confirm {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 7px 16px;
            border-radius: 7px;
            font-size: 12px;
            font-weight: 800;
            border: none !important;
            background: var(--primary-color);
            color: #fff;
            cursor: pointer;
            box-shadow: var(--co-shadow-card);
            transition: all 0.18s ease;
        }

        .co-btn-confirm:hover {
            transform: translateY(-0.5px);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
        }

        .co-btn-confirm.ai-gradient {
            background: linear-gradient(135deg, var(--primary-color), #a855f7);
            box-shadow: 0 0 12px rgba(168, 85, 247, 0.35);
        }

        .co-aw-hero-banner {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 12px 14px;
            border-radius: 10px;
            background: linear-gradient(135deg, color-mix(in srgb, var(--ai-color) 12%, var(--card-bg)), color-mix(in srgb, var(--primary-color) 10%, var(--card-bg)));
            border: 1px solid color-mix(in srgb, var(--ai-color) 25%, transparent);
        }

        .aw-hero-spark {
            color: var(--ai-color);
            display: flex;
            align-items: center;
        }

        .aw-hero-texts strong {
            display: block;
            font-size: 12.5px;
            color: var(--text-main);
            font-weight: 800;
            margin-bottom: 2px;
        }

        .aw-hero-texts p {
            font-size: 11px;
            color: var(--text-muted);
            margin: 0;
            line-height: 1.35;
        }

        /* ==========================================================================
   2026 GUINRANK AUTO WORKSPACE (SEQUENTIAL WRITING SUBSYSTEM)
   HIGH-CONTRAST TONAL HIERARCHY — DISTINCT CARDS & RECESSED QUEUE
   ========================================================================== */
:root {
    --co-radar-bottom: 226px;
}

.aw-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 99990;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}
.aw-backdrop.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
@media (min-width: 1200px) {
    .aw-backdrop {
        display: none !important;
        pointer-events: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

.aw-side-panel {
    position: fixed;
    bottom: 68px;
    inset-inline-end: var(--co-analysis-panel-offset, 12px) !important;
    width: var(--co-analysis-panel-width, 390px) !important;
    max-width: var(--co-analysis-panel-width, 390px) !important;
    max-height: calc(100vh - 68px - var(--co-radar-bottom, 226px) - 14px) !important;
    min-height: 200px;
    background: color-mix(in srgb, var(--bg-body) 30%, var(--card-bg));
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 28%, transparent) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 64px -8px rgba(0, 0, 0, 0.45), 0 0 0 1px color-mix(in srgb, var(--ai-color, #8b5cf6) 20%, transparent);
    z-index: 99995;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(14px) scale(0.96);
    transform-origin: bottom right;
    transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.24s,
                max-height 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

[dir="rtl"] .aw-side-panel,
html[dir="rtl"] .aw-side-panel {
    transform-origin: bottom left;
}

.aw-side-panel.active,
.aw-side-panel.open,
[dir="rtl"] .aw-side-panel.active,
html[dir="rtl"] .aw-side-panel.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}

/* Ambient Anchor Pip */
.aw-side-panel::after {
    content: '';
    position: absolute;
    bottom: -6px;
    inset-inline-end: 44px;
    width: 12px;
    height: 12px;
    background: var(--card-bg);
    transform: rotate(45deg);
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 25%, transparent);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.12);
    pointer-events: none;
}
[dir="rtl"] .aw-side-panel::after,
html[dir="rtl"] .aw-side-panel::after {
    inset-inline-end: auto;
    inset-inline-start: 44px;
}

/* Header */
.aw-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--card-bg);
    border-bottom: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 22%, transparent);
    flex-shrink: 0;
}
.aw-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.aw-icon-badge {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--ai-color, #8b5cf6) 14%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--ai-color, #8b5cf6) 30%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--ai-color, #8b5cf6);
    box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--ai-color, #8b5cf6) 25%, transparent);
}
.aw-main-title {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.2px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.aw-sub-title {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.aw-header-ctrls {
    display: flex;
    align-items: center;
    gap: 6px;
}
.aw-close-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 20%, transparent);
    background: color-mix(in srgb, var(--bg-body) 50%, var(--card-bg));
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.16s ease;
}
.aw-close-btn:hover {
    background: color-mix(in srgb, var(--danger, #ef4444) 12%, var(--card-bg));
    border-color: color-mix(in srgb, var(--danger, #ef4444) 30%, transparent);
    color: var(--danger, #ef4444);
}

/* Toolbar */
.aw-toolbar {
    padding: 12px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 20%, transparent);
    background: var(--card-bg);
    flex-shrink: 0;
}
.aw-launch-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.btn-aw-launch {
    width: 100%;
    height: 38px;
    border: none !important;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--ai-color, #8b5cf6), #6366f1);
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 3px 12px -2px color-mix(in srgb, var(--ai-color, #8b5cf6) 45%, transparent);
    transition: all 0.18s ease;
}
.btn-aw-launch:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 5px 16px -2px color-mix(in srgb, var(--ai-color, #8b5cf6) 60%, transparent);
}
.aw-launch-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.45;
    background: color-mix(in srgb, var(--bg-body) 60%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 22%, transparent);
    border-radius: 8px;
    padding: 7px 10px;
}
.aw-active-runner-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.aw-runner-status-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-main);
    background: color-mix(in srgb, var(--ai-color, #8b5cf6) 12%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--ai-color, #8b5cf6) 30%, transparent);
    padding: 8px 12px;
    border-radius: 9px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
.pulse-dot-ai {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ai-color, #8b5cf6);
    box-shadow: 0 0 8px var(--ai-color, #8b5cf6);
    animation: pulseDotAw 1.6s infinite ease-in-out;
    flex-shrink: 0;
}
@keyframes pulseDotAw {
    0%, 100% { transform: scale(0.9); opacity: 0.7; }
    50% { transform: scale(1.35); opacity: 1; box-shadow: 0 0 12px var(--ai-color, #8b5cf6); }
}
.aw-actions-group {
    display: flex;
    gap: 6px;
}
.aw-ctrl-btn {
    flex: 1;
    height: 32px;
    background: color-mix(in srgb, var(--bg-body) 45%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 24%, transparent) !important;
    color: var(--text-main);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.16s ease;
}
.aw-ctrl-btn:hover {
    background: color-mix(in srgb, var(--primary-color) 10%, var(--card-bg));
    border-color: var(--primary-color) !important;
    color: var(--primary-color);
}
.aw-ctrl-btn.danger {
    color: var(--danger, #ef4444);
    border-color: color-mix(in srgb, var(--danger, #ef4444) 28%, transparent) !important;
}
.aw-ctrl-btn.danger:hover {
    background: color-mix(in srgb, var(--danger, #ef4444) 12%, var(--card-bg));
    border-color: var(--danger, #ef4444) !important;
}

/* Queue List (Deeper Bedrock Base with Island Cards) */
.aw-list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--bg-body) 45%, var(--card-bg));
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.aw-queue-header {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.aw-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 11px;
    background: var(--card-bg);
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 26%, transparent) !important;
    border-inline-start: 4px solid color-mix(in srgb, var(--text-muted) 35%, transparent) !important;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: all 0.18s ease;
}
.aw-item:hover {
    border-color: color-mix(in srgb, var(--primary-color) 45%, transparent) !important;
    box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}
.aw-item.active,
.aw-item.processing {
    border-inline-start: 4px solid var(--ai-color, #8b5cf6) !important;
    background: color-mix(in srgb, var(--ai-color, #8b5cf6) 7%, var(--card-bg));
    border-color: color-mix(in srgb, var(--ai-color, #8b5cf6) 35%, transparent) !important;
    box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--ai-color, #8b5cf6) 28%, transparent);
}
.aw-item.done {
    border-inline-start: 4px solid var(--success, #22c55e) !important;
    background: color-mix(in srgb, var(--success, #22c55e) 4%, var(--card-bg));
    border-color: color-mix(in srgb, var(--success, #22c55e) 28%, transparent) !important;
}
.aw-item.failed {
    border-inline-start: 4px solid var(--danger, #ef4444) !important;
    background: color-mix(in srgb, var(--danger, #ef4444) 4%, var(--card-bg));
    border-color: color-mix(in srgb, var(--danger, #ef4444) 28%, transparent) !important;
}
.aw-item.skipped {
    opacity: 0.75;
    background: color-mix(in srgb, var(--bg-body) 30%, var(--card-bg));
}
.aw-item-status-col {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.status-icon.done {
    color: var(--success, #22c55e);
    background: color-mix(in srgb, var(--success, #22c55e) 15%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--success, #22c55e) 30%, transparent);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.status-icon.processing {
    color: var(--ai-color, #8b5cf6);
}
.status-icon.failed {
    color: var(--danger, #ef4444);
    background: color-mix(in srgb, var(--danger, #ef4444) 15%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--danger, #ef4444) 30%, transparent);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.status-icon.skipped {
    color: var(--text-muted);
}
.status-icon.pending .step-num {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--bg-body) 65%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 22%, transparent);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aw-item-info {
    flex: 1 1 0%;
    min-width: 0;
}
.aw-item-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.aw-item-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
}
.aw-item-kw-chip {
    font-size: 10px;
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 12%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--primary-color) 24%, transparent);
    padding: 1px 7px;
    border-radius: 5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.aw-item-score-pill {
    font-size: 10px;
    font-weight: 800;
    color: var(--success, #22c55e);
    background: color-mix(in srgb, var(--success, #22c55e) 14%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--success, #22c55e) 28%, transparent);
    padding: 1px 7px;
    border-radius: 5px;
}
.aw-item-step-badge {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--ai-color, #8b5cf6);
    background: color-mix(in srgb, var(--ai-color, #8b5cf6) 12%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--ai-color, #8b5cf6) 26%, transparent);
    padding: 1px 6px;
    border-radius: 5px;
}
.btn-aw-resume-pill {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--danger, #ef4444);
    background: color-mix(in srgb, var(--danger, #ef4444) 12%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--danger, #ef4444) 28%, transparent);
    padding: 1px 7px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: all 0.14s ease;
}
.btn-aw-resume-pill:hover {
    background: var(--danger, #ef4444);
    color: #ffffff;
}

/* Footer */
.aw-footer {
    padding: 12px 16px;
    border-top: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 22%, transparent);
    background: var(--card-bg);
    flex-shrink: 0;
}
.aw-footer .btn-outline {
    background: color-mix(in srgb, var(--bg-body) 45%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 26%, transparent) !important;
    color: var(--text-main);
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 11.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.16s ease;
}
.aw-footer .btn-outline:hover {
    background: color-mix(in srgb, var(--primary-color) 10%, var(--card-bg));
    border-color: var(--primary-color) !important;
    color: var(--primary-color);
}


/* ==========================================================================
   AUTO WORKSPACE LAUNCH MODAL HIGH-CONTRAST SURFACES
   ========================================================================== */
#autoWorkspaceModal .co-modern-modal-card {
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 28%, transparent) !important;
    box-shadow: 0 24px 64px -8px rgba(0, 0, 0, 0.45);
}
#autoWorkspaceModal .co-aw-hero-banner {
    background: color-mix(in srgb, var(--ai-color, #8b5cf6) 10%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--ai-color, #8b5cf6) 28%, transparent) !important;
    border-radius: 12px;
    padding: 14px 16px;
}
#autoWorkspaceModal .co-mode-card {
    background: color-mix(in srgb, var(--bg-body) 55%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 26%, transparent) !important;
    border-radius: 11px;
    padding: 12px 14px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
#autoWorkspaceModal .co-mode-card:hover {
    background: var(--card-bg);
    border-color: color-mix(in srgb, var(--primary-color) 45%, transparent) !important;
    box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}
#autoWorkspaceModal .co-mode-card.active {
    background: color-mix(in srgb, var(--primary-color) 10%, var(--card-bg));
    border: 1.5px solid var(--primary-color) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 20%, transparent);
}
#autoWorkspaceModal .co-btn-confirm.ai-gradient {
    background: linear-gradient(135deg, var(--ai-color, #8b5cf6), #6366f1);
    border: none !important;
    box-shadow: 0 2px 10px -2px color-mix(in srgb, var(--ai-color, #8b5cf6) 40%, transparent);
}
#autoWorkspaceModal .co-btn-confirm.ai-gradient:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--ai-color, #8b5cf6) 55%, transparent);
}
#autoWorkspaceModal .btn-outline.co-btn-cancel {
    background: color-mix(in srgb, var(--bg-body) 45%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 26%, transparent) !important;
    color: var(--text-main);
}
#autoWorkspaceModal .btn-outline.co-btn-cancel:hover {
    border-color: var(--primary-color) !important;
    color: var(--primary-color);
}

        /* ── 2026 ARTICLE VERSION HISTORY & SNAPSHOTS MODAL ───────────── */
        #article-history-modal-root[v-cloak],
        #article-history-modal-overlay.d-none,
        .co-modal-overlay.d-none {
            display: none !important;
        }

        .co-modal-overlay {
            position: fixed !important;
            inset: 0 !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            background: rgba(0, 0, 0, 0.65) !important;
            backdrop-filter: blur(8px) !important;
            -webkit-backdrop-filter: blur(8px) !important;
            z-index: 99999 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 20px !important;
            box-sizing: border-box !important;
            animation: fadeInCoModal 0.2s ease-out !important;
        }

        .history-modal-box {
            position: relative !important;
            max-width: 860px !important;
            width: 95% !important;
            max-height: 88vh !important;
            display: flex !important;
            flex-direction: column !important;
            border-radius: 18px !important;
            border: 1px solid var(--border-color);
            background: var(--card-bg);
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 1px rgba(255, 255, 255, 0.1);
            overflow: hidden;
            animation: modalFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .history-modal-box .co-modal-header {
            padding: 16px 22px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: color-mix(in srgb, var(--card-bg) 92%, var(--primary-color));
            flex-shrink: 0;
        }

        .badge-retention-pill {
            font-size: 11px;
            color: var(--text-muted);
            background: color-mix(in srgb, var(--border-color) 40%, transparent);
            padding: 2px 7px;
            border-radius: 6px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-weight: 500;
        }

        .btn-create-snap-btn {
            background: linear-gradient(135deg, var(--primary-color), #f97316);
            color: #fff;
            border: none;
            padding: 6px 14px;
            border-radius: 8px;
            font-size: 12.5px;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s ease;
            box-shadow: 0 4px 14px rgba(244, 106, 37, 0.25);
        }
        .btn-create-snap-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 18px rgba(244, 106, 37, 0.35);
            filter: brightness(1.08);
        }

        .history-toolbar {
            padding: 12px 22px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            border-bottom: 1px solid var(--border-color);
            background: color-mix(in srgb, var(--card-bg) 97%, transparent);
            flex-shrink: 0;
        }

        .history-search-wrap {
            position: relative;
            flex: 1;
            max-width: 320px;
            display: flex;
            align-items: center;
        }
        .history-search-wrap i, .history-search-wrap svg {
            position: absolute;
            left: 10px;
            pointer-events: none;
        }
        [dir="rtl"] .history-search-wrap i, [dir="rtl"] .history-search-wrap svg {
            left: auto;
            right: 10px;
        }
        .history-search-input {
            width: 100%;
            height: 34px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            background: var(--bg-main);
            color: var(--text-main);
            font-size: 12.5px;
            padding: 0 12px 0 32px;
            outline: none;
            transition: border-color 0.15s ease;
        }
        [dir="rtl"] .history-search-input {
            padding: 0 32px 0 12px;
        }
        .history-search-input:focus {
            border-color: var(--primary-color);
        }

        .history-filter-pills {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .hist-pill {
            background: var(--bg-main);
            border: 1px solid var(--border-color);
            color: var(--text-muted);
            font-size: 11.5px;
            padding: 4px 10px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.15s ease;
        }
        .hist-pill:hover {
            color: var(--text-main);
            border-color: var(--primary-color);
        }
        .hist-pill.active {
            background: color-mix(in srgb, var(--primary-color) 14%, var(--card-bg));
            border-color: var(--primary-color);
            color: var(--primary-color);
        }

        .history-modal-body {
            padding: 16px 22px;
            flex: 1;
            overflow-y: auto;
            min-height: 280px;
            max-height: 54vh;
        }

        .history-loading-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 60px 20px;
            gap: 12px;
            color: var(--text-muted);
            font-size: 13px;
        }

        .history-empty-wrap {
            text-align: center;
            padding: 60px 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .empty-icon-ring {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: color-mix(in srgb, var(--border-color) 40%, transparent);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 14px;
        }
        .history-empty-wrap h4 {
            font-size: 15px;
            font-weight: 700;
            color: var(--text-main);
            margin: 0 0 6px 0;
        }
        .history-empty-wrap p {
            font-size: 12.5px;
            color: var(--text-muted);
            max-width: 440px;
            line-height: 1.5;
            margin: 0;
        }

        .history-timeline-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .history-snap-card {
            background: var(--bg-main);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            transition: all 0.18s ease;
            overflow: hidden;
        }
        .history-snap-card:hover {
            border-color: color-mix(in srgb, var(--primary-color) 50%, var(--border-color));
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
        }
        .history-snap-card.preview-open {
            border-color: var(--primary-color);
        }

        .snap-card-main {
            padding: 12px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            flex-wrap: wrap;
        }

        .snap-card-left {
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 220px;
        }

        .snap-trigger-badge {
            font-size: 10.5px;
            font-weight: 700;
            text-transform: uppercase;
            padding: 3px 8px;
            border-radius: 6px;
            letter-spacing: 0.3px;
            white-space: nowrap;
        }
        .snap-trigger-badge.auto {
            background: rgba(6, 182, 212, 0.14);
            color: #06b6d4;
            border: 1px solid rgba(6, 182, 212, 0.3);
        }
        .snap-trigger-badge.manual {
            background: rgba(16, 185, 129, 0.14);
            color: #10b981;
            border: 1px solid rgba(16, 185, 129, 0.3);
        }
        .snap-trigger-badge.initial {
            background: rgba(139, 92, 246, 0.14);
            color: #a855f7;
            border: 1px solid rgba(139, 92, 246, 0.3);
        }
        .snap-trigger-badge.pre-restore {
            background: rgba(245, 158, 11, 0.14);
            color: #f59e0b;
            border: 1px solid rgba(245, 158, 11, 0.3);
        }

        .snap-time-group {
            display: flex;
            flex-direction: column;
        }
        .snap-time {
            font-size: 12.5px;
            font-weight: 600;
            color: var(--text-main);
        }
        .snap-note {
            font-size: 11px;
            color: var(--text-muted);
            margin-top: 1px;
        }

        .snap-card-stats {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .snap-stat-words, .snap-stat-score {
            font-size: 11.5px;
            font-weight: 600;
            font-family: 'JetBrains Mono', monospace;
            background: color-mix(in srgb, var(--border-color) 40%, transparent);
            padding: 3px 8px;
            border-radius: 6px;
            color: var(--text-main);
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .snap-stat-delta {
            font-size: 11px;
            font-weight: 700;
            font-family: 'JetBrains Mono', monospace;
            padding: 3px 7px;
            border-radius: 6px;
        }
        .snap-stat-delta.delta-pos {
            background: rgba(16, 185, 129, 0.12);
            color: #10b981;
        }
        .snap-stat-delta.delta-neg {
            background: rgba(239, 68, 68, 0.12);
            color: #ef4444;
        }

        .snap-card-actions {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .btn-snap-action {
            height: 30px;
            padding: 0 10px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            border: 1px solid var(--border-color);
            background: var(--card-bg);
            color: var(--text-main);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            transition: all 0.15s ease;
        }
        .btn-snap-action:hover {
            border-color: var(--primary-color);
            color: var(--primary-color);
        }
        .btn-snap-action.restore-btn {
            background: color-mix(in srgb, var(--primary-color) 12%, var(--card-bg));
            border-color: var(--primary-color);
            color: var(--primary-color);
        }
        .btn-snap-action.restore-btn:hover {
            background: var(--primary-color);
            color: #fff;
        }
        .btn-snap-action.delete-btn {
            padding: 0 8px;
            color: var(--text-muted);
        }
        .btn-snap-action.delete-btn:hover {
            border-color: #ef4444;
            color: #ef4444;
            background: rgba(239, 68, 68, 0.08);
        }

        .snap-preview-drawer {
            border-top: 1px solid var(--border-color);
            background: color-mix(in srgb, var(--card-bg) 60%, transparent);
            padding: 12px 16px;
            max-height: 150px;
            overflow-y: auto;
            animation: drawerSlideDown 0.18s ease-out;
        }
        .preview-text-box {
            font-size: 12px;
            color: var(--text-muted);
            line-height: 1.6;
            white-space: pre-wrap;
            word-break: break-word;
        }

        .history-modal-footer {
            padding: 14px 22px;
            border-top: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            background: color-mix(in srgb, var(--card-bg) 95%, transparent);
            flex-shrink: 0;
        }
        .footer-hint {
            font-size: 11.5px;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .footer-btns {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .btn-clear-hist.danger {
            color: #ef4444 !important;
            border-color: rgba(239, 68, 68, 0.3) !important;
        }
        .btn-clear-hist.danger:hover {
            background: rgba(239, 68, 68, 0.1) !important;
            border-color: #ef4444 !important;
        }

        @keyframes modalFadeIn {
            from { opacity: 0; transform: scale(0.96) translateY(8px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }
        @keyframes drawerSlideDown {
            from { opacity: 0; transform: translateY(-4px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* ==========================================================================
           2026 INTEGRATION PROVENANCE, MODALS & CMS SYNCHRONIZATION STYLES
           ========================================================================== */
        .integration-provenance-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: color-mix(in srgb, var(--primary-color) 10%, var(--card-bg));
            border: 1px solid var(--primary-border-light);
            padding: 3px 10px;
            border-radius: 16px;
            font-size: 11px;
            font-weight: 700;
            color: var(--text-main);
            margin-inline-start: 8px;
            vertical-align: middle;
            box-shadow: var(--co-shadow-surface);
        }
        .btn-prov-sync {
            background: linear-gradient(135deg, var(--success), #059669);
            color: #ffffff;
            border: none;
            border-radius: 8px;
            padding: 2px 8px;
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            transition: all 0.2s ease;
            box-shadow: 0 2px 6px rgba(34, 195, 60, 0.25);
        }
        .btn-prov-sync:hover {
            filter: brightness(1.1);
            transform: translateY(-1px);
        }
        .btn-prov-sync.loading {
            opacity: 0.7;
            pointer-events: none;
        }
        .integ-modal-box {
            max-width: 840px;
            width: 95%;
            background: var(--card-bg);
            border-radius: 20px;
            box-shadow: var(--co-shadow-modal);
            border: 1px solid var(--border-color);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .integ-modal-body {
            max-height: 65vh;
            padding: 18px 22px;
            overflow-y: auto;
            color: var(--text-main);
        }
        .integ-section-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        .integ-section-title {
            font-size: 12.5px;
            font-weight: 800;
            color: var(--text-main);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .integ-manage-link {
            font-size: 12px;
            font-weight: 700;
            color: var(--primary-color);
            display: inline-flex;
            align-items: center;
            gap: 5px;
            text-decoration: none;
            transition: 0.2s;
        }
        .integ-manage-link:hover {
            text-decoration: underline;
            color: var(--primary-hover);
        }
        .integ-sources-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: 14px;
        }
        .integ-source-card {
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 16px;
            background: var(--card-bg);
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 14px;
            box-shadow: var(--co-shadow-surface);
        }
        .integ-source-card:hover {
            border-color: var(--primary-color);
            box-shadow: var(--co-shadow-card-hover), 0 0 0 1px var(--primary-color);
            transform: translateY(-2px);
        }
        .integ-source-icon-wrap {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--primary-light);
            color: var(--primary-color);
            flex-shrink: 0;
            box-shadow: var(--co-shadow-surface);
        }
        .integ-source-card.shopify .integ-source-icon-wrap {
            background: rgba(34, 195, 60, 0.12);
            color: var(--success);
        }
        .integ-source-info {
            flex: 1 1 0%;
            min-width: 0;
        }
        .integ-source-name {
            font-weight: 800;
            font-size: 13.5px;
            color: var(--text-main);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .integ-source-url {
            font-size: 11.5px;
            color: var(--text-muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-top: 2px;
        }
        .integ-empty-state {
            text-align: center;
            padding: 40px 20px;
        }
        .integ-empty-state h4 {
            margin: 14px 0 8px;
            font-size: 16px;
            font-weight: 800;
            color: var(--text-main);
        }
        .integ-empty-state p {
            font-size: 12.5px;
            color: var(--text-muted);
            max-width: 440px;
            margin: 0 auto;
            line-height: 1.6;
        }
        .integ-articles-top-bar {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }
        .integ-selected-source-tag {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--primary-light);
            border: 1px solid var(--primary-border-light);
            padding: 6px 14px;
            border-radius: 10px;
            font-size: 12.5px;
            font-weight: 700;
            color: var(--primary-color);
        }
        .integ-articles-search-box {
            flex: 1 1 200px;
            min-width: 200px;
            display: flex;
            align-items: center;
            gap: 8px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 6px 12px;
            background: var(--bg-body);
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
            transition: all 0.2s;
        }
        .integ-articles-search-box:focus-within {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px var(--primary-light);
            background: var(--card-bg);
        }
        .integ-articles-search-box input {
            border: none;
            outline: none;
            background: transparent;
            width: 100%;
            font-size: 12.5px;
            color: var(--text-main);
            font-family: inherit;
        }
        .integ-articles-search-box input::placeholder {
            color: var(--text-muted);
            opacity: 0.7;
        }
        .integ-error-banner {
            background: color-mix(in srgb, var(--danger) 10%, var(--card-bg));
            border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
            color: var(--danger);
            border-radius: 10px;
            padding: 10px 14px;
            font-size: 12px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
        }
        .integ-articles-scroll {
            max-height: 380px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .integ-article-card {
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 12px 14px;
            background: var(--card-bg);
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            box-shadow: var(--co-shadow-surface);
        }
        .integ-article-card:hover {
            border-color: var(--primary-color);
            background: color-mix(in srgb, var(--primary-color) 4%, var(--card-bg));
            transform: translateX(3px);
            box-shadow: var(--co-shadow-card);
        }
        [dir="rtl"] .integ-article-card:hover,
        html[dir="rtl"] .integ-article-card:hover {
            transform: translateX(-3px);
        }
        .integ-art-title {
            font-weight: 700;
            font-size: 13px;
            color: var(--text-main);
            line-height: 1.4;
            margin-bottom: 4px;
        }
        .integ-art-meta {
            display: flex;
            gap: 12px;
            font-size: 11px;
            color: var(--text-muted);
            align-items: center;
        }
        .integ-art-status {
            padding: 1px 7px;
            border-radius: 12px;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
        }
        .integ-art-status.publish,
        .integ-art-status.published {
            background: rgba(34, 195, 60, 0.12);
            color: var(--success);
        }
        .integ-art-status.draft {
            background: rgba(245, 158, 11, 0.12);
            color: var(--warning);
        }
        .integ-articles-pagination {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 14px;
            padding-top: 12px;
            border-top: 1px solid var(--border-color);
        }
        .integ-page-indicator {
            font-size: 12px;
            font-weight: 700;
            color: var(--text-muted);
        }

        /* =========================================================
           SMART CONTENT BLUEPRINT FLOATING STUDIO (SMART CAPSULE SATELLITE)
           ========================================================= */
        .bp-backdrop {
            display: none !important;
            pointer-events: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
        }
/* ==========================================================================
   2026 GUINRANK SMART CONTENT BLUEPRINT (MULTI-CONTENT & AI ENGINE)
   HIGH-CONTRAST TONAL HIERARCHY — DISTINCT CARDS & RECESSED INPUTS
   ========================================================================== */
.bp-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 99990;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}
.bp-backdrop.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
@media (min-width: 1200px) {
    .bp-backdrop {
        display: none !important;
        pointer-events: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

/* Blueprint Side Panel Container */
.bp-side-panel {
    position: fixed;
    bottom: 68px;
    inset-inline-end: var(--co-analysis-panel-offset, 12px) !important;
    width: var(--co-analysis-panel-width, 390px) !important;
    max-width: var(--co-analysis-panel-width, 390px) !important;
    max-height: calc(100vh - 68px - var(--co-radar-bottom, 226px) - 14px) !important;
    min-height: 200px;
    background: color-mix(in srgb, var(--bg-body) 30%, var(--card-bg));
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 28%, transparent) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 64px -8px rgba(0, 0, 0, 0.45), 0 0 0 1px color-mix(in srgb, var(--ai-color, #8b5cf6) 20%, transparent);
    z-index: 99995;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(14px) scale(0.96);
    transform-origin: bottom right;
    transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.24s,
                max-height 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
[dir="rtl"] .bp-side-panel,
html[dir="rtl"] .bp-side-panel {
    transform-origin: bottom left;
}
.bp-side-panel.active,
.bp-side-panel.open,
[dir="rtl"] .bp-side-panel.active,
html[dir="rtl"] .bp-side-panel.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}

/* Ambient Anchor Pip */
.bp-side-panel::after {
    content: '';
    position: absolute;
    bottom: -6px;
    inset-inline-end: 44px;
    width: 12px;
    height: 12px;
    background: var(--card-bg);
    transform: rotate(45deg);
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 25%, transparent);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.12);
    pointer-events: none;
}
[dir="rtl"] .bp-side-panel::after,
html[dir="rtl"] .bp-side-panel::after {
    inset-inline-end: auto;
    inset-inline-start: 44px;
}

/* Header */
.bp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--card-bg);
    border-bottom: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 22%, transparent);
    flex-shrink: 0;
}
.bp-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.bp-icon-badge {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--ai-color, #8b5cf6) 14%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--ai-color, #8b5cf6) 30%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--ai-color, #8b5cf6);
    box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--ai-color, #8b5cf6) 25%, transparent);
}
.bp-main-title {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.2px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bp-sub-title {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bp-header-ctrls {
    display: flex;
    align-items: center;
    gap: 6px;
}
.bp-close-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 20%, transparent);
    background: color-mix(in srgb, var(--bg-body) 50%, var(--card-bg));
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.16s ease;
}
.bp-close-btn:hover {
    background: color-mix(in srgb, var(--danger, #ef4444) 12%, var(--card-bg));
    border-color: color-mix(in srgb, var(--danger, #ef4444) 30%, transparent);
    color: var(--danger, #ef4444);
}

/* Mode Switcher Bar */
.bp-mode-bar {
    padding: 8px 16px 6px 16px;
    background: var(--card-bg);
    border-bottom: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 18%, transparent);
    flex-shrink: 0;
}
.bp-mode-tabs {
    display: flex;
    background: color-mix(in srgb, var(--bg-body) 70%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 22%, transparent);
    border-radius: 9px;
    padding: 3px;
    gap: 3px;
}
.bp-mode-tab {
    flex: 1;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 7px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.18s ease;
}
.bp-mode-tab:hover {
    color: var(--text-main);
}
.bp-mode-tab.active {
    background: var(--card-bg);
    color: var(--text-main);
    border-color: color-mix(in srgb, var(--border-color, var(--text-muted)) 25%, transparent);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.bp-mode-tab.active .c-ai {
    color: var(--ai-color, #8b5cf6);
}

/* Body Content — Slightly Deeper Base for Card Contrast */
.bp-body-content {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--bg-body) 45%, var(--card-bg));
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Primary Modules & Cards (Strategy, Specs, Fact-Check, Comp) */
.bp-strategy-card,
.bp-specs-scraper-card,
.bp-factcheck-card,
.bp-comp-card,
.bp-audit-card {
    background: var(--card-bg);
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 28%, transparent) !important;
    border-radius: 13px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 2px 8px -1px rgba(0, 0, 0, 0.08);
}
.bp-field-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.bp-field-label {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}
.bp-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* Custom Engineered Dropdown Controls — Recessed Surface */
.gr-custom-dropdown {
    position: relative;
    width: 100%;
}
.gr-dd-trigger {
    width: 100%;
    height: 35px;
    padding: 0 10px;
    background: color-mix(in srgb, var(--bg-body) 65%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 26%, transparent) !important;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-main);
    text-align: start;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: all 0.16s ease;
}
.gr-dd-trigger:hover {
    background: color-mix(in srgb, var(--bg-body) 45%, var(--card-bg));
    border-color: color-mix(in srgb, var(--primary-color) 45%, transparent) !important;
}
.gr-custom-dropdown.open .gr-dd-trigger {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--primary-color) 22%, transparent) !important;
}
.gr-dd-leading-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.gr-dd-text {
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gr-dd-chevron {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.gr-custom-dropdown.open .gr-dd-chevron {
    transform: rotate(180deg);
}
.gr-dd-menu {
    position: absolute;
    top: calc(100% + 4px);
    inset-inline-start: 0;
    width: 100%;
    max-height: 220px;
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 32%, transparent) !important;
    border-radius: 10px;
    box-shadow: 0 16px 40px -6px rgba(0, 0, 0, 0.4), 0 0 0 1px color-mix(in srgb, var(--ai-color, #8b5cf6) 16%, transparent);
    z-index: 10000;
    padding: 4px;
    display: none;
    flex-direction: column;
    gap: 2px;
}
.gr-custom-dropdown.open .gr-dd-menu {
    display: flex;
}
.gr-dd-option {
    padding: 7px 10px;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    transition: background 0.12s ease;
}
.gr-dd-option:hover {
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
}
.gr-dd-option.active {
    background: color-mix(in srgb, var(--primary-color) 18%, transparent);
    color: var(--primary-color);
    font-weight: 700;
}
.gr-dd-check {
    display: none;
    color: var(--primary-color);
}
.gr-dd-option.active .gr-dd-check {
    display: flex;
}

/* Range Slider Card */
.gr-custom-range-card {
    background: color-mix(in srgb, var(--bg-body) 60%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 24%, transparent) !important;
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gr-range-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bp-words-badge {
    font-size: 11px;
    font-weight: 800;
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 14%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
    padding: 2px 8px;
    border-radius: 6px;
}
.gr-range-slider-wrapper {
    position: relative;
    width: 100%;
    height: 20px;
    display: flex;
    align-items: center;
}
.gr-range-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--text-muted) 22%, transparent);
    outline: none;
    cursor: pointer;
    position: relative;
    z-index: 2;
    margin: 0;
}
.gr-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    transition: transform 0.12s ease;
}
.gr-range-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}
.gr-range-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary-color);
    border: none;
    cursor: pointer;
}
.gr-range-fill-bar {
    position: absolute;
    inset-inline-start: 0;
    height: 6px;
    background: var(--primary-color);
    border-radius: 4px;
    pointer-events: none;
    z-index: 1;
}
.gr-words-presets-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}
.gr-word-preset-pill {
    flex: 1;
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 22%, transparent);
    background: var(--card-bg);
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 700;
    padding: 4px 0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.14s ease;
    text-align: center;
}
.gr-word-preset-pill:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.gr-word-preset-pill.active {
    background: var(--primary-color);
    color: #ffffff;
    border-color: var(--primary-color);
    box-shadow: 0 2px 6px var(--primary-shadow, rgba(244, 106, 37, 0.25));
}

/* Strategic Analyze Button */
.btn-bp-analyze {
    width: 100%;
    height: 35px;
    background: color-mix(in srgb, var(--ai-color, #8b5cf6) 9%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--ai-color, #8b5cf6) 32%, transparent) !important;
    border-radius: 9px;
    color: var(--text-main);
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    transition: all 0.16s ease;
}
.btn-bp-analyze:hover {
    background: color-mix(in srgb, var(--ai-color, #8b5cf6) 20%, var(--card-bg));
    border-color: var(--ai-color, #8b5cf6) !important;
    color: var(--ai-color, #8b5cf6);
    box-shadow: 0 2px 10px -2px color-mix(in srgb, var(--ai-color, #8b5cf6) 30%, transparent);
}
.btn-bp-analyze:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Strategy Insights Pill Strip */
.bp-insights-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}
.bp-pill {
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--bg-body) 60%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 22%, transparent);
    color: var(--text-muted);
}
.bp-pill-type { color: var(--ai-color, #8b5cf6); }
.bp-pill-intent { color: var(--primary-color); }
.bp-pill-conf { color: var(--success, #22c55e); }

/* Product Specs Scraper */
.bp-specs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bp-specs-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--text-main);
}
.bp-specs-input-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.bp-specs-url-input {
    flex: 1;
    height: 33px;
    background: color-mix(in srgb, var(--bg-body) 65%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 26%, transparent) !important;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 11px;
    color: var(--text-main);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
    outline: none;
}
.bp-specs-url-input:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--primary-color) 22%, transparent) !important;
}
.btn-fetch-specs {
    height: 33px;
    padding: 0 14px;
    border: 1px solid transparent !important;
    border-radius: 8px;
    background: var(--primary-color);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    box-shadow: 0 2px 6px var(--primary-shadow, rgba(244, 106, 37, 0.25));
    transition: all 0.16s ease;
}
.btn-fetch-specs:hover {
    filter: brightness(1.08);
}
.btn-fetch-specs:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}
.bp-specs-summary-card {
    background: color-mix(in srgb, var(--bg-body) 50%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--success, #22c55e) 30%, transparent) !important;
    border-radius: 9px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bp-specs-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bp-specs-badge {
    font-size: 9.5px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--success, #22c55e) 15%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--success, #22c55e) 30%, transparent);
    color: var(--success, #22c55e);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.bp-specs-body-text {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.45;
    max-height: 85px;
    overflow-y: auto;
}

/* Fact-Checking Module */
.bp-factcheck-toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.bp-toggle-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--text-main);
}
.bp-toggle-switch {
    width: 34px;
    height: 18px;
    background: color-mix(in srgb, var(--text-muted) 25%, transparent);
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s ease;
}
.bp-toggle-switch.active {
    background: var(--primary-color);
}
.bp-toggle-knob {
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.bp-toggle-switch.active .bp-toggle-knob {
    transform: translateX(16px);
}
[dir="rtl"] .bp-toggle-switch.active .bp-toggle-knob {
    transform: translateX(-16px);
}
.bp-factcheck-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}
.bp-factcheck-textarea {
    width: 100%;
    height: 56px;
    background: color-mix(in srgb, var(--bg-body) 65%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 26%, transparent) !important;
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 11px;
    color: var(--text-main);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
    resize: none;
    font-family: inherit;
    outline: none;
}
.bp-factcheck-textarea:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--primary-color) 22%, transparent) !important;
}

/* Competitor Gaps & Audit Cards */
.bp-comp-header,
.bp-audit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.bp-comp-title,
.bp-audit-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--text-main);
}
.bp-comp-body,
.bp-audit-body {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed color-mix(in srgb, var(--border-color, var(--text-muted)) 22%, transparent);
}
.comp-insight-block {
    font-size: 11px;
    line-height: 1.45;
}
.bp-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.bp-insight-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: color-mix(in srgb, var(--bg-body) 60%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 20%, transparent);
}
.bp-insight-tag.tag-gap { color: var(--warning, #f59e0b); }
.bp-insight-tag.tag-common { color: var(--blue, #25aff4); }
.bp-insight-tag.tag-opp { color: var(--success, #22c55e); }

/* Audit Mode Button Group */
.bp-mode-btn-group {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}
.btn-mode-pill {
    flex: 1;
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 22%, transparent);
    background: color-mix(in srgb, var(--bg-body) 50%, var(--card-bg));
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.15s ease;
}
.btn-mode-pill.active {
    background: var(--primary-color);
    color: #ffffff;
    border-color: var(--primary-color);
}

/* Sections List */
.bp-sections-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bp-sections-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bp-sec-head-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}
.bp-sec-count-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--bg-body) 70%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 20%, transparent);
    color: var(--text-muted);
}
.bp-sections-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bp-empty-sections {
    background: var(--card-bg);
    border: 1px dashed color-mix(in srgb, var(--border-color, var(--text-muted)) 30%, transparent);
    border-radius: 12px;
    padding: 24px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.bp-empty-sections p {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
}
.bp-empty-sections p.sub {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
    max-width: 260px;
}

/* Section Card — Elevated Island with Crisp Border & Accent Strip */
.bp-section-card {
    background: var(--card-bg);
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 26%, transparent) !important;
    border-inline-start: 4px solid var(--ai-color, #8b5cf6) !important;
    border-radius: 11px;
    padding: 11px 13px;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.18s ease;
}
.bp-section-card:hover {
    border-color: color-mix(in srgb, var(--primary-color) 45%, transparent) !important;
    box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.14);
    transform: translateY(-1px);
}
.bp-section-card.generated {
    border-inline-start-color: var(--success, #22c55e) !important;
    background: color-mix(in srgb, var(--success, #22c55e) 4%, var(--card-bg));
}

.bp-sec-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.bp-sec-type-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 0%;
    min-width: 0;
}
.bp-sec-type-badge {
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 5px;
    white-space: nowrap;
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
}
.bp-sec-type-badge.badge-hero { background: color-mix(in srgb, var(--primary-color) 14%, transparent); color: var(--primary-color); }
.bp-sec-type-badge.badge-benefits { background: color-mix(in srgb, var(--success, #22c55e) 14%, transparent); color: var(--success, #22c55e); }
.bp-sec-type-badge.badge-specifications { background: color-mix(in srgb, var(--blue, #25aff4) 14%, transparent); color: var(--blue, #25aff4); }
.bp-sec-type-badge.badge-guide { background: color-mix(in srgb, var(--ai-color, #8b5cf6) 14%, transparent); color: var(--ai-color, #8b5cf6); }
.bp-sec-type-badge.badge-comparison { background: color-mix(in srgb, var(--warning, #f59e0b) 14%, transparent); color: var(--warning, #f59e0b); }
.bp-sec-type-badge.badge-faq { background: color-mix(in srgb, var(--pink, #ec4899) 14%, transparent); color: var(--pink, #ec4899); }
.bp-sec-type-badge.badge-cta { background: color-mix(in srgb, var(--primary-color) 18%, transparent); color: var(--primary-color); font-weight: 900; }
.bp-sec-type-badge.badge-hook { background: color-mix(in srgb, var(--ai-color, #8b5cf6) 18%, transparent); color: var(--ai-color, #8b5cf6); }
.bp-sec-type-badge.badge-body_thread { background: color-mix(in srgb, var(--blue, #25aff4) 14%, transparent); color: var(--blue, #25aff4); }

.bp-sec-heading-input {
    flex: 1 1 0%;
    font-weight: 700;
    font-size: 12px;
    color: var(--text-main);
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 20%, transparent);
    background: color-mix(in srgb, var(--bg-body) 45%, var(--card-bg));
    outline: none;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: inherit;
    transition: all 0.14s ease;
}
.bp-sec-heading-input:focus {
    border-color: var(--primary-color);
    background: var(--card-bg);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 20%, transparent);
}
.bp-sec-ctrl-btns {
    display: flex;
    align-items: center;
    gap: 3px;
}
.bp-sec-ctrl-btn {
    background: color-mix(in srgb, var(--bg-body) 50%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 18%, transparent);
    color: var(--text-muted);
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 5px;
    font-size: 10px;
    transition: 0.15s;
}
.bp-sec-ctrl-btn:hover {
    background: color-mix(in srgb, var(--text-main) 12%, var(--card-bg));
    color: var(--text-main);
}
.bp-sec-ctrl-btn.danger:hover {
    background: color-mix(in srgb, var(--danger, #ef4444) 15%, var(--card-bg));
    border-color: color-mix(in srgb, var(--danger, #ef4444) 30%, transparent);
    color: var(--danger, #ef4444);
}
.bp-sec-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.45;
}
.bp-sec-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding-top: 6px;
    border-top: 1px dashed color-mix(in srgb, var(--border-color, var(--text-muted)) 20%, transparent);
}
.bp-sec-kw-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.bp-sec-kw-tag {
    font-size: 9.5px;
    padding: 2px 7px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--bg-body) 55%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 18%, transparent);
    color: var(--text-muted);
}
.bp-sec-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}
.btn-sec-write {
    background: var(--primary-color);
    color: #ffffff;
    border: 1px solid transparent !important;
    border-radius: 7px;
    padding: 4px 11px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 1px 4px var(--primary-shadow, rgba(244, 106, 37, 0.25));
    transition: all 0.16s ease;
}
.btn-sec-write:hover {
    filter: brightness(1.08);
}
.btn-sec-optimize {
    background: color-mix(in srgb, var(--ai-color, #8b5cf6) 12%, var(--card-bg));
    color: var(--ai-color, #8b5cf6);
    border: 1px solid color-mix(in srgb, var(--ai-color, #8b5cf6) 28%, transparent) !important;
    border-radius: 7px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.16s ease;
}
.btn-sec-optimize:hover {
    background: var(--ai-color, #8b5cf6);
    color: #ffffff;
    border-color: var(--ai-color, #8b5cf6) !important;
}

/* Footer Bar */
.bp-footer-bar {
    padding: 12px 16px;
    background: var(--card-bg);
    border-top: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 22%, transparent);
    flex-shrink: 0;
}
.bp-footer-btns {
    display: flex;
    gap: 6px;
    align-items: center;
}


/* Blueprint Buttons & Interactive Outlines */
.bp-footer-btns .btn-outline {
    background: color-mix(in srgb, var(--bg-body) 45%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 26%, transparent) !important;
    color: var(--text-main);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: all 0.16s ease;
}
.bp-footer-btns .btn-outline:hover {
    background: color-mix(in srgb, var(--primary-color) 10%, var(--card-bg));
    border-color: var(--primary-color) !important;
    color: var(--primary-color);
}
.bp-footer-btns .btn-outline.c-danger:hover {
    background: color-mix(in srgb, var(--danger, #ef4444) 10%, var(--card-bg));
    border-color: var(--danger, #ef4444) !important;
    color: var(--danger, #ef4444);
}
.bp-footer-btns .btn-ai-primary {
    background: linear-gradient(135deg, var(--ai-color, #8b5cf6), #6366f1);
    color: #ffffff;
    border: none !important;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 11.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    box-shadow: 0 2px 10px -2px color-mix(in srgb, var(--ai-color, #8b5cf6) 40%, transparent);
    transition: all 0.16s ease;
}
.bp-footer-btns .btn-ai-primary:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--ai-color, #8b5cf6) 55%, transparent);
}
.bp-sections-header .btn-outline {
    background: color-mix(in srgb, var(--bg-body) 45%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 24%, transparent) !important;
    color: var(--text-main);
    border-radius: 7px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.16s ease;
}
.bp-sections-header .btn-outline:hover {
    background: color-mix(in srgb, var(--ai-color, #8b5cf6) 12%, var(--card-bg));
    border-color: var(--ai-color, #8b5cf6) !important;
    color: var(--ai-color, #8b5cf6);
}
.bp-specs-header .btn-outline {
    background: color-mix(in srgb, var(--bg-body) 45%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--border-color, var(--text-muted)) 24%, transparent) !important;
    color: var(--text-muted);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}
.bp-specs-header .btn-outline:hover {
    color: var(--danger, #ef4444);
    border-color: var(--danger, #ef4444) !important;
}

        /* ==========================================================================
           2026 SMART WORKFLOW FLOATING ACTION CAPSULE (SMART ERGONOMIC DOCK)
           ========================================================================== */
        .co-workflow-capsule {
            position: absolute;
            bottom: 20px;
            inset-inline-end: 24px;
            z-index: 85;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            pointer-events: auto;
            user-select: none;
        }
        [dir="rtl"] .co-workflow-capsule {
            align-items: flex-start;
        }

        /* Ambient Glowing Pulse Dot */
        .pulse-dot-ai {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--primary-color);
            box-shadow: 0 0 8px var(--primary-color);
            flex-shrink: 0;
            animation: pulse-ai-glow 2s infinite ease-in-out;
        }
        @keyframes pulse-ai-glow {
            0%, 100% { opacity: 0.65; transform: scale(0.9); }
            50% { opacity: 1; transform: scale(1.2); box-shadow: 0 0 12px var(--primary-color); }
        }

        /* 1. Collapsed Ambient Glass Pill View */
        .wf-capsule-pill {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            height: 38px;
            padding: 0 5px 0 12px;
            background: color-mix(in srgb, var(--card-bg) 88%, var(--bg-body));
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border: 1px solid color-mix(in srgb, var(--border-color) 75%, transparent);
            border-radius: 999px;
            box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.06);
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            color: var(--text-main);
        }
        [dir="rtl"] .wf-capsule-pill {
            padding: 0 12px 0 5px;
        }
        .wf-capsule-pill:hover {
            background: color-mix(in srgb, var(--card-bg) 96%, var(--bg-body));
            border-color: var(--primary-color);
            transform: translateY(-2px);
            box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.22), 0 0 14px var(--primary-light);
        }

        .wf-capsule-pill-trigger {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            cursor: pointer;
            padding: 4px 6px;
            border-radius: 999px;
            transition: opacity 0.15s ease;
        }
        .wf-capsule-pill-trigger:hover {
            opacity: 0.85;
        }

        .wf-capsule-lead {
            font-size: 11px;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .wf-capsule-stage-label {
            font-size: 12px;
            font-weight: 700;
            color: var(--primary-color);
            max-width: 170px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .wf-capsule-pill-divider {
            width: 1px;
            height: 16px;
            background: color-mix(in srgb, var(--border-color) 60%, transparent);
            margin: 0 2px;
            flex-shrink: 0;
        }

        .wf-pill-mini-btn {
            width: 27px;
            height: 27px;
            border-radius: 50%;
            border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
            background: color-mix(in srgb, var(--bg-body) 60%, var(--card-bg));
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
            flex-shrink: 0;
            padding: 0;
            color: var(--text-main);
        }
        .wf-pill-mini-btn.btn-pill-bp:hover {
            background: color-mix(in srgb, var(--ai-color, #8b5cf6) 18%, var(--card-bg));
            border-color: var(--ai-color, #8b5cf6);
            transform: scale(1.12);
            box-shadow: 0 0 10px rgba(139, 92, 246, 0.35);
        }
        .wf-pill-mini-btn.btn-pill-autows:hover {
            background: color-mix(in srgb, var(--primary-color) 18%, var(--card-bg));
            border-color: var(--primary-color);
            transform: scale(1.12);
            box-shadow: 0 0 10px var(--primary-glow);
        }

        .wf-capsule-arrow-btn {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: none;
            background: color-mix(in srgb, var(--border-color) 45%, transparent);
            color: var(--text-muted);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
            flex-shrink: 0;
            padding: 0;
        }
        .wf-capsule-arrow-btn:hover {
            background: var(--primary-color);
            color: #ffffff;
        }

        /* 2. State Toggles */
        .co-workflow-capsule.is-collapsed .wf-capsule-expanded-dock {
            display: none !important;
        }
        .co-workflow-capsule:not(.is-collapsed) .wf-capsule-pill {
            display: none !important;
        }

        /* 3. Expanded Floating Dock */
        .wf-capsule-expanded-dock {
            display: flex;
            flex-direction: column;
            gap: 10px;
            min-width: 360px;
            max-width: 450px;
            padding: 13px 15px;
            background: color-mix(in srgb, var(--card-bg) 95%, var(--bg-body));
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
            border-radius: 16px;
            box-shadow: 0 20px 48px -6px rgba(0, 0, 0, 0.28), 0 4px 14px rgba(0, 0, 0, 0.08);
            animation: wf-capsule-pop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }
        @keyframes wf-capsule-pop {
            from { opacity: 0; transform: translateY(8px) scale(0.96); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        .wf-capsule-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 8px;
            border-bottom: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
        }
        .wf-capsule-brand {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .wf-capsule-title {
            font-size: 12.5px;
            font-weight: 800;
            color: var(--text-main);
            letter-spacing: 0.3px;
        }
        .wf-capsule-close-btn {
            background: transparent;
            border: none;
            padding: 4px 6px;
            border-radius: 6px;
            cursor: pointer;
            color: var(--text-muted);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s ease;
        }
        .wf-capsule-close-btn:hover {
            background: color-mix(in srgb, var(--border-color) 45%, transparent);
            color: var(--text-main);
        }

        .wf-capsule-body {
            display: flex;
            flex-direction: column;
            gap: 9px;
        }

        /* Twin AI Power Tools Suite Grid */
        .wf-capsule-suite-grid {
            display: flex;
            flex-direction: column;
            gap: 7px;
            margin-top: 1px;
        }
        .wf-suite-card {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 12px;
            border-radius: 12px;
            border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
            background: color-mix(in srgb, var(--card-bg) 75%, var(--bg-body));
            cursor: pointer;
            text-align: start;
            width: 100%;
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
            position: relative;
            box-sizing: border-box;
        }
        .wf-suite-card.card-blueprint:hover {
            background: linear-gradient(135deg, color-mix(in srgb, var(--ai-color, #8b5cf6) 12%, var(--card-bg)), color-mix(in srgb, var(--card-bg) 92%, var(--bg-body)));
            border-color: var(--ai-color, #8b5cf6);
            transform: translateY(-1.5px);
            box-shadow: 0 4px 14px rgba(139, 92, 246, 0.18);
        }
        .wf-suite-card.card-autows:hover {
            background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 10%, var(--card-bg)), color-mix(in srgb, var(--card-bg) 92%, var(--bg-body)));
            border-color: var(--primary-color);
            transform: translateY(-1.5px);
            box-shadow: 0 4px 14px var(--primary-shadow);
        }

        .wf-card-icon-wrap {
            width: 32px;
            height: 32px;
            border-radius: 9px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: transform 0.2s ease;
        }
        .wf-suite-card:hover .wf-card-icon-wrap {
            transform: scale(1.08);
        }
        .bp-icon-glow {
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(236, 72, 153, 0.14));
            color: var(--ai-color, #8b5cf6);
            border: 1px solid rgba(139, 92, 246, 0.25);
        }
        .autows-icon-glow {
            background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 18%, transparent), color-mix(in srgb, var(--primary-gradient-dark) 18%, transparent));
            color: var(--primary-color);
            border: 1px solid var(--primary-border-light);
        }

        .wf-card-info {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .wf-card-title-row {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .wf-card-title {
            font-size: 12.5px;
            font-weight: 700;
            color: var(--text-main);
            white-space: nowrap;
        }
        .wf-card-badge-ai {
            font-size: 9.5px;
            font-weight: 700;
            padding: 1px 6px;
            border-radius: 999px;
            background: rgba(139, 92, 246, 0.12);
            color: var(--ai-color, #8b5cf6);
            border: 1px solid rgba(139, 92, 246, 0.22);
            line-height: 1.3;
        }
        .wf-card-badge-auto {
            font-size: 9.5px;
            font-weight: 700;
            padding: 1px 6px;
            border-radius: 999px;
            background: var(--primary-light);
            color: var(--primary-color);
            border: 1px solid var(--primary-border-light);
            line-height: 1.3;
        }
        .wf-card-desc {
            font-size: 10.5px;
            color: var(--text-muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .wf-card-arrow {
            color: var(--text-muted);
            opacity: 0.5;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            flex-shrink: 0;
        }
        .wf-suite-card:hover .wf-card-arrow {
            opacity: 1;
            transform: translateX(2px);
            color: var(--text-main);
        }
        [dir="rtl"] .wf-suite-card:hover .wf-card-arrow {
            transform: translateX(-2px);
        }
        [dir="rtl"] .wf-card-arrow svg {
            transform: scaleX(-1);
        }

        .wf-capsule-meta-row {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .wf-capsule-action-row {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .wf-stage-pill {
            font-size: 11px;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 999px;
            background: var(--primary-light);
            color: var(--primary-color);
            border: 1px solid var(--primary-border-light);
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        .wf-keyword-density-pill {
            font-size: 11px;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 999px;
            background: rgba(34, 195, 60, 0.1);
            color: var(--success);
            border: 1px solid rgba(34, 195, 60, 0.25);
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .btn-wf-next-step {
            flex: 1;
            min-width: 140px;
            background: linear-gradient(135deg, var(--primary-color), var(--primary-gradient-dark));
            color: #ffffff;
            border: none;
            border-radius: 9px;
            padding: 7px 14px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            box-shadow: 0 3px 12px var(--primary-shadow);
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .btn-wf-next-step:hover {
            filter: brightness(1.1);
            transform: translateY(-1px);
            box-shadow: 0 5px 16px var(--primary-shadow);
        }
        .btn-wf-run-all {
            background: linear-gradient(135deg, var(--ai-color, #8b5cf6), #ec4899);
            color: #ffffff;
            border: none;
            border-radius: 9px;
            padding: 7px 12px;
            font-size: 11.5px;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            transition: all 0.2s;
            box-shadow: 0 3px 10px rgba(139, 92, 246, 0.28);
        }
        .btn-wf-run-all:hover {
            filter: brightness(1.1);
            transform: translateY(-1px);
        }
        .btn-wf-audit-existing {
            background: var(--primary-light);
            border: 1px solid var(--primary-border-light);
            color: var(--primary-color);
            border-radius: 9px;
            padding: 6px 12px;
            font-size: 11.5px;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            transition: 0.2s;
        }
        .btn-wf-audit-existing:hover {
            background: var(--primary-color);
            color: #ffffff;
        }

        /* ==========================================================================
           2026 EXISTING CONTENT AUDIT CARD STYLES
           ========================================================================== */
        .bp-audit-card {
            margin: 12px 20px;
            border: 1px solid var(--border-color);
            border-radius: 14px;
            background: var(--card-bg);
            overflow: hidden;
            box-shadow: var(--co-shadow-card);
        }
        .bp-audit-header {
            padding: 12px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: color-mix(in srgb, var(--primary-color) 6%, var(--card-bg));
            cursor: pointer;
            border-bottom: 1px solid var(--border-color);
            user-select: none;
        }
        .bp-audit-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 800;
            color: var(--text-main);
        }
        .bp-audit-score-badge {
            font-size: 10.5px;
            font-weight: 800;
            padding: 2px 8px;
            border-radius: 999px;
            background: var(--success);
            color: #ffffff;
            margin-inline-start: 6px;
        }
        .bp-structure-mode-picker {
            padding: 12px 16px;
            border-bottom: 1px solid var(--border-color);
            background: color-mix(in srgb, var(--bg-body) 60%, var(--card-bg));
        }
        .bp-mode-btn-group {
            display: flex;
            gap: 6px;
        }
        .btn-mode-pill {
            flex: 1 1 0%;
            padding: 6px 10px;
            border-radius: 8px;
            border: 1px solid var(--border-color);
            background: var(--card-bg);
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            transition: all 0.2s;
        }
        .btn-mode-pill:hover {
            color: var(--text-main);
            border-color: var(--primary-border);
        }
        .btn-mode-pill.active {
            background: var(--primary-color);
            color: #ffffff;
            border-color: var(--primary-color);
            box-shadow: 0 2px 8px var(--primary-shadow);
        }
        .bp-mode-desc {
            font-size: 10.5px;
            color: var(--text-muted);
            margin-top: 6px;
            line-height: 1.4;
        }
        .bp-audit-body,
        .bp-audit-details {
            padding: 12px 16px;
            max-height: 320px;
            overflow-y: auto;
            color: var(--text-main);
        }
        .audit-diag-section {
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
        }
        .audit-diag-title {
            font-size: 11.5px;
            font-weight: 800;
            margin-bottom: 6px;
        }
        .audit-chk-item {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            font-size: 11.5px;
            margin-bottom: 6px;
            color: var(--text-main);
            line-height: 1.4;
        }
        .audit-priority-tag {
            font-size: 9.5px;
            font-weight: 800;
            padding: 1px 6px;
            border-radius: 4px;
            text-transform: uppercase;
            flex-shrink: 0;
        }
        .audit-priority-tag.high { background: rgba(244, 37, 37, 0.14); color: var(--danger); }
        .audit-priority-tag.medium { background: rgba(245, 158, 11, 0.14); color: var(--warning); }
        .audit-priority-tag.low { background: var(--primary-light); color: var(--primary-color); }
        .aw-item-step-badge {
            font-size: 9.5px;
            padding: 1px 6px;
            border-radius: 4px;
            background: var(--primary-light);
            color: var(--primary-color);
            font-weight: 700;
            margin-inline-start: 4px;
        }
        .btn-aw-resume-pill {
            font-size: 9.5px;
            padding: 2px 7px;
            border-radius: 4px;
            background: rgba(244, 37, 37, 0.1);
            color: var(--danger);
            border: 1px solid rgba(244, 37, 37, 0.3);
            font-weight: 800;
            cursor: pointer;
            margin-inline-start: 4px;
            display: inline-flex;
            align-items: center;
            gap: 3px;
        }
        .status-icon.failed {
            color: var(--danger) !important;
        }

        /* ==========================================================================
           2026 AUTO WORKSPACE & MISSING COMPONENT CLASSES
           ========================================================================== */
        .aw-header-ctrls {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .aw-launch-box {
            padding: 14px 18px;
            border-bottom: 1px solid var(--border-color);
            background: var(--card-bg);
        }
        .pulse-dot-ai {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--ai-color);
            box-shadow: 0 0 8px var(--ai-color);
            display: inline-block;
            animation: pulseDot 2s infinite ease-in-out;
        }
        @keyframes pulseDot {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.3); opacity: 0.6; }
        }
        .sec-kw-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--primary-light);
            border: 1px solid var(--primary-border-light);
            color: var(--primary-color);
            font-size: 11px;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 6px;
        }
        .del-pill-btn {
            background: transparent;
            border: none;
            color: var(--danger);
            cursor: pointer;
            padding: 0 2px;
            font-size: 11px;
            display: flex;
            align-items: center;
        }
        .outline-input {
            background: var(--co-surface-recessed);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 6px 10px;
            color: var(--text-main);
            font-size: 12px;
            width: 100%;
            outline: none;
            box-sizing: border-box;
        }
        .co-editor-integrated-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 16px;
            background: color-mix(in srgb, var(--bg-body) 60%, var(--card-bg));
            border-bottom: 1px solid var(--border-color);
        }
        .project-title-sub {
            font-size: 11px;
            color: var(--text-muted);
        }
        .undo-redo-group {
            display: flex;
            align-items: center;
            gap: 2px;
        }
        .color-trigger-btn {
            width: 26px;
            height: 26px;
            border-radius: 6px;
            border: 1px solid var(--border-color);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--card-bg);
            transition: 0.2s;
        }
        .color-trigger-btn:hover {
            border-color: var(--primary-color);
        }
        .recent-swatches {
            display: flex;
            gap: 4px;
            align-items: center;
        }
        .tooltip-vs {
            position: relative;
        }
        .serp-fetch-card,
        .serp-loading-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 16px;
            box-shadow: var(--co-shadow-card);
        }
        .radar-icon-center {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--card-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--co-shadow-floating);
            color: var(--primary-color);
        }
        .chip-site-domain {
            font-size: 11px;
            font-weight: 700;
            color: var(--text-main);
            padding: 2px 6px;
            border-radius: 4px;
            background: color-mix(in srgb, var(--bg-body) 80%, var(--card-bg));
            border: 1px solid var(--border-color);
        }
        .helper-empty-notice {
            text-align: center;
            padding: 24px 16px;
            color: var(--text-muted);
            font-size: 12px;
        }
        .multi-deck-dock,
        .kw-deck-right {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .table-box {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--co-shadow-surface);
        }
        .table-responsive {
            width: 100%;
            overflow-x: auto;
        }

        /* ==========================================================================
           2026 GUINRANK THEME HARMONIZATION: DARK MODE & SUNMOON
           ========================================================================== */
        [data-theme="dark"],
        [data-theme="sunmoon"],
        html.dark-theme,
        body.dark-theme {
            /* Floating Popovers */
            .bp-side-panel,
            .aw-side-panel {
                background: color-mix(in srgb, var(--card-bg) 95%, #000);
                border-color: rgba(255, 255, 255, 0.12);
                box-shadow: 0 25px 70px -10px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.08);
            }
            .bp-side-panel::after,
            .aw-side-panel::after {
                background: color-mix(in srgb, var(--card-bg) 95%, #000);
                border-color: rgba(255, 255, 255, 0.12);
            }

            /* Headers */
            .bp-header,
            .aw-header,
            .bp-audit-header,
            .bp-comp-header,
            .integ-section-head,
            .co-modal-header {
                background: color-mix(in srgb, var(--bg-body) 60%, var(--card-bg));
                border-color: var(--border-color);
                color: var(--text-main);
            }

            /* Cards */
            .bp-strategy-card,
            .bp-comp-card,
            .bp-section-card,
            .bp-audit-card,
            .integ-source-card,
            .integ-article-card,
            .aw-launch-box,
            .serp-fetch-card,
            .serp-loading-card {
                background: color-mix(in srgb, var(--card-bg) 95%, var(--bg-body));
                border-color: var(--border-color);
                color: var(--text-main);
            }
            .bp-comp-card {
                background: color-mix(in srgb, var(--primary-color) 8%, var(--card-bg));
            }

            /* Form Inputs */
            .bp-select,
            .bp-sec-heading-input,
            .integ-articles-search-box,
            .outline-input,
            .audit-input {
                background: var(--bg-body);
                border-color: var(--border-color);
                color: var(--text-main);
            }
            .bp-select option {
                background: var(--card-bg);
                color: var(--text-main);
            }

            /* Workflow Floating Capsule */
            .co-workflow-capsule .wf-capsule-pill {
                background: color-mix(in srgb, var(--card-bg) 88%, #000);
                border-color: rgba(255, 255, 255, 0.1);
                box-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.6);
            }
            .co-workflow-capsule .wf-pill-mini-btn {
                background: color-mix(in srgb, var(--card-bg) 70%, #000);
                border-color: rgba(255, 255, 255, 0.08);
            }
            .co-workflow-capsule .wf-capsule-expanded-dock {
                background: color-mix(in srgb, var(--card-bg) 95%, #000);
                border-color: rgba(255, 255, 255, 0.12);
                box-shadow: 0 25px 60px -8px rgba(0, 0, 0, 0.75);
            }
            .co-workflow-capsule .wf-suite-card {
                background: color-mix(in srgb, var(--card-bg) 72%, #000);
                border-color: rgba(255, 255, 255, 0.08);
            }
            .co-workflow-capsule .wf-suite-card.card-blueprint:hover {
                background: linear-gradient(135deg, color-mix(in srgb, var(--ai-color, #8b5cf6) 18%, #000), color-mix(in srgb, var(--card-bg) 90%, #000));
            }
            .co-workflow-capsule .wf-suite-card.card-autows:hover {
                background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 15%, #000), color-mix(in srgb, var(--card-bg) 90%, #000));
            }
            .btn-wf-audit-existing {
                background: color-mix(in srgb, var(--primary-color) 12%, var(--card-bg));
                color: var(--primary-color);
                border-color: var(--primary-border-light);
            }

            /* Modals */
            .co-modern-modal-card,
            .integ-modal-box,
            .co-modal-box {
                background: var(--card-bg);
                border-color: var(--border-color);
                box-shadow: 0 25px 80px rgba(0, 0, 0, 0.85);
                color: var(--text-main);
            }
            .co-modal-footer {
                background: color-mix(in srgb, var(--bg-body) 60%, var(--card-bg));
                border-color: var(--border-color);
            }

            /* Badges */
            .bp-sec-type-badge {
                border: 1px solid rgba(255, 255, 255, 0.1);
            }
            .bp-sec-desc {
                color: var(--text-muted);
            }
            .bp-sec-kw-tag {
                background: rgba(255, 255, 255, 0.06);
                color: var(--text-muted);
                border-color: rgba(255, 255, 255, 0.1);
            }
            .integration-provenance-pill {
                background: color-mix(in srgb, var(--primary-color) 15%, var(--card-bg));
                border-color: var(--primary-border-light);
                color: var(--text-main);
            }
        }

        /* ==========================================================================
           2026 RESPONSIVE & MOBILE BREAKPOINTS
           ========================================================================== */
        @media (max-width: 768px) {
            .bp-side-panel,
            .aw-side-panel {
                width: calc(100vw - 20px) !important;
                max-width: calc(100vw - 20px) !important;
                inset-inline-end: 10px !important;
                bottom: 66px !important;
                max-height: calc(100vh - 80px) !important;
                border-radius: 16px !important;
            }
            .bp-side-panel::after,
            .aw-side-panel::after {
                display: none !important;
            }
            .co-workflow-ribbon {
                padding: 8px 12px;
                gap: 6px;
                justify-content: center;
            }
            .wf-ribbon-left, .wf-ribbon-center, .wf-ribbon-right {
                flex-wrap: wrap;
                justify-content: center;
            }
            .btn-wf-next-step {
                width: 100%;
                justify-content: center;
            }
        }
        @media (max-width: 520px) {
            .bp-strategy-row {
                flex-direction: column;
                align-items: stretch;
            }
            .bp-footer-btns {
                flex-wrap: wrap;
            }
            .btn-bp-analyze {
                width: 100%;
                justify-content: center;
            }
            .bp-sections-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 6px;
            }
        }

        /* ── Custom Keywords Adder Bar ── */
        .co-custom-adder-box {
            padding: 10px 12px;
            margin: 6px 8px 10px 8px;
            background: var(--bg-card, rgba(255, 255, 255, 0.03));
            border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .co-custom-adder-inner {
            display: flex;
            align-items: center;
            gap: 8px;
            background: var(--bg-surface, rgba(0, 0, 0, 0.15));
            border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
            border-radius: 8px;
            padding: 4px 8px;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }
        .co-custom-adder-inner:focus-within {
            border-color: var(--primary-color, #6366f1);
            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
        }
        .custom-adder-icon {
            color: var(--primary-color, #6366f1);
            display: flex;
            align-items: center;
        }
        .custom-adder-input {
            flex: 1;
            background: transparent;
            border: none;
            outline: none;
            color: var(--text-color, #e2e8f0);
            font-size: 12px;
            font-family: inherit;
        }
        .custom-adder-input::placeholder {
            color: var(--text-muted, #94a3b8);
        }
        .custom-adder-btn {
            background: var(--primary-color, #6366f1);
            color: #ffffff;
            border: none;
            border-radius: 6px;
            padding: 4px 10px;
            font-size: 11px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .custom-adder-btn:hover:not(:disabled) {
            opacity: 0.9;
            transform: translateY(-1px);
        }
        .custom-adder-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }
        .custom-adder-hint {
            font-size: 10px;
            color: var(--text-muted, #94a3b8);
            line-height: 1.3;
        }
        .kw-del-action:hover {
            background: rgba(239, 68, 68, 0.15) !important;
        }

        /* ── Enhanced FAQs Cards ── */
        .faqs-filter-header {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 10px 12px;
            margin-bottom: 8px;
            border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
            background: color-mix(in srgb, var(--card-bg) 60%, var(--bg-body));
            border-radius: 8px 8px 0 0;
        }
        .faqs-filter-pills-bar {
            display: flex;
            align-items: center;
            gap: 5px;
            flex-wrap: wrap;
        }
        .faq-filter-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 4px 10px;
            font-size: 11px;
            font-weight: 600;
            border-radius: 6px;
            border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
            background: var(--bg-card, rgba(255, 255, 255, 0.02));
            color: var(--text-muted, #94a3b8);
            cursor: pointer;
            transition: all 0.15s ease;
            user-select: none;
        }
        .faq-filter-pill:hover {
            background: var(--bg-card-hover, rgba(255, 255, 255, 0.06));
            color: var(--text-main, #f1f5f9);
        }
        .faq-filter-pill.active {
            background: rgba(99, 102, 241, 0.18);
            border-color: rgba(99, 102, 241, 0.4);
            color: var(--primary-color, #6366f1);
            font-weight: 700;
        }
        .faq-filter-pill.pill-in-content.active {
            background: rgba(16, 185, 129, 0.18);
            border-color: rgba(16, 185, 129, 0.4);
            color: #10b981;
        }
        .faq-filter-pill.pill-missing.active {
            background: rgba(245, 158, 11, 0.18);
            border-color: rgba(245, 158, 11, 0.4);
            color: #f59e0b;
        }
        .faq-pill-count {
            font-size: 10px;
            font-weight: 700;
            padding: 1px 6px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.08);
            color: inherit;
        }
        .faqs-filter-status-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 2px;
            font-size: 11px;
            color: var(--text-muted, #94a3b8);
        }
        .faqs-status-counter {
            font-weight: 600;
            font-size: 11px;
            color: var(--text-muted, #94a3b8);
        }
        .faqs-tip-text {
            font-size: 10px;
            color: var(--text-muted, #94a3b8);
            opacity: 0.85;
        }
        .faq-item-card {
            background: var(--bg-card, rgba(255, 255, 255, 0.03));
            border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
            border-radius: 8px;
            padding: 8px 10px;
            margin: 6px 8px;
            transition: all 0.2s ease;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .faq-item-card:hover {
            border-color: var(--primary-color, #6366f1);
            background: var(--bg-card-hover, rgba(255, 255, 255, 0.06));
            transform: translateY(-1px);
        }
        .faq-card-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }
        .faq-head-meta {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
            min-width: 0;
        }
        .faq-freq-badge {
            font-size: 9.5px;
            font-weight: 700;
            padding: 1.5px 5.5px;
            border-radius: 4px;
            background: rgba(234, 179, 8, 0.15);
            color: #eab308;
            border: 1px solid rgba(234, 179, 8, 0.3);
            display: inline-flex;
            align-items: center;
            line-height: 1.2;
        }
        .faq-weight-badge {
            font-size: 9.5px;
            font-weight: 700;
            padding: 1.5px 5.5px;
            border-radius: 4px;
            background: rgba(99, 102, 241, 0.15);
            color: #818cf8;
            border: 1px solid rgba(99, 102, 241, 0.3);
            display: inline-flex;
            align-items: center;
            gap: 2px;
            line-height: 1.2;
        }
        .faq-source-pill {
            font-size: 9.5px;
            font-weight: 600;
            padding: 2px 6px;
            border-radius: 4px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            max-width: 140px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .faq-source-pill.source-paa {
            background: rgba(6, 182, 212, 0.12);
            color: #06b6d4;
            border: 1px solid rgba(6, 182, 212, 0.25);
        }
        .faq-source-pill.source-comp {
            background: rgba(168, 85, 247, 0.12);
            color: #a855f7;
            border: 1px solid rgba(168, 85, 247, 0.25);
        }
        .faq-actions-strip {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .faq-action-btn {
            background: transparent;
            border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
            color: var(--text-muted, #94a3b8);
            border-radius: 4px;
            padding: 3px 5px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s ease;
        }
        .faq-action-btn:hover {
            color: var(--text-color, #ffffff);
            border-color: var(--primary-color, #6366f1);
            background: rgba(99, 102, 241, 0.12);
        }
        .faq-card-body {
            cursor: pointer;
        }
        .faq-q-text {
            font-size: 12px;
            font-weight: 600;
            color: var(--text-main, #0f172a);
            line-height: 1.45;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            transition: color 0.15s ease;
        }
        [data-theme="dark"] .faq-q-text,
        body.dark-theme .faq-q-text,
        .dark .faq-q-text {
            color: var(--text-main, #f8fafc);
        }
        .faq-item-card:hover .faq-q-text {
            color: var(--primary-color, #6366f1);
        }

        /* ── FAQ In-Content Detection Indicators ── */
        .faq-item-card.is-in-content {
            border-color: rgba(16, 185, 129, 0.45) !important;
            background: color-mix(in srgb, #10b981 6%, var(--bg-card, rgba(255, 255, 255, 0.03))) !important;
            border-inline-start: 3px solid #10b981 !important;
            box-shadow: 0 2px 8px -2px rgba(16, 185, 129, 0.15);
        }
        .faq-item-card.is-in-content:hover {
            border-color: #10b981 !important;
            background: color-mix(in srgb, #10b981 10%, var(--bg-card-hover, rgba(255, 255, 255, 0.06))) !important;
        }
        .faq-item-card.is-in-content .faq-q-text {
            color: var(--text-main, #f8fafc);
        }
        .faq-in-content-badge {
            font-size: 9.5px;
            font-weight: 700;
            padding: 1.5px 6px;
            border-radius: 4px;
            background: rgba(16, 185, 129, 0.15);
            color: #10b981;
            border: 1px solid rgba(16, 185, 129, 0.35);
            display: inline-flex;
            align-items: center;
            gap: 3px;
            line-height: 1.2;
            animation: fadeIn 0.2s ease;
        }
        .faq-action-btn.btn-in-content {
            color: #10b981;
            border-color: rgba(16, 185, 129, 0.4);
            background: rgba(16, 185, 129, 0.12);
        }
        .faq-action-btn.btn-in-content:hover {
            background: rgba(16, 185, 129, 0.22);
            border-color: #10b981;
            color: #10b981;
        }
        .faqs-in-content-count {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 10px;
            font-weight: 700;
            color: #10b981;
            background: rgba(16, 185, 129, 0.12);
            padding: 2px 8px;
            border-radius: 10px;
            border: 1px solid rgba(16, 185, 129, 0.28);
        }

        /* ── Check Rank Button Analyzing State ── */
        .btn-check-rank.analyzing {
            pointer-events: none;
            opacity: 0.75;
        }
        .btn-check-rank.analyzing i,
        .btn-check-rank.analyzing svg {
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* ==========================================================================
           TAILORED SECTION SKELETONS & THEME-ADAPTIVE LOADING LIFECYCLE
           ========================================================================== */
        :root {
            --co-sk-card-bg: #ffffff;
            --co-sk-border: rgba(0, 0, 0, 0.08);
            --co-sk-box-from: #e5e7eb;
            --co-sk-box-mid: #f3f4f6;
            --co-sk-overlay: rgba(255, 255, 255, 0.95);
        }

        [data-theme='dark'],
        html[data-theme='dark'],
        body[data-theme='dark'],
        .dark-mode,
        html.dark,
        body.dark-mode {
            --co-sk-card-bg: #1a1d25;
            --co-sk-border: rgba(255, 255, 255, 0.08);
            --co-sk-box-from: #222633;
            --co-sk-box-mid: #32384a;
            --co-sk-overlay: rgba(19, 21, 26, 0.95);
        }

        [data-theme='sunmoon'],
        [data-theme='sunset'],
        html[data-theme='sunmoon'],
        html[data-theme='sunset'],
        body[data-theme='sunmoon'],
        body[data-theme='sunset'],
        body.theme-sunset {
            --co-sk-card-bg: #2d2725;
            --co-sk-border: rgba(255, 255, 255, 0.08);
            --co-sk-box-from: #3a3330;
            --co-sk-box-mid: #4d4440;
            --co-sk-overlay: rgba(22, 20, 18, 0.95);
        }

        @keyframes co-shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }

        @keyframes co-pulse-subtle {
            0%, 100% { opacity: 0.65; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.02); }
        }

        .co-skeleton-box {
            background: linear-gradient(90deg,
                var(--co-sk-box-from) 0%,
                var(--co-sk-box-mid) 50%,
                var(--co-sk-box-from) 100%);
            background-size: 200% 100%;
            animation: co-shimmer 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
            border-radius: 6px;
            display: inline-block;
            vertical-align: middle;
        }

        /* 1. Keyword Card Skeletons (Crowns & LSI) */
        .co-skeleton-kw-list {
            display: flex;
            flex-direction: column;
            gap: 7px;
            padding: 4px 6px;
            width: 100%;
            box-sizing: border-box;
        }

        .co-skeleton-kw-card {
            background: var(--co-sk-card-bg);
            border: 1px solid var(--co-sk-border);
            border-radius: 10px;
            padding: 8px 11px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            box-sizing: border-box;
            position: relative;
            overflow: hidden;
        }

        .co-sk-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            width: 100%;
        }

        .co-sk-header-left {
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 1;
        }

        .co-sk-star {
            width: 16px;
            height: 16px;
            border-radius: 4px;
            flex-shrink: 0;
        }

        .co-sk-title {
            height: 13px;
            border-radius: 4px;
        }

        .co-sk-pill {
            width: 26px;
            height: 14px;
            border-radius: 4px;
            flex-shrink: 0;
        }

        .co-sk-header-right {
            display: flex;
            align-items: center;
            gap: 5px;
            flex-shrink: 0;
        }

        .co-sk-score {
            width: 32px;
            height: 18px;
            border-radius: 6px;
        }

        .co-sk-rank {
            width: 24px;
            height: 18px;
            border-radius: 6px;
        }

        .co-sk-telemetry {
            display: flex;
            flex-direction: column;
            gap: 6px;
            width: 100%;
        }

        .co-sk-gauge-track {
            height: 5px;
            width: 100%;
            border-radius: 3px;
        }

        .co-sk-deck-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
        }

        .co-sk-deck-item {
            height: 11px;
            width: 44px;
            border-radius: 3px;
        }

        /* 2. Outlines Competitor Site Skeletons */
        .co-skeleton-outlines-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 6px 8px;
            width: 100%;
            box-sizing: border-box;
        }

        .co-skeleton-outline-card {
            background: var(--co-sk-card-bg);
            border: 1px solid var(--co-sk-border);
            border-radius: 10px;
            padding: 10px 12px;
            display: flex;
            flex-direction: column;
            gap: 9px;
        }

        .co-sk-site-head {
            display: flex;
            align-items: center;
            gap: 9px;
            padding-bottom: 6px;
            border-bottom: 1px solid var(--co-sk-border);
        }

        .co-sk-favicon {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .co-sk-domain {
            height: 13px;
            width: 130px;
            border-radius: 4px;
        }

        .co-sk-outline-items {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .co-sk-outline-row {
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .co-sk-tag-badge {
            width: 26px;
            height: 16px;
            border-radius: 4px;
            flex-shrink: 0;
        }

        .co-sk-tag-text {
            height: 12px;
            border-radius: 4px;
            flex: 1;
        }

        /* 3. FAQ Question Skeletons */
        .co-skeleton-faqs-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 6px 8px;
            width: 100%;
            box-sizing: border-box;
        }

        .co-skeleton-faq-card {
            background: var(--co-sk-card-bg);
            border: 1px solid var(--co-sk-border);
            border-radius: 10px;
            padding: 9px 12px;
            display: flex;
            flex-direction: column;
            gap: 7px;
        }

        .co-sk-faq-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .co-sk-faq-source {
            width: 80px;
            height: 16px;
            border-radius: 4px;
        }

        .co-sk-faq-actions {
            display: flex;
            gap: 5px;
        }

        .co-sk-faq-btn {
            width: 22px;
            height: 20px;
            border-radius: 4px;
        }

        .co-sk-faq-line {
            height: 12px;
            border-radius: 4px;
        }

        /* 4. Neural Radar Pulse State */
        .co-neural-loading-hint {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            color: var(--primary-color, #6366f1);
            animation: co-pulse-subtle 1.6s ease-in-out infinite;
        }

        /* 5. Main Editor Workspace Skeleton Overlay */
        .editor-skeleton-overlay {
            position: absolute;
            inset: 0;
            z-index: 18;
            background: var(--co-sk-overlay);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            padding: 36px 48px;
            display: flex;
            flex-direction: column;
            gap: 16px;
            box-sizing: border-box;
            overflow: hidden;
            pointer-events: none;
            opacity: 1;
            transition: opacity 0.35s ease, visibility 0.35s ease;
        }

        .editor-skeleton-overlay.co-hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        .ed-sk-title {
            height: 32px;
            width: 48%;
            border-radius: 8px;
            margin-bottom: 12px;
        }

        .ed-sk-h1 {
            height: 24px;
            width: 65%;
            border-radius: 6px;
            margin-bottom: 8px;
        }

        .ed-sk-para {
            display: flex;
            flex-direction: column;
            gap: 9px;
            margin-bottom: 14px;
        }

        .ed-sk-line {
            height: 13px;
            border-radius: 4px;
        }

        .ed-sk-h2 {
            height: 20px;
            width: 42%;
            border-radius: 6px;
            margin: 10px 0 8px;
        }

        /* 6. Status Bar Telemetry Skeletons */
        .status-sk-chip {
            height: 15px;
            width: 55px;
            border-radius: 4px;
            display: inline-block;
        }

/* ==========================================================================
   GUINRANK V7: ADVANCED OUTLINES, GAPS & STATISTICS SUITE STYLES
   ========================================================================== */

/* ── Outlines Toggle Expand Button & Heading Pills ── */
.outlines-toggle-expand-btn {
    cursor: pointer;
    background: color-mix(in srgb, var(--primary-color, #6366f1) 12%, transparent);
    color: var(--primary-color, #6366f1);
    border: 1px solid color-mix(in srgb, var(--primary-color, #6366f1) 30%, transparent);
    font-weight: 600;
}
.outlines-toggle-expand-btn:hover {
    background: color-mix(in srgb, var(--primary-color, #6366f1) 22%, transparent);
    border-color: var(--primary-color, #6366f1);
    color: var(--text-main, #ffffff);
}

.outline-item.h4 .tag-badge { background: rgba(14, 165, 233, 0.15); color: #0ea5e9; border: 1px solid rgba(14, 165, 233, 0.3); }
.outline-item.h5 .tag-badge { background: rgba(168, 85, 247, 0.15); color: #a855f7; border: 1px solid rgba(168, 85, 247, 0.3); }
.outline-item.h6 .tag-badge { background: rgba(100, 116, 139, 0.15); color: #94a3b8; border: 1px solid rgba(100, 116, 139, 0.3); }

/* ── Redesigned Outlines Meta Stats Pills ── */
.outlines-meta-stats {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.outlines-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    transition: all 0.2s ease;
    user-select: none;
}
.outlines-meta-pill .meta-val {
    font-weight: 700;
    font-size: 11.5px;
}
.outlines-meta-pill .meta-lbl {
    font-size: 10px;
    opacity: 0.85;
    text-transform: capitalize;
}

.outlines-meta-pill.stat-sites {
    background: color-mix(in srgb, #3b82f6 12%, transparent);
    color: #3b82f6;
    border: 1px solid color-mix(in srgb, #3b82f6 28%, transparent);
}
.outlines-meta-pill.stat-headings {
    background: color-mix(in srgb, #8b5cf6 12%, transparent);
    color: #8b5cf6;
    border: 1px solid color-mix(in srgb, #8b5cf6 28%, transparent);
}
.outlines-meta-pill.stat-questions {
    background: color-mix(in srgb, #10b981 12%, transparent);
    color: #10b981;
    border: 1px solid color-mix(in srgb, #10b981 28%, transparent);
}
.outlines-meta-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px -1px rgba(0, 0, 0, 0.15);
}

/* ── Content Gaps Intelligent Suite ── */
.gaps-filter-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    margin-bottom: 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--card-bg, #1a1e28) 90%, transparent);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.07));
}
.gaps-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted, #94a3b8);
    transition: all 0.15s ease;
}
.gaps-filter-pill:hover {
    color: var(--text-main, #ffffff);
    background: rgba(255, 255, 255, 0.05);
}
.gaps-filter-pill.active {
    background: var(--primary-color, #6366f1);
    color: #ffffff;
    border-color: var(--primary-color, #6366f1);
    box-shadow: 0 2px 8px -2px rgba(99, 102, 241, 0.4);
}
.gaps-filter-pill.pill-missing.active {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #ffffff;
    box-shadow: 0 2px 8px -2px rgba(245, 158, 11, 0.4);
}
.gaps-filter-pill.pill-covered.active {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
    box-shadow: 0 2px 8px -2px rgba(16, 185, 129, 0.4);
}
.gaps-pill-count {
    padding: 1px 5px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.2);
}

.cg-card {
    background: var(--card-bg, #1a1e28);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.cg-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--primary-color, #6366f1) 45%, transparent);
    box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.25);
}
.cg-card.is-covered {
    border-color: rgba(16, 185, 129, 0.35);
    background: color-mix(in srgb, #10b981 4%, var(--card-bg, #1a1e28));
    border-inline-start: 3px solid #10b981;
}

.cg-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.cg-meta-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.cg-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}
.cg-status-badge.badge-untapped {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}
.cg-status-badge.badge-covered {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.cg-sources-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 4px;
    background: color-mix(in srgb, #6366f1 15%, transparent);
    color: #818cf8;
    border: 1px solid rgba(99, 102, 241, 0.25);
}

.cg-quick-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.cg-action-btn {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    transition: all 0.15s ease;
}
.cg-action-btn:hover {
    background: rgba(99, 102, 241, 0.15);
    color: var(--primary-color, #6366f1);
    border-color: rgba(99, 102, 241, 0.3);
}

.cg-title-wrap {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    margin-bottom: 5px;
}
.cg-icon {
    color: #f59e0b;
    flex-shrink: 0;
    margin-top: 1px;
}
.cg-card.is-covered .cg-icon {
    color: #10b981;
}
.cg-title {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-main, #0f172a);
    line-height: 1.4;
    transition: color 0.15s ease;
}
[data-theme="dark"] .cg-title,
body.dark-theme .cg-title,
.dark .cg-title {
    color: var(--text-main, #f8fafc);
}
.cg-title-wrap:hover .cg-title {
    color: var(--primary-color, #6366f1);
}

.cg-desc {
    font-size: 11px;
    color: var(--text-muted, #94a3b8);
    line-height: 1.4;
    margin-bottom: 8px;
    padding-inline-start: 22px;
}
.cg-footer-actions {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 10px;
    padding-inline-start: 0;
}
.cg-btn {
    width: 100%;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 700;
    padding: 0 14px;
    border-radius: 9px;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
    outline: none;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(139, 92, 246, 0.12));
    border: 1px solid rgba(99, 102, 241, 0.35);
    color: #818cf8;
    box-shadow: 0 2px 8px -2px rgba(99, 102, 241, 0.2);
}
[data-theme="light"] .cg-btn {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.08));
    color: #4f46e5;
    border-color: rgba(99, 102, 241, 0.3);
}
.cg-btn:hover {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-color: #6366f1;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px -2px rgba(99, 102, 241, 0.45);
}
.cg-btn:active {
    transform: scale(0.985);
}
.cg-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cg-btn-txt {
    letter-spacing: 0.1px;
}
.cg-btn.btn-covered {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.28);
    color: #10b981;
    box-shadow: none;
}
[data-theme="light"] .cg-btn.btn-covered {
    background: rgba(16, 185, 129, 0.06);
    border-color: rgba(16, 185, 129, 0.3);
    color: #059669;
}
.cg-btn.btn-covered:hover {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
    box-shadow: 0 4px 14px -2px rgba(16, 185, 129, 0.4);
    transform: translateY(-1px);
}

/* ── Futuristic Statistics Intelligence Suite ── */
#pane-statics {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}
.statics-scroll-area {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 10px 30px !important;
    height: 100%;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto;
}

/* 1. Orbit Dial Card */
.stat-orbit-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--card-bg, #1a1e28) 90%, #6366f1 10%), color-mix(in srgb, var(--card-bg, #1a1e28) 94%, #06b6d4 6%));
    border: 1px solid color-mix(in srgb, #6366f1 24%, var(--border-color, rgba(255, 255, 255, 0.08)));
    box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.2), 0 0 15px -3px rgba(99, 102, 241, 0.12);
    margin-bottom: 14px;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}
.stat-orbit-dial-wrap {
    flex-shrink: 0;
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.stat-orbit-svg-dial {
    position: relative;
    width: 76px;
    height: 76px;
}
.stat-orbit-svg-dial .co-orbit-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.stat-orbit-svg-dial .co-orbit-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 7;
}
[data-theme="light"] .stat-orbit-svg-dial .co-orbit-track {
    stroke: rgba(0, 0, 0, 0.06);
}
.stat-orbit-svg-dial .co-orbit-progress {
    fill: none;
    stroke-width: 7;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.stat-orbit-svg-dial .co-orbit-needle {
    stroke: #ffffff;
    stroke-width: 2.5;
    stroke-linecap: round;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.8));
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.stat-orbit-core {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.stat-orbit-core .orbit-score-val {
    font-size: 19px;
    font-weight: 800;
    color: var(--text-main, #0f172a);
    line-height: 1;
    font-feature-settings: "tnum";
}
[data-theme="dark"] .stat-orbit-core .orbit-score-val,
body.dark-theme .stat-orbit-core .orbit-score-val,
.dark .stat-orbit-core .orbit-score-val {
    color: #ffffff;
}
.stat-orbit-core .orbit-score-max {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--text-muted, #94a3b8);
    margin-top: 2px;
}

.stat-orbit-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.stat-orbit-badge-row {
    margin-bottom: 2px;
}
.stat-health-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.stat-health-badge.badge-optimal {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.stat-health-badge.badge-good {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}
.stat-health-badge.badge-low {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.stat-orbit-title {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
[data-theme="dark"] .stat-orbit-title,
body.dark-theme .stat-orbit-title,
.dark .stat-orbit-title {
    color: var(--text-main, #f8fafc);
}
.stat-orbit-desc {
    margin: 0;
    font-size: 10.5px;
    color: var(--text-muted, #94a3b8);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 2. Deep Telemetry 6-Tile Grid */
.stat-telemetry-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
    width: 100%;
    box-sizing: border-box;
}
.stat-telemetry-card {
    background: var(--card-bg, #1a1e28);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 9px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    box-sizing: border-box;
    transition: all 0.15s ease;
}
.stat-telemetry-card:hover {
    border-color: color-mix(in srgb, var(--primary-color, #6366f1) 35%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px -2px rgba(0, 0, 0, 0.15);
}
.stat-card-head {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}
.stat-icon-wrap {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    flex-shrink: 0;
}
.stat-icon-wrap.icon-blue { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.stat-icon-wrap.icon-green { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.stat-icon-wrap.icon-violet { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
.stat-icon-wrap.icon-amber { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.stat-icon-wrap.icon-cyan { background: rgba(6, 182, 212, 0.15); color: #06b6d4; }
.stat-icon-wrap.icon-indigo { background: rgba(99, 102, 241, 0.15); color: #6366f1; }

.stat-card-lbl {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted, #94a3b8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stat-card-main-val {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-main, #0f172a);
    font-feature-settings: "tnum";
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
[data-theme="dark"] .stat-card-main-val,
body.dark-theme .stat-card-main-val,
.dark .stat-card-main-val {
    color: #ffffff;
}
.stat-card-main-val small {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted, #94a3b8);
}
.stat-card-sub-val {
    font-size: 9.5px;
    color: var(--text-muted, #94a3b8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 3px;
}
.stat-card-sub-val .sub-sep {
    opacity: 0.5;
}

/* 3. Headings Hierarchy Tree */
.stat-headings-box {
    margin-bottom: 14px;
    width: 100%;
    box-sizing: border-box;
}
.stat-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
}
.headings-audit-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    white-space: nowrap;
}
.headings-audit-pill.audit-ok {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.headings-audit-pill.audit-warn {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.headings-hierarchy-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
}
.heading-tag-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--card-bg, #1a1e28) 95%, transparent);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    transition: all 0.15s ease;
    min-width: 0;
    box-sizing: border-box;
}
.heading-tag-pill.active {
    border-color: rgba(99, 102, 241, 0.4);
    background: color-mix(in srgb, #6366f1 10%, var(--card-bg, #1a1e28));
}
.heading-tag-pill .h-tag {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted, #94a3b8);
}
.heading-tag-pill.active .h-tag {
    color: var(--primary-color, #6366f1);
}
.heading-tag-pill .h-count {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--text-main, #0f172a);
    font-feature-settings: "tnum";
}
[data-theme="dark"] .heading-tag-pill .h-count,
body.dark-theme .heading-tag-pill .h-count,
.dark .heading-tag-pill .h-count {
    color: #ffffff;
}

/* 4. Density Toolbar & Rich Table */
.stat-box.table-box.stat-density-box,
.stat-density-box {
    margin-bottom: 24px;
    background: var(--card-bg, #1a1e28);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    padding: 14px 12px 12px;
    box-shadow: 0 4px 18px -4px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    min-height: 450px;
}
.density-total-pill {
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted, #94a3b8);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.density-toolbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
}
.density-filter-pills {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}
.density-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    background: color-mix(in srgb, var(--card-bg, #1a1e28) 95%, transparent);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    color: var(--text-muted, #94a3b8);
    transition: all 0.15s ease;
    user-select: none;
}
.density-filter-pill:hover {
    color: var(--text-main, #ffffff);
    border-color: rgba(99, 102, 241, 0.3);
}
.density-filter-pill.active {
    background: var(--primary-color, #6366f1);
    color: #ffffff;
    border-color: var(--primary-color, #6366f1);
    box-shadow: 0 2px 8px -2px rgba(99, 102, 241, 0.4);
}
.density-filter-pill.pill-good.active {
    background: #10b981;
    border-color: #10b981;
}
.density-filter-pill.pill-low.active {
    background: #3b82f6;
    border-color: #3b82f6;
}
.density-filter-pill.pill-overused.active {
    background: #f59e0b;
    border-color: #f59e0b;
}
.density-filter-pill.pill-crowns.active {
    background: #f59e0b;
    border-color: #f59e0b;
}
.density-filter-pill.pill-lsi.active {
    background: #6366f1;
    border-color: #6366f1;
}
.density-filter-pill.pill-content.active {
    background: #64748b;
    border-color: #64748b;
}
.density-filter-pill.pill-target.active {
    background: #ef4444;
    border-color: #ef4444;
}
.density-filter-pill .pill-cnt {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.25);
}

.density-ngram-pills {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 2px;
}
.ngram-pill {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3.5px 6px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    background: color-mix(in srgb, var(--card-bg, #1a1e28) 95%, transparent);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    color: var(--text-muted, #94a3b8);
    transition: all 0.15s ease;
    user-select: none;
    text-align: center;
}
.ngram-pill:hover {
    color: var(--text-main, #ffffff);
    border-color: rgba(99, 102, 241, 0.3);
}
.ngram-pill.active {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #ffffff;
    border-color: #6366f1;
    box-shadow: 0 2px 8px -2px rgba(99, 102, 241, 0.5);
}

.density-search-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    background: color-mix(in srgb, var(--card-bg, #1a1e28) 95%, transparent);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 7px;
    padding: 0 8px;
    height: 30px;
    width: 100%;
    box-sizing: border-box;
}
.density-search-ico {
    color: var(--text-muted, #94a3b8);
    flex-shrink: 0;
}
.density-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 11px;
    color: var(--text-main, #0f172a);
    min-width: 0;
}
[data-theme="dark"] .density-search-input,
body.dark-theme .density-search-input,
.dark .density-search-input {
    color: var(--text-main, #f8fafc);
}
.density-search-clear {
    border: none;
    background: transparent;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    padding: 2px;
    flex-shrink: 0;
}

/* Density Table Viewport & Rows */
/* Density Table Viewport & Rows (+150px scrollbar length as requested) */
.stat-density-box .table-responsive {
    min-height: 410px;
    max-height: 630px;
    height: 470px;
    overflow-y: auto;
    overflow-x: auto;
    border-radius: 9px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    background: color-mix(in srgb, var(--bg-body, #0f1219) 60%, var(--card-bg, #1a1e28));
    position: relative;
    width: 100%;
    box-sizing: border-box;
}
.density-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
    table-layout: auto;
}
.stat-density-box .density-table th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: color-mix(in srgb, var(--card-bg, #1a1e28) 96%, #000);
    box-shadow: 0 1px 0 var(--border-color, rgba(255, 255, 255, 0.08));
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-muted, #94a3b8);
    padding: 8px 6px;
    white-space: nowrap;
}
.density-table th.th-phrase,
.density-table td.td-kw-name {
    text-align: start;
    width: auto;
}
.density-table th.th-len,
.density-table td.td-len {
    width: 36px;
    text-align: center;
    padding: 6px 2px !important;
}
.density-table th.th-role,
.density-table td.td-role {
    width: 36px;
    text-align: center;
    padding: 6px 2px !important;
}
.density-table th.th-usage,
.density-table td.td-mentions {
    width: 66px;
    text-align: center;
    padding: 6px 3px !important;
}
.density-table th.th-density,
.density-table td.td-density {
    width: 60px;
    text-align: center;
    padding: 6px 4px !important;
}
.density-table th.th-status,
.density-table td.td-status {
    width: 68px;
    text-align: center;
    padding: 6px 4px !important;
}
.density-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.05));
    vertical-align: middle;
}
.density-table-row:hover td {
    background: rgba(255, 255, 255, 0.03);
}
.density-kw-txt {
    font-weight: 600;
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-main, #0f172a);
    cursor: pointer;
    word-break: break-word;
    display: inline-block;
}
[data-theme="dark"] .density-kw-txt,
body.dark-theme .density-kw-txt,
.dark .density-kw-txt {
    color: var(--text-main, #f8fafc);
}
.density-kw-txt:hover {
    color: var(--primary-color, #6366f1);
    text-decoration: underline;
}

/* Iconic Role Badges (Crown, LSI, Target, Custom, Content) */
.density-role-badge {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
    cursor: default;
}
.density-role-badge svg {
    width: 13px;
    height: 13px;
    display: block;
    stroke-width: 2.2;
}
.density-role-badge.role-crown {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
    box-shadow: 0 1px 4px rgba(245, 158, 11, 0.15);
}
.density-role-badge.role-lsi {
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
    border: 1px solid rgba(99, 102, 241, 0.3);
    box-shadow: 0 1px 4px rgba(99, 102, 241, 0.15);
}
.density-role-badge.role-target {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    box-shadow: 0 1px 4px rgba(239, 68, 68, 0.15);
}
.density-role-badge.role-custom {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
    box-shadow: 0 1px 4px rgba(16, 185, 129, 0.15);
}
.density-role-badge.role-content {
    background: rgba(148, 163, 184, 0.12);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.22);
}
.density-role-badge:hover {
    transform: scale(1.08);
}

.density-ngram-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 1.5px 4.5px;
    border-radius: 4px;
    letter-spacing: 0.2px;
    font-feature-settings: "tnum";
    display: inline-block;
    white-space: nowrap;
}
.density-ngram-badge.len-1 { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
.density-ngram-badge.len-2 { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; }
.density-ngram-badge.len-3 { background: rgba(236, 72, 153, 0.12); color: #ec4899; }

/* Compact Count / Target Chip */
.td-mentions {
    white-space: nowrap;
}
.mentions-chip {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 1.5px;
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: -0.3px;
    background: color-mix(in srgb, var(--card-bg) 60%, var(--bg-body));
    padding: 1.5px 4.5px;
    border-radius: 5px;
    border: 1px solid color-mix(in srgb, var(--border-color) 40%, transparent);
}
.mentions-chip .m-val {
    font-weight: 800;
    font-size: 10.5px;
    color: var(--text-main, #0f172a);
}
[data-theme="dark"] .mentions-chip .m-val,
body.dark-theme .mentions-chip .m-val,
.dark .mentions-chip .m-val {
    color: #ffffff;
}
.mentions-chip .m-slash {
    opacity: 0.35;
    font-size: 8.5px;
    color: var(--text-muted);
}
.mentions-chip .m-target {
    font-weight: 600;
    font-size: 9px;
    color: var(--text-muted, #94a3b8);
}

.density-pct-bar-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 44px;
    align-items: center;
}
.density-num {
    font-size: 10.5px;
    font-weight: 700;
    font-feature-settings: "tnum";
}
.density-micro-bar {
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    width: 44px;
}
.density-micro-fill {
    height: 100%;
    border-radius: 2px;
}
.density-micro-fill.good { background: #10b981; }
.density-micro-fill.low { background: #3b82f6; }
.density-micro-fill.overused { background: #f59e0b; }
.density-micro-fill.missing { background: #ef4444; }

.density-status-pill {
    font-size: 9px;
    font-weight: 700;
    padding: 1.5px 5px;
    border-radius: 4px;
    display: inline-block;
    white-space: nowrap;
}
.density-status-pill.good { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.density-status-pill.low { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.density-status-pill.overused { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.density-status-pill.missing { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

/* Empty Table View State */
.density-empty-td {
    padding: 40px 16px !important;
    text-align: center;
}
.density-empty-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-muted, #94a3b8);
}
.density-empty-box p {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main, #0f172a);
}
[data-theme="dark"] .density-empty-box p,
body.dark-theme .density-empty-box p,
.dark .density-empty-box p {
    color: #ffffff;
}
.density-empty-box small {
    font-size: 11px;
    color: var(--text-muted, #94a3b8);
    max-width: 240px;
    line-height: 1.35;
}

/* Deep Scannability & Rhythm 4-Tile Grid */
.stat-rhythm-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 14px;
    width: 100%;
    box-sizing: border-box;
}
@media (min-width: 480px) {
    .stat-rhythm-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
.stat-rhythm-card {
    background: color-mix(in srgb, var(--card-bg, #1a1e28) 92%, #000);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 9px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    box-sizing: border-box;
    transition: all 0.2s ease;
}
.stat-rhythm-card:hover {
    border-color: rgba(99, 102, 241, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.15);
}
.rhythm-icon-val {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.rhythm-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rhythm-icon.icon-amber { background: rgba(245, 158, 11, 0.14); color: #f59e0b; }
.rhythm-icon.icon-rose { background: rgba(244, 63, 94, 0.14); color: #f43f5e; }
.rhythm-icon.icon-emerald { background: rgba(16, 185, 129, 0.14); color: #10b981; }
.rhythm-icon.icon-indigo { background: rgba(99, 102, 241, 0.14); color: #818cf8; }

.rhythm-num {
    font-size: 14px;
    font-weight: 800;
    font-feature-settings: "tnum";
    color: var(--text-main, #0f172a);
}
[data-theme="dark"] .rhythm-num,
body.dark-theme .rhythm-num,
.dark .rhythm-num {
    color: #ffffff;
}
.rhythm-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.rhythm-lbl {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-main, #334155);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
[data-theme="dark"] .rhythm-lbl,
body.dark-theme .rhythm-lbl,
.dark .rhythm-lbl {
    color: #e2e8f0;
}
.rhythm-hint {
    font-size: 8.5px;
    color: var(--text-muted, #94a3b8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Over-Optimization & Keyword Stuffing Safety Card */
.stat-safety-card {
    background: linear-gradient(135deg, color-mix(in srgb, var(--card-bg, #1a1e28) 92%, #10b981 8%), color-mix(in srgb, var(--card-bg, #1a1e28) 96%, #000));
    border: 1px solid color-mix(in srgb, #10b981 25%, var(--border-color, rgba(255, 255, 255, 0.08)));
    border-radius: 11px;
    padding: 10px 12px;
    margin-bottom: 14px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    transition: all 0.25s ease;
}
.stat-safety-card.risk-detected {
    background: linear-gradient(135deg, color-mix(in srgb, var(--card-bg, #1a1e28) 92%, #f59e0b 8%), color-mix(in srgb, var(--card-bg, #1a1e28) 96%, #000));
    border-color: color-mix(in srgb, #f59e0b 35%, var(--border-color, rgba(255, 255, 255, 0.08)));
    box-shadow: 0 4px 16px -4px rgba(245, 158, 11, 0.15);
}
.stat-safety-main {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    min-width: 0;
}
.stat-safety-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    border-radius: 8px;
    flex-shrink: 0;
    min-width: 52px;
    gap: 2px;
}
.stat-safety-badge.safe {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.25);
}
.stat-safety-badge.moderate {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.25);
}
.stat-safety-badge.danger {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.25);
}
.stat-safety-score {
    font-size: 11px;
    font-weight: 800;
    font-feature-settings: "tnum";
}
.stat-safety-info {
    flex: 1;
    min-width: 0;
}
.stat-safety-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 2px;
}
.stat-safety-title {
    margin: 0;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-main, #0f172a);
}
[data-theme="dark"] .stat-safety-title,
body.dark-theme .stat-safety-title,
.dark .stat-safety-title {
    color: #ffffff;
}
.stat-safety-status-tag {
    font-size: 9px;
    font-weight: 700;
    padding: 1.5px 6px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}
.stat-safety-status-tag.safe { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.stat-safety-status-tag.moderate { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.stat-safety-status-tag.danger { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

.stat-safety-desc {
    margin: 0;
    font-size: 10px;
    color: var(--text-muted, #94a3b8);
    line-height: 1.35;
}
.stat-safety-bar-wrap {
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    width: 100%;
}
.stat-safety-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}
.stat-safety-bar-fill.safe { background: #10b981; }
.stat-safety-bar-fill.moderate { background: #f59e0b; }
.stat-safety-bar-fill.danger { background: #ef4444; }

.stat-safety-alert-strip {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.stat-safety-alert-label {
    font-size: 9.5px;
    font-weight: 700;
    color: #f59e0b;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}
.stat-safety-tags {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.stat-safety-tag {
    font-size: 9px;
    font-weight: 600;
    padding: 1.5px 6px;
    border-radius: 4px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.25);
    color: #f59e0b;
}

/* ==========================================================================
   STATISTICS & TELEMETRY SUITE: TOP BAR & EXPANDED WIDE VIEW
   ========================================================================== */

.stat-suite-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    margin-bottom: 12px;
    background: color-mix(in srgb, var(--card-bg) 92%, var(--primary-color) 8%);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.stat-suite-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-suite-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(139, 92, 246, 0.18));
    color: var(--primary-color);
    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.25);
}

.stat-suite-title {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.2px;
}

.stat-expand-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 7px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.stat-expand-view-btn:hover {
    background: var(--primary-color);
    color: #ffffff;
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--primary-glow, rgba(99, 102, 241, 0.35));
}

.stat-expand-view-btn:active {
    transform: translateY(0);
}

/* Modal / Drawer Root */
.stat-expanded-view-root {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: statFadeIn 0.2s ease-out forwards;
}

@keyframes statFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.stat-expanded-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 12, 28, 0.68);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.stat-expanded-drawer {
    position: relative;
    z-index: 2;
    width: min(1200px, 94vw);
    max-height: 90vh;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: statSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes statSlideUp {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Drawer Header */
.stat-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--card-bg) 94%, var(--primary-color) 6%);
    flex-shrink: 0;
}

.stat-drawer-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stat-drawer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
    color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25), inset 0 0 0 1px rgba(99, 102, 241, 0.3);
}

.stat-drawer-titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-drawer-title {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.3px;
}

.stat-drawer-sub {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
}

.stat-drawer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-drawer-close-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.25);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.stat-drawer-close-btn:hover {
    background: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}

.stat-drawer-close-btn:active {
    transform: translateY(0);
}

/* Drawer Body */
.stat-drawer-body {
    padding: 20px 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}

/* Top 2-Column Grid: Orbit Dial + Safety Card */
.stat-drawer-top-grid {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 16px;
    align-items: stretch;
}

.stat-orbit-card.wide-version {
    margin-bottom: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat-telemetry-grid.drawer-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.stat-rhythm-grid.drawer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.headings-hierarchy-grid.drawer-h-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.stat-density-box.expanded-table-box {
    margin-top: 4px;
}

.density-toolbar.expanded-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.density-toolbar.expanded-toolbar .density-ngram-pills,
.density-toolbar.expanded-toolbar .density-filter-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.density-toolbar.expanded-toolbar .density-search-wrap {
    min-width: 260px;
    max-width: 360px;
    flex: 1;
}

.table-responsive.expanded-table-view {
    min-height: 390px;
    max-height: 630px;
    height: 520px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--card-bg);
}

.table-responsive.expanded-table-view .density-table th,
.table-responsive.expanded-table-view .density-table td {
    padding: 9px 12px;
}

/* RTL Support */
[dir="rtl"] .stat-suite-top-bar,
html[dir="rtl"] .stat-suite-top-bar {
    direction: rtl;
}

[dir="rtl"] .stat-drawer-header,
html[dir="rtl"] .stat-drawer-header {
    direction: rtl;
}

[dir="rtl"] .stat-expand-view-btn,
html[dir="rtl"] .stat-expand-view-btn {
    flex-direction: row;
}

[dir="rtl"] .stat-drawer-close-btn,
html[dir="rtl"] .stat-drawer-close-btn {
    flex-direction: row;
}

[dir="rtl"] .stat-drawer-top-grid,
html[dir="rtl"] .stat-drawer-top-grid {
    direction: rtl;
}

/* Responsive Breakpoints for Drawer */
@media (max-width: 1100px) {
    .stat-drawer-top-grid {
        grid-template-columns: 1fr;
    }
    .stat-telemetry-grid.drawer-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .stat-rhythm-grid.drawer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .stat-expanded-drawer {
        width: 98vw;
        max-height: 95vh;
        border-radius: 14px;
    }
    .stat-drawer-header {
        padding: 12px 16px;
    }
    .stat-drawer-body {
        padding: 14px 16px;
    }
    .stat-telemetry-grid.drawer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .headings-hierarchy-grid.drawer-h-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   Unsaved Article Navigation Guard Modal
   ========================================================================== */
#unsavedArticleGuardModal.co-modern-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483647 !important; /* Above dock, all popups, drawers, and headers */
}

.unsaved-guard-modal-card {
    max-width: 480px;
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(245, 158, 11, 0.2);
}

.co-modal-icon-badge.warning {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.unsaved-article-info-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--bg-body) 60%, var(--card-bg));
    border: 1px solid var(--border-color);
    gap: 12px;
}

.unsaved-article-info-card .art-meta-col {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
    flex: 1;
}

.unsaved-article-info-card .art-meta-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.unsaved-article-info-card .art-meta-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.unsaved-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.unsaved-status-badge.status-pending {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.unsaved-status-badge.status-saving {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.unsaved-status-badge.status-saved {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.unsaved-spin-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    animation: pulseDot 1.2s infinite ease-in-out;
}

@keyframes pulseDot {
    0%, 100% { transform: scale(0.85); opacity: 0.6; }
    50% { transform: scale(1.25); opacity: 1; }
}

.unsaved-guard-prompt-desc {
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
}

.unsaved-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 18px;
}

.btn-discard-unsaved {
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-discard-unsaved:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: #ef4444;
    color: #dc2626;
}

.unsaved-footer-right-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* RTL Support */
[dir="rtl"] .unsaved-article-info-card,
html[dir="rtl"] .unsaved-article-info-card {
    text-align: right;
}

[dir="rtl"] .unsaved-modal-footer,
html[dir="rtl"] .unsaved-modal-footer {
    flex-direction: row-reverse;
}