:root {
            --primary-color: #000000;
            --secondary-color: #333333;
            --light-bg: #f8f9fa;
            --border-color: #dee2e6;
            --sidebar-bg: #ffffff;
            --toolbar-bg: #1e1e1e;
            --accent-blue: #0a84ff;
            --danger-red: #e5322d;
            --viewer-bg: #f3f3f3;
        }

        html, body,
        body.bg-light-subtle {
            background-color: var(--light-bg) !important;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

/* ===== Upload screen (merge pattern) ===== */
        .upload-area {
            position: relative;
            cursor: pointer;
            isolation: isolate;
            transition: background-color 0.3s ease, border-color 0.3s ease;
            border: 2px dashed #ced4da;
            border-radius: 12px;
            background: var(--light-bg, #f8f9fa);
            min-height: auto;
        }
        .upload-area:hover,
        .upload-area.dragover {
            background-color: #eef0f2;
            border-color: #6b7280 !important;
        }
        #dropArea,
        .upload-area.card {
            overflow: visible;
            max-width: 100%;
            background: var(--light-bg, #f8f9fa) !important;
            box-shadow: none !important;
            border: 2px dashed #ced4da !important;
        }
        .container.my-5>.row.justify-content-center>.col-lg-8{min-width:0}
        #pdfUpload{position:absolute;width:100%;height:100%;top:0;left:0;opacity:0;cursor:pointer;z-index:10}
        #dropArea.dragover #pdfUpload{pointer-events:none!important}
        #upload-section #dropArea .cloud-upload-btn{
            width:45px;height:45px;border-radius:50%;display:flex;align-items:center;justify-content:center;
            border:2px solid #dee2e6!important;background:#fff!important;color:inherit;
            transition:border-color .3s ease,box-shadow .3s ease,background-color .3s ease;
            cursor:pointer;padding:0!important;position:relative;z-index:100;flex-shrink:0;
            box-shadow:none;line-height:1;
        }
        #upload-section #dropArea .cloud-upload-btn:hover{
            border-color:#000!important;background:#fff!important;
            box-shadow:0 2px 8px rgba(0,0,0,.15);transform:none;
        }
        #upload-section #dropArea .cloud-icon{
            position:relative;display:inline-block;transition:transform .3s ease;z-index:101;flex-shrink:0;margin-bottom:0!important;
        }
        #upload-section #dropArea .cloud-tooltip{display:none!important}
        .upload-pick-wrap{display:inline-flex;align-items:center;justify-content:center;gap:12px;transform:none;position:relative;z-index:20;flex-wrap:nowrap;max-width:100%;box-sizing:border-box}
        .upload-cloud-stack{display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;z-index:220;pointer-events:auto;width:auto;flex:0 0 auto}
        .upload-cloud-stack .cloud-icon,.upload-cloud-stack .cloud-upload-btn{pointer-events:auto}
        .upload-cloud-stack .cloud-icon{margin-bottom:0!important}
        .upload-cloud-spacer{width:44px;flex:0 0 44px;visibility:hidden;pointer-events:none}
        .container.my-5{margin-top:1rem!important;margin-bottom:2rem!important}
        #mergePageHeader{margin-bottom:0!important}
        #mergePageHeader .display-5{font-size:clamp(1.75rem,3.5vw,2.15rem);margin-bottom:.55rem!important;line-height:1.25;font-family:'Cairo','Segoe UI',Tahoma,sans-serif}
        #mergePageHeader .lead{margin-bottom:1.15rem!important;font-size:.98rem;line-height:1.45}
        #selectFilesBtn{font-family:'Cairo','Segoe UI',Tahoma,sans-serif;white-space:nowrap;display:inline-flex;align-items:center;flex-shrink:0}
        #upload-section #dropArea.upload-area{width:min(100%,var(--itqan-tool-panel-w,46.5rem));max-width:min(100%,var(--itqan-tool-panel-w,46.5rem));margin-left:auto;margin-right:auto;padding:.65rem 1.55rem .45rem!important;box-shadow:none!important;overflow:visible!important;background:var(--light-bg,#f8f9fa)!important}
        @media (min-width:992px){#upload-section #dropArea.upload-area{padding-block:.75rem .5rem!important;padding-inline:1.55rem!important}}
        @media (max-width:575.98px){#upload-section #dropArea.upload-area{width:100%;padding:1rem!important}.upload-pick-wrap{transform:none;flex-direction:column!important;width:100%!important;gap:12px!important}#upload-section .upload-cloud-spacer{display:none!important}}
        @media (max-width:768px){.upload-pick-wrap{transform:none}}
        #upload-section #dropArea .card-body{padding:.3rem .85rem .2rem;overflow:visible!important;width:100%;background:transparent!important}
        #upload-section #dropArea .upload-row-wrap{overflow:visible!important;width:100%;display:flex;justify-content:center;align-items:center;flex-wrap:nowrap!important}
        @media (min-width:576px){#upload-section .upload-pick-wrap{flex-wrap:nowrap!important;flex-direction:row!important}#upload-section .upload-cloud-stack{flex-direction:column!important;gap:8px!important}#upload-section .upload-cloud-spacer{display:block}}
        @media (max-width:1199.98px){#upload-section .upload-cloud-stack{flex-direction:row!important;justify-content:center!important;gap:12px!important}}
        #upload-section #dropArea,#upload-section #dropArea.upload-area,#upload-section #dropArea .card-body,#upload-section #dropArea .upload-row-wrap,#upload-section #dropArea .d-flex.justify-content-center,#upload-section #dropArea .upload-pick-wrap,#upload-section #dropArea .upload-cloud-stack,#upload-section #dropArea .cloud-icon{overflow:visible!important}


/* ============ واجهة المحرر ============ */
        #editor-section {
            display: none;
            position: fixed;
            top: 56px;
            left: 0; right: 0; bottom: 0;
            background: var(--viewer-bg);
            z-index: 900;
        }
        #editor-section.active { display: flex; flex-direction: column; }
        /* في وضع التحرير نُبقي المصغّرات واللوحة والشريط السفلي مرئية (مثل محرّرات PDF الاحترافية) */
        #editor-section.editor--editmode .pages-viewer { padding: 24px 0 120px !important; }

        .editor-topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--toolbar-bg);
            color: #fff;
            padding: 8px 14px;
            gap: 10px;
            flex-wrap: wrap;
            overflow: visible;
            position: relative;
            z-index: 40;
        }
        .editor-topbar .tool-group {
            display: flex;
            gap: 4px;
            padding: 0 8px;
            border-left: 1px solid rgba(255,255,255,0.12);
        }
        .editor-topbar .tool-group:last-child { border-left: none; }

        /* لوحة جانبية لوضع «تحرير النص» */
        .edit-text-sidebar {
            display: none;
            width: 272px;
            min-width: 240px;
            flex-shrink: 0;
            background: #fff;
            border-left: 1px solid var(--border-color);
            flex-direction: column;
            overflow: hidden;
        }
        /* أنماط النص تظهر فقط مع أداة «تحرير النص» */
        #editor-section.editor--editmode .edit-text-sidebar { display: none; }
        #editor-section.editor--editmode.edit-text-cat-active .edit-text-sidebar { display: flex; }
        #editor-section.editor--editmode.edit-text-cat-active #editSubToolbar { display: none !important; }
        /* نفس شريط الأنماط مع أداة «نص حر» داخل علق — دون إخفاء شريط الأدوات الفرعي */
        #editor-section.editor--editmode.edit-freetext-style-active .edit-text-sidebar { display: flex; }
        #editor-section.editor--editmode.edit-freetext-style-active #btnRegionEraser { display: none; }
        /* لوحة الطبقات + زر الحفظ أسفلها في وضع التحرير (نازلة من القائمة) */
        #editor-section.editor--editmode .side-panel {
            display: flex;
            order: 3;
            width: 280px;
            min-width: 240px;
            border-right: none;
            border-left: 1px solid var(--border-color);
        }
        #editor-section.editor--editmode.edit-text-cat-active .side-panel,
        #editor-section.editor--editmode.edit-freetext-style-active .side-panel {
            display: none;
        }
        #editor-section.editor--editmode .float-toolbar { display: none !important; }

        /* زر الحفظ الأحمر أسفل القائمة — مثل المرجع */
        .side-panel .sp-foot,
        .edit-text-sidebar .ets-foot {
            padding: 14px 16px 18px;
            border-top: 1px solid #eee;
            background: #fff;
        }
        .side-panel .sp-foot .btn-save,
        .edit-text-sidebar .ets-foot .btn-save {
            width: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0;
            background: #111111;
            background-image: none;
            color: #fff;
            border: 0;
            padding: 14px 18px;
            border-radius: 999px;
            font-weight: 700;
            font-size: 15px;
            line-height: 1.2;
            cursor: pointer;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
            transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
        }
        .side-panel .sp-foot .btn-save:hover:not(:disabled),
        .edit-text-sidebar .ets-foot .btn-save:hover:not(:disabled) {
            background: #000000;
            transform: translateY(-1px);
            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
        }
        .side-panel .sp-foot .btn-save:disabled,
        .edit-text-sidebar .ets-foot .btn-save:disabled {
            background: #d1d5db;
            box-shadow: none;
            cursor: not-allowed;
            transform: none;
            opacity: 1;
        }
        .side-panel .sp-foot .btn-save .btn-save-ico,
        .edit-text-sidebar .ets-foot .btn-save .btn-save-ico {
            display: none !important;
        }

        /* شريط مصغّر أسفل عنصر التعليق المحدد */
        .edit-ann-obj-bar {
            position: fixed;
            z-index: 100050;
            display: none;
            align-items: center;
            gap: 2px;
            padding: 4px 6px;
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14);
            pointer-events: auto;
        }
        .edit-ann-obj-bar.show { display: inline-flex; }
        .edit-ann-obj-bar[hidden] { display: none !important; }
        .edit-ann-obj-bar .eao-btn {
            position: relative;
            width: 34px;
            height: 34px;
            border: none;
            background: transparent;
            border-radius: 8px;
            color: #374151;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            padding: 0;
            margin: 0;
        }
        .edit-ann-obj-bar .eao-btn:hover { background: #f3f4f6; }
        .edit-ann-obj-bar .eao-btn:active { background: #e5e7eb; }
        .edit-ann-obj-bar .eao-color-wrap { overflow: hidden; }
        .edit-ann-obj-bar .eao-color-input {
            position: absolute;
            inset: 0;
            opacity: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
            border: 0;
            padding: 0;
        }
        .edit-ann-obj-bar .eao-rotate {
            background: #2b2f36;
            color: #fff;
            border-radius: 8px;
            width: 36px;
            height: 34px;
            margin-left: 2px;
        }
        .edit-ann-obj-bar .eao-rotate:hover { background: #3a404a; color: #fff; }
        .edit-ann-obj-bar .eao-rotate i { font-size: 13px; pointer-events: none; }

        /* وضع التحرير: مصغّرات يساراً، أنماط النص / لوحة الحفظ يميناً */
        #editor-section.editor--editmode .editor-main {
            direction: ltr;
        }
        #editor-section.editor--editmode .thumbs-col { order: 1; }
        #editor-section.editor--editmode .pages-viewer { order: 2; }
        #editor-section.editor--editmode .side-panel { order: 3; }
        #editor-section.editor--editmode .edit-text-sidebar {
            order: 4;
            border-left: none;
            border-right: 1px solid var(--border-color);
        }
        #editor-section.editor--editmode .edit-text-sidebar .ets-head,
        #editor-section.editor--editmode .edit-text-sidebar .ets-body {
            direction: rtl;
        }
        /* سهم طيّ المصغرات على الحافة الداخلية (بين المصغرات والصفحة) */
        #editor-section.editor--editmode .thumbs-panel {
            border-left: none;
            border-right: 1px solid var(--border-color);
        }
        #editor-section.editor--editmode .thumbs-toggle {
            left: auto;
            right: 0;
            transform: translate(100%, -50%);
            border-right: 1px solid var(--border-color);
            border-left: none;
            border-radius: 0 10px 10px 0;
            box-shadow: 3px 0 10px rgba(0,0,0,0.1);
        }
        #editor-section.editor--editmode .thumbs-toggle:hover {
            box-shadow: 4px 0 14px rgba(0,0,0,0.14);
        }

        #editor-section.editor--editmode #annotateTools { display: none !important; }
        #editor-section.editor--editmode #editTools { display: flex !important; }
        #editor-section.editor--editmode #editSubToolbar { display: flex !important; }
        #editor-section:not(.editor--editmode) #editTools,
        #editor-section:not(.editor--editmode) #editSubToolbar { display: none !important; }

        /* شريط أدوات وضع التحرير */
        .edit-tools-bar {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 4px;
            flex-wrap: wrap;
            flex: 1;
            min-width: 0;
            direction: ltr;
            overflow: visible;
        }
        .edit-tools-bar .edit-cat-group {
            display: flex;
            align-items: center;
            gap: 4px;
            flex-shrink: 0;
            padding-inline: 8px;
            margin-inline: 4px;
            border-inline: 1px solid rgba(255,255,255,0.12);
            overflow: visible;
        }
        .edit-tools-bar .edit-utility-group {
            display: flex;
            align-items: center;
            gap: 4px;
            flex-shrink: 0;
        }
        .edit-tools-bar > .tool-btn.active {
            background: rgba(255,255,255,0.1);
            border-color: rgba(255,255,255,0.12);
            box-shadow: inset 0 -2px 0 #e5322d;
        }
        .edit-cat-btn {
            width: 40px;
            height: 40px;
            min-width: 0;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255,255,255,0.08);
            background: rgba(255,255,255,0.05);
            border-radius: 6px;
            color: #c8c8c8;
            cursor: pointer;
            position: relative;
            transition: color 0.2s, background 0.2s, border-color 0.2s;
        }
        .edit-cat-btn:hover { color: #fff; background: rgba(255,255,255,0.15); }
        .edit-cat-btn.active {
            color: #fff;
            background: rgba(255,255,255,0.1);
            border-color: rgba(255,255,255,0.12);
            box-shadow: inset 0 -2px 0 #e5322d;
        }
        .edit-cat-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            line-height: 1;
        }
        .edit-cat-icon svg { width: 18px; height: 18px; display: block; }
        .edit-cat-btn .tip {
            position: absolute;
            top: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%);
            background: #111;
            color: #fff;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 11px;
            font-family: 'Cairo', Tahoma, sans-serif;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.15s, visibility 0.15s;
            z-index: 10060;
            pointer-events: none;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
        }
        .edit-cat-btn:hover .tip,
        .edit-cat-btn:focus-visible .tip { opacity: 1; visibility: visible; }
        #editor-section.editor--editmode .editor-topbar {
            padding: 6px 14px;
            min-height: 52px;
            align-items: center;
        }
        .edit-subtoolbar {
            display: none;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            min-height: 52px;
            max-height: 52px;
            /* نفس خلفية الشريط الأول (تحرير النص / إدراج / الأشكال…) */
            background: var(--toolbar-bg, #1e1e1e);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            color: #c8c8c8;
            flex-wrap: nowrap;
            overflow: visible; /* ضروري لإظهار ملاحظات التحويم */
            box-sizing: border-box;
            direction: rtl;
            position: relative;
            z-index: 35;
        }
        #editor-section.editor--editmode .edit-subtoolbar { display: flex; }
        .edit-subtoolbar.subtb-annotate,
        .edit-subtoolbar.subtb-shapes,
        .edit-subtoolbar.subtb-insert,
        .edit-subtoolbar.subtb-forms { justify-content: flex-start; }
        .edit-subtoolbar .est-btn {
            width: 36px; height: 36px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.05);
            border-radius: 6px;
            color: #c8c8c8;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            font-size: 14px;
            position: relative;
            transition: color 0.2s, background 0.2s, border-color 0.2s;
        }
        .edit-subtoolbar .est-btn:hover {
            color: #fff;
            background: rgba(255, 255, 255, 0.15);
        }
        .edit-subtoolbar .est-btn.on {
            color: #fff;
            border-color: rgba(255, 255, 255, 0.12);
            background: rgba(255, 255, 255, 0.1);
            box-shadow: inset 0 -2px 0 #e5322d;
        }
        .edit-subtoolbar .est-divider {
            width: 1px; height: 28px; background: rgba(255, 255, 255, 0.12); margin: 0 4px;
        }
        .edit-sub-panel { display: none; align-items: center; gap: 6px; flex-wrap: nowrap; overflow: visible; }
        .edit-sub-panel.active { display: flex; }
        #editSubShapes.edit-sub-panel.active,
        #editSubAnnotate.edit-sub-panel.active {
            flex: 1;
            min-width: 0;
            overflow: visible;
            direction: rtl;
            justify-content: flex-start;
        }
        #editor-section.edit-shapes-active .text-layer {
            pointer-events: none !important;
            z-index: 2 !important;
        }
        #editor-section.edit-shapes-active .page-wrap .canvas-container,
        #editor-section.edit-shapes-active .page-wrap .fab-layer {
            pointer-events: auto !important;
        }
        .edit-annotate-group {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: nowrap;
            flex-shrink: 0;
        }
        .est-annotate-btn {
            width: 32px; height: 32px;
            border: 1px solid transparent;
            background: transparent;
            border-radius: 6px;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            padding: 4px;
            flex-shrink: 0;
            position: relative;
            color: #c8c8c8;
            transition: color 0.2s, background 0.2s, border-color 0.2s;
        }
        .est-annotate-btn:hover {
            color: #fff;
            background: rgba(255, 255, 255, 0.15);
        }
        .est-annotate-btn.on {
            color: #fff;
            border-color: rgba(255, 255, 255, 0.12);
            background: rgba(255, 255, 255, 0.1);
            box-shadow: inset 0 -2px 0 #e5322d;
        }
        .edit-subtoolbar .est-annotate-btn svg path[fill="#abb0c4"],
        .edit-subtoolbar .est-annotate-btn svg path[fill="#868E96"],
        .edit-subtoolbar .est-annotate-btn svg path[fill="#8c8c8c"],
        .edit-subtoolbar .est-annotate-btn svg path[fill="#333"],
        .edit-subtoolbar .est-annotate-btn svg rect[fill="#abb0c4"],
        .edit-subtoolbar .est-annotate-btn svg circle[fill="#868E96"] {
            fill: #c8c8c8;
        }
        .edit-subtoolbar .est-annotate-btn svg path[stroke="#abb0c4"],
        .edit-subtoolbar .est-annotate-btn svg circle[stroke="#868E96"] {
            stroke: #c8c8c8;
        }
        .edit-subtoolbar .est-annotate-btn.on svg path[fill="#abb0c4"],
        .edit-subtoolbar .est-annotate-btn.on svg path[fill="#868E96"],
        .edit-subtoolbar .est-annotate-btn.on svg path[fill="#8c8c8c"],
        .edit-subtoolbar .est-annotate-btn.on svg path[fill="#333"],
        .edit-subtoolbar .est-annotate-btn.on svg rect[fill="#abb0c4"],
        .edit-subtoolbar .est-annotate-btn.on svg circle[fill="#868E96"],
        .edit-subtoolbar .est-annotate-btn:hover svg path[fill="#abb0c4"],
        .edit-subtoolbar .est-annotate-btn:hover svg path[fill="#868E96"],
        .edit-subtoolbar .est-annotate-btn:hover svg path[fill="#8c8c8c"],
        .edit-subtoolbar .est-annotate-btn:hover svg path[fill="#333"],
        .edit-subtoolbar .est-annotate-btn:hover svg rect[fill="#abb0c4"],
        .edit-subtoolbar .est-annotate-btn:hover svg circle[fill="#868E96"] {
            fill: #fff;
        }
        .edit-subtoolbar .est-annotate-btn.on svg path[stroke="#abb0c4"],
        .edit-subtoolbar .est-annotate-btn.on svg circle[stroke="#868E96"],
        .edit-subtoolbar .est-annotate-btn:hover svg path[stroke="#abb0c4"],
        .edit-subtoolbar .est-annotate-btn:hover svg circle[stroke="#868E96"] {
            stroke: #fff;
        }
        .est-annotate-btn svg { width: 22px; height: 22px; display: block; }
        .est-annotate-btn.disabled, .est-annotate-btn:disabled {
            opacity: 0.4; cursor: not-allowed; pointer-events: none;
        }
        .edit-subtoolbar .est-annotate-btn i { font-size: 15px; color: #c8c8c8; }
        .edit-subtoolbar .est-annotate-btn.on i,
        .edit-subtoolbar .est-annotate-btn:hover i { color: #fff; }
        .est-annotate-btn, .est-symbol-btn { position: relative; }
        .est-color-btn { overflow: visible; }
        .est-color-dot {
            position: absolute;
            right: 4px;
            bottom: 4px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #e44234;
            border: 1px solid rgba(0,0,0,0.2);
            pointer-events: none;
            z-index: 1;
        }
        .est-color-input-hit {
            position: absolute !important;
            inset: 0 !important;
            width: 100% !important;
            height: 100% !important;
            opacity: 0 !important;
            border: 0 !important;
            padding: 0 !important;
            margin: 0 !important;
            cursor: pointer !important;
            pointer-events: auto !important;
            z-index: 3;
        }
        #editAnnotateColorPicker:not(.est-color-input-hit) {
            display: none;
        }
        .edit-subtoolbar [data-tip], .edit-subtoolbar .est-btn[data-tip] { position: relative; }
        .edit-subtoolbar [data-tip]::after {
            content: attr(data-tip);
            position: absolute;
            top: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%);
            background: #111;
            color: #fff;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 11px;
            font-family: 'Cairo', Tahoma, sans-serif;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            z-index: 10060;
            transition: opacity 0.15s, visibility 0.15s;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
        }
        .edit-subtoolbar [data-tip]:hover::after,
        .edit-subtoolbar [data-tip]:focus-visible::after {
            opacity: 1;
            visibility: visible;
        }
        .edit-shape-symbols-block {
            display: flex;
            align-items: center;
            gap: 2px;
            flex-wrap: nowrap;
            flex-shrink: 0;
        }
        .edit-shape-symbols {
            display: flex;
            flex-wrap: nowrap;
            gap: 1px;
            align-items: center;
        }
        .est-symbol-btn {
            width: 24px;
            height: 24px;
            border: 1px solid transparent;
            background: transparent;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            line-height: 1;
            color: #e5e5e5;
            position: relative;
            padding: 0;
        }
        .est-symbol-btn:hover {
            background: rgba(255, 255, 255, 0.15);
            color: #fff;
        }
        .est-symbol-btn.on {
            background: rgba(255, 255, 255, 0.1);
            box-shadow: inset 0 -2px 0 #e5322d;
        }

        /* نماذج / قوالب */
        #editSubForms.edit-sub-panel.active {
            flex-wrap: wrap;
            align-items: flex-start;
            gap: 8px;
            max-width: 100%;
            overflow: visible;
        }
        .edit-forms-tools {
            display: flex;
            align-items: center;
            gap: 4px;
            flex-shrink: 0;
        }
        .edit-forms-sep {
            width: 1px;
            height: 28px;
            background: rgba(255,255,255,0.15);
            flex-shrink: 0;
        }
        .edit-forms-templates {
            display: flex;
            flex-direction: column;
            gap: 6px;
            flex: 1;
            min-width: 0;
            max-height: 72px;
            overflow-x: auto;
            overflow-y: auto;
        }
        .edit-forms-lang-group {
            display: flex;
            align-items: center;
            gap: 6px;
            min-width: 0;
        }
        .edit-forms-lang-label {
            flex-shrink: 0;
            font-size: 11px;
            color: #a8a8a8;
            min-width: 42px;
        }
        .edit-forms-chips {
            display: flex;
            flex-wrap: nowrap;
            gap: 4px;
            overflow-x: auto;
            padding-bottom: 2px;
        }
        .edit-forms-chip {
            flex-shrink: 0;
            border: 1px solid rgba(255,255,255,0.12);
            background: rgba(255,255,255,0.06);
            color: #e8e8e8;
            border-radius: 999px;
            padding: 4px 10px;
            font-size: 11px;
            line-height: 1.2;
            cursor: pointer;
            white-space: nowrap;
        }
        .edit-forms-chip:hover {
            background: rgba(255,255,255,0.14);
            color: #fff;
            border-color: rgba(255,255,255,0.22);
        }

        /* نصوص مساعدة داخل الأشرطة الفرعية الداكنة */
        .edit-subtoolbar #editSubInsert > span,
        .edit-subtoolbar #editSubForms > span {
            color: #a8a8a8 !important;
        }

        /* محمّل انتقال الوضع داخل منطقة الصفحات */
        .editor-mode-loader {
            position: absolute;
            inset: 0;
            z-index: 40;
            display: none;
            align-items: center;
            justify-content: center;
            background: rgba(243,243,243,0.82);
            pointer-events: all;
        }
        .editor-mode-loader.active { display: flex; }
        .editor-mode-loader .eml-ring {
            width: 52px; height: 52px;
            border-radius: 50%;
            border: 4px solid #e5e7eb;
            border-top-color: #e5322d;
            animation: emlSpin 0.85s linear infinite;
        }
        @keyframes emlSpin { to { transform: rotate(360deg); } }

        /* لوحة أنماط النص — وضع التحرير */
        .edit-text-styles { padding: 0; }
        .edit-text-styles .ets-section-title {
            font-size: 13px; font-weight: 700; color: #111;
            margin: 0 0 10px;
        }
        .edit-text-styles label {
            display: block; font-size: 12px; color: #6b7280; margin: 10px 0 4px;
        }
        .edit-text-styles .ets-row {
            display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
        }
        .edit-text-styles .ets-fmt-btn {
            width: 34px; height: 34px;
            border: 1px solid #d1d5db; background: #fff;
            border-radius: 6px; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            color: #374151; font-size: 14px;
        }
        .edit-text-styles .ets-fmt-btn.on {
            border-color: #0a84ff; background: #e8f4ff; color: #0a3d7a;
        }
        .edit-text-styles select {
            width: 100%; padding: 8px 10px;
            border: 1px solid #d1d5db; border-radius: 8px;
            font-size: 13px; background: #fff;
        }
        .edit-text-styles .ets-color-dot {
            width: 28px; height: 28px; border-radius: 50%;
            border: 2px solid #d1d5db; cursor: pointer;
        }
        .edit-text-styles .ets-hint {
            font-size: 12px; color: #6b7280; line-height: 1.6;
            margin: 0 0 12px;
        }
        .edit-text-sidebar .ets-head {
            padding: 12px 14px;
            font-weight: 700;
            font-size: 15px;
            color: #111;
            border-bottom: 1px solid #e5e7eb;
            background: #fafafa;
        }
        .edit-text-sidebar .ets-body {
            padding: 12px 14px;
            font-size: 13px;
            color: #4b5563;
            line-height: 1.65;
            overflow-y: auto;
            flex: 1;
        }
        .edit-text-sidebar .ets-btn {
            width: 100%;
            margin-top: 10px;
            padding: 10px 12px;
            border-radius: 8px;
            border: 1px solid #d1d5db;
            background: #fff;
            font-weight: 600;
            font-size: 13px;
            cursor: pointer;
            color: #111;
        }
        .edit-text-sidebar .ets-btn:hover { background: #f9fafb; }
        .edit-text-sidebar .ets-btn.on {
            border-color: #0a84ff;
            background: #e8f4ff;
            color: #0a3d7a;
        }
        .edit-text-sidebar .ets-foot {
            padding: 12px 16px;
            border-top: 1px solid var(--border-color);
            background: #fafafa;
            flex-shrink: 0;
        }
        .region-eraser-surface {
            position: absolute;
            inset: 0;
            z-index: 12;
            cursor: crosshair;
            background: transparent;
        }
        .region-eraser-preview {
            position: absolute;
            border: 2px dashed #0a84ff;
            background: rgba(10,132,255,0.08);
            pointer-events: none;
            z-index: 13;
            box-sizing: border-box;
        }
        .annotate-eraser-surface {
            position: absolute;
            inset: 0;
            z-index: 14;
            cursor: crosshair;
            background: transparent;
        }
        .annotate-eraser-preview {
            position: absolute;
            border: 1px solid rgba(10, 132, 255, 0.55);
            background: rgba(10, 132, 255, 0.22);
            pointer-events: none;
            z-index: 15;
            box-sizing: border-box;
        }

        .tool-btn {
            width: 40px; height: 40px;
            border: 1px solid rgba(255,255,255,0.08);
            background: rgba(255,255,255,0.05);
            border-radius: 6px;
            color: #fff;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
            transition: 0.2s;
            position: relative;
        }
        .tool-btn:hover { background: rgba(255,255,255,0.15); }
        .tool-btn.active { background: var(--accent-blue); border-color: var(--accent-blue); }
        .tool-btn .tip {
            position: absolute;
            top: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%);
            background: #111;
            color: #fff;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 11px;
            font-family: 'Cairo', Tahoma, sans-serif;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.15s, visibility 0.15s;
            z-index: 10060;
            pointer-events: none;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
        }
        .tool-btn:hover .tip,
        .tool-btn:focus-visible .tip { opacity: 1; visibility: visible; }

        /* نفس نمط لوحات editpdf (سطح أبيض، حد فاتح، زوايا ناعمة) */
        .shape-popover {
            position: absolute;
            top: calc(100% + 4px);
            left: 50%;
            transform: translateX(-50%);
            background: #fff;
            color: #1a1a1a;
            border: 1px solid #d8d8d8;
            border-radius: 8px;
            padding: 6px 4px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.12);
            display: none;
            z-index: 120;
            min-width: 280px;
        }
        .shape-popover.show { display: block; }
        .shape-popover .sp-item {
            padding: 9px 12px; cursor: pointer;
            display: flex; align-items: center; gap: 10px;
            border-radius: 6px; font-size: 13px;
            color: #1a1a1a;
        }
        .shape-popover .sp-item:hover { background: #f0f0f0; }
        .shape-popover .sp-item i { color: #5c5c5c; width: 1.1em; }
        .shape-popover .sp-grid {
            display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; padding: 2px 4px 4px;
        }
        .shape-popover .sp-symbol {
            padding: 8px; text-align: center; cursor: pointer;
            border-radius: 6px; font-size: 20px;
            color: #333;
        }
        .shape-popover .sp-symbol:hover { background: #f0f0f0; }
        .shape-popover hr { margin: 6px 0; border: 0; height: 1px; background: #e4e4e4; }
        .shape-popover .sp-section-label { font-size: 11px; color: #6b7280; padding: 6px 10px 4px; letter-spacing: 0.02em; font-weight: 500; }

        /* ============ المحتوى الرئيسي للمحرر ============ */
        .editor-main {
            display: flex;
            flex: 1;
            min-height: 0;
            overflow: visible;
            position: relative;
            z-index: 1;
        }

        /* شريط المصغرات */
        .thumbs-col {
            position: relative;
            flex-shrink: 0;
            width: 140px;
            transition: width 0.25s ease;
            overflow: visible;
        }
        .thumbs-col.collapsed {
            width: 0;
        }
        .thumbs-wrap {
            width: 140px;
            height: 100%;
            overflow: hidden;
            transition: width 0.25s ease, opacity 0.2s ease;
        }
        .thumbs-col.collapsed .thumbs-wrap {
            width: 0;
            opacity: 0;
        }
        .thumbs-panel {
            width: 140px;
            height: 100%;
            background: #fff;
            border-left: 1px solid var(--border-color);
            overflow-x: hidden;
            overflow-y: auto;
            padding: 10px 6px;
        }
        .thumbs-col.collapsed .thumbs-panel {
            pointer-events: none;
        }
        .thumbs-toggle {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(-100%, -50%);
            z-index: 30;
            width: 22px;
            height: 52px;
            padding: 0;
            border: 1px solid var(--border-color);
            border-right: none;
            border-radius: 10px 0 0 10px;
            background: #fff;
            color: #444;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: -3px 0 10px rgba(0,0,0,0.1);
            transition: background 0.2s, color 0.2s, box-shadow 0.2s;
        }
        .thumbs-toggle:hover {
            background: #f3f4f6;
            color: #111;
            box-shadow: -4px 0 14px rgba(0,0,0,0.14);
        }
        .thumbs-toggle i {
            font-size: 11px;
            transition: transform 0.25s ease;
        }
        .thumbs-col.collapsed .thumbs-toggle i {
            transform: rotate(180deg);
        }
        .thumb-item {
            border: 2px solid transparent;
            border-radius: 6px;
            margin-bottom: 10px;
            padding: 4px;
            cursor: pointer;
            text-align: center;
            transition: 0.2s;
            background: #fafafa;
        }
        .thumb-item:hover { border-color: #bbb; }
        .thumb-item.active { border-color: var(--accent-blue); background: #e6f4ff; }
        .thumb-item img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 3px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.15);
        }
        .thumb-item .thumb-num {
            font-size: 12px; color: #555; margin-top: 4px;
        }

        /* منطقة عرض الصفحات */
        .pages-viewer {
            flex: 1;
            background: var(--viewer-bg);
            overflow: auto;
            padding: 32px 0 120px;
            display: flex;
            flex-direction: column;
            align-items: center;
            scroll-behavior: smooth;
            position: relative;
        }
        .pages-viewer #adContainerViewer {
            margin-top: 16px;
            flex-shrink: 0;
            text-align: center;
        }
        .pages-viewer #adContainerViewer ins.adsbygoogle {
            display: inline-block !important;
            width: min(100%, 728px) !important;
            max-width: 100% !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }
        .pages-stack {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 30px;
        }
        .pages-stack.layout-double {
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            gap: 16px;
        }
        .page-wrap {
            position: relative;
            background: #fff;
            box-shadow: 0 0 20px rgba(0,0,0,0.18);
        }
        .page-wrap canvas { display: block; }
        .page-wrap .page-bg {
            position: absolute; inset: 0;
            width: 100%; height: 100%;
            z-index: 1;
        }
        .page-wrap .fab-layer {
            position: absolute; inset: 0;
            width: 100%; height: 100%;
            z-index: 12;
        }
        .page-wrap .canvas-container {
            position: absolute !important;
            inset: 0;
            width: 100% !important;
            height: 100% !important;
            z-index: 12;
        }
        .page-wrap .canvas-container canvas {
            width: 100% !important;
            height: 100% !important;
        }
        .page-wrap.hidden { display: none; }

        /* شريط جانبي أيمن (الطبقات والخصائص) */
        .side-panel {
            width: 310px;
            background: var(--sidebar-bg);
            border-right: 1px solid var(--border-color);
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            overflow: hidden;
        }
        .side-panel .sp-head {
            padding: 14px 16px;
            font-weight: 700;
            border-bottom: 1px solid var(--border-color);
            font-size: 16px;
            color: #222;
            text-align: center;
            width: 100%;
            display: block;
        }
        .side-panel .sp-body {
            flex: 1;
            overflow-y: auto;
            padding: 14px 16px;
        }
        .side-panel .sp-foot {
            padding: 12px 16px;
            border-top: 1px solid var(--border-color);
            background: #fafafa;
        }

        .layers-section .layer-title {
            display: flex; justify-content: space-between;
            align-items: center;
            font-weight: 700; font-size: 14px; color: #222;
            margin-bottom: 10px;
        }
        .layers-list {
            display: flex; flex-direction: column; gap: 6px;
            max-height: 200px; overflow-y: auto;
            border: 1px solid #eee; border-radius: 6px;
            padding: 6px;
        }
        .layers-list:empty::before {
            content: attr(data-empty-msg);
            display: block; color: #999; text-align: center;
            font-size: 13px; padding: 12px 0;
        }
        .layer-row {
            display: flex; align-items: center; justify-content: space-between;
            padding: 6px 8px; border-radius: 4px;
            cursor: pointer; font-size: 13px;
            background: #fafafa;
        }
        .layer-row:hover { background: #eef5ff; }
        .layer-row.selected { background: #d9ecff; }
        .layer-row .l-label {
            display: flex; align-items: center; gap: 8px;
            color: #3b82f6; font-weight: 600;
        }
        .layer-row .l-actions {
            display: flex; gap: 3px;
        }
        .layer-row .l-actions button {
            width: 24px; height: 24px; padding: 0;
            border: 1px solid #ddd; background: #fff;
            border-radius: 4px; cursor: pointer;
            font-size: 11px;
            display: flex; align-items: center; justify-content: center;
            color: #555;
        }
        .layer-row .l-actions button:hover {
            background: #f0f0f0; color: #111;
        }
        .layer-row .l-actions .l-del { color: #e5322d; }
        .layer-row .l-drag {
            cursor: grab;
            color: #888;
            touch-action: none;
        }
        .layer-row .l-drag:active { cursor: grabbing; }
        .layer-row.dragging { opacity: 0.55; }
        .layer-row.drag-over {
            box-shadow: inset 0 3px 0 #0a84ff;
            background: #e8f4ff;
        }
        .layer-row.touch-dragging { opacity: 0.75; outline: 2px dashed #0a84ff; }
        .layer-row .l-rename-input {
            flex: 1;
            min-width: 0;
            max-width: 160px;
            font-size: 13px;
            font-weight: 600;
            padding: 4px 6px;
            border: 1px solid #111;
            border-radius: 4px;
            color: #111;
        }

        .clear-all-btn {
            background: #fff0f0; border: 1px solid #ffc8c8;
            color: #e5322d; border-radius: 6px;
            padding: 4px 10px; font-size: 12px; cursor: pointer;
            display: inline-flex; align-items: center; gap: 4px;
        }
        .clear-all-btn:hover { background: #ffe4e4; }

        .props-section {
            margin-top: 18px;
        }
        .props-section .p-title {
            font-weight: 700; font-size: 14px; color: #222;
            margin-bottom: 10px;
        }
        .props-section label {
            display: block; font-size: 12px; color: #555;
            margin-bottom: 4px; margin-top: 10px;
        }
        .props-section .form-control,
        .props-section .form-select,
        .props-section textarea,
        .props-section input[type="number"] {
            font-size: 13px;
            padding: 6px 8px;
        }
        .props-section textarea { resize: vertical; min-height: 46px; }

        .quick-colors { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
        .q-color {
            width: 22px; height: 22px; border-radius: 4px;
            border: 1px solid #ddd; cursor: pointer;
        }
        .q-color:hover { transform: scale(1.1); border-color: #333; }
        .q-color.transparent {
            background: repeating-conic-gradient(#ddd 0% 25%, #fff 0% 50%) 50% / 8px 8px;
        }

        .btn-save {
            width: 100%;
            background: linear-gradient(135deg, #1a1a1a, #000000);
            color: #fff; border: 0;
            padding: 12px;
            border-radius: 8px;
            font-weight: 700; font-size: 15px;
            cursor: pointer;
            transition: 0.2s;
        }
        .btn-save:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.35); }
        .btn-save:disabled {
            background: #bbb; cursor: not-allowed; transform: none; box-shadow: none;
        }
        /* زر المساعدة العائم من الهيدر: أسود عند فتح محرر PDF فقط */
        body:has(#editor-section.active) .float-action-btn.float-action-btn--accent {
            background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
            border-color: rgba(255,255,255,0.12);
        }
        body:has(#editor-section.active) .float-action-btn.float-action-btn--accent::after {
            border-color: rgba(255,255,255,0.22);
        }

        /* شريط العرض السفلي — يتمركز فوق منتصف الصفحة المعروضة */
        .viewbar {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: #1e1e1e;
            color: #fff;
            border-radius: 8px;
            padding: 6px 14px;
            display: flex; align-items: center; gap: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.4);
            z-index: 950;
            transition: left 0.2s ease, transform 0.2s ease;
            will-change: left, transform;
        }
        .viewbar button {
            background: transparent; border: 0; color: #fff;
            width: 32px; height: 32px; border-radius: 4px;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
        }
        .viewbar button:hover { background: rgba(255,255,255,0.12); }
        .viewbar input[type="text"] {
            width: 50px; background: #000; border: 1px solid #444;
            color: #fff; text-align: center; border-radius: 4px;
            padding: 3px; font-size: 13px;
        }
        .viewbar .vb-divider { width: 1px; height: 20px; background: #444; }


        /* ============ تنبيهات ============ */
        .alert-custom {
            position: fixed; top: 20px; left: 50%;
            transform: translateX(-50%);
            z-index: 9999; min-width: 280px;
            border-radius: 10px; padding: 14px 20px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.2);
            animation: slideDown 0.3s ease-out;
        }
        @keyframes slideDown {
            from { opacity: 0; transform: translate(-50%, -20px); }
            to { opacity: 1; transform: translate(-50%, 0); }
        }

        /* ============ شاشة التحميل ============ */
        #loadingOverlay {
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.75);
            display: none; align-items: center; justify-content: center;
            z-index: 9999; flex-direction: column; color: #fff;
        }
        #loadingOverlay.active { display: flex; }

        /* ============ مبدّل الوضع (علق / تحرير) ============ */
        .mode-switch {
            display: inline-flex;
            background: rgba(255,255,255,0.08);
            border-radius: 999px;
            padding: 3px;
            position: relative;
            border: 1px solid rgba(255,255,255,0.12);
        }
        .mode-switch .ms-opt {
            position: relative;
            z-index: 2;
            padding: 6px 18px;
            font-size: 13px;
            color: #c8c8c8;
            border-radius: 999px;
            cursor: pointer;
            display: flex; align-items: center; gap: 6px;
            transition: color 0.25s;
            user-select: none;
        }
        .mode-switch .ms-opt.active { color: #fff; }
        .mode-switch .ms-opt i { font-size: 12px; }
        .mode-switch .ms-highlight {
            position: absolute;
            top: 3px; bottom: 3px;
            background: var(--accent-blue);
            border-radius: 999px;
            transition: all 0.25s cubic-bezier(.4,.8,.3,1.2);
            z-index: 1;
        }
        .mode-switch .ms-badge {
            background: #ffc233;
            color: #212121;
            font-weight: 700;
            font-size: 10px;
            padding: 1px 6px;
            border-radius: 10px;
            margin-inline-start: 4px;
        }

        /* شريط خصائص العنصر: لون خلفية مطابق لشريط المحرر العلوي (var(--toolbar-bg)) */
        .float-toolbar {
            --editpdf-icon: #c4c4c4;
            --editpdf-sep: rgba(255, 255, 255, 0.12);
            position: relative;
            left: auto;
            right: auto;
            top: auto;
            transform: none;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            background: var(--toolbar-bg);
            border-radius: 0;
            box-shadow: none;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            padding: 6px 12px 7px;
            display: none;
            /* فوق منطقة الـ canvas حتى نقرات لوحة الألوان لا تصل إلى Fabric وتلغي التحديد */
            z-index: 80;
            align-items: center;
            flex-wrap: wrap;
            flex-shrink: 0;
            /* نفس ترتيب المرجع (يسار → يمين): حذف، عتامة، ثم باقي الأدوات */
            direction: ltr;
            justify-content: center;
            gap: 0;
        }
        .float-toolbar.show { display: flex; }
        .float-toolbar .editpdf__menu__row {
            display: inline-flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0;
            direction: ltr;
        }
        .float-toolbar > *:not(:first-child) {
            border-inline-start: 1px solid var(--editpdf-sep);
            padding-inline-start: 8px;
            margin-inline-start: 4px;
        }
        .editpdf__menu__block {
            display: inline-flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 6px;
            padding: 0 6px 0 8px;
        }
        .editpdf__menu__block + .editpdf__menu__block {
            border-inline-start: 1px solid var(--editpdf-sep);
        }
        .editpdf__menu__block .wrapper {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .color-palette-wrapper {
            position: relative;
        }
        .color-palette-wrapper .fillColor,
        .color-palette-wrapper .strokeColor,
        .color-palette-wrapper .textFillColor,
        .color-palette-wrapper .textBackgroundColor {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
            padding: 2px 6px;
            border-radius: 6px;
            border: 1px solid #d8d8d8;
            background: #fff;
        }
        .color-palette-wrapper .fillColor:hover,
        .color-palette-wrapper .strokeColor:hover,
        .color-palette-wrapper .textFillColor:hover,
        .color-palette-wrapper .textBackgroundColor:hover {
            background: #f0f0f0;
        }
        .unfold-arrow-icon { flex-shrink: 0; opacity: 0.75; }
        .float-toolbar .textAlignment {
            display: inline-flex !important;
            align-items: center;
            gap: 4px;
            padding: 4px 8px;
            border-radius: 6px;
            border: 1px solid #d8d8d8;
            background: #fff;
            cursor: pointer;
        }
        .float-toolbar .textAlignment:hover { background: #f0f0f0; }
        .float-toolbar .textAlignment #ftAlignIcon { color: #333 !important; }
        .float-toolbar .unfold-arrow-icon path { fill: #5c5c5c; }
        .float-toolbar .ft-opacity-block .ft-opacity-label {
            color: #e0e0e0 !important;
        }
        .color-sample {
            width: 22px;
            height: 22px;
            border-radius: 4px;
            border: 1px solid rgba(0,0,0,0.12);
        }
        .color-sample.for-border,
        .color-sample[data-tr="1"] {
            background: repeating-conic-gradient(#d8d8d8 0% 25%, #f5f5f5 0% 50%) 50% / 8px 8px;
        }
        .action-button {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            cursor: pointer;
            border: 1px solid #d8d8d8;
            background: #fff;
            color: #333;
            transition: background 0.15s, box-shadow 0.15s;
        }
        .action-button:hover { background: #f0f0f0; }
        .action-button:active { background: #e4e4e4; }
        .editpdf__submenu__btn {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .editpdf__submenu__btn.recycle-bin {
            width: 32px; height: 32px;
            border: 1px solid #d8d8d8;
            border-radius: 6px;
            background: #fff;
            cursor: pointer;
            color: #333;
        }
        .float-toolbar .editpdf__submenu__btn.recycle-bin:hover { background: #ffeeee; }
        .editpdf__submenu__input-number {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            height: 30px;
            padding: 0 4px 0 6px;
            border: 1px solid #d8d8d8;
            border-radius: 8px;
            background: #fff;
        }
        .editpdf__submenu__input-number input[type="text"] {
            width: 52px;
            border: none;
            background: transparent;
            font-size: 12px;
            color: #333;
            text-align: center;
            padding: 0 2px;
        }
        .editpdf__submenu__input-number .addition-arrow,
        .editpdf__submenu__input-number .substraction-arrow {
            cursor: pointer;
            padding: 2px 4px;
            border-radius: 3px;
        }
        .editpdf__submenu__input-number .addition-arrow:hover,
        .editpdf__submenu__input-number .substraction-arrow:hover {
            background: #e8e8e8;
        }
        .editpdf__submenu__input-number.disabled {
            opacity: 0.45;
            pointer-events: none;
        }
        .switch-button {
            width: 32px; height: 32px;
            display: flex; align-items: center; justify-content: center;
            border: 1px solid #d8d8d8;
            border-radius: 6px;
            background: #fff;
            color: #333;
            cursor: pointer;
        }
        .switch-button:hover { background: #f0f0f0; }
        .switch-button.switch-on { background: #fff; border-color: #0a84ff; box-shadow: 0 0 0 1px rgba(10,132,255,0.25); }
        .switch-button.switch-on .editpdf-icon path { fill: #0a84ff; }
        /* قوائم <select> بنمط editpdf: إخفاء المظهر الافتراضي + سهم + حد */
        .editpdf-select-wrap { display: inline-block; position: relative; vertical-align: middle; }
        .float-toolbar .editpdf__select,
        #editor-section .float-toolbar select.editpdf__select {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            color-scheme: light;
            height: 30px;
            min-width: 0;
            max-width: 200px;
            margin: 0;
            padding: 5px 28px 5px 9px;
            border: 1px solid #c8c8c8;
            border-radius: 6px;
            background-color: #fff;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 6 4'%3E%3Cpath fill='%23404040' fill-opacity='0.95' fill-rule='evenodd' d='M5.736 0c.062 0 .122.02.17.058a.24.24 0 0 1 .034.351l-2.736 3.1c-.01.012-.022.022-.034.032-.112.088-.278.074-.372-.032L.06.41A.24.24 0 0 1 0 .249C0 .112.118 0 .264 0h5.472z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 7px center;
            background-size: 9px auto;
            box-shadow: none;
            font-size: 13px;
            line-height: 1.2;
            color: #1a1a1a;
            cursor: pointer;
            font-family: inherit;
            text-align: left;
        }
        .float-toolbar .editpdf__select:hover {
            border-color: #a8a8a8;
            background-color: #fafafa;
        }
        .float-toolbar .editpdf__select:focus {
            outline: none;
            border-color: var(--accent-blue);
            box-shadow: 0 0 0 1px rgba(10, 132, 255, 0.45);
        }
        .float-toolbar .editpdf__select option,
        .float-toolbar .editpdf__select optgroup {
            background: #fff;
            color: #1a1a1a;
            font-size: 13px;
            padding: 6px 10px;
        }
        .ft-font-select { min-width: 128px; max-width: 220px; }
        .ft-font-select option { font-size: 14px; }
        .ft-size-select {
            min-width: 50px;
            max-width: 64px;
            text-align: center;
            text-align-last: center;
            padding: 5px 24px 5px 7px;
            background-position: right 5px center;
        }
        .ft-stroke-label {
            font-size: 12px;
            color: #555;
            white-space: nowrap;
        }
        .float-toolbar .ft-stroke-label { color: #e0e0e0; }
        .ft-opacity-block .editpdf__range-wrap { display: inline-flex; align-items: center; gap: 6px; }
        .float-toolbar .editpdf__range {
            -webkit-appearance: none;
            appearance: none;
            width: 100px;
            height: 8px;
            padding: 0;
            margin: 0;
            border: 0;
            background: transparent;
            cursor: pointer;
            vertical-align: middle;
        }
        .float-toolbar .editpdf__range::-webkit-slider-runnable-track {
            height: 4px;
            border-radius: 2px;
            background: rgba(255, 255, 255, 0.22);
        }
        .float-toolbar .editpdf__range::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 14px; height: 14px;
            margin-top: -5px;
            border-radius: 50%;
            background: #0a84ff;
            border: 2px solid #fff;
            box-shadow: 0 1px 3px rgba(0,0,0,0.35);
            cursor: pointer;
        }
        .float-toolbar .editpdf__range::-moz-range-track {
            background: rgba(255, 255, 255, 0.22);
            height: 4px;
            border-radius: 2px;
            border: 0;
        }
        .float-toolbar .editpdf__range::-moz-range-thumb {
            width: 14px; height: 14px;
            border: 2px solid #fff;
            border-radius: 50%;
            background: #0a84ff;
            box-shadow: 0 1px 3px rgba(0,0,0,0.35);
            cursor: pointer;
            box-sizing: border-box;
        }
        .float-toolbar .ft-opacity-block .leftside-icon path[fill="#47474F"] { fill: #b8b8b8; }
        .ft-pop, .ft-pop.contextual-menu-wrapper { position: relative; }
        .float-toolbar .ft-pop-menu {
            position: absolute;
            top: calc(100% + 4px);
            left: 0;
            right: auto;
            min-width: 196px;
            display: none;
            z-index: 200;
            background: #fff;
            border: 1px solid #d8d8d8;
            border-radius: 8px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.1);
            padding: 5px 4px;
        }
        .float-toolbar .ft-pop-menu.show { display: block; }
        .float-toolbar .ft-pop-menu .ft-opt {
            padding: 9px 12px;
            cursor: pointer;
            font-size: 13px;
            line-height: 1.3;
            border-radius: 6px;
            display: flex; align-items: center; gap: 8px;
            color: #1a1a1a;
        }
        .float-toolbar .ft-pop-menu .ft-opt i { color: #5c5c5c; width: 1.1em; }
        .float-toolbar .ft-pop-menu .ft-opt:hover { background: #f0f0f0; }
        .float-toolbar .ft-pop-menu .ft-opt.active { color: var(--accent-blue); }
        .ft-group-hidden { display: none !important; }
        .ft-text-only, .ft-shape-only { display: none; align-items: center; flex-wrap: wrap; }

        /* لوحة ألوان — نفس حد/ظل القوائم */
        .float-toolbar .color-popover,
        .color-palette-wrapper .color-popover {
            position: absolute;
            top: calc(100% + 4px);
            left: 0;
            right: auto;
            background: #fff;
            border: 1px solid #d8d8d8;
            border-radius: 8px;
            padding: 10px 8px 10px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.1);
            display: none;
            z-index: 200;
            min-width: 196px;
        }
        .color-popover.show { display: block; }
        .color-popover .cp-title {
            font-size: 11px;
            font-weight: 500;
            color: #6b7280;
            letter-spacing: 0.02em;
            margin: 0 0 8px 4px;
        }
        .color-popover .cp-row {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 4px;
            max-width: 220px;
        }
        .ft-stroke-width-wrap {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .float-toolbar .editpdf__select.ft-stroke-select {
            min-width: 72px;
            max-width: 88px;
            padding: 5px 24px 5px 8px;
            background-position: right 5px center;
        }
        .color-popover .cp-sw {
            width: 22px; height: 22px;
            border-radius: 4px;
            border: 1px solid rgba(0,0,0,0.08);
            cursor: pointer;
        }
        .color-popover .cp-sw.tr {
            background:
                linear-gradient(45deg, transparent 45%, #e5322d 45%, #e5322d 55%, transparent 55%) center/100% 100% no-repeat,
                repeating-conic-gradient(#ddd 0% 25%, #fff 0% 50%) 50% / 8px 8px;
        }
        .color-popover .cp-sw:hover { transform: scale(1.1); }
        .float-toolbar .color-popover .cp-custom {
            width: 100%; height: 32px;
            border: 1px solid #c8c8c8;
            border-radius: 5px;
            margin-top: 8px;
            background: #fff;
        }

        /* ============ طبقة النصوص (وضع التحرير) — مربعات من إحداثيات PDF الثابتة ============ */
        .text-layer {
            position: absolute; inset: 0;
            overflow: hidden;
            opacity: 1;
            line-height: 1;
            z-index: 15;
            pointer-events: none;
        }
        .text-layer.active { pointer-events: auto; }
        .text-layer.text-layer--interactive {
            z-index: 15;
            pointer-events: auto;
        }
        .text-layer > span {
            color: transparent;
            position: absolute;
            white-space: pre;
            cursor: text;
            transform-origin: 0% 0%;
            user-select: none;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            overflow: visible;
            direction: ltr;
            unicode-bidi: isolate;
        }
        .text-layer > span::selection {
            background: rgba(10,132,255,0.35);
        }
        .text-layer.edit-mode > span.te-box {
            cursor: pointer;
            outline: 1.5px dashed rgba(10, 132, 255, 0.9);
            outline-offset: 0;
            border-radius: 1px;
            box-shadow: none;
            pointer-events: auto !important;
            /* شفاف تماماً — نص PDF الأصلي يظهر وحده بدون شبح مزدوج */
            color: transparent !important;
            -webkit-text-fill-color: transparent !important;
        }
        .text-layer.edit-mode > span.te-box:hover {
            outline-color: rgba(10, 132, 255, 1);
            background: rgba(10, 132, 255, 0.1);
            color: transparent !important;
            -webkit-text-fill-color: transparent !important;
        }
        /* تظليل/تسطير النص: تحديد أصلي + مؤشر I-beam */
        .text-layer.text-layer--markup {
            pointer-events: auto !important;
            cursor: text !important;
            user-select: text;
            -webkit-user-select: text;
            z-index: 20;
        }
        .text-layer.text-layer--markup > span,
        .text-layer.text-layer--markup > span.te-box {
            cursor: text !important;
            user-select: text !important;
            -webkit-user-select: text !important;
            outline: none !important;
            box-shadow: none !important;
            background: transparent !important;
            pointer-events: auto !important;
            color: transparent !important;
            -webkit-text-fill-color: transparent !important;
        }
        .text-layer.text-layer--markup > span:hover,
        .text-layer.text-layer--markup > span.te-box:hover {
            outline: none !important;
            background: transparent !important;
        }
        .text-layer.text-layer--markup > span.te-markup-preview,
        .text-layer.text-layer--markup > span.te-box.te-markup-preview {
            background: transparent !important;
        }
        .text-layer .te-markup-drag-band { display: none !important; }
        .text-layer.text-layer--markup > span::selection,
        .text-layer.text-layer--markup > span.te-box::selection {
            background: var(--annotate-hilite, rgba(228, 66, 52, 0.45));
            color: transparent;
        }
        .text-layer > span.te-selected {
            outline: 2px solid #0a84ff !important;
            outline-offset: 1px;
            background: rgba(10, 132, 255, 0.14) !important;
            color: transparent !important;
            -webkit-text-fill-color: transparent !important;
            border-radius: 2px;
            box-shadow: none;
            z-index: 2;
        }
        .text-layer > span.te-empty,
        .text-layer > span[data-erased="1"] {
            outline: none !important;
            box-shadow: none !important;
            pointer-events: none !important;
            padding: 0 !important;
            margin: 0 !important;
            display: none !important;
        }

        /* طبقة الصور/الشعارات — تحت طبقة النص حتى لا تغطي مربعات النص */
        .graphics-layer {
            position: absolute; inset: 0;
            z-index: 14;
            pointer-events: none;
            overflow: hidden;
        }
        #editor-section.editor--editmode .graphics-layer {
            z-index: 14;
        }
        .graphics-layer .gfx-box {
            position: absolute;
            box-sizing: border-box;
            outline: 2px dashed rgba(10, 132, 255, 0.7);
            outline-offset: 2px;
            border-radius: 2px;
            cursor: pointer;
            pointer-events: none;
            background: transparent;
        }
        #editor-section.editor--editmode .graphics-layer .gfx-box {
            pointer-events: auto;
        }
        .graphics-layer .gfx-box:hover {
            outline-color: rgba(10, 132, 255, 0.95);
            background: rgba(10, 132, 255, 0.06);
        }
        .graphics-layer .gfx-box.gfx-selected {
            outline: 2px solid #0a84ff;
            background: rgba(10, 132, 255, 0.1);
        }
        .graphics-layer .gfx-box[data-erased="1"] {
            display: none !important;
        }

        /* لا نستخدم طبقة بيضاء عائمة — المسح يُطبَّق على صورة الصفحة مباشرة */
        .eraser-marker {
            display: none !important;
        }

        /* نافذة التحرير المنبثقة — معطّلة؛ التحرير داخل المربع مباشرة */
        .edit-text-popup {
            display: none !important;
        }
        .edit-text-popup textarea {
            width: 100%;
            border: 2px solid #111;
            border-radius: 14px;
            padding: 14px 16px;
            font-size: 18px;
            resize: vertical;
            min-height: 86px;
            direction: rtl;
        }
        .edit-text-popup .etp-actions {
            display: flex;
            gap: 10px;
            margin-top: 14px;
            justify-content: flex-end;
        }
        .edit-text-popup .etp-actions button {
            padding: 10px 16px;
            border-radius: 12px;
            border: 1px solid #ddd;
            background: #fff;
            font-size: 14px;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center; gap: 4px;
        }
        .edit-text-popup .etp-actions .etp-apply {
            background: var(--accent-blue); color: #fff; border-color: var(--accent-blue);
        }
        .edit-text-popup .etp-actions .etp-delete {
            background: #ffeded; color: var(--danger-red); border-color: #ffc8c8;
        }

        /* Responsive */
        @media (max-width: 992px) {
            .thumbs-col { display: none; }
            .side-panel { width: 280px; }
        }
        @media (max-width: 768px) {
            #editor-section {
                position: relative !important;
                top: auto !important;
                left: auto !important;
                right: auto !important;
                bottom: auto !important;
                height: auto !important;
                min-height: 100vh;
            }
            #editor-section.active {
                flex-direction: column !important;
            }
            .side-panel {
                order: 1 !important;
                position: relative !important;
                width: 100% !important;
                height: auto !important;
                max-height: none !important;
                bottom: auto !important;
                border-right: 0;
                border-top: 1px solid var(--border-color);
                z-index: 10;
            }
            .pages-viewer {
                order: 2 !important;
                padding-bottom: 80px !important;
                min-height: 60vh;
            }
            .viewbar {
                position: fixed !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                transform: none !important;
                width: 100% !important;
                max-width: 100% !important;
                border-radius: 0 !important;
                z-index: 1050;
            }
            .editor-topbar {
                flex-wrap: wrap;
                gap: 4px;
            }
            #editor-section.active ~ .tool-seo-visible-wrap,
            #editor-section.active ~ .merge-seo-content,
            html.itqan-editor-active .tool-seo-visible-wrap,
            html.itqan-editor-active .merge-seo-content {
                display: none !important;
            }
        }

        /* إدراج: أزرار صورة / توقيع */
        .edit-subtoolbar .est-btn.est-insert-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px;
            width: auto;
            min-width: 0;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            white-space: nowrap;
        }
        .edit-subtoolbar .est-btn.est-insert-chip i {
            font-size: 15px;
        }

        /* نافذة توقيع الإدراج فوق المحرر */
        #editSigModal.itq-modal-overlay {
            z-index: 12050;
        }
        #editSigModal .ep-sig-type-preview {
            margin-top: 14px;
            min-height: 64px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            font-family: Caveat, Great Vibes, Cairo, cursive;
            color: #111827;
            border: 1px solid #f3f4f6;
            border-radius: 10px;
            background: #fafafa;
            padding: 12px;
            word-break: break-word;
        }
        #editSigModal .upload-sig-zone input[type=file] {
            position: absolute;
            inset: 0;
            opacity: 0;
            cursor: pointer;
            width: 100%;
            height: 100%;
        }