{"id":27724,"date":"2025-12-09T13:12:02","date_gmt":"2025-12-09T12:12:02","guid":{"rendered":"https:\/\/jobsdz.com\/?page_id=27724"},"modified":"2026-06-24T15:35:40","modified_gmt":"2026-06-24T14:35:40","slug":"cv-maker","status":"publish","type":"page","link":"https:\/\/jobsdz.com\/ar\/cv-maker\/","title":{"rendered":"CV Maker"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n CV Pro Ultimate \u2013 \u0645\u0646\u0635\u0629 \u0627\u0644\u0633\u064a\u0631\u0629 \u0627\u0644\u0630\u0627\u062a\u064a\u0629 \u0627\u0644\u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629<\/title>\r\n <!-- Google Fonts -->\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@300;400;600;700;800;900&family=Inter:wght@300;400;500;600;700;800;900&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,400&family=Poppins:wght@300;400;500;600;700;800;900&family=Roboto+Mono:wght@400;500;600;700&display=swap\" rel=\"stylesheet\" \/>\r\n <!-- Font Awesome 6 -->\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\" \/>\r\n <!-- html2pdf -->\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2pdf.js\/0.10.1\/html2pdf.bundle.min.js\">\r\n <\/script>\r\n <!-- SortableJS -->\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Sortable\/1.15.0\/Sortable.min.js\">\r\n <\/script>\r\n <style>\r\n \/* ============================================================\r\n ROOT VARIABLES (Ultimate)\r\n ============================================================ *\/\r\n :root {\r\n --bg-body: #f1f5f9;\r\n --bg-surface: #ffffff;\r\n --bg-editor: #ffffff;\r\n --border-color: #e2e8f0;\r\n --text-primary: #0f172a;\r\n --text-secondary: #334155;\r\n --text-muted: #94a3b8;\r\n --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.06);\r\n --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.08);\r\n --radius-md: 16px;\r\n --radius-sm: 8px;\r\n --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n --font-family: 'Cairo', 'Inter', sans-serif;\r\n\r\n --primary-color: #0f3b5e;\r\n --primary-light: #e3edf7;\r\n --sidebar-gradient: linear-gradient(145deg, #0a2647, #1a4b6d);\r\n --sidebar-text-color: #ffffff;\r\n --sidebar-bg-color: #0a2647;\r\n --text-color-preview: #1e293b;\r\n --bg-preview-main: #ffffff;\r\n --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);\r\n }\r\n\r\n body.dark-mode {\r\n --bg-body: #0f172a;\r\n --bg-surface: #1e293b;\r\n --bg-editor: #1e293b;\r\n --border-color: #334155;\r\n --text-primary: #f1f5f9;\r\n --text-secondary: #cbd5e1;\r\n --text-muted: #94a3b8;\r\n --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.3);\r\n --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.4);\r\n --primary-light: #1e3a5f;\r\n --bg-preview-main: #1e293b;\r\n --text-color-preview: #e2e8f0;\r\n }\r\n body.dark-mode .editor-header,\r\n body.dark-mode .editor-tabs,\r\n body.dark-mode .editor-tabs button.active,\r\n body.dark-mode .section-block,\r\n body.dark-mode .item-card,\r\n body.dark-mode .skill-row,\r\n body.dark-mode .lang-row,\r\n body.dark-mode .design-card,\r\n body.dark-mode .preview-controls,\r\n body.dark-mode .score-card,\r\n body.dark-mode .analyzer-box {\r\n background: #0f172a !important;\r\n border-color: #334155 !important;\r\n color: #e2e8f0 !important;\r\n }\r\n body.dark-mode .form-group input,\r\n body.dark-mode .form-group textarea,\r\n body.dark-mode .form-group select {\r\n background: #1e293b;\r\n color: #f1f5f9;\r\n border-color: #334155;\r\n }\r\n\r\n *,\r\n *::before,\r\n *::after {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n body {\r\n font-family: 'Cairo', 'Inter', sans-serif;\r\n background: var(--bg-body);\r\n color: var(--text-primary);\r\n min-height: 100vh;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 16px;\r\n transition: background 0.3s, color 0.3s;\r\n }\r\n\r\n #resume-app {\r\n width: 100%;\r\n max-width: 1800px;\r\n height: 94vh;\r\n max-height: 1150px;\r\n background: var(--bg-surface);\r\n border-radius: var(--radius-md);\r\n box-shadow: var(--shadow-lg);\r\n display: grid;\r\n grid-template-columns: 480px 1fr;\r\n overflow: hidden;\r\n position: relative;\r\n border: 1px solid var(--border-color);\r\n transition: background 0.3s, border-color 0.3s;\r\n }\r\n\r\n \/* ============================================================\r\n EDITOR PANEL\r\n ============================================================ *\/\r\n .editor-panel {\r\n background: var(--bg-editor);\r\n border-left: 1px solid var(--border-color);\r\n display: flex;\r\n flex-direction: column;\r\n overflow: hidden;\r\n transition: background 0.3s, border-color 0.3s;\r\n }\r\n [dir=\"ltr\"] .editor-panel {\r\n border-left: none;\r\n border-right: 1px solid var(--border-color);\r\n }\r\n\r\n .editor-header {\r\n padding: 10px 16px;\r\n border-bottom: 1px solid var(--border-color);\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n flex-shrink: 0;\r\n background: var(--bg-surface);\r\n gap: 4px;\r\n flex-wrap: wrap;\r\n transition: background 0.3s;\r\n }\r\n .editor-header .logo {\r\n font-weight: 900;\r\n font-size: 1.1rem;\r\n color: var(--primary-color);\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n }\r\n .editor-header .logo i {\r\n font-size: 1.2rem;\r\n background: var(--primary-color);\r\n color: #fff;\r\n padding: 3px 5px;\r\n border-radius: 6px;\r\n }\r\n .editor-header .actions {\r\n display: flex;\r\n gap: 3px;\r\n align-items: center;\r\n }\r\n .editor-header .actions button {\r\n background: transparent;\r\n border: none;\r\n width: 28px;\r\n height: 28px;\r\n border-radius: 6px;\r\n cursor: pointer;\r\n color: var(--text-muted);\r\n transition: all 0.2s;\r\n font-size: 0.8rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n .editor-header .actions button:hover {\r\n background: var(--border-color);\r\n color: var(--text-primary);\r\n }\r\n .editor-header .actions button:disabled {\r\n opacity: 0.3;\r\n cursor: not-allowed;\r\n }\r\n .editor-header .autosave-status {\r\n font-size: 0.5rem;\r\n color: var(--text-muted);\r\n background: var(--bg-body);\r\n padding: 2px 8px;\r\n border-radius: 20px;\r\n font-weight: 700;\r\n }\r\n .editor-header .dark-toggle {\r\n background: var(--border-color);\r\n border: none;\r\n border-radius: 30px;\r\n width: 32px;\r\n height: 18px;\r\n cursor: pointer;\r\n position: relative;\r\n transition: background 0.3s;\r\n }\r\n .editor-header .dark-toggle::after {\r\n content: '';\r\n position: absolute;\r\n top: 2px;\r\n left: 2px;\r\n width: 14px;\r\n height: 14px;\r\n border-radius: 50%;\r\n background: #fff;\r\n transition: transform 0.3s;\r\n }\r\n body.dark-mode .editor-header .dark-toggle {\r\n background: #60a5fa;\r\n }\r\n body.dark-mode .editor-header .dark-toggle::after {\r\n transform: translateX(14px);\r\n }\r\n\r\n .editor-tabs {\r\n display: flex;\r\n border-bottom: 1px solid var(--border-color);\r\n flex-shrink: 0;\r\n background: var(--bg-surface);\r\n transition: background 0.3s;\r\n }\r\n .editor-tabs button {\r\n flex: 1;\r\n padding: 8px 2px;\r\n border: none;\r\n background: transparent;\r\n font-weight: 700;\r\n font-size: 0.65rem;\r\n color: var(--text-muted);\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n border-bottom: 3px solid transparent;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 4px;\r\n font-family: inherit;\r\n }\r\n .editor-tabs button i {\r\n font-size: 0.8rem;\r\n }\r\n .editor-tabs button.active {\r\n color: var(--primary-color);\r\n border-bottom-color: var(--primary-color);\r\n background: var(--bg-surface);\r\n }\r\n .editor-tabs button:hover:not(.active) {\r\n background: var(--border-color);\r\n }\r\n\r\n .tab-content {\r\n flex: 1;\r\n overflow-y: auto;\r\n padding: 10px 12px;\r\n display: none;\r\n flex-direction: column;\r\n gap: 8px;\r\n }\r\n .tab-content.active {\r\n display: flex;\r\n }\r\n\r\n \/* Form *\/\r\n .form-group {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 2px;\r\n }\r\n .form-group label {\r\n font-size: 0.55rem;\r\n font-weight: 800;\r\n text-transform: uppercase;\r\n letter-spacing: 0.06em;\r\n color: var(--text-muted);\r\n }\r\n .form-group input,\r\n .form-group textarea,\r\n .form-group select {\r\n padding: 5px 8px;\r\n border: 1px solid var(--border-color);\r\n border-radius: var(--radius-sm);\r\n font-size: 0.75rem;\r\n font-family: inherit;\r\n background: var(--bg-body);\r\n transition: all 0.2s;\r\n color: var(--text-primary);\r\n width: 100%;\r\n }\r\n .form-group input:focus,\r\n .form-group textarea:focus {\r\n border-color: var(--primary-color);\r\n outline: none;\r\n box-shadow: 0 0 0 3px rgba(15, 59, 94, 0.12);\r\n background: var(--bg-surface);\r\n }\r\n .form-group textarea {\r\n resize: vertical;\r\n min-height: 40px;\r\n }\r\n\r\n .section-block {\r\n background: var(--bg-surface);\r\n border: 1px solid var(--border-color);\r\n border-radius: var(--radius-sm);\r\n padding: 5px 8px;\r\n margin-bottom: 4px;\r\n transition: all 0.2s;\r\n scroll-margin-top: 10px;\r\n }\r\n .section-block.highlight {\r\n border-color: var(--primary-color);\r\n box-shadow: 0 0 0 2px rgba(15, 59, 94, 0.15);\r\n background: var(--primary-light);\r\n }\r\n .section-block .section-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n cursor: grab;\r\n }\r\n .section-block .section-header .title {\r\n font-weight: 800;\r\n font-size: 0.75rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n }\r\n .section-block .section-header .badge-vis {\r\n font-size: 0.45rem;\r\n background: var(--border-color);\r\n padding: 0 5px;\r\n border-radius: 12px;\r\n color: var(--text-muted);\r\n }\r\n .section-block .section-body {\r\n margin-top: 4px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 3px;\r\n }\r\n\r\n .item-card {\r\n background: var(--bg-body);\r\n border: 1px solid var(--border-color);\r\n border-radius: var(--radius-sm);\r\n padding: 5px 6px;\r\n position: relative;\r\n transition: all 0.2s;\r\n }\r\n .item-card .drag-handle {\r\n position: absolute;\r\n top: 3px;\r\n left: 3px;\r\n color: var(--text-muted);\r\n cursor: grab;\r\n font-size: 0.6rem;\r\n opacity: 0.3;\r\n }\r\n .item-card:hover .drag-handle {\r\n opacity: 0.8;\r\n }\r\n .item-card .remove-item {\r\n position: absolute;\r\n top: 3px;\r\n right: 3px;\r\n background: none;\r\n border: none;\r\n color: var(--text-muted);\r\n cursor: pointer;\r\n font-size: 0.6rem;\r\n padding: 2px;\r\n }\r\n .item-card .remove-item:hover {\r\n color: #ef4444;\r\n }\r\n .item-card .grid-2 {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 3px;\r\n }\r\n .item-card .grid-2 .full {\r\n grid-column: 1 \/ -1;\r\n }\r\n .item-card .checkbox-wrap {\r\n display: flex;\r\n align-items: center;\r\n gap: 3px;\r\n margin-top: 2px;\r\n }\r\n .item-card .checkbox-wrap label {\r\n font-size: 0.65rem;\r\n font-weight: 400;\r\n color: var(--text-secondary);\r\n cursor: pointer;\r\n }\r\n\r\n .btn-sm {\r\n padding: 2px 8px;\r\n border-radius: 6px;\r\n border: none;\r\n font-weight: 700;\r\n font-size: 0.6rem;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 3px;\r\n font-family: inherit;\r\n }\r\n .btn-sm.primary {\r\n background: var(--primary-color);\r\n color: #fff;\r\n }\r\n .btn-sm.primary:hover {\r\n filter: brightness(1.1);\r\n }\r\n .btn-sm.outline {\r\n background: transparent;\r\n border: 1px dashed var(--border-color);\r\n color: var(--text-muted);\r\n }\r\n .btn-sm.outline:hover {\r\n border-color: var(--primary-color);\r\n color: var(--primary-color);\r\n background: var(--primary-light);\r\n }\r\n .btn-sm.danger {\r\n background: #fee2e2;\r\n color: #dc2626;\r\n }\r\n .btn-sm.danger:hover {\r\n background: #fecaca;\r\n }\r\n .btn-sm.success {\r\n background: #d1fae5;\r\n color: #065f46;\r\n }\r\n .btn-sm.success:hover {\r\n background: #a7f3d0;\r\n }\r\n .btn-sm.ghost {\r\n background: transparent;\r\n color: var(--text-muted);\r\n }\r\n .btn-sm.ghost:hover {\r\n background: var(--border-color);\r\n }\r\n\r\n .add-btn {\r\n width: 100%;\r\n padding: 3px;\r\n border: 1px dashed var(--border-color);\r\n border-radius: var(--radius-sm);\r\n background: transparent;\r\n cursor: pointer;\r\n color: var(--text-muted);\r\n font-weight: 600;\r\n font-size: 0.65rem;\r\n transition: all 0.2s;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 3px;\r\n font-family: inherit;\r\n }\r\n .add-btn:hover {\r\n border-color: var(--primary-color);\r\n color: var(--primary-color);\r\n background: var(--primary-light);\r\n }\r\n\r\n \/* Skill \/ Language rows *\/\r\n .skill-row,\r\n .lang-row {\r\n display: flex;\r\n gap: 3px;\r\n align-items: center;\r\n background: var(--bg-body);\r\n padding: 2px 4px;\r\n border-radius: 6px;\r\n border: 1px solid var(--border-color);\r\n }\r\n .skill-row input[type=\"text\"],\r\n .lang-row input[type=\"text\"] {\r\n flex: 2;\r\n border: none;\r\n padding: 2px 0;\r\n font-size: 0.7rem;\r\n background: transparent;\r\n color: var(--text-primary);\r\n }\r\n .skill-row input:focus,\r\n .lang-row input:focus {\r\n outline: none;\r\n }\r\n .skill-row select,\r\n .lang-row select {\r\n flex: 1;\r\n border: none;\r\n padding: 2px 0;\r\n font-size: 0.6rem;\r\n background: transparent;\r\n font-weight: 600;\r\n color: var(--text-secondary);\r\n cursor: pointer;\r\n }\r\n .skill-row .remove-skill,\r\n .lang-row .remove-lang {\r\n background: none;\r\n border: none;\r\n color: var(--text-muted);\r\n cursor: pointer;\r\n padding: 0 2px;\r\n }\r\n\r\n \/* Design Grid *\/\r\n .design-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 5px;\r\n }\r\n .design-card {\r\n border: 2px solid var(--border-color);\r\n border-radius: var(--radius-sm);\r\n padding: 5px 2px;\r\n text-align: center;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n background: var(--bg-surface);\r\n }\r\n .design-card.active {\r\n border-color: var(--primary-color);\r\n background: var(--primary-light);\r\n }\r\n .design-card i {\r\n font-size: 1.4rem;\r\n color: var(--primary-color);\r\n display: block;\r\n margin-bottom: 2px;\r\n }\r\n .design-card span {\r\n font-size: 0.6rem;\r\n font-weight: 800;\r\n }\r\n .design-card small {\r\n display: block;\r\n font-size: 0.45rem;\r\n color: var(--text-muted);\r\n }\r\n\r\n .color-row {\r\n display: flex;\r\n gap: 3px;\r\n flex-wrap: wrap;\r\n margin-top: 2px;\r\n }\r\n .color-swatch {\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 50%;\r\n border: 2px solid transparent;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n }\r\n .color-swatch.active {\r\n border-color: var(--text-primary);\r\n transform: scale(1.1);\r\n }\r\n\r\n \/* Score *\/\r\n .score-card {\r\n background: var(--primary-light);\r\n border-radius: var(--radius-sm);\r\n padding: 6px 10px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n border: 1px solid rgba(15, 59, 94, 0.12);\r\n transition: background 0.3s;\r\n }\r\n .score-card .score-num {\r\n font-size: 1.3rem;\r\n font-weight: 900;\r\n color: var(--primary-color);\r\n }\r\n .score-card .score-label {\r\n font-size: 0.6rem;\r\n color: var(--text-secondary);\r\n }\r\n .score-bar {\r\n height: 3px;\r\n background: var(--border-color);\r\n border-radius: 4px;\r\n margin-top: 2px;\r\n width: 70px;\r\n }\r\n .score-bar .fill {\r\n height: 100%;\r\n background: var(--primary-color);\r\n border-radius: 4px;\r\n transition: width 0.6s ease;\r\n }\r\n\r\n \/* Analyzer & AI *\/\r\n .analyzer-box {\r\n background: var(--bg-surface);\r\n border: 1px solid var(--border-color);\r\n border-radius: var(--radius-sm);\r\n padding: 6px 10px;\r\n }\r\n .analyzer-box .item {\r\n display: flex;\r\n justify-content: space-between;\r\n font-size: 0.65rem;\r\n padding: 2px 0;\r\n border-bottom: 1px dashed var(--border-color);\r\n }\r\n .analyzer-box .item .status.good {\r\n color: #16a34a;\r\n }\r\n .analyzer-box .item .status.bad {\r\n color: #dc2626;\r\n }\r\n .analyzer-box .item .status.warn {\r\n color: #eab308;\r\n }\r\n\r\n .ai-box {\r\n background: var(--bg-surface);\r\n border: 1px solid var(--border-color);\r\n border-radius: var(--radius-sm);\r\n padding: 6px 10px;\r\n }\r\n .ai-box textarea {\r\n width: 100%;\r\n padding: 4px 6px;\r\n border-radius: 4px;\r\n border: 1px solid var(--border-color);\r\n font-size: 0.7rem;\r\n font-family: inherit;\r\n background: var(--bg-body);\r\n color: var(--text-primary);\r\n min-height: 50px;\r\n }\r\n .ai-box .btn-group {\r\n display: flex;\r\n gap: 4px;\r\n flex-wrap: wrap;\r\n margin-top: 4px;\r\n }\r\n\r\n \/* ============================================================\r\n PREVIEW PANEL\r\n ============================================================ *\/\r\n .preview-panel {\r\n background: #e2e8f0;\r\n padding: 10px 8px;\r\n overflow-y: auto;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 8px;\r\n transition: background 0.3s;\r\n position: relative;\r\n }\r\n body.dark-mode .preview-panel {\r\n background: #0f172a;\r\n }\r\n\r\n .preview-controls {\r\n display: flex;\r\n gap: 3px;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n background: var(--bg-surface);\r\n padding: 3px 10px;\r\n border-radius: 40px;\r\n box-shadow: var(--shadow-md);\r\n border: 1px solid var(--border-color);\r\n transition: background 0.3s, border-color 0.3s;\r\n }\r\n .preview-controls button {\r\n background: transparent;\r\n border: none;\r\n padding: 2px 6px;\r\n border-radius: 20px;\r\n font-size: 0.6rem;\r\n font-weight: 700;\r\n color: var(--text-muted);\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n font-family: inherit;\r\n display: flex;\r\n align-items: center;\r\n gap: 2px;\r\n }\r\n .preview-controls button:hover {\r\n background: var(--border-color);\r\n color: var(--text-primary);\r\n }\r\n .preview-controls .zoom-level {\r\n font-size: 0.6rem;\r\n font-weight: 700;\r\n color: var(--text-secondary);\r\n min-width: 32px;\r\n text-align: center;\r\n }\r\n\r\n #resume-preview-wrapper {\r\n width: 100%;\r\n display: flex;\r\n justify-content: center;\r\n overflow: auto;\r\n padding: 4px 0;\r\n flex: 1;\r\n }\r\n\r\n #resume-preview {\r\n width: 210mm;\r\n min-height: 297mm;\r\n background: var(--bg-preview-main);\r\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);\r\n display: grid;\r\n color: var(--text-color-preview);\r\n font-family: var(--font-family);\r\n font-size: 12.5px;\r\n transition: all 0.2s;\r\n position: relative;\r\n overflow: hidden;\r\n transform-origin: top center;\r\n transform: scale(0.9);\r\n }\r\n\r\n \/* Highlight in preview *\/\r\n .preview-section-highlight {\r\n animation: glowPulse 1s ease 2;\r\n background: rgba(15, 59, 94, 0.05);\r\n border-radius: 4px;\r\n padding: 2px 0;\r\n }\r\n @keyframes glowPulse {\r\n 0%,\r\n 100% {\r\n box-shadow: 0 0 0 0 rgba(15, 59, 94, 0);\r\n }\r\n 50% {\r\n box-shadow: 0 0 0 4px rgba(15, 59, 94, 0.15);\r\n }\r\n }\r\n\r\n \/* ============================================================\r\n TEMPLATES (Enhanced)\r\n ============================================================ *\/\r\n #resume-preview.template-classic {\r\n grid-template-columns: 28% 72%;\r\n }\r\n #resume-preview.template-classic .preview-sidebar {\r\n background: var(--sidebar-gradient);\r\n padding: 24px 18px;\r\n color: var(--sidebar-text-color);\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n }\r\n #resume-preview.template-classic .preview-main {\r\n padding: 24px 28px;\r\n }\r\n\r\n #resume-preview.template-modern {\r\n display: block;\r\n }\r\n #resume-preview.template-modern .preview-sidebar {\r\n background: var(--sidebar-gradient);\r\n padding: 18px 24px;\r\n color: var(--sidebar-text-color);\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n flex-wrap: wrap;\r\n gap: 8px;\r\n border-bottom: 4px solid var(--primary-color);\r\n }\r\n #resume-preview.template-modern .preview-main {\r\n padding: 20px 28px;\r\n }\r\n #resume-preview.template-modern .preview-section-title {\r\n background: var(--primary-light);\r\n padding: 3px 12px;\r\n border-radius: 30px;\r\n border-bottom: none;\r\n display: inline-block;\r\n margin-top: 14px;\r\n color: var(--primary-color);\r\n }\r\n #resume-preview.template-modern .timeline-item-preview {\r\n background: var(--bg-body);\r\n padding: 6px 12px 6px 12px;\r\n border-radius: 6px;\r\n border-right: 3px solid var(--primary-color);\r\n margin-bottom: 4px;\r\n border-left: none;\r\n }\r\n #resume-preview.template-modern .timeline-item-preview::before {\r\n display: none;\r\n }\r\n\r\n #resume-preview.template-minimal {\r\n display: block;\r\n padding: 28px;\r\n background: #fafcfd;\r\n }\r\n #resume-preview.template-minimal .preview-sidebar {\r\n background: transparent !important;\r\n color: var(--text-color-preview) !important;\r\n padding: 0 0 16px 0 !important;\r\n border-bottom: 2px solid var(--border-color);\r\n margin-bottom: 16px;\r\n text-align: center;\r\n }\r\n #resume-preview.template-minimal .preview-main {\r\n padding: 0 !important;\r\n }\r\n #resume-preview.template-minimal .timeline-item-preview {\r\n border-right: none;\r\n padding-right: 0;\r\n text-align: center;\r\n }\r\n #resume-preview.template-minimal .timeline-item-preview::before {\r\n display: none;\r\n }\r\n\r\n #resume-preview.template-creative {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n padding: 0;\r\n background: #ffffff;\r\n gap: 0;\r\n }\r\n #resume-preview.template-creative .preview-sidebar {\r\n background: var(--sidebar-gradient);\r\n padding: 28px 20px;\r\n color: var(--sidebar-text-color);\r\n grid-column: 1 \/ 2;\r\n grid-row: 1 \/ 2;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 12px;\r\n clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);\r\n }\r\n #resume-preview.template-creative .preview-main {\r\n padding: 28px 24px 28px 36px;\r\n grid-column: 2 \/ 3;\r\n grid-row: 1 \/ 2;\r\n background: #ffffff;\r\n }\r\n #resume-preview.template-creative .preview-name {\r\n font-size: 2.4rem;\r\n font-weight: 900;\r\n color: #ffffff;\r\n text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);\r\n }\r\n #resume-preview.template-creative .preview-role {\r\n color: rgba(255, 255, 255, 0.8);\r\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\r\n padding-bottom: 10px;\r\n }\r\n #resume-preview.template-creative .timeline-item-preview {\r\n border-right: none;\r\n padding-right: 0;\r\n }\r\n #resume-preview.template-creative .timeline-item-preview::before {\r\n display: none;\r\n }\r\n #resume-preview.template-creative .timeline-item-preview .tl-title {\r\n color: var(--primary-color);\r\n }\r\n\r\n \/* Sidebar Layout *\/\r\n #resume-preview.sidebar-left .preview-sidebar {\r\n order: 1;\r\n }\r\n #resume-preview.sidebar-left.template-classic .preview-main {\r\n order: 2;\r\n }\r\n #resume-preview.sidebar-right .preview-sidebar {\r\n order: 2;\r\n }\r\n #resume-preview.sidebar-right.template-classic .preview-main {\r\n order: 1;\r\n }\r\n #resume-preview.sidebar-right.template-classic {\r\n grid-template-columns: 72% 28%;\r\n }\r\n\r\n \/* Common Preview *\/\r\n .preview-name {\r\n font-size: 2rem;\r\n font-weight: 900;\r\n letter-spacing: -0.02em;\r\n margin: 0 0 2px 0;\r\n color: var(--primary-color);\r\n line-height: 1.1;\r\n text-transform: uppercase;\r\n }\r\n .preview-role {\r\n font-size: 0.95rem;\r\n font-weight: 500;\r\n color: var(--text-secondary);\r\n margin: 0 0 8px 0;\r\n letter-spacing: 0.06em;\r\n }\r\n .preview-section-title {\r\n font-size: 0.95rem;\r\n font-weight: 800;\r\n color: var(--primary-color);\r\n border-bottom: 2px solid var(--border-color);\r\n padding-bottom: 3px;\r\n margin: 12px 0 6px 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 5px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.06em;\r\n }\r\n .preview-section-title:first-of-type {\r\n margin-top: 0;\r\n }\r\n\r\n .contact-item-preview {\r\n display: flex;\r\n align-items: center;\r\n gap: 5px;\r\n font-size: 0.7rem;\r\n color: inherit;\r\n margin-bottom: 2px;\r\n word-break: break-word;\r\n }\r\n .contact-item-preview i {\r\n width: 14px;\r\n text-align: center;\r\n opacity: 0.6;\r\n }\r\n\r\n .skill-bar-wrap {\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n margin-bottom: 2px;\r\n }\r\n .skill-bar-wrap .skill-name {\r\n font-size: 0.7rem;\r\n min-width: 45px;\r\n font-weight: 600;\r\n }\r\n .skill-bar-wrap .bar-track {\r\n flex: 1;\r\n height: 3px;\r\n background: rgba(0, 0, 0, 0.08);\r\n border-radius: 4px;\r\n overflow: hidden;\r\n }\r\n .skill-bar-wrap .bar-track .bar-fill {\r\n height: 100%;\r\n background: var(--primary-color);\r\n border-radius: 4px;\r\n }\r\n .skill-bar-wrap .bar-label {\r\n font-size: 0.5rem;\r\n color: var(--text-muted);\r\n min-width: 28px;\r\n text-align: left;\r\n }\r\n\r\n .timeline-item-preview {\r\n position: relative;\r\n padding-right: 12px;\r\n padding-bottom: 8px;\r\n border-right: 2px solid var(--border-color);\r\n }\r\n .timeline-item-preview:last-child {\r\n border-right: none;\r\n padding-bottom: 0;\r\n }\r\n .timeline-item-preview::before {\r\n content: '';\r\n position: absolute;\r\n right: -5px;\r\n top: 3px;\r\n width: 7px;\r\n height: 7px;\r\n border-radius: 50%;\r\n background: var(--bg-preview-main);\r\n border: 2px solid var(--primary-color);\r\n }\r\n .timeline-item-preview .tl-title {\r\n font-weight: 800;\r\n font-size: 0.85rem;\r\n }\r\n .timeline-item-preview .tl-sub {\r\n font-weight: 700;\r\n color: var(--primary-color);\r\n font-size: 0.75rem;\r\n }\r\n .timeline-item-preview .tl-date {\r\n font-size: 0.55rem;\r\n color: var(--text-muted);\r\n display: block;\r\n margin-bottom: 2px;\r\n font-weight: 600;\r\n }\r\n .timeline-item-preview .tl-desc {\r\n font-size: 0.72rem;\r\n color: var(--text-secondary);\r\n white-space: pre-line;\r\n margin-top: 2px;\r\n }\r\n\r\n .preview-footer {\r\n text-align: center;\r\n font-size: 0.5rem;\r\n color: var(--text-muted);\r\n border-top: 1px solid var(--border-color);\r\n padding-top: 5px;\r\n margin-top: 10px;\r\n }\r\n\r\n [dir=\"rtl\"] .timeline-item-preview {\r\n padding-right: 12px;\r\n padding-left: 0;\r\n border-right: 2px solid var(--border-color);\r\n border-left: none;\r\n }\r\n [dir=\"rtl\"] .timeline-item-preview::before {\r\n right: -5px;\r\n left: auto;\r\n }\r\n [dir=\"rtl\"] .skill-bar-wrap .bar-label {\r\n text-align: right;\r\n }\r\n [dir=\"rtl\"] #resume-preview.template-creative .preview-sidebar {\r\n clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%);\r\n }\r\n\r\n @media (max-width: 1024px) {\r\n #resume-app {\r\n grid-template-columns: 360px 1fr;\r\n height: 96vh;\r\n }\r\n #resume-preview {\r\n transform: scale(0.65);\r\n }\r\n }\r\n @media (max-width: 768px) {\r\n body {\r\n padding: 0;\r\n }\r\n #resume-app {\r\n grid-template-columns: 1fr;\r\n height: 100vh;\r\n max-height: none;\r\n border-radius: 0;\r\n flex-direction: column-reverse;\r\n }\r\n .editor-panel {\r\n height: 55vh;\r\n border-left: none;\r\n border-top: 1px solid var(--border-color);\r\n order: 2;\r\n }\r\n .preview-panel {\r\n height: 45vh;\r\n padding: 4px;\r\n order: 1;\r\n }\r\n #resume-preview {\r\n transform: scale(0.35);\r\n }\r\n .editor-header .logo span {\r\n display: none;\r\n }\r\n .tab-content {\r\n padding: 5px;\r\n }\r\n .design-grid {\r\n grid-template-columns: 1fr 1fr;\r\n }\r\n .item-card .grid-2 {\r\n grid-template-columns: 1fr;\r\n }\r\n #resume-preview.template-creative {\r\n grid-template-columns: 1fr;\r\n }\r\n #resume-preview.template-creative .preview-sidebar {\r\n clip-path: none !important;\r\n grid-column: 1 \/ 2;\r\n grid-row: 1 \/ 2;\r\n }\r\n #resume-preview.template-creative .preview-main {\r\n grid-column: 1 \/ 2;\r\n grid-row: 2 \/ 3;\r\n padding: 12px;\r\n }\r\n }\r\n @media (max-width: 480px) {\r\n #resume-preview {\r\n transform: scale(0.24);\r\n }\r\n .editor-panel {\r\n height: 50vh;\r\n }\r\n .preview-panel {\r\n height: 50vh;\r\n }\r\n .editor-tabs button {\r\n font-size: 0.5rem;\r\n padding: 4px 2px;\r\n }\r\n }\r\n\r\n .tab-content::-webkit-scrollbar,\r\n .preview-panel::-webkit-scrollbar {\r\n width: 3px;\r\n }\r\n .tab-content::-webkit-scrollbar-thumb,\r\n .preview-panel::-webkit-scrollbar-thumb {\r\n background: var(--border-color);\r\n border-radius: 8px;\r\n }\r\n\r\n .toast-container {\r\n position: fixed;\r\n bottom: 30px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n z-index: 999;\r\n pointer-events: none;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 4px;\r\n }\r\n .toast {\r\n background: #0f172a;\r\n color: #fff;\r\n padding: 5px 16px;\r\n border-radius: 10px;\r\n font-size: 0.75rem;\r\n font-weight: 600;\r\n box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);\r\n pointer-events: auto;\r\n animation: slideUp 0.3s ease;\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n }\r\n .toast.success {\r\n background: #065f46;\r\n }\r\n .toast.error {\r\n background: #991b1b;\r\n }\r\n @keyframes slideUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(20px) scale(0.95);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0) scale(1);\r\n }\r\n }\r\n @keyframes slideDown {\r\n from {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n to {\r\n opacity: 0;\r\n transform: translateY(10px);\r\n }\r\n }\r\n .hidden {\r\n display: none !important;\r\n }\r\n\r\n \/* Fullscreen preview *\/\r\n .preview-fullscreen {\r\n position: fixed !important;\r\n top: 0 !important;\r\n left: 0 !important;\r\n right: 0 !important;\r\n bottom: 0 !important;\r\n width: 100vw !important;\r\n height: 100vh !important;\r\n max-width: 100vw !important;\r\n max-height: 100vh !important;\r\n z-index: 9999 !important;\r\n border-radius: 0 !important;\r\n background: #e2e8f0 !important;\r\n padding: 20px !important;\r\n overflow: auto !important;\r\n display: flex !important;\r\n flex-direction: column !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n }\r\n .preview-fullscreen #resume-preview-wrapper {\r\n height: 100%;\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n .preview-fullscreen #resume-preview {\r\n transform: scale(1) !important;\r\n max-height: 90vh;\r\n }\r\n body.dark-mode .preview-fullscreen {\r\n background: #0f172a !important;\r\n }\r\n\r\n \/* Print *\/\r\n @media print {\r\n body {\r\n background: #fff !important;\r\n padding: 0 !important;\r\n margin: 0 !important;\r\n }\r\n #resume-app {\r\n display: block !important;\r\n height: auto !important;\r\n max-height: none !important;\r\n border-radius: 0 !important;\r\n box-shadow: none !important;\r\n grid-template-columns: 1fr !important;\r\n }\r\n .editor-panel {\r\n display: none !important;\r\n }\r\n .preview-panel {\r\n padding: 0 !important;\r\n height: auto !important;\r\n background: #fff !important;\r\n display: block !important;\r\n overflow: visible !important;\r\n gap: 0 !important;\r\n }\r\n .preview-controls {\r\n display: none !important;\r\n }\r\n #resume-preview-wrapper {\r\n padding: 0 !important;\r\n overflow: visible !important;\r\n }\r\n #resume-preview {\r\n transform: scale(1) !important;\r\n box-shadow: none !important;\r\n width: 100% !important;\r\n min-height: auto !important;\r\n margin: 0 !important;\r\n border: none !important;\r\n }\r\n .no-print {\r\n display: none !important;\r\n }\r\n * {\r\n -webkit-print-color-adjust: exact !important;\r\n print-color-adjust: exact !important;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- ============================================================\r\n APP\r\n ============================================================ -->\r\n <div id=\"resume-app\" dir=\"rtl\">\r\n\r\n <!-- ====== EDITOR ====== -->\r\n <div class=\"editor-panel no-print\">\r\n <div class=\"editor-header\">\r\n <div class=\"logo\">\r\n <i class=\"fas fa-file-pen\"><\/i>\r\n <span>CV Pro Ultimate<\/span>\r\n <\/div>\r\n <div class=\"actions\">\r\n <button onclick=\"toggleDarkMode()\" class=\"dark-toggle\" title=\"Dark Mode\"><\/button>\r\n <button onclick=\"undoAction()\" id=\"undoBtn\" title=\"\u062a\u0631\u0627\u062c\u0639 (Ctrl+Z)\"><i class=\"fas fa-undo-alt\"><\/i><\/button>\r\n <button onclick=\"redoAction()\" id=\"redoBtn\" title=\"\u0625\u0639\u0627\u062f\u0629 (Ctrl+Y)\"><i class=\"fas fa-redo-alt\"><\/i><\/button>\r\n <span class=\"autosave-status\" id=\"saveStatus\">\u2713 \u062d\u0641\u0638<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"editor-tabs\">\r\n <button class=\"active\" data-tab=\"tab-content\"><i class=\"fas fa-list-ul\"><\/i> \u0627\u0644\u0645\u062d\u062a\u0648\u0649<\/button>\r\n <button data-tab=\"tab-design\"><i class=\"fas fa-palette\"><\/i> \u0627\u0644\u062a\u0635\u0645\u064a\u0645<\/button>\r\n <button data-tab=\"tab-optimize\"><i class=\"fas fa-robot\"><\/i> \u062a\u062d\u0633\u064a\u0646<\/button>\r\n <button data-tab=\"tab-settings\"><i class=\"fas fa-sliders-h\"><\/i> \u0625\u0639\u062f\u0627\u062f\u0627\u062a<\/button>\r\n <\/div>\r\n\r\n <!-- Tab: Content -->\r\n <div class=\"tab-content active\" id=\"tab-content\">\r\n <div style=\"display:flex;gap:4px;align-items:center;flex-wrap:wrap;\">\r\n <div class=\"score-card\" style=\"flex:2;\">\r\n <div><div class=\"score-label\">\u0627\u0644\u0627\u0643\u062a\u0645\u0627\u0644<\/div><div class=\"score-num\" id=\"scoreNum\">0%<\/div><\/div>\r\n <div class=\"score-bar\"><div class=\"fill\" id=\"scoreFill\" style=\"width:0%\"><\/div><\/div>\r\n <\/div>\r\n <div class=\"version-selector\" style=\"flex:1;display:flex;gap:3px;align-items:center;\">\r\n <i class=\"fas fa-code-branch\" style=\"color:var(--text-muted);font-size:0.7rem;\"><\/i>\r\n <select id=\"versionSelect\" onchange=\"switchVersion(this.value)\" style=\"flex:1;padding:2px 4px;border-radius:4px;border:1px solid var(--border-color);font-size:0.6rem;background:var(--bg-body);color:var(--text-primary);\"><\/select>\r\n <button class=\"btn-sm primary\" onclick=\"saveNewVersion()\" title=\"\u062d\u0641\u0638 \u0643\u0646\u0633\u062e\u0629 \u062c\u062f\u064a\u062f\u0629\"><i class=\"fas fa-plus\"><\/i><\/button>\r\n <button class=\"btn-sm ghost\" onclick=\"renameVersion()\" title=\"\u0625\u0639\u0627\u062f\u0629 \u062a\u0633\u0645\u064a\u0629\"><i class=\"fas fa-pen\"><\/i><\/button>\r\n <button class=\"btn-sm danger\" onclick=\"deleteVersion()\" title=\"\u062d\u0630\u0641 \u0627\u0644\u0625\u0635\u062f\u0627\u0631\"><i class=\"fas fa-trash\"><\/i><\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div style=\"background:var(--bg-surface);padding:5px 8px;border-radius:var(--radius-sm);border:1px solid var(--border-color);\">\r\n <label style=\"font-size:0.5rem;font-weight:800;text-transform:uppercase;color:var(--text-muted);\">\u0642\u0648\u0627\u0644\u0628 \u0633\u0631\u064a\u0639\u0629<\/label>\r\n <div class=\"template-quick\" style=\"display:flex;gap:3px;flex-wrap:wrap;\">\r\n <button class=\"btn-sm outline\" onclick=\"loadTemplate('developer')\"><i class=\"fas fa-code\"><\/i> \u0645\u0637\u0648\u0631<\/button>\r\n <button class=\"btn-sm outline\" onclick=\"loadTemplate('marketing')\"><i class=\"fas fa-bullhorn\"><\/i> \u0645\u0633\u0648\u0642<\/button>\r\n <button class=\"btn-sm outline\" onclick=\"loadTemplate('student')\"><i class=\"fas fa-graduation-cap\"><\/i> \u0637\u0627\u0644\u0628<\/button>\r\n <button class=\"btn-sm outline\" onclick=\"loadTemplate('designer')\"><i class=\"fas fa-paint-brush\"><\/i> \u0645\u0635\u0645\u0645<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div style=\"background:var(--bg-surface);padding:8px;border-radius:var(--radius-sm);border:1px solid var(--border-color);\">\r\n <div class=\"form-group\"><label>\u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u0643\u0627\u0645\u0644<\/label><input type=\"text\" id=\"fullName\" placeholder=\"\u0645\u062d\u0645\u062f \u0627\u0644\u062c\u0632\u0627\u0626\u0631\u064a\" \/><\/div>\r\n <div class=\"form-group\" style=\"margin-top:2px;\"><label>\u0627\u0644\u0645\u0633\u0645\u0649 \u0627\u0644\u0648\u0638\u064a\u0641\u064a<\/label><input type=\"text\" id=\"jobTitle\" placeholder=\"\u0645\u0647\u0646\u062f\u0633 \u0628\u0631\u0645\u062c\u064a\u0627\u062a\" \/><\/div>\r\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-top:2px;\">\r\n <div class=\"form-group\"><label>\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a<\/label><input type=\"email\" id=\"email\" placeholder=\"med@example.dz\" \/><\/div>\r\n <div class=\"form-group\"><label>\u0627\u0644\u0647\u0627\u062a\u0641<\/label><input type=\"tel\" id=\"phone\" placeholder=\"+213 5XX XX XX XX\" \/><\/div>\r\n <\/div>\r\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-top:2px;\">\r\n <div class=\"form-group\"><label>\u0627\u0644\u0648\u0644\u0627\u064a\u0629<\/label><input type=\"text\" id=\"state\" placeholder=\"\u0627\u0644\u062c\u0632\u0627\u0626\u0631 \u0627\u0644\u0639\u0627\u0635\u0645\u0629\" \/><\/div>\r\n <div class=\"form-group\"><label>\u0627\u0644\u0628\u0644\u062f<\/label><input type=\"text\" id=\"country\" value=\"\u0627\u0644\u062c\u0632\u0627\u0626\u0631\" \/><\/div>\r\n <\/div>\r\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-top:2px;\">\r\n <div class=\"form-group\"><label>\u0627\u0644\u0631\u0645\u0632 \u0627\u0644\u0628\u0631\u064a\u062f\u064a<\/label><input type=\"text\" id=\"zip\" placeholder=\"16000\" \/><\/div>\r\n <div class=\"form-group\"><label>\u0627\u0644\u0645\u0648\u0642\u0639 \u0627\u0644\u0634\u062e\u0635\u064a<\/label><input type=\"url\" id=\"website\" placeholder=\"https:\/\/example.com\" \/><\/div>\r\n <\/div>\r\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-top:2px;\">\r\n <div class=\"form-group\"><label>\u0644\u064a\u0646\u0643\u062f \u0625\u0646<\/label><input type=\"url\" id=\"linkedin\" placeholder=\"linkedin.com\/in\/...\" \/><\/div>\r\n <div class=\"form-group\"><label>\u062c\u064a\u062a \u0647\u0627\u0628<\/label><input type=\"url\" id=\"github\" placeholder=\"github.com\/...\" \/><\/div>\r\n <\/div>\r\n <div class=\"form-group\" style=\"margin-top:2px;\"><label>\u0646\u0628\u0630\u0629 \u062a\u0639\u0631\u064a\u0641\u064a\u0629<\/label><textarea id=\"summary\" rows=\"2\" placeholder=\"\u0623\u0646\u0627 \u0645\u0637\u0648\u0631 \u062c\u0632\u0627\u0626\u0631\u064a \u0634\u063a\u0648\u0641 ...\"><\/textarea><\/div>\r\n <div class=\"form-group\" style=\"margin-top:2px;\">\r\n <label>\u0627\u0644\u0635\u0648\u0631\u0629 \u0627\u0644\u0634\u062e\u0635\u064a\u0629<\/label>\r\n <div style=\"display:flex;gap:3px;align-items:center;\">\r\n <input type=\"url\" id=\"photoURL\" placeholder=\"https:\/\/example.com\/photo.jpg\" style=\"flex:1;\" \/>\r\n <button class=\"btn-sm primary\" onclick=\"document.getElementById('photoFileInput').click()\"><i class=\"fas fa-upload\"><\/i><\/button>\r\n <input type=\"file\" id=\"photoFileInput\" accept=\"image\/*\" style=\"display:none\" onchange=\"handlePhotoUpload(event)\" \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div>\r\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:2px;\">\r\n <span style=\"font-weight:800;font-size:0.75rem;\"><i class=\"fas fa-layer-group\"><\/i> \u0627\u0644\u0623\u0642\u0633\u0627\u0645<\/span>\r\n <button class=\"btn-sm primary\" onclick=\"addCustomSection()\"><i class=\"fas fa-plus\"><\/i> \u0645\u062e\u0635\u0635<\/button>\r\n <\/div>\r\n <div id=\"sectionsContainer\"><\/div>\r\n <\/div>\r\n\r\n <div style=\"background:var(--bg-surface);padding:6px;border-radius:var(--radius-sm);border:1px solid var(--border-color);\">\r\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:2px;\">\r\n <span style=\"font-weight:800;font-size:0.7rem;\"><i class=\"fas fa-star\"><\/i> \u0627\u0644\u0645\u0647\u0627\u0631\u0627\u062a<\/span>\r\n <button class=\"btn-sm primary\" onclick=\"addSkill()\"><i class=\"fas fa-plus\"><\/i><\/button>\r\n <\/div>\r\n <div id=\"skillsContainer\"><\/div>\r\n <\/div>\r\n\r\n <div style=\"background:var(--bg-surface);padding:6px;border-radius:var(--radius-sm);border:1px solid var(--border-color);\">\r\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:2px;\">\r\n <span style=\"font-weight:800;font-size:0.7rem;\"><i class=\"fas fa-language\"><\/i> \u0627\u0644\u0644\u063a\u0627\u062a<\/span>\r\n <button class=\"btn-sm primary\" onclick=\"addLanguage()\"><i class=\"fas fa-plus\"><\/i><\/button>\r\n <\/div>\r\n <div id=\"languagesContainer\"><\/div>\r\n <\/div>\r\n\r\n <div style=\"display:flex;gap:3px;flex-wrap:wrap;\">\r\n <button class=\"btn-sm danger\" onclick=\"resetAll()\" style=\"flex:1;\"><i class=\"fas fa-trash\"><\/i> \u0625\u0639\u0627\u062f\u0629<\/button>\r\n <button class=\"btn-sm success\" onclick=\"exportJSON()\" style=\"flex:1;\"><i class=\"fas fa-download\"><\/i> JSON<\/button>\r\n <button class=\"btn-sm outline\" onclick=\"document.getElementById('importJSON').click()\" style=\"flex:1;\"><i class=\"fas fa-upload\"><\/i> \u0627\u0633\u062a\u064a\u0631\u0627\u062f<\/button>\r\n <input type=\"file\" id=\"importJSON\" accept=\".json\" style=\"display:none\" onchange=\"importJSON(event)\" \/>\r\n <\/div>\r\n <div style=\"display:flex;gap:3px;flex-wrap:wrap;\">\r\n <button class=\"btn-sm primary\" onclick=\"downloadPDF()\" style=\"flex:1;background:#1a4b7a;padding:5px;\"><i class=\"fas fa-file-pdf\"><\/i> PDF<\/button>\r\n <button class=\"btn-sm primary\" onclick=\"window.print()\" style=\"flex:1;background:#2d5a3d;padding:5px;\"><i class=\"fas fa-print\"><\/i> \u0637\u0628\u0627\u0639\u0629<\/button>\r\n <button class=\"btn-sm primary\" onclick=\"toggleFullscreenPreview()\" style=\"flex:1;background:#6b21a5;padding:5px;\"><i class=\"fas fa-expand\"><\/i> \u0645\u0644\u0621 \u0627\u0644\u0634\u0627\u0634\u0629<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Tab: Design -->\r\n <div class=\"tab-content\" id=\"tab-design\">\r\n <div class=\"form-group\">\r\n <label>\u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u0642\u0627\u0644\u0628<\/label>\r\n <div class=\"design-grid\">\r\n <div class=\"design-card active\" data-template=\"classic\" onclick=\"setTemplate('classic')\"><i class=\"fas fa-columns\"><\/i><span>\u0643\u0644\u0627\u0633\u064a\u0643\u064a<\/span><small>\u0634\u0631\u064a\u0637 \u062c\u0627\u0646\u0628\u064a<\/small><\/div>\r\n <div class=\"design-card\" data-template=\"modern\" onclick=\"setTemplate('modern')\"><i class=\"fas fa-heading\"><\/i><span>\u062d\u062f\u064a\u062b<\/span><small>\u0628\u0637\u0627\u0642\u0627\u062a<\/small><\/div>\r\n <div class=\"design-card\" data-template=\"minimal\" onclick=\"setTemplate('minimal')\"><i class=\"fas fa-square\"><\/i><span>\u0628\u0633\u064a\u0637<\/span><small>\u0646\u0638\u064a\u0641<\/small><\/div>\r\n <div class=\"design-card\" data-template=\"creative\" onclick=\"setTemplate('creative')\"><i class=\"fas fa-paint-brush\"><\/i><span>\u0625\u0628\u062f\u0627\u0639\u064a<\/span><small>\u063a\u064a\u0631 \u0645\u062a\u0645\u0627\u062b\u0644<\/small><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label>\u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0634\u0631\u064a\u0637 \u0627\u0644\u062c\u0627\u0646\u0628\u064a<\/label>\r\n <select id=\"sidebarLayout\" onchange=\"updatePreview()\">\r\n <option value=\"left\">\u064a\u0633\u0627\u0631 (\u0627\u0641\u062a\u0631\u0627\u0636\u064a)<\/option>\r\n <option value=\"right\">\u064a\u0645\u064a\u0646<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label>\u0639\u062f\u062f \u0627\u0644\u0623\u0639\u0645\u062f\u0629 (\u0644\u0644\u0642\u0627\u0644\u0628 \u0627\u0644\u062d\u062f\u064a\u062b)<\/label>\r\n <select id=\"modernColumns\" onchange=\"updatePreview()\">\r\n <option value=\"1\">\u0639\u0645\u0648\u062f \u0648\u0627\u062d\u062f<\/option>\r\n <option value=\"2\" selected>\u0639\u0645\u0648\u062f\u064a\u0646<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label>\u0627\u0644\u062e\u0637 \u0627\u0644\u0623\u0633\u0627\u0633\u064a<\/label>\r\n <select id=\"fontSelect\" onchange=\"updatePreview()\">\r\n <option value=\"'Cairo', 'Inter', sans-serif\">Cairo (\u0639\u0631\u0628\u064a)<\/option>\r\n <option value=\"'Inter', sans-serif\">Inter (\u062d\u062f\u064a\u062b)<\/option>\r\n <option value=\"'Poppins', sans-serif\">Poppins<\/option>\r\n <option value=\"'Merriweather', serif\">Merriweather<\/option>\r\n <option value=\"'Roboto Mono', monospace\">Roboto Mono<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label>\u0627\u0644\u0644\u0648\u0646 \u0627\u0644\u0623\u0633\u0627\u0633\u064a<\/label>\r\n <div class=\"color-row\">\r\n <span class=\"color-swatch active\" style=\"background:#0f3b5e;\" data-color=\"#0f3b5e\" onclick=\"setPrimaryColor('#0f3b5e',this)\"><\/span>\r\n <span class=\"color-swatch\" style=\"background:#2563eb;\" data-color=\"#2563eb\" onclick=\"setPrimaryColor('#2563eb',this)\"><\/span>\r\n <span class=\"color-swatch\" style=\"background:#0d9488;\" data-color=\"#0d9488\" onclick=\"setPrimaryColor('#0d9488',this)\"><\/span>\r\n <span class=\"color-swatch\" style=\"background:#7c3aed;\" data-color=\"#7c3aed\" onclick=\"setPrimaryColor('#7c3aed',this)\"><\/span>\r\n <span class=\"color-swatch\" style=\"background:#b91c1c;\" data-color=\"#b91c1c\" onclick=\"setPrimaryColor('#b91c1c',this)\"><\/span>\r\n <span class=\"color-swatch\" style=\"background:#ea580c;\" data-color=\"#ea580c\" onclick=\"setPrimaryColor('#ea580c',this)\"><\/span>\r\n <\/div>\r\n <div style=\"display:flex;gap:3px;margin-top:2px;\">\r\n <input type=\"color\" id=\"customColorPicker\" value=\"#0f3b5e\" style=\"width:24px;height:24px;padding:2px;border-radius:6px;cursor:pointer;\" onchange=\"setPrimaryColor(this.value, null)\" \/>\r\n <input type=\"text\" id=\"colorHexInput\" value=\"#0f3b5e\" style=\"flex:1;padding:2px 5px;border-radius:6px;font-size:0.65rem;font-family:monospace;border:1px solid var(--border-color);background:var(--bg-body);color:var(--text-primary);\" oninput=\"setPrimaryColor(this.value, null)\" \/>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label>\u0644\u0648\u0646 \u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u0634\u0631\u064a\u0637 \u0627\u0644\u062c\u0627\u0646\u0628\u064a<\/label>\r\n <input type=\"color\" id=\"sidebarBgColor\" value=\"#0a2647\" onchange=\"updatePreview()\" style=\"width:100%;height:28px;padding:2px;border-radius:6px;cursor:pointer;\" \/>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label>\u0644\u0648\u0646 \u0627\u0644\u0646\u0635\u0648\u0635 \u0641\u064a \u0627\u0644\u0634\u0631\u064a\u0637 \u0627\u0644\u062c\u0627\u0646\u0628\u064a<\/label>\r\n <input type=\"color\" id=\"sidebarTextColor\" value=\"#ffffff\" onchange=\"updatePreview()\" style=\"width:100%;height:28px;padding:2px;border-radius:6px;cursor:pointer;\" \/>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label>\u0644\u0648\u0646 \u0627\u0644\u0646\u0635\u0648\u0635 \u0627\u0644\u0623\u0633\u0627\u0633\u064a<\/label>\r\n <input type=\"color\" id=\"textColorPicker\" value=\"#1e293b\" onchange=\"updatePreview()\" style=\"width:100%;height:28px;padding:2px;border-radius:6px;cursor:pointer;\" \/>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label>\u0644\u0648\u0646 \u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u0633\u064a\u0631\u0629<\/label>\r\n <input type=\"color\" id=\"bgColorPicker\" value=\"#ffffff\" onchange=\"updatePreview()\" style=\"width:100%;height:28px;padding:2px;border-radius:6px;cursor:pointer;\" \/>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label>\u062d\u062c\u0645 \u0627\u0644\u062e\u0637<\/label>\r\n <input type=\"range\" id=\"fontSizeRange\" min=\"11\" max=\"18\" value=\"13\" step=\"0.5\" oninput=\"updatePreview()\" \/>\r\n <span id=\"fontSizeLabel\" style=\"font-size:0.7rem;text-align:center;\">13px<\/span>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label>\u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062a \u0628\u064a\u0646 \u0627\u0644\u0623\u0642\u0633\u0627\u0645<\/label>\r\n <input type=\"range\" id=\"spacingRange\" min=\"0.8\" max=\"2.5\" value=\"1.4\" step=\"0.1\" oninput=\"updatePreview()\" \/>\r\n <span id=\"spacingLabel\" style=\"font-size:0.7rem;text-align:center;\">1.4rem<\/span>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label>\u0647\u0648\u0627\u0645\u0634 \u0627\u0644\u0635\u0641\u062d\u0629<\/label>\r\n <select id=\"marginSelect\" onchange=\"updatePreview()\">\r\n <option value=\"1.2rem\">\u0636\u064a\u0642<\/option>\r\n <option value=\"1.8rem\" selected>\u0645\u062a\u0648\u0633\u0637<\/option>\r\n <option value=\"2.4rem\">\u0648\u0627\u0633\u0639<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label>\u0627\u0644\u062a\u0630\u064a\u064a\u0644<\/label>\r\n <div style=\"display:flex;gap:3px;align-items:center;\">\r\n <input type=\"checkbox\" id=\"footerToggle\" checked onchange=\"updatePreview()\" \/>\r\n <label for=\"footerToggle\" style=\"font-size:0.65rem;font-weight:400;cursor:pointer;\">\u0625\u0638\u0647\u0627\u0631<\/label>\r\n <input type=\"text\" id=\"footerText\" value=\"\u0627\u0644\u0633\u064a\u0631\u0629 \u0627\u0644\u0630\u0627\u062a\u064a\u0629 - \u0627\u0644\u0635\u0641\u062d\u0629 1\" style=\"flex:1;padding:2px 5px;border-radius:6px;border:1px solid var(--border-color);font-size:0.6rem;background:var(--bg-body);color:var(--text-primary);\" onchange=\"updatePreview()\" \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Tab: Optimize (AI & ATS) -->\r\n <div class=\"tab-content\" id=\"tab-optimize\">\r\n <!-- AI Generator -->\r\n <div class=\"ai-box\">\r\n <h4 style=\"font-size:0.75rem;margin-bottom:3px;\"><i class=\"fas fa-wand-magic-sparkles\"><\/i> \u0645\u0648\u0644\u062f \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0630\u0643\u064a<\/h4>\r\n <div style=\"display:flex;gap:3px;flex-wrap:wrap;\">\r\n <input type=\"text\" id=\"aiJobTitle\" placeholder=\"\u0627\u0644\u0645\u0633\u0645\u0649 \u0627\u0644\u0648\u0638\u064a\u0641\u064a (\u0645\u062b\u0627\u0644: \u0645\u0647\u0646\u062f\u0633 \u0628\u0631\u0645\u062c\u064a\u0627\u062a)\" style=\"flex:2;padding:3px 6px;border-radius:4px;border:1px solid var(--border-color);font-size:0.65rem;background:var(--bg-body);color:var(--text-primary);\" \/>\r\n <input type=\"text\" id=\"aiCompany\" placeholder=\"\u0627\u0644\u0634\u0631\u0643\u0629 (\u0627\u062e\u062a\u064a\u0627\u0631\u064a)\" style=\"flex:1;padding:3px 6px;border-radius:4px;border:1px solid var(--border-color);font-size:0.65rem;background:var(--bg-body);color:var(--text-primary);\" \/>\r\n <\/div>\r\n <div class=\"btn-group\">\r\n <button class=\"btn-sm primary\" onclick=\"generateSummary()\"><i class=\"fas fa-pen\"><\/i> \u062a\u0648\u0644\u064a\u062f \u0646\u0628\u0630\u0629<\/button>\r\n <button class=\"btn-sm primary\" onclick=\"generateExperience()\"><i class=\"fas fa-briefcase\"><\/i> \u062a\u0648\u0644\u064a\u062f \u062e\u0628\u0631\u0629<\/button>\r\n <button class=\"btn-sm primary\" onclick=\"generateAll()\" style=\"background:#0d9488;\"><i class=\"fas fa-robot\"><\/i> \u062a\u0648\u0644\u064a\u062f \u0627\u0644\u0643\u0644<\/button>\r\n <\/div>\r\n <div id=\"aiOutput\" style=\"margin-top:4px;background:var(--bg-body);padding:4px 6px;border-radius:4px;font-size:0.65rem;color:var(--text-secondary);min-height:30px;border:1px dashed var(--border-color);\"><\/div>\r\n <\/div>\r\n\r\n <!-- ATS Analyzer -->\r\n <div class=\"analyzer-box\">\r\n <h4 style=\"font-size:0.75rem;margin-bottom:3px;\"><i class=\"fas fa-magnifying-glass-chart\"><\/i> \u0645\u062d\u0644\u0644 \u0627\u0644\u062a\u0648\u0627\u0641\u0642 \u0645\u0639 ATS<\/h4>\r\n <textarea id=\"atsJobDesc\" rows=\"2\" placeholder=\"\u0627\u0644\u0635\u0642 \u0647\u0646\u0627 \u0648\u0635\u0641 \u0627\u0644\u0648\u0638\u064a\u0641\u0629 \u0627\u0644\u0645\u0633\u062a\u0647\u062f\u0641\u0629 \u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u062a\u0648\u0627\u0641\u0642...\"><\/textarea>\r\n <div class=\"btn-group\">\r\n <button class=\"btn-sm primary\" onclick=\"analyzeATS()\"><i class=\"fas fa-chart-simple\"><\/i> \u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u062a\u0648\u0627\u0641\u0642<\/button>\r\n <\/div>\r\n <div id=\"atsResults\" style=\"margin-top:4px;font-size:0.65rem;\"><\/div>\r\n <\/div>\r\n\r\n <!-- Readability -->\r\n <div class=\"analyzer-box\">\r\n <h4 style=\"font-size:0.75rem;margin-bottom:3px;\"><i class=\"fas fa-book-open\"><\/i> \u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0646\u0635<\/h4>\r\n <div id=\"readabilityResults\" style=\"font-size:0.65rem;display:flex;gap:10px;flex-wrap:wrap;\">\r\n <span><strong>\u0639\u062f\u062f \u0627\u0644\u0643\u0644\u0645\u0627\u062a:<\/strong> <span id=\"wordCount\">0<\/span><\/span>\r\n <span><strong>\u0645\u0633\u062a\u0648\u0649 \u0627\u0644\u0642\u0631\u0627\u0621\u0629:<\/strong> <span id=\"readabilityLevel\">-<\/span><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Tab: Settings -->\r\n <div class=\"tab-content\" id=\"tab-settings\">\r\n <div class=\"form-group\">\r\n <label>\u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0646\u0635<\/label>\r\n <select id=\"dirSelect\" onchange=\"changeDirection()\">\r\n <option value=\"rtl\">\u064a\u0645\u064a\u0646 \u2192 \u064a\u0633\u0627\u0631 (RTL)<\/option>\r\n <option value=\"ltr\">\u064a\u0633\u0627\u0631 \u2192 \u064a\u0645\u064a\u0646 (LTR)<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>\u0627\u0644\u0644\u063a\u0629<\/label>\r\n <select id=\"langSelect\" onchange=\"changeLanguage()\">\r\n <option value=\"ar\">\u0627\u0644\u0639\u0631\u0628\u064a\u0629<\/option>\r\n <option value=\"fr\">Fran\u00e7ais<\/option>\r\n <option value=\"en\">English<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>\u0625\u0638\u0647\u0627\u0631 \/ \u0625\u062e\u0641\u0627\u0621 \u0627\u0644\u0623\u0642\u0633\u0627\u0645<\/label>\r\n <div id=\"toggleSectionsContainer\" style=\"display:flex;flex-direction:column;gap:2px;margin-top:2px;\"><\/div>\r\n <\/div>\r\n <div style=\"margin-top:6px;background:var(--bg-body);padding:6px;border-radius:var(--radius-sm);text-align:center;font-size:0.6rem;color:var(--text-muted);border:1px solid var(--border-color);\">\r\n <i class=\"fas fa-info-circle\"><\/i> \u062d\u0641\u0638 \u062a\u0644\u0642\u0627\u0626\u064a + \u062a\u0631\u0627\u062c\u0639 (Ctrl+Z) \/ \u0625\u0639\u0627\u062f\u0629 (Ctrl+Y)\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- ====== PREVIEW ====== -->\r\n <div class=\"preview-panel\">\r\n <div class=\"preview-controls no-print\">\r\n <button onclick=\"zoomOut()\"><i class=\"fas fa-search-minus\"><\/i><\/button>\r\n <span class=\"zoom-level\" id=\"zoomLevel\">90%<\/span>\r\n <button onclick=\"zoomIn()\"><i class=\"fas fa-search-plus\"><\/i><\/button>\r\n <button onclick=\"resetZoom()\"><i class=\"fas fa-expand\"><\/i><\/button>\r\n <button onclick=\"window.print()\" style=\"background:var(--primary-color);color:#fff;\"><i class=\"fas fa-print\"><\/i><\/button>\r\n <button onclick=\"toggleFullscreenPreview()\" style=\"background:#6b21a5;color:#fff;\"><i class=\"fas fa-expand\"><\/i><\/button>\r\n <\/div>\r\n <div id=\"resume-preview-wrapper\">\r\n <div id=\"resume-preview\" class=\"template-classic sidebar-left\">\r\n <!-- Sidebar -->\r\n <div class=\"preview-sidebar\" id=\"previewSidebar\">\r\n <div style=\"text-align:center;margin-bottom:10px;\">\r\n <div id=\"previewPhoto\" style=\"width:90px;height:90px;border-radius:50%;background:rgba(255,255,255,0.12);margin:0 auto 6px;display:flex;align-items:center;justify-content:center;font-size:2.5rem;overflow:hidden;border:3px solid rgba(255,255,255,0.15);\">\r\n <i class=\"fas fa-user\"><\/i>\r\n <\/div>\r\n <h1 class=\"preview-name\" id=\"viewName\">\u0645\u062d\u0645\u062f \u0627\u0644\u062c\u0632\u0627\u0626\u0631\u064a<\/h1>\r\n <p class=\"preview-role\" id=\"viewRole\">\u0645\u0647\u0646\u062f\u0633 \u0628\u0631\u0645\u062c\u064a\u0627\u062a<\/p>\r\n <\/div>\r\n <div style=\"margin-bottom:10px;\">\r\n <div class=\"contact-item-preview\" id=\"viewEmail\"><i class=\"fas fa-envelope\"><\/i> <span>med@example.dz<\/span><\/div>\r\n <div class=\"contact-item-preview\" id=\"viewPhone\"><i class=\"fas fa-phone\"><\/i> <span>+213 5XX XX XX XX<\/span><\/div>\r\n <div class=\"contact-item-preview\" id=\"viewState\"><i class=\"fas fa-location-dot\"><\/i> <span>\u0627\u0644\u062c\u0632\u0627\u0626\u0631 \u0627\u0644\u0639\u0627\u0635\u0645\u0629<\/span><\/div>\r\n <div class=\"contact-item-preview\" id=\"viewCountry\"><i class=\"fas fa-flag\"><\/i> <span>\u0627\u0644\u062c\u0632\u0627\u0626\u0631<\/span><\/div>\r\n <div class=\"contact-item-preview\" id=\"viewZip\"><i class=\"fas fa-mailbox\"><\/i> <span>16000<\/span><\/div>\r\n <div class=\"contact-item-preview\" id=\"viewWebsite\"><i class=\"fas fa-globe\"><\/i> <span>example.com<\/span><\/div>\r\n <div class=\"contact-item-preview\" id=\"viewLinkedin\"><i class=\"fab fa-linkedin-in\"><\/i> <span>linkedin.com\/in\/...<\/span><\/div>\r\n <div class=\"contact-item-preview\" id=\"viewGithub\"><i class=\"fab fa-github\"><\/i> <span>github.com\/...<\/span><\/div>\r\n <\/div>\r\n <div id=\"previewSkillsSidebar\">\r\n <h4 style=\"font-size:0.6rem;text-transform:uppercase;letter-spacing:0.08em;color:rgba(255,255,255,0.5);border-bottom:1px solid rgba(255,255,255,0.1);padding-bottom:3px;margin-bottom:5px;\">\u0627\u0644\u0645\u0647\u0627\u0631\u0627\u062a<\/h4>\r\n <div id=\"viewSkillsList\"><\/div>\r\n <\/div>\r\n <div id=\"previewLanguagesSidebar\" style=\"margin-top:8px;\">\r\n <h4 style=\"font-size:0.6rem;text-transform:uppercase;letter-spacing:0.08em;color:rgba(255,255,255,0.5);border-bottom:1px solid rgba(255,255,255,0.1);padding-bottom:3px;margin-bottom:5px;\">\u0627\u0644\u0644\u063a\u0627\u062a<\/h4>\r\n <div id=\"viewLanguagesList\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <!-- Main -->\r\n <div class=\"preview-main\">\r\n <div class=\"preview-section-title\"><i class=\"fas fa-user\"><\/i> \u0646\u0628\u0630\u0629 \u0639\u0646\u064a<\/div>\r\n <p id=\"viewSummary\" style=\"font-size:0.85rem;color:var(--text-secondary);margin-bottom:8px;\">\u0645\u0637\u0648\u0631 \u0628\u0631\u0645\u062c\u064a\u0627\u062a \u062c\u0632\u0627\u0626\u0631\u064a...<\/p>\r\n <div id=\"previewSections\"><\/div>\r\n <div class=\"preview-footer\" id=\"previewFooter\">\u0627\u0644\u0633\u064a\u0631\u0629 \u0627\u0644\u0630\u0627\u062a\u064a\u0629 - \u0627\u0644\u0635\u0641\u062d\u0629 1<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Toast -->\r\n <div class=\"toast-container no-print\" id=\"toastContainer\"><\/div>\r\n\r\n <!-- ============================================================\r\n JAVASCRIPT (Ultimate Engine)\r\n ============================================================ -->\r\n <script>\r\n (function() {\r\n 'use strict';\r\n\r\n \/\/ ----------------------------------------------------------------\r\n \/\/ 1. STATE\r\n \/\/ ----------------------------------------------------------------\r\n let state = {\r\n personal: {\r\n fullName: '\u0645\u062d\u0645\u062f \u0627\u0644\u062c\u0632\u0627\u0626\u0631\u064a',\r\n jobTitle: '\u0645\u0647\u0646\u062f\u0633 \u0628\u0631\u0645\u062c\u064a\u0627\u062a',\r\n email: 'med@example.dz',\r\n phone: '+213 5XX XX XX XX',\r\n state: '\u0627\u0644\u062c\u0632\u0627\u0626\u0631 \u0627\u0644\u0639\u0627\u0635\u0645\u0629',\r\n country: '\u0627\u0644\u062c\u0632\u0627\u0626\u0631',\r\n zip: '16000',\r\n website: 'example.com',\r\n linkedin: 'linkedin.com\/in\/...',\r\n github: 'github.com\/...',\r\n summary: '\u0645\u0637\u0648\u0631 \u0628\u0631\u0645\u062c\u064a\u0627\u062a \u062c\u0632\u0627\u0626\u0631\u064a \u0634\u063a\u0648\u0641 \u0628\u0628\u0646\u0627\u0621 \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0648\u064a\u0628 \u062d\u062f\u064a\u062b\u0629. \u062e\u0628\u0631\u0629 5+ \u0633\u0646\u0648\u0627\u062a.',\r\n photoURL: ''\r\n },\r\n sections: [\r\n { id: 'exp', type: 'experience', title: '\u0627\u0644\u062e\u0628\u0631\u0627\u062a', items: [], visible: true },\r\n { id: 'edu', type: 'education', title: '\u0627\u0644\u062a\u0639\u0644\u064a\u0645', items: [], visible: true },\r\n { id: 'cert', type: 'certificates', title: '\u0627\u0644\u0634\u0647\u0627\u062f\u0627\u062a', items: [], visible: true },\r\n { id: 'proj', type: 'projects', title: '\u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639', items: [], visible: true },\r\n { id: 'ref', type: 'references', title: '\u0627\u0644\u0645\u0631\u0627\u062c\u0639', items: [], visible: true },\r\n { id: 'hobby', type: 'hobbies', title: '\u0627\u0644\u0647\u0648\u0627\u064a\u0627\u062a', items: [], visible: true },\r\n { id: 'awards', type: 'awards', title: '\u0627\u0644\u062c\u0648\u0627\u0626\u0632', items: [], visible: true },\r\n { id: 'vol', type: 'volunteering', title: '\u0627\u0644\u062a\u0637\u0648\u0639', items: [], visible: true },\r\n { id: 'courses', type: 'courses', title: '\u0627\u0644\u062f\u0648\u0631\u0627\u062a', items: [], visible: true },\r\n ],\r\n customSections: [],\r\n skills: [],\r\n languages: [],\r\n design: {\r\n template: 'classic',\r\n font: \"'Cairo', 'Inter', sans-serif\",\r\n primaryColor: '#0f3b5e',\r\n textColor: '#1e293b',\r\n bgColor: '#ffffff',\r\n sidebarBg: '#0a2647',\r\n sidebarText: '#ffffff',\r\n fontSize: 13,\r\n spacing: 1.4,\r\n margin: '1.8rem',\r\n sidebarLayout: 'left',\r\n modernColumns: 2,\r\n footer: { show: true, text: '\u0627\u0644\u0633\u064a\u0631\u0629 \u0627\u0644\u0630\u0627\u062a\u064a\u0629 - \u0627\u0644\u0635\u0641\u062d\u0629 1' }\r\n },\r\n dir: 'rtl',\r\n lang: 'ar'\r\n };\r\n\r\n \/\/ Versions\r\n let versions = [];\r\n let currentVersionIndex = 0;\r\n let history = [];\r\n let historyIndex = -1;\r\n const MAX_HISTORY = 30;\r\n let currentZoom = 0.9;\r\n let isFullscreen = false;\r\n\r\n \/\/ ----------------------------------------------------------------\r\n \/\/ 2. DOM REFS\r\n \/\/ ----------------------------------------------------------------\r\n const $ = (s) => document.querySelector(s);\r\n const $$ = (s) => document.querySelectorAll(s);\r\n const rootApp = document.getElementById('resume-app');\r\n const previewWrapper = document.getElementById('resume-preview-wrapper');\r\n const previewEl = document.getElementById('resume-preview');\r\n const viewName = document.getElementById('viewName');\r\n const viewRole = document.getElementById('viewRole');\r\n const viewSummary = document.getElementById('viewSummary');\r\n const viewEmail = document.getElementById('viewEmail').querySelector('span');\r\n const viewPhone = document.getElementById('viewPhone').querySelector('span');\r\n const viewState = document.getElementById('viewState').querySelector('span');\r\n const viewCountry = document.getElementById('viewCountry').querySelector('span');\r\n const viewZip = document.getElementById('viewZip').querySelector('span');\r\n const viewWebsite = document.getElementById('viewWebsite').querySelector('span');\r\n const viewLinkedin = document.getElementById('viewLinkedin').querySelector('span');\r\n const viewGithub = document.getElementById('viewGithub').querySelector('span');\r\n const viewSkillsList = document.getElementById('viewSkillsList');\r\n const viewLanguagesList = document.getElementById('viewLanguagesList');\r\n const previewSections = document.getElementById('previewSections');\r\n const previewPhoto = document.getElementById('previewPhoto');\r\n const previewFooter = document.getElementById('previewFooter');\r\n\r\n const fullNameInp = document.getElementById('fullName');\r\n const jobTitleInp = document.getElementById('jobTitle');\r\n const emailInp = document.getElementById('email');\r\n const phoneInp = document.getElementById('phone');\r\n const stateInp = document.getElementById('state');\r\n const countryInp = document.getElementById('country');\r\n const zipInp = document.getElementById('zip');\r\n const websiteInp = document.getElementById('website');\r\n const linkedinInp = document.getElementById('linkedin');\r\n const githubInp = document.getElementById('github');\r\n const summaryInp = document.getElementById('summary');\r\n const photoURLInp = document.getElementById('photoURL');\r\n const fontSelect = document.getElementById('fontSelect');\r\n const bgColorPicker = document.getElementById('bgColorPicker');\r\n const textColorPicker = document.getElementById('textColorPicker');\r\n const sidebarBgColor = document.getElementById('sidebarBgColor');\r\n const sidebarTextColor = document.getElementById('sidebarTextColor');\r\n const fontSizeRange = document.getElementById('fontSizeRange');\r\n const fontSizeLabel = document.getElementById('fontSizeLabel');\r\n const spacingRange = document.getElementById('spacingRange');\r\n const spacingLabel = document.getElementById('spacingLabel');\r\n const marginSelect = document.getElementById('marginSelect');\r\n const sidebarLayout = document.getElementById('sidebarLayout');\r\n const modernColumns = document.getElementById('modernColumns');\r\n const dirSelect = document.getElementById('dirSelect');\r\n const langSelect = document.getElementById('langSelect');\r\n const colorHexInput = document.getElementById('colorHexInput');\r\n const customColorPicker = document.getElementById('customColorPicker');\r\n const footerToggle = document.getElementById('footerToggle');\r\n const footerText = document.getElementById('footerText');\r\n const sectionsContainer = document.getElementById('sectionsContainer');\r\n const skillsContainer = document.getElementById('skillsContainer');\r\n const languagesContainer = document.getElementById('languagesContainer');\r\n const toggleSectionsContainer = document.getElementById('toggleSectionsContainer');\r\n const scoreNum = document.getElementById('scoreNum');\r\n const scoreFill = document.getElementById('scoreFill');\r\n const zoomLevel = document.getElementById('zoomLevel');\r\n const versionSelect = document.getElementById('versionSelect');\r\n const analyzerResults = document.getElementById('analyzerResults');\r\n const aiOutput = document.getElementById('aiOutput');\r\n const atsResults = document.getElementById('atsResults');\r\n const aiJobTitle = document.getElementById('aiJobTitle');\r\n const aiCompany = document.getElementById('aiCompany');\r\n const atsJobDesc = document.getElementById('atsJobDesc');\r\n const wordCountSpan = document.getElementById('wordCount');\r\n const readabilityLevelSpan = document.getElementById('readabilityLevel');\r\n\r\n \/\/ ----------------------------------------------------------------\r\n \/\/ 3. HELPERS\r\n \/\/ ----------------------------------------------------------------\r\n function genId() { return Date.now() + '_' + Math.random().toString(36).slice(2, 6); }\r\n\r\n function deepClone(obj) { return JSON.parse(JSON.stringify(obj)); }\r\n\r\n function showToast(msg, type = 'info', duration = 3000) {\r\n const container = document.getElementById('toastContainer');\r\n const el = document.createElement('div');\r\n el.className = 'toast ' + type;\r\n el.innerHTML = msg;\r\n container.appendChild(el);\r\n setTimeout(() => {\r\n el.style.animation = 'slideDown 0.3s ease forwards';\r\n setTimeout(() => el.remove(), 350);\r\n }, duration);\r\n }\r\n\r\n function formatDateLocale(dateStr) {\r\n if (!dateStr) return '';\r\n try {\r\n const d = new Date(dateStr + (dateStr.length === 7 ? '-01' : ''));\r\n if (isNaN(d)) return dateStr;\r\n return d.toLocaleDateString('en', { month: 'short', year: 'numeric' });\r\n } catch (e) { return dateStr; }\r\n }\r\n\r\n function formatDateRange(start, end, isCurrent) {\r\n if (!start) return '';\r\n const s = formatDateLocale(start);\r\n if (isCurrent) return s + ' \u2014 Present';\r\n if (end) return s + ' \u2014 ' + formatDateLocale(end);\r\n return s;\r\n }\r\n\r\n \/\/ --- History ---\r\n function saveStateToHistory() {\r\n const current = deepClone(state);\r\n history = history.slice(0, historyIndex + 1);\r\n history.push(current);\r\n if (history.length > MAX_HISTORY) history.shift();\r\n historyIndex = history.length - 1;\r\n updateUndoRedoButtons();\r\n autosave();\r\n updateVersionSelect();\r\n updateReadability();\r\n }\r\n\r\n function updateUndoRedoButtons() {\r\n document.getElementById('undoBtn').disabled = historyIndex <= 0;\r\n document.getElementById('redoBtn').disabled = historyIndex >= history.length - 1;\r\n }\r\n\r\n window.undoAction = function() {\r\n if (historyIndex > 0) { historyIndex--;\r\n state = deepClone(history[historyIndex]);\r\n applyStateToUI();\r\n showToast('\u062a\u0631\u0627\u062c\u0639', 'info', 800); }\r\n };\r\n window.redoAction = function() {\r\n if (historyIndex < history.length - 1) { historyIndex++;\r\n state = deepClone(history[historyIndex]);\r\n applyStateToUI();\r\n showToast('\u0625\u0639\u0627\u062f\u0629', 'info', 800); }\r\n };\r\n\r\n document.addEventListener('keydown', (e) => {\r\n if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) { e.preventDefault();\r\n window.undoAction(); }\r\n if ((e.ctrlKey || e.metaKey) && (e.key === 'y' || (e.key === 'z' && e.shiftKey))) { e.preventDefault();\r\n window.redoAction(); }\r\n if (e.key === 'Escape' && isFullscreen) { toggleFullscreenPreview(); }\r\n });\r\n\r\n \/\/ --- Autosave ---\r\n function autosave() {\r\n try {\r\n const data = { state: state, versions: versions, currentVersionIndex: currentVersionIndex };\r\n localStorage.setItem('cv_pro_ultimate_data', JSON.stringify(data));\r\n document.getElementById('saveStatus').textContent = '\u2713 \u062d\u0641\u0638';\r\n } catch (e) { \/* ignore *\/ }\r\n }\r\n\r\n function loadSaved() {\r\n try {\r\n const raw = localStorage.getItem('cv_pro_ultimate_data');\r\n if (raw) {\r\n const data = JSON.parse(raw);\r\n state = deepMerge(state, data.state || {});\r\n versions = data.versions || [];\r\n currentVersionIndex = data.currentVersionIndex || 0;\r\n state.sections.forEach(s => { if (!s.id) s.id = genId(); });\r\n state.customSections.forEach(s => { if (!s.id) s.id = genId(); });\r\n state.skills = state.skills.map(s => ({ name: s.name || s, level: s.level || '\u0645\u062a\u0648\u0633\u0637' }));\r\n state.languages = state.languages.map(l => ({ name: l.name || l, level: l.level || '\u0645\u062a\u0648\u0633\u0637' }));\r\n return true;\r\n }\r\n } catch (e) { console.warn('Load error', e); }\r\n return false;\r\n }\r\n\r\n function deepMerge(target, source) {\r\n const result = deepClone(target);\r\n for (let key in source) {\r\n if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {\r\n result[key] = deepMerge(result[key] || {}, source[key]);\r\n } else {\r\n result[key] = source[key];\r\n }\r\n }\r\n return result;\r\n }\r\n\r\n \/\/ --- Dark Mode ---\r\n window.toggleDarkMode = function() {\r\n document.body.classList.toggle('dark-mode');\r\n localStorage.setItem('cv_dark_mode', document.body.classList.contains('dark-mode') ? 'true' : 'false');\r\n };\r\n if (localStorage.getItem('cv_dark_mode') === 'true') {\r\n document.body.classList.add('dark-mode');\r\n }\r\n\r\n \/\/ --- Fullscreen ---\r\n window.toggleFullscreenPreview = function() {\r\n const panel = document.querySelector('.preview-panel');\r\n panel.classList.toggle('preview-fullscreen');\r\n isFullscreen = !isFullscreen;\r\n if (isFullscreen) {\r\n previewEl.style.transform = 'scale(1)';\r\n zoomLevel.textContent = '100%';\r\n } else {\r\n previewEl.style.transform = `scale(${currentZoom})`;\r\n zoomLevel.textContent = Math.round(currentZoom * 100) + '%';\r\n }\r\n showToast(isFullscreen ? '\u0645\u0639\u0627\u064a\u0646\u0629 \u0628\u0645\u0644\u0621 \u0627\u0644\u0634\u0627\u0634\u0629' : '\u062e\u0631\u0648\u062c \u0645\u0646 \u0645\u0644\u0621 \u0627\u0644\u0634\u0627\u0634\u0629', 'info', 1000);\r\n };\r\n\r\n \/\/ --- Versions ---\r\n function updateVersionSelect() {\r\n const current = versionSelect.value;\r\n versionSelect.innerHTML = '';\r\n if (versions.length === 0) {\r\n versions.push({ name: '\u0627\u0644\u0625\u0635\u062f\u0627\u0631 1', data: deepClone(state) });\r\n currentVersionIndex = 0;\r\n }\r\n versions.forEach((v, i) => {\r\n const opt = document.createElement('option');\r\n opt.value = i;\r\n opt.textContent = v.name || ('\u0627\u0644\u0625\u0635\u062f\u0627\u0631 ' + (i + 1));\r\n versionSelect.appendChild(opt);\r\n });\r\n versionSelect.value = currentVersionIndex;\r\n }\r\n\r\n window.saveNewVersion = function() {\r\n const name = prompt('\u0623\u062f\u062e\u0644 \u0627\u0633\u0645 \u0627\u0644\u0625\u0635\u062f\u0627\u0631 \u0627\u0644\u062c\u062f\u064a\u062f:', '\u0627\u0644\u0625\u0635\u062f\u0627\u0631 ' + (versions.length + 1));\r\n if (!name) return;\r\n versions.push({ name: name, data: deepClone(state) });\r\n currentVersionIndex = versions.length - 1;\r\n updateVersionSelect();\r\n autosave();\r\n showToast('\u062a\u0645 \u062d\u0641\u0638 \u0627\u0644\u0625\u0635\u062f\u0627\u0631', 'success');\r\n };\r\n\r\n window.renameVersion = function() {\r\n const idx = parseInt(versionSelect.value);\r\n if (isNaN(idx) || idx >= versions.length) return;\r\n const newName = prompt('\u0623\u062f\u062e\u0644 \u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u062c\u062f\u064a\u062f:', versions[idx].name);\r\n if (!newName) return;\r\n versions[idx].name = newName;\r\n updateVersionSelect();\r\n autosave();\r\n showToast('\u062a\u0645 \u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u062a\u0633\u0645\u064a\u0629', 'success');\r\n };\r\n\r\n window.deleteVersion = function() {\r\n if (versions.length <= 1) { showToast('\u0644\u0627 \u064a\u0645\u0643\u0646 \u062d\u0630\u0641 \u0627\u0644\u0625\u0635\u062f\u0627\u0631 \u0627\u0644\u0648\u062d\u064a\u062f', 'error'); return; }\r\n const idx = parseInt(versionSelect.value);\r\n if (isNaN(idx) || idx >= versions.length) return;\r\n if (!confirm('\u0647\u0644 \u062a\u0631\u064a\u062f \u062d\u0630\u0641 \u0627\u0644\u0625\u0635\u062f\u0627\u0631 \"' + versions[idx].name + '\"\u061f')) return;\r\n versions.splice(idx, 1);\r\n if (currentVersionIndex >= versions.length) currentVersionIndex = versions.length - 1;\r\n updateVersionSelect();\r\n state = deepClone(versions[currentVersionIndex].data);\r\n applyStateToUI();\r\n autosave();\r\n showToast('\u062a\u0645 \u062d\u0630\u0641 \u0627\u0644\u0625\u0635\u062f\u0627\u0631', 'info');\r\n };\r\n\r\n window.switchVersion = function(index) {\r\n const idx = parseInt(index);\r\n if (isNaN(idx) || idx >= versions.length) return;\r\n currentVersionIndex = idx;\r\n state = deepClone(versions[idx].data);\r\n applyStateToUI();\r\n showToast('\u062a\u0645 \u0627\u0644\u062a\u0628\u062f\u064a\u0644 \u0625\u0644\u0649 ' + versions[idx].name, 'info');\r\n };\r\n\r\n \/\/ --- AI Content Generator (Built-in library) ---\r\n const PROMPT_LIBRARY = {\r\n '\u0645\u0647\u0646\u062f\u0633 \u0628\u0631\u0645\u062c\u064a\u0627\u062a': {\r\n summary: (name, company) =>\r\n `\u0645\u0637\u0648\u0631 \u0628\u0631\u0645\u062c\u064a\u0627\u062a \u0634\u063a\u0648\u0641 ${name ? name : ''} \u0645\u0639 \u062e\u0628\u0631\u0629 \u0641\u064a \u062a\u0635\u0645\u064a\u0645 \u0648\u062a\u0637\u0648\u064a\u0631 \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0648\u064a\u0628 \u0639\u0627\u0644\u064a\u0629 \u0627\u0644\u0623\u062f\u0627\u0621. \u0623\u062a\u0645\u062a\u0639 \u0628\u0645\u0647\u0627\u0631\u0627\u062a \u0642\u0648\u064a\u0629 \u0641\u064a \u062d\u0644 \u0627\u0644\u0645\u0634\u0643\u0644\u0627\u062a \u0648\u0627\u0644\u0639\u0645\u0644 \u0636\u0645\u0646 \u0641\u0631\u0642 \u0645\u062a\u0639\u062f\u062f\u0629 \u0627\u0644\u062a\u062e\u0635\u0635\u0627\u062a. \u0623\u0633\u0639\u0649 \u062f\u0627\u0626\u0645\u0627\u064b \u0644\u062a\u0637\u0648\u064a\u0631 \u0646\u0641\u0633\u064a \u0648\u0645\u0648\u0627\u0643\u0628\u0629 \u0623\u062d\u062f\u062b \u0627\u0644\u062a\u0642\u0646\u064a\u0627\u062a.${company ? ' \u0623\u0639\u0645\u0644 \u062d\u0627\u0644\u064a\u0627\u064b \u0641\u064a ' + company : ''}`,\r\n exp: (title, company) =>\r\n `\u0642\u064a\u0627\u062f\u0629 \u0648\u062a\u0637\u0648\u064a\u0631 \u0645\u0634\u0627\u0631\u064a\u0639 \u0628\u0631\u0645\u062c\u064a\u0629 \u0645\u0639\u0642\u062f\u0629 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0623\u062d\u062f\u062b \u0627\u0644\u062a\u0642\u0646\u064a\u0627\u062a. \u062a\u062d\u0633\u064a\u0646 \u0623\u062f\u0627\u0621 \u0627\u0644\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0648\u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0643\u0641\u0627\u0621\u0629. \u0627\u0644\u062a\u0639\u0627\u0648\u0646 \u0645\u0639 \u0641\u0631\u0642 \u0645\u062a\u0639\u062f\u062f\u0629 \u0644\u062a\u062d\u0642\u064a\u0642 \u0623\u0647\u062f\u0627\u0641 \u0627\u0644\u0645\u0634\u0631\u0648\u0639.${company ? ' \u0627\u0644\u0639\u0645\u0644 \u0641\u064a \u0628\u064a\u0626\u0629 \u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a\u0629 \u0641\u064a ' + company : ''}`\r\n },\r\n '\u0645\u0633\u0648\u0642 \u0631\u0642\u0645\u064a': {\r\n summary: (name, company) =>\r\n `\u0645\u0633\u0648\u0642 \u0631\u0642\u0645\u064a \u0645\u0628\u062f\u0639 ${name ? name : ''} \u0645\u0639 \u062e\u0628\u0631\u0629 \u0641\u064a \u062a\u0637\u0648\u064a\u0631 \u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0627\u062a \u0627\u0644\u062a\u0633\u0648\u064a\u0642 \u0648\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u062d\u0645\u0644\u0627\u062a \u0627\u0644\u0625\u0639\u0644\u0627\u0646\u064a\u0629. \u0645\u062a\u062e\u0635\u0635 \u0641\u064a \u062a\u062d\u0633\u064a\u0646 \u0645\u062d\u0631\u0643\u0627\u062a \u0627\u0644\u0628\u062d\u062b (SEO) \u0648\u0625\u0639\u0644\u0627\u0646\u0627\u062a \u0648\u0633\u0627\u0626\u0644 \u0627\u0644\u062a\u0648\u0627\u0635\u0644 \u0627\u0644\u0627\u062c\u062a\u0645\u0627\u0639\u064a.${company ? ' \u062e\u0628\u0631\u0629 \u0641\u064a ' + company : ''}`,\r\n exp: (title, company) =>\r\n `\u062a\u0637\u0648\u064a\u0631 \u0648\u062a\u0646\u0641\u064a\u0630 \u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0627\u062a \u062a\u0633\u0648\u064a\u0642 \u0631\u0642\u0645\u064a\u0629 \u0641\u0639\u0627\u0644\u0629. \u0625\u062f\u0627\u0631\u0629 \u062d\u0645\u0644\u0627\u062a \u0625\u0639\u0644\u0627\u0646\u064a\u0629 \u0639\u0628\u0631 \u0645\u0646\u0635\u0627\u062a \u0645\u062a\u0639\u062f\u062f\u0629. \u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0648\u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u0623\u062f\u0627\u0621 \u0644\u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0645\u0628\u064a\u0639\u0627\u062a \u0648\u0627\u0644\u0648\u0639\u064a \u0628\u0627\u0644\u0639\u0644\u0627\u0645\u0629 \u0627\u0644\u062a\u062c\u0627\u0631\u064a\u0629.${company ? ' \u0641\u064a ' + company : ''}`\r\n },\r\n '\u0645\u0635\u0645\u0645 \u062c\u0631\u0627\u0641\u064a\u0643': {\r\n summary: (name, company) =>\r\n `\u0645\u0635\u0645\u0645 \u062c\u0631\u0627\u0641\u064a\u0643 \u0645\u0628\u062a\u0643\u0631 ${name ? name : ''} \u0645\u0639 \u0634\u063a\u0641 \u0628\u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0628\u0635\u0631\u064a \u0648\u0647\u0648\u064a\u0629 \u0627\u0644\u0639\u0644\u0627\u0645\u0627\u062a \u0627\u0644\u062a\u062c\u0627\u0631\u064a\u0629. \u062e\u0628\u0631\u0629 \u0641\u064a \u0628\u0631\u0627\u0645\u062c \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0648\u0625\u0646\u0634\u0627\u0621 \u0645\u062d\u062a\u0648\u0649 \u062c\u0630\u0627\u0628 \u0628\u0635\u0631\u064a\u0627\u064b.${company ? ' \u0623\u0639\u0645\u0644 \u0641\u064a ' + company : ''}`,\r\n exp: (title, company) =>\r\n `\u062a\u0635\u0645\u064a\u0645 \u0647\u0648\u064a\u0627\u062a \u0628\u0635\u0631\u064a\u0629 \u0645\u062a\u0643\u0627\u0645\u0644\u0629\u060c \u0648\u0625\u0646\u062a\u0627\u062c \u0645\u062d\u062a\u0648\u0649 \u062a\u0633\u0648\u064a\u0642\u064a \u062c\u0630\u0627\u0628. \u0625\u0646\u0634\u0627\u0621 \u062a\u0635\u0627\u0645\u064a\u0645 \u0645\u0637\u0628\u0648\u0639\u0629 \u0648\u0631\u0642\u0645\u064a\u0629. \u0627\u0644\u062a\u0639\u0627\u0648\u0646 \u0645\u0639 \u0641\u0631\u0642 \u0627\u0644\u062a\u0633\u0648\u064a\u0642 \u0644\u062a\u0637\u0648\u064a\u0631 \u0645\u0641\u0627\u0647\u064a\u0645 \u0625\u0628\u062f\u0627\u0639\u064a\u0629.${company ? ' \u0641\u064a ' + company : ''}`\r\n },\r\n '\u0645\u062f\u064a\u0631 \u0645\u0634\u0631\u0648\u0639': {\r\n summary: (name, company) =>\r\n `\u0645\u062f\u064a\u0631 \u0645\u0634\u0631\u0648\u0639 \u0645\u062d\u062a\u0631\u0641 ${name ? name : ''} \u0645\u0639 \u062e\u0628\u0631\u0629 \u0641\u064a \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639 \u0645\u0646 \u0627\u0644\u0628\u062f\u0627\u064a\u0629 \u0625\u0644\u0649 \u0627\u0644\u0646\u0647\u0627\u064a\u0629. \u0645\u0647\u0627\u0631\u0627\u062a \u0642\u0648\u064a\u0629 \u0641\u064a \u0627\u0644\u062a\u062e\u0637\u064a\u0637\u060c \u0627\u0644\u062a\u0646\u0638\u064a\u0645\u060c \u0648\u0642\u064a\u0627\u062f\u0629 \u0627\u0644\u0641\u0631\u0642.${company ? ' \u062e\u0628\u0631\u0629 \u0641\u064a ' + company : ''}`,\r\n exp: (title, company) =>\r\n `\u062a\u062e\u0637\u064a\u0637 \u0648\u062a\u0646\u0641\u064a\u0630 \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639 \u0648\u0641\u0642\u0627\u064b \u0644\u0644\u062c\u062f\u0627\u0648\u0644 \u0627\u0644\u0632\u0645\u0646\u064a\u0629 \u0648\u0627\u0644\u0645\u064a\u0632\u0627\u0646\u064a\u0627\u062a \u0627\u0644\u0645\u062d\u062f\u062f\u0629. \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u062e\u0627\u0637\u0631 \u0648\u0627\u0644\u062a\u0648\u0627\u0635\u0644 \u0645\u0639 \u0623\u0635\u062d\u0627\u0628 \u0627\u0644\u0645\u0635\u0644\u062d\u0629. \u0642\u064a\u0627\u062f\u0629 \u0641\u0631\u0642 \u0645\u062a\u0639\u062f\u062f\u0629 \u0644\u062a\u062d\u0642\u064a\u0642 \u0623\u0647\u062f\u0627\u0641 \u0627\u0644\u0645\u0634\u0631\u0648\u0639.${company ? ' \u0641\u064a ' + company : ''}`\r\n },\r\n '\u0645\u062d\u0627\u0633\u0628': {\r\n summary: (name, company) =>\r\n `\u0645\u062d\u0627\u0633\u0628 \u0645\u062d\u062a\u0631\u0641 ${name ? name : ''} \u0645\u0639 \u062e\u0628\u0631\u0629 \u0641\u064a \u0625\u0639\u062f\u0627\u062f \u0627\u0644\u0642\u0648\u0627\u0626\u0645 \u0627\u0644\u0645\u0627\u0644\u064a\u0629 \u0648\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a. \u062f\u0642\u064a\u0642 \u0648\u0645\u0646\u0638\u0645\u060c \u0645\u0639 \u0642\u062f\u0631\u0629 \u0639\u0644\u0649 \u0627\u0644\u0639\u0645\u0644 \u062a\u062d\u062a \u0627\u0644\u0636\u063a\u0637.${company ? ' \u062e\u0628\u0631\u0629 \u0641\u064a ' + company : ''}`,\r\n exp: (title, company) =>\r\n `\u0625\u0639\u062f\u0627\u062f \u0627\u0644\u0642\u0648\u0627\u0626\u0645 \u0627\u0644\u0645\u0627\u0644\u064a\u0629 \u0627\u0644\u0634\u0647\u0631\u064a\u0629 \u0648\u0627\u0644\u0633\u0646\u0648\u064a\u0629. \u0645\u0631\u0627\u062c\u0639\u0629 \u0627\u0644\u062d\u0633\u0627\u0628\u0627\u062a \u0648\u0636\u0645\u0627\u0646 \u0627\u0644\u0627\u0645\u062a\u062b\u0627\u0644 \u0644\u0644\u0645\u0639\u0627\u064a\u064a\u0631. \u062a\u0642\u062f\u064a\u0645 \u062a\u0642\u0627\u0631\u064a\u0631 \u0648\u062a\u062d\u0644\u064a\u0644\u0627\u062a \u0645\u0627\u0644\u064a\u0629 \u0644\u0644\u0625\u062f\u0627\u0631\u0629.${company ? ' \u0641\u064a ' + company : ''}`\r\n },\r\n '\u0637\u0627\u0644\u0628': {\r\n summary: (name, company) =>\r\n `\u0637\u0627\u0644\u0628 \u062c\u0627\u0645\u0639\u064a \u0645\u062c\u062a\u0647\u062f ${name ? name : ''} \u0641\u064a \u0645\u062c\u0627\u0644 [\u0627\u0644\u062a\u062e\u0635\u0635]. \u0634\u063a\u0648\u0641 \u0628\u0627\u0644\u062a\u0639\u0644\u0645 \u0648\u0627\u0643\u062a\u0633\u0627\u0628 \u0645\u0647\u0627\u0631\u0627\u062a \u062c\u062f\u064a\u062f\u0629. \u0623\u0628\u062d\u062b \u0639\u0646 \u0641\u0631\u0635\u0629 \u0644\u0627\u0643\u062a\u0633\u0627\u0628 \u0627\u0644\u062e\u0628\u0631\u0629 \u0627\u0644\u0639\u0645\u0644\u064a\u0629.${company ? ' \u0645\u0647\u062a\u0645 \u0628\u0627\u0644\u062a\u062f\u0631\u064a\u0628 \u0641\u064a ' + company : ''}`,\r\n exp: (title, company) =>\r\n `\u0627\u0644\u0645\u0634\u0627\u0631\u0643\u0629 \u0641\u064a \u0645\u0634\u0627\u0631\u064a\u0639 \u0623\u0643\u0627\u062f\u064a\u0645\u064a\u0629 \u0648\u0639\u0645\u0644 \u062c\u0645\u0627\u0639\u064a. \u062a\u0637\u0648\u064a\u0631 \u0645\u0647\u0627\u0631\u0627\u062a \u0627\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u062a\u062d\u0644\u064a\u0644. \u0627\u0644\u0645\u0634\u0627\u0631\u0643\u0629 \u0641\u064a \u0623\u0646\u0634\u0637\u0629 \u0648\u0648\u0631\u0634 \u0639\u0645\u0644 \u062e\u0627\u0631\u062c \u0627\u0644\u0645\u0646\u0647\u062c.${company ? ' \u0627\u0644\u062a\u062f\u0631\u064a\u0628 \u0641\u064a ' + company : ''}`\r\n },\r\n 'default': {\r\n summary: (name, company) =>\r\n `\u0645\u062d\u062a\u0631\u0641 \u0630\u0648 \u062e\u0628\u0631\u0629 ${name ? name : ''} \u0641\u064a \u0645\u062c\u0627\u0644 [\u0627\u0644\u0645\u062c\u0627\u0644]. \u0623\u062a\u0645\u062a\u0639 \u0628\u0645\u0647\u0627\u0631\u0627\u062a \u0642\u064a\u0627\u062f\u064a\u0629 \u0648\u062a\u0648\u0627\u0635\u0644\u064a\u0629 \u0645\u0645\u062a\u0627\u0632\u0629. \u0623\u0633\u0639\u0649 \u062f\u0627\u0626\u0645\u0627\u064b \u0644\u0644\u062a\u0637\u0648\u064a\u0631 \u0648\u062a\u062d\u0642\u064a\u0642 \u0627\u0644\u0623\u0647\u062f\u0627\u0641.${company ? ' \u0623\u0639\u0645\u0644 \u0641\u064a ' + company : ''}`,\r\n exp: (title, company) =>\r\n `\u0625\u0646\u062c\u0627\u0632 \u0627\u0644\u0645\u0647\u0627\u0645 \u0648\u0627\u0644\u0645\u0633\u0624\u0648\u0644\u064a\u0627\u062a \u0627\u0644\u0645\u0648\u0643\u0644\u0629 \u0628\u0643\u0641\u0627\u0621\u0629 \u0639\u0627\u0644\u064a\u0629. \u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u0639\u0645\u0644\u064a\u0627\u062a \u0648\u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0625\u0646\u062a\u0627\u062c\u064a\u0629. \u0627\u0644\u062a\u0639\u0627\u0648\u0646 \u0645\u0639 \u0627\u0644\u0632\u0645\u0644\u0627\u0621 \u0644\u062a\u062d\u0642\u064a\u0642 \u0646\u062a\u0627\u0626\u062c \u0645\u0645\u064a\u0632\u0629.${company ? ' \u0641\u064a ' + company : ''}`\r\n }\r\n };\r\n\r\n window.generateSummary = function() {\r\n const title = aiJobTitle.value.trim() || 'default';\r\n const company = aiCompany.value.trim();\r\n const lib = PROMPT_LIBRARY[title] || PROMPT_LIBRARY['default'];\r\n const text = lib.summary(state.personal.fullName, company);\r\n aiOutput.textContent = text;\r\n summaryInp.value = text;\r\n syncPersonal();\r\n showToast('\u062a\u0645 \u062a\u0648\u0644\u064a\u062f \u0627\u0644\u0646\u0628\u0630\u0629', 'success');\r\n };\r\n\r\n window.generateExperience = function() {\r\n const title = aiJobTitle.value.trim() || 'default';\r\n const company = aiCompany.value.trim();\r\n const lib = PROMPT_LIBRARY[title] || PROMPT_LIBRARY['default'];\r\n const text = lib.exp(state.personal.jobTitle, company);\r\n aiOutput.textContent = text;\r\n \/\/ Add to first experience section\r\n const expSec = state.sections.find(s => s.type === 'experience');\r\n if (expSec) {\r\n expSec.items.push({ id: genId(), title: state.personal.jobTitle || '\u0645\u0633\u0645\u0649 \u0648\u0638\u064a\u0641\u064a', sub: company ||\r\n '\u0634\u0631\u0643\u0629', start: '2020-01', end: '', isCurrent: true, desc: text });\r\n renderSectionsEditor();\r\n updatePreview();\r\n }\r\n showToast('\u062a\u0645 \u062a\u0648\u0644\u064a\u062f \u0627\u0644\u062e\u0628\u0631\u0629 \u0648\u0625\u0636\u0627\u0641\u062a\u0647\u0627', 'success');\r\n };\r\n\r\n window.generateAll = function() {\r\n generateSummary();\r\n generateExperience();\r\n showToast('\u062a\u0645 \u062a\u0648\u0644\u064a\u062f \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0628\u0627\u0644\u0643\u0627\u0645\u0644!', 'success');\r\n };\r\n\r\n \/\/ --- ATS Analyzer ---\r\n window.analyzeATS = function() {\r\n const jobDesc = atsJobDesc.value.trim();\r\n if (!jobDesc) { showToast('\u0627\u0644\u0631\u062c\u0627\u0621 \u0644\u0635\u0642 \u0648\u0635\u0641 \u0627\u0644\u0648\u0638\u064a\u0641\u0629', 'error'); return; }\r\n \/\/ Extract keywords (simple)\r\n const words = jobDesc.toLowerCase().replace(\/[^a-zA-Z\\u0600-\\u06FF\\s]\/g, '').split(\/\\s+\/);\r\n const keywordMap = {};\r\n words.forEach(w => { if (w.length > 3) keywordMap[w] = (keywordMap[w] || 0) + 1; });\r\n const keywords = Object.keys(keywordMap).sort((a, b) => keywordMap[b] - keywordMap[a]).slice(0, 30);\r\n\r\n \/\/ Check CV text\r\n const cvText = state.personal.summary + ' ' +\r\n state.sections.flatMap(s => s.items?.map(i => i.title + ' ' + i.desc).join(' ') || '').join(' ') +\r\n state.skills.map(s => s.name).join(' ') +\r\n state.languages.map(l => l.name).join(' ');\r\n const cvLower = cvText.toLowerCase();\r\n\r\n let found = 0;\r\n const missing = [];\r\n keywords.forEach(k => {\r\n if (cvLower.includes(k)) found++;\r\n else missing.push(k);\r\n });\r\n\r\n const score = Math.round((found \/ keywords.length) * 100);\r\n atsResults.innerHTML = `\r\n <div style=\"display:flex;justify-content:space-between;font-weight:700;margin-bottom:4px;\">\r\n <span>\u0646\u0633\u0628\u0629 \u0627\u0644\u062a\u0648\u0627\u0641\u0642: <span style=\"color:${score > 70 ? '#16a34a' : score > 40 ? '#eab308' : '#dc2626'};\">${score}%<\/span><\/span>\r\n <span>\u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0627\u0644\u0645\u0637\u0627\u0628\u0642\u0629: ${found}\/${keywords.length}<\/span>\r\n <\/div>\r\n ${missing.length > 0 ? `<div style=\"color:#dc2626;font-size:0.6rem;\"><strong>\u0643\u0644\u0645\u0627\u062a \u0645\u0641\u0642\u0648\u062f\u0629:<\/strong> ${missing.slice(0,15).join(', ')}${missing.length > 15 ? ' ...' : ''}<\/div>` : ''}\r\n ${found > 0 ? `<div style=\"color:#16a34a;font-size:0.6rem;\"><strong>\u0643\u0644\u0645\u0627\u062a \u0645\u0648\u062c\u0648\u062f\u0629:<\/strong> ${keywords.filter(k => cvLower.includes(k)).slice(0,15).join(', ')}<\/div>` : ''}\r\n <div style=\"font-size:0.6rem;color:var(--text-muted);margin-top:4px;\">${score > 70 ? '\u2705 \u0633\u064a\u0631\u062a\u0643 \u0642\u0648\u064a\u0629 \u062c\u062f\u0627\u064b! \u0623\u0646\u062a \u062c\u0627\u0647\u0632 \u0644\u0644\u062a\u0642\u062f\u064a\u0645.' : score > 40 ? '\u26a0\ufe0f \u062d\u0627\u0648\u0644 \u0625\u0636\u0627\u0641\u0629 \u0628\u0639\u0636 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0627\u0644\u0645\u0641\u062a\u0627\u062d\u064a\u0629 \u0627\u0644\u0645\u0641\u0642\u0648\u062f\u0629.' : '\u274c \u0633\u064a\u0631\u062a\u0643 \u0628\u062d\u0627\u062c\u0629 \u0625\u0644\u0649 \u062a\u062d\u0633\u064a\u0646 \u0643\u0628\u064a\u0631 \u0644\u062a\u062c\u062a\u0627\u0632 \u0623\u0646\u0638\u0645\u0629 ATS.'}<\/div>\r\n `;\r\n showToast('\u062a\u0645 \u0627\u0644\u062a\u062d\u0644\u064a\u0644', 'success');\r\n };\r\n\r\n \/\/ --- Readability & Word Count ---\r\n function updateReadability() {\r\n const text = state.personal.summary + ' ' +\r\n state.sections.flatMap(s => s.items?.map(i => i.title + ' ' + i.desc + ' ' + i.sub).join(' ') || '')\r\n .join(' ');\r\n const words = text.match(\/[\\u0600-\\u06FFa-zA-Z]+\/g) || [];\r\n wordCountSpan.textContent = words.length;\r\n \/\/ Simple readability: avg word length & sentence count\r\n const sentences = text.split(\/[.?!\\n]+\/).filter(s => s.trim().length > 5);\r\n const avgWordsPerSentence = sentences.length > 0 ? words.length \/ sentences.length : 0;\r\n let level = '\u0645\u062a\u0648\u0633\u0637';\r\n if (avgWordsPerSentence < 12) level = '\u0633\u0647\u0644';\r\n else if (avgWordsPerSentence > 20) level = '\u0635\u0639\u0628';\r\n readabilityLevelSpan.textContent = level + (avgWordsPerSentence > 0 ? ` (${Math.round(avgWordsPerSentence)} \u0643\u0644\u0645\u0627\u062a\/\u062c\u0645\u0644\u0629)` :\r\n '');\r\n }\r\n\r\n \/\/ --- Scroll Sync ---\r\n function setupScrollSync() {\r\n const editor = document.querySelector('.tab-content.active');\r\n const previewSectionsEl = document.getElementById('previewSections');\r\n if (!editor || !previewSectionsEl) return;\r\n\r\n const sectionBlocks = editor.querySelectorAll('.section-block');\r\n const previewTitles = previewSectionsEl.querySelectorAll('.preview-section-title');\r\n\r\n editor.addEventListener('scroll', function() {\r\n let activeIndex = -1;\r\n sectionBlocks.forEach((block, i) => {\r\n const rect = block.getBoundingClientRect();\r\n const editorRect = editor.getBoundingClientRect();\r\n if (rect.top >= editorRect.top && rect.top < editorRect.top + editorRect.height * 0.4) {\r\n activeIndex = i;\r\n }\r\n });\r\n sectionBlocks.forEach(b => b.classList.remove('highlight'));\r\n if (activeIndex >= 0) {\r\n sectionBlocks[activeIndex].classList.add('highlight');\r\n \/\/ Highlight preview\r\n previewTitles.forEach((t, idx) => {\r\n t.classList.remove('preview-section-highlight');\r\n if (idx === activeIndex && previewTitles[idx]) {\r\n previewTitles[idx].classList.add('preview-section-highlight');\r\n }\r\n });\r\n }\r\n }, { passive: true });\r\n }\r\n\r\n \/\/ ----------------------------------------------------------------\r\n \/\/ 4. APPLY STATE\r\n \/\/ ----------------------------------------------------------------\r\n function applyStateToUI() {\r\n fullNameInp.value = state.personal.fullName || '';\r\n jobTitleInp.value = state.personal.jobTitle || '';\r\n emailInp.value = state.personal.email || '';\r\n phoneInp.value = state.personal.phone || '';\r\n stateInp.value = state.personal.state || '';\r\n countryInp.value = state.personal.country || '';\r\n zipInp.value = state.personal.zip || '';\r\n websiteInp.value = state.personal.website || '';\r\n linkedinInp.value = state.personal.linkedin || '';\r\n githubInp.value = state.personal.github || '';\r\n summaryInp.value = state.personal.summary || '';\r\n photoURLInp.value = state.personal.photoURL || '';\r\n\r\n fontSelect.value = state.design.font || \"'Cairo', 'Inter', sans-serif\";\r\n bgColorPicker.value = state.design.bgColor || '#ffffff';\r\n textColorPicker.value = state.design.textColor || '#1e293b';\r\n sidebarBgColor.value = state.design.sidebarBg || '#0a2647';\r\n sidebarTextColor.value = state.design.sidebarText || '#ffffff';\r\n fontSizeRange.value = state.design.fontSize || 13;\r\n fontSizeLabel.textContent = (state.design.fontSize || 13) + 'px';\r\n spacingRange.value = state.design.spacing || 1.4;\r\n spacingLabel.textContent = (state.design.spacing || 1.4) + 'rem';\r\n marginSelect.value = state.design.margin || '1.8rem';\r\n sidebarLayout.value = state.design.sidebarLayout || 'left';\r\n modernColumns.value = state.design.modernColumns || 2;\r\n colorHexInput.value = state.design.primaryColor || '#0f3b5e';\r\n customColorPicker.value = state.design.primaryColor || '#0f3b5e';\r\n dirSelect.value = state.dir || 'rtl';\r\n langSelect.value = state.lang || 'ar';\r\n footerToggle.checked = state.design.footer.show !== false;\r\n footerText.value = state.design.footer.text || '\u0627\u0644\u0633\u064a\u0631\u0629 \u0627\u0644\u0630\u0627\u062a\u064a\u0629 - \u0627\u0644\u0635\u0641\u062d\u0629 1';\r\n\r\n document.querySelectorAll('.design-card').forEach(el => {\r\n el.classList.toggle('active', el.dataset.template === state.design.template);\r\n });\r\n document.querySelectorAll('.color-swatch').forEach(el => {\r\n el.classList.toggle('active', el.dataset.color === state.design.primaryColor);\r\n });\r\n\r\n renderSectionsEditor();\r\n renderSkillsEditor();\r\n renderLanguagesEditor();\r\n renderToggleSections();\r\n updatePreview();\r\n updateVersionSelect();\r\n updateReadability();\r\n document.getElementById('saveStatus').textContent = '\u2713 \u0645\u062d\u0645\u0644';\r\n \/\/ Setup scroll sync after render\r\n setTimeout(setupScrollSync, 300);\r\n }\r\n\r\n \/\/ ----------------------------------------------------------------\r\n \/\/ 5. RENDER FUNCTIONS\r\n \/\/ ----------------------------------------------------------------\r\n function renderSectionsEditor() {\r\n let html = '';\r\n const allSections = [...state.sections, ...state.customSections];\r\n const iconMap = {\r\n 'experience': 'briefcase',\r\n 'education': 'graduation-cap',\r\n 'certificates': 'certificate',\r\n 'projects': 'project-diagram',\r\n 'references': 'address-card',\r\n 'hobbies': 'heart',\r\n 'awards': 'trophy',\r\n 'volunteering': 'hands',\r\n 'courses': 'book-open',\r\n 'custom': 'plus-circle'\r\n };\r\n allSections.forEach((sec) => {\r\n const isCustom = sec.type === 'custom';\r\n html += `\r\n <div class=\"section-block\" data-id=\"${sec.id}\">\r\n <div class=\"section-header\">\r\n <span class=\"title\"><i class=\"fas fa-${iconMap[sec.type] || 'circle'}\"><\/i> ${sec.title} <span class=\"badge-vis\">${sec.items ? sec.items.length : 0}<\/span><\/span>\r\n <div style=\"display:flex;gap:2px;\">\r\n ${isCustom ? `<button class=\"btn-sm danger\" onclick=\"removeCustomSection('${sec.id}')\" style=\"padding:0 4px;\"><i class=\"fas fa-trash\"><\/i><\/button>` : ''}\r\n <button class=\"btn-sm outline\" onclick=\"toggleSectionVisibility('${sec.id}')\" style=\"padding:0 4px;\"><i class=\"fas fa-${sec.visible ? 'eye' : 'eye-slash'}\"><\/i><\/button>\r\n <button class=\"btn-sm outline\" onclick=\"addItemToSection('${sec.id}')\" style=\"padding:0 4px;\"><i class=\"fas fa-plus\"><\/i><\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"section-body\">\r\n ${(sec.items || []).map((item) => `\r\n <div class=\"item-card\" data-item-id=\"${item.id}\">\r\n <span class=\"drag-handle\"><i class=\"fas fa-grip-vertical\"><\/i><\/span>\r\n <button class=\"remove-item\" onclick=\"removeItemFromSection('${sec.id}','${item.id}')\"><i class=\"fas fa-times\"><\/i><\/button>\r\n ${renderItemFields(sec, item)}\r\n <\/div>\r\n `).join('')}\r\n <button class=\"add-btn\" onclick=\"addItemToSection('${sec.id}')\"><i class=\"fas fa-plus\"><\/i> \u0625\u0636\u0627\u0641\u0629 \u0639\u0646\u0635\u0631<\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n });\r\n sectionsContainer.innerHTML = html;\r\n initSortableInSections();\r\n }\r\n\r\n function renderItemFields(sec, item) {\r\n const type = sec.type;\r\n if (type === 'experience' || type === 'education') {\r\n return `\r\n <div class=\"grid-2\">\r\n <div class=\"full\"><input type=\"text\" value=\"${item.title || ''}\" placeholder=\"${type === 'experience' ? '\u0627\u0644\u0645\u0633\u0645\u0649 \u0627\u0644\u0648\u0638\u064a\u0641\u064a' : '\u0627\u0644\u0634\u0647\u0627\u062f\u0629'}\" onchange=\"updateItemField('${sec.id}','${item.id}','title',this.value)\" \/><\/div>\r\n <div class=\"full\"><input type=\"text\" value=\"${item.sub || ''}\" placeholder=\"${type === 'experience' ? '\u0627\u0644\u0634\u0631\u0643\u0629' : '\u0627\u0644\u0645\u0624\u0633\u0633\u0629'}\" onchange=\"updateItemField('${sec.id}','${item.id}','sub',this.value)\" \/><\/div>\r\n <\/div>\r\n <div class=\"grid-2\">\r\n <div><input type=\"month\" value=\"${item.start || ''}\" placeholder=\"\u0628\u062f\u0627\u064a\u0629\" onchange=\"updateItemField('${sec.id}','${item.id}','start',this.value)\" \/><\/div>\r\n <div><input type=\"month\" value=\"${item.end || ''}\" placeholder=\"\u0646\u0647\u0627\u064a\u0629\" ${item.isCurrent ? 'disabled' : ''} onchange=\"updateItemField('${sec.id}','${item.id}','end',this.value)\" \/><\/div>\r\n <\/div>\r\n <div class=\"checkbox-wrap\"><input type=\"checkbox\" id=\"curr_${item.id}\" ${item.isCurrent ? 'checked' : ''} onchange=\"updateItemField('${sec.id}','${item.id}','isCurrent',this.checked)\" \/><label for=\"curr_${item.id}\">\u062d\u0627\u0644\u064a<\/label><\/div>\r\n <textarea rows=\"2\" placeholder=\"\u0627\u0644\u0648\u0635\u0641\" onchange=\"updateItemField('${sec.id}','${item.id}','desc',this.value)\">${item.desc || ''}<\/textarea>\r\n `;\r\n } else if (type === 'certificates' || type === 'courses') {\r\n return `\r\n <div class=\"grid-2\">\r\n <div class=\"full\"><input type=\"text\" value=\"${item.title || ''}\" placeholder=\"${type === 'certificates' ? '\u0627\u0633\u0645 \u0627\u0644\u0634\u0647\u0627\u062f\u0629' : '\u0627\u0633\u0645 \u0627\u0644\u062f\u0648\u0631\u0629'}\" onchange=\"updateItemField('${sec.id}','${item.id}','title',this.value)\" \/><\/div>\r\n <div class=\"full\"><input type=\"text\" value=\"${item.sub || ''}\" placeholder=\"${type === 'certificates' ? '\u0627\u0644\u062c\u0647\u0629 \u0627\u0644\u0645\u0627\u0646\u062d\u0629' : '\u0627\u0644\u0645\u0624\u0633\u0633\u0629 \u0627\u0644\u0645\u0642\u062f\u0645\u0629'}\" onchange=\"updateItemField('${sec.id}','${item.id}','sub',this.value)\" \/><\/div>\r\n <\/div>\r\n <div><input type=\"date\" value=\"${item.date || ''}\" placeholder=\"\u0627\u0644\u062a\u0627\u0631\u064a\u062e\" onchange=\"updateItemField('${sec.id}','${item.id}','date',this.value)\" \/><\/div>\r\n `;\r\n } else if (type === 'projects') {\r\n return `\r\n <div class=\"grid-2\">\r\n <div class=\"full\"><input type=\"text\" value=\"${item.title || ''}\" placeholder=\"\u0627\u0633\u0645 \u0627\u0644\u0645\u0634\u0631\u0648\u0639\" onchange=\"updateItemField('${sec.id}','${item.id}','title',this.value)\" \/><\/div>\r\n <div class=\"full\"><textarea rows=\"2\" placeholder=\"\u0648\u0635\u0641 \u0627\u0644\u0645\u0634\u0631\u0648\u0639\" onchange=\"updateItemField('${sec.id}','${item.id}','desc',this.value)\">${item.desc || ''}<\/textarea><\/div>\r\n <\/div>\r\n <div><input type=\"date\" value=\"${item.date || ''}\" placeholder=\"\u062a\u0627\u0631\u064a\u062e\" onchange=\"updateItemField('${sec.id}','${item.id}','date',this.value)\" \/><\/div>\r\n `;\r\n } else if (type === 'references') {\r\n return `\r\n <div class=\"grid-2\">\r\n <div class=\"full\"><input type=\"text\" value=\"${item.title || ''}\" placeholder=\"\u0627\u0644\u0627\u0633\u0645\" onchange=\"updateItemField('${sec.id}','${item.id}','title',this.value)\" \/><\/div>\r\n <div class=\"full\"><input type=\"text\" value=\"${item.sub || ''}\" placeholder=\"\u0627\u0644\u0648\u0638\u064a\u0641\u0629 \/ \u062c\u0647\u0629 \u0627\u0644\u0627\u062a\u0635\u0627\u0644\" onchange=\"updateItemField('${sec.id}','${item.id}','sub',this.value)\" \/><\/div>\r\n <\/div>\r\n `;\r\n } else if (type === 'hobbies' || type === 'awards' || type === 'volunteering') {\r\n const placeholder = type === 'hobbies' ? '\u0627\u0644\u0647\u0648\u0627\u064a\u0629' : (type === 'awards' ? '\u0627\u0644\u062c\u0627\u0626\u0632\u0629' : '\u0627\u0644\u0646\u0634\u0627\u0637 \u0627\u0644\u062a\u0637\u0648\u0639\u064a');\r\n return `\r\n <input type=\"text\" value=\"${item.title || ''}\" placeholder=\"${placeholder}\" onchange=\"updateItemField('${sec.id}','${item.id}','title',this.value)\" \/>\r\n ${type !== 'hobbies' ? `<input type=\"text\" value=\"${item.sub || ''}\" placeholder=\"\u062a\u0641\u0627\u0635\u064a\u0644 \u0625\u0636\u0627\u0641\u064a\u0629\" onchange=\"updateItemField('${sec.id}','${item.id}','sub',this.value)\" \/>` : ''}\r\n ${type === 'volunteering' ? `<textarea rows=\"2\" placeholder=\"\u0627\u0644\u0648\u0635\u0641\" onchange=\"updateItemField('${sec.id}','${item.id}','desc',this.value)\">${item.desc || ''}<\/textarea>` : ''}\r\n `;\r\n } else {\r\n return `\r\n <div class=\"grid-2\">\r\n <div class=\"full\"><input type=\"text\" value=\"${item.title || ''}\" placeholder=\"\u0627\u0644\u0639\u0646\u0648\u0627\u0646\" onchange=\"updateItemField('${sec.id}','${item.id}','title',this.value)\" \/><\/div>\r\n <div class=\"full\"><input type=\"text\" value=\"${item.desc || ''}\" placeholder=\"\u0627\u0644\u0648\u0635\u0641\" onchange=\"updateItemField('${sec.id}','${item.id}','desc',this.value)\" \/><\/div>\r\n <\/div>\r\n `;\r\n }\r\n }\r\n\r\n function renderSkillsEditor() {\r\n let html = '';\r\n state.skills.forEach((skill, idx) => {\r\n html += `\r\n <div class=\"skill-row\">\r\n <input type=\"text\" value=\"${skill.name || ''}\" placeholder=\"\u0627\u0644\u0645\u0647\u0627\u0631\u0629\" onchange=\"updateSkill(${idx},'name',this.value)\" \/>\r\n <select onchange=\"updateSkill(${idx},'level',this.value)\">\r\n <option value=\"\u0645\u0628\u062a\u062f\u0626\" ${skill.level === '\u0645\u0628\u062a\u062f\u0626' ? 'selected' : ''}>\u0645\u0628\u062a\u062f\u0626<\/option>\r\n <option value=\"\u0645\u062a\u0648\u0633\u0637\" ${skill.level === '\u0645\u062a\u0648\u0633\u0637' ? 'selected' : ''}>\u0645\u062a\u0648\u0633\u0637<\/option>\r\n <option value=\"\u0645\u062a\u0642\u062f\u0645\" ${skill.level === '\u0645\u062a\u0642\u062f\u0645' ? 'selected' : ''}>\u0645\u062a\u0642\u062f\u0645<\/option>\r\n <option value=\"\u062e\u0628\u064a\u0631\" ${skill.level === '\u062e\u0628\u064a\u0631' ? 'selected' : ''}>\u062e\u0628\u064a\u0631<\/option>\r\n <\/select>\r\n <button class=\"remove-skill\" onclick=\"removeSkill(${idx})\"><i class=\"fas fa-times\"><\/i><\/button>\r\n <\/div>\r\n `;\r\n });\r\n skillsContainer.innerHTML = html;\r\n }\r\n\r\n function renderLanguagesEditor() {\r\n let html = '';\r\n state.languages.forEach((lang, idx) => {\r\n html += `\r\n <div class=\"lang-row\">\r\n <input type=\"text\" value=\"${lang.name || ''}\" placeholder=\"\u0627\u0644\u0644\u063a\u0629\" onchange=\"updateLanguage(${idx},'name',this.value)\" \/>\r\n <select onchange=\"updateLanguage(${idx},'level',this.value)\">\r\n <option value=\"\u0645\u0628\u062a\u062f\u0626\" ${lang.level === '\u0645\u0628\u062a\u062f\u0626' ? 'selected' : ''}>\u0645\u0628\u062a\u062f\u0626<\/option>\r\n <option value=\"\u0645\u062a\u0648\u0633\u0637\" ${lang.level === '\u0645\u062a\u0648\u0633\u0637' ? 'selected' : ''}>\u0645\u062a\u0648\u0633\u0637<\/option>\r\n <option value=\"\u0645\u062a\u0642\u062f\u0645\" ${lang.level === '\u0645\u062a\u0642\u062f\u0645' ? 'selected' : ''}>\u0645\u062a\u0642\u062f\u0645<\/option>\r\n <option value=\"\u062e\u0628\u064a\u0631\" ${lang.level === '\u062e\u0628\u064a\u0631' ? 'selected' : ''}>\u062e\u0628\u064a\u0631<\/option>\r\n <\/select>\r\n <button class=\"remove-lang\" onclick=\"removeLanguage(${idx})\"><i class=\"fas fa-times\"><\/i><\/button>\r\n <\/div>\r\n `;\r\n });\r\n languagesContainer.innerHTML = html;\r\n }\r\n\r\n function renderToggleSections() {\r\n const all = [...state.sections, ...state.customSections];\r\n let html = '';\r\n all.forEach(sec => {\r\n html += `\r\n <div style=\"display:flex;justify-content:space-between;align-items:center;padding:2px 5px;background:var(--bg-surface);border-radius:4px;border:1px solid var(--border-color);\">\r\n <span style=\"font-size:0.7rem;\">${sec.title}<\/span>\r\n <button class=\"btn-sm outline\" onclick=\"toggleSectionVisibility('${sec.id}')\" style=\"padding:2px 6px;\">${sec.visible ? '\ud83d\udc41\ufe0f \u0638\u0627\u0647\u0631' : '\ud83d\ude48 \u0645\u062e\u0641\u064a'}<\/button>\r\n <\/div>\r\n `;\r\n });\r\n toggleSectionsContainer.innerHTML = html;\r\n }\r\n\r\n function initSortableInSections() {\r\n document.querySelectorAll('.section-body').forEach(body => {\r\n if (body._sortable) body._sortable.destroy();\r\n const sortable = Sortable.create(body, {\r\n handle: '.drag-handle',\r\n animation: 150,\r\n onEnd: function(evt) {\r\n const sectionBlock = evt.target.closest('.section-block');\r\n if (!sectionBlock) return;\r\n const secId = sectionBlock.dataset.id;\r\n let sec = state.sections.find(s => s.id === secId);\r\n if (!sec) sec = state.customSections.find(s => s.id === secId);\r\n if (!sec) return;\r\n const itemElements = Array.from(body.querySelectorAll('.item-card'));\r\n const newOrder = itemElements.map(el => el.dataset.itemId);\r\n sec.items.sort((a, b) => newOrder.indexOf(a.id) - newOrder.indexOf(b.id));\r\n saveStateToHistory();\r\n updatePreview();\r\n }\r\n });\r\n body._sortable = sortable;\r\n });\r\n const container = document.getElementById('sectionsContainer');\r\n if (container && !container._sortable) {\r\n container._sortable = Sortable.create(container, {\r\n handle: '.section-header',\r\n animation: 150,\r\n onEnd: function() {\r\n const children = Array.from(container.children);\r\n const allIds = children.map(el => el.dataset.id);\r\n const builtIn = state.sections.filter(s => allIds.includes(s.id));\r\n const custom = state.customSections.filter(s => allIds.includes(s.id));\r\n const orderedBuiltIn = [];\r\n const orderedCustom = [];\r\n allIds.forEach(id => {\r\n const foundBuilt = builtIn.find(s => s.id === id);\r\n if (foundBuilt) orderedBuiltIn.push(foundBuilt);\r\n else {\r\n const foundCustom = custom.find(s => s.id === id);\r\n if (foundCustom) orderedCustom.push(foundCustom);\r\n }\r\n });\r\n state.sections = orderedBuiltIn;\r\n state.customSections = orderedCustom;\r\n saveStateToHistory();\r\n updatePreview();\r\n renderToggleSections();\r\n }\r\n });\r\n }\r\n }\r\n\r\n \/\/ ----------------------------------------------------------------\r\n \/\/ 6. PREVIEW RENDER\r\n \/\/ ----------------------------------------------------------------\r\n function updatePreview() {\r\n const p = state.personal;\r\n viewName.textContent = p.fullName || '\u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u0643\u0627\u0645\u0644';\r\n viewRole.textContent = p.jobTitle || '\u0627\u0644\u0645\u0633\u0645\u0649 \u0627\u0644\u0648\u0638\u064a\u0641\u064a';\r\n viewSummary.textContent = p.summary || '\u0646\u0628\u0630\u0629 \u062a\u0639\u0631\u064a\u0641\u064a\u0629...';\r\n viewEmail.textContent = p.email || '';\r\n viewPhone.textContent = p.phone || '';\r\n viewState.textContent = p.state || '';\r\n viewCountry.textContent = p.country || '';\r\n viewZip.textContent = p.zip || '';\r\n viewWebsite.textContent = p.website || '';\r\n viewLinkedin.textContent = p.linkedin || '';\r\n viewGithub.textContent = p.github || '';\r\n\r\n if (p.photoURL) {\r\n previewPhoto.innerHTML =\r\n `<img decoding=\"async\" src=\"${p.photoURL}\" style=\"width:100%;height:100%;object-fit:cover;\" alt=\"Photo\" \/>`;\r\n } else {\r\n previewPhoto.innerHTML = `<i class=\"fas fa-user\"><\/i>`;\r\n }\r\n\r\n let skillsHtml = '';\r\n state.skills.forEach(s => {\r\n const levelMap = { '\u0645\u0628\u062a\u062f\u0626': 25, '\u0645\u062a\u0648\u0633\u0637': 50, '\u0645\u062a\u0642\u062f\u0645': 75, '\u062e\u0628\u064a\u0631': 100 };\r\n const lvl = levelMap[s.level] || 50;\r\n skillsHtml += `\r\n <div class=\"skill-bar-wrap\">\r\n <span class=\"skill-name\">${s.name || ''}<\/span>\r\n <div class=\"bar-track\"><div class=\"bar-fill\" style=\"width:${lvl}%;\"><\/div><\/div>\r\n <span class=\"bar-label\">${s.level || '\u0645\u062a\u0648\u0633\u0637'}<\/span>\r\n <\/div>\r\n `;\r\n });\r\n viewSkillsList.innerHTML = skillsHtml;\r\n\r\n let langsHtml = '';\r\n state.languages.forEach(l => {\r\n const levelMap = { '\u0645\u0628\u062a\u062f\u0626': 25, '\u0645\u062a\u0648\u0633\u0637': 50, '\u0645\u062a\u0642\u062f\u0645': 75, '\u062e\u0628\u064a\u0631': 100 };\r\n const lvl = levelMap[l.level] || 50;\r\n langsHtml += `\r\n <div class=\"skill-bar-wrap\">\r\n <span class=\"skill-name\">${l.name || ''}<\/span>\r\n <div class=\"bar-track\"><div class=\"bar-fill\" style=\"width:${lvl}%;\"><\/div><\/div>\r\n <span class=\"bar-label\">${l.level || '\u0645\u062a\u0648\u0633\u0637'}<\/span>\r\n <\/div>\r\n `;\r\n });\r\n viewLanguagesList.innerHTML = langsHtml;\r\n\r\n const allSections = [...state.sections, ...state.customSections];\r\n let sectionsHtml = '';\r\n const iconMap = {\r\n 'experience': 'briefcase',\r\n 'education': 'graduation-cap',\r\n 'certificates': 'certificate',\r\n 'projects': 'project-diagram',\r\n 'references': 'address-card',\r\n 'hobbies': 'heart',\r\n 'awards': 'trophy',\r\n 'volunteering': 'hands',\r\n 'courses': 'book-open',\r\n 'custom': 'plus-circle'\r\n };\r\n allSections.forEach(sec => {\r\n if (!sec.visible) return;\r\n sectionsHtml +=\r\n `<div class=\"preview-section-title\"><i class=\"fas fa-${iconMap[sec.type] || 'circle'}\"><\/i> ${sec.title}<\/div>`;\r\n if (sec.items && sec.items.length > 0) {\r\n sec.items.forEach(item => {\r\n sectionsHtml += renderPreviewItem(sec, item);\r\n });\r\n } else {\r\n sectionsHtml += `<p style=\"font-size:0.7rem;color:var(--text-muted);\">\u0644\u0627 \u062a\u0648\u062c\u062f \u0639\u0646\u0627\u0635\u0631<\/p>`;\r\n }\r\n });\r\n previewSections.innerHTML = sectionsHtml;\r\n\r\n const showFooter = state.design.footer.show !== false;\r\n previewFooter.style.display = showFooter ? 'block' : 'none';\r\n previewFooter.textContent = state.design.footer.text || '\u0627\u0644\u0633\u064a\u0631\u0629 \u0627\u0644\u0630\u0627\u062a\u064a\u0629 - \u0627\u0644\u0635\u0641\u062d\u0629 1';\r\n\r\n \/\/ Apply Design\r\n previewEl.className = 'template-' + state.design.template;\r\n\r\n \/\/ Sidebar layout\r\n previewEl.classList.remove('sidebar-left', 'sidebar-right');\r\n previewEl.classList.add('sidebar-' + (state.design.sidebarLayout || 'left'));\r\n\r\n \/\/ Modern columns\r\n if (state.design.template === 'modern') {\r\n const main = previewEl.querySelector('.preview-main');\r\n if (main) {\r\n if (state.design.modernColumns === 2) {\r\n main.style.display = 'grid';\r\n main.style.gridTemplateColumns = '1fr 1fr';\r\n main.style.gap = '16px';\r\n } else {\r\n main.style.display = 'block';\r\n }\r\n }\r\n } else {\r\n const main = previewEl.querySelector('.preview-main');\r\n if (main) { main.style.display = 'block'; }\r\n }\r\n\r\n previewEl.style.fontFamily = state.design.font;\r\n previewEl.style.backgroundColor = state.design.bgColor || '#ffffff';\r\n previewEl.style.setProperty('--primary-color', state.design.primaryColor);\r\n previewEl.style.setProperty('--text-color-preview', state.design.textColor || '#1e293b');\r\n previewEl.style.setProperty('--sidebar-gradient',\r\n `linear-gradient(150deg, ${state.design.sidebarBg || '#0a2647'}dd, ${state.design.sidebarBg || '#0a2647'}cc)`\r\n );\r\n previewEl.style.setProperty('--sidebar-text-color', state.design.sidebarText || '#ffffff');\r\n previewEl.style.setProperty('--sidebar-bg-color', state.design.sidebarBg || '#0a2647');\r\n previewEl.style.fontSize = state.design.fontSize + 'px';\r\n const spacing = state.design.spacing + 'rem';\r\n previewEl.querySelectorAll('.preview-section-title').forEach(el => {\r\n el.style.marginTop = spacing;\r\n });\r\n const margin = state.design.margin || '1.8rem';\r\n previewEl.querySelectorAll('.preview-main').forEach(el => {\r\n el.style.padding = margin;\r\n });\r\n previewEl.querySelectorAll('.preview-sidebar').forEach(el => {\r\n if (state.design.template === 'classic' || state.design.template === 'creative') {\r\n el.style.padding = margin;\r\n }\r\n });\r\n\r\n rootApp.dir = state.dir;\r\n document.documentElement.dir = state.dir;\r\n rootApp.style.direction = state.dir;\r\n\r\n if (!isFullscreen) {\r\n previewEl.style.transform = `scale(${currentZoom})`;\r\n zoomLevel.textContent = Math.round(currentZoom * 100) + '%';\r\n }\r\n updateReadability();\r\n }\r\n\r\n function renderPreviewItem(sec, item) {\r\n const type = sec.type;\r\n const startStr = item.start ? formatDateLocale(item.start) : '';\r\n const endStr = item.isCurrent ? 'Present' : (item.end ? formatDateLocale(item.end) : '');\r\n const dateStr = startStr ? startStr + ' \u2014 ' + endStr : '';\r\n\r\n if (type === 'experience' || type === 'education') {\r\n return `\r\n <div class=\"timeline-item-preview\">\r\n <span class=\"tl-title\">${item.title || ''}<\/span>\r\n ${item.sub ? `<span class=\"tl-sub\">${item.sub}<\/span>` : ''}\r\n ${dateStr ? `<span class=\"tl-date\">${dateStr}<\/span>` : ''}\r\n ${item.desc ? `<p class=\"tl-desc\">${item.desc}<\/p>` : ''}\r\n <\/div>\r\n `;\r\n } else if (type === 'certificates' || type === 'courses') {\r\n const d = item.date ? new Date(item.date).toLocaleDateString('en', { year: 'numeric', month: 'short' }) :\r\n '';\r\n return `\r\n <div class=\"timeline-item-preview\">\r\n <span class=\"tl-title\">${item.title || ''}<\/span>\r\n ${item.sub ? `<span class=\"tl-sub\">${item.sub}<\/span>` : ''}\r\n ${d ? `<span class=\"tl-date\">${d}<\/span>` : ''}\r\n <\/div>\r\n `;\r\n } else if (type === 'projects') {\r\n const d = item.date ? new Date(item.date).toLocaleDateString('en', { year: 'numeric', month: 'short' }) :\r\n '';\r\n return `\r\n <div class=\"timeline-item-preview\">\r\n <span class=\"tl-title\">${item.title || ''}<\/span>\r\n ${d ? `<span class=\"tl-date\">${d}<\/span>` : ''}\r\n ${item.desc ? `<p class=\"tl-desc\">${item.desc}<\/p>` : ''}\r\n <\/div>\r\n `;\r\n } else if (type === 'references') {\r\n return `\r\n <div class=\"timeline-item-preview\">\r\n <span class=\"tl-title\">${item.title || ''}<\/span>\r\n ${item.sub ? `<span class=\"tl-sub\">${item.sub}<\/span>` : ''}\r\n <\/div>\r\n `;\r\n } else if (type === 'hobbies') {\r\n return `<span style=\"display:inline-block;background:var(--border-color);padding:2px 10px;border-radius:20px;margin:2px;font-size:0.7rem;\">${item.title || ''}<\/span>`;\r\n } else if (type === 'awards') {\r\n return `\r\n <div class=\"timeline-item-preview\">\r\n <span class=\"tl-title\">${item.title || ''}<\/span>\r\n ${item.sub ? `<span class=\"tl-sub\">${item.sub}<\/span>` : ''}\r\n <\/div>\r\n `;\r\n } else if (type === 'volunteering') {\r\n return `\r\n <div class=\"timeline-item-preview\">\r\n <span class=\"tl-title\">${item.title || ''}<\/span>\r\n ${item.sub ? `<span class=\"tl-sub\">${item.sub}<\/span>` : ''}\r\n ${item.desc ? `<p class=\"tl-desc\">${item.desc}<\/p>` : ''}\r\n <\/div>\r\n `;\r\n } else {\r\n return `\r\n <div class=\"timeline-item-preview\">\r\n <span class=\"tl-title\">${item.title || ''}<\/span>\r\n ${item.desc ? `<p class=\"tl-desc\">${item.desc}<\/p>` : ''}\r\n <\/div>\r\n `;\r\n }\r\n }\r\n\r\n \/\/ ----------------------------------------------------------------\r\n \/\/ 7. MUTATIONS\r\n \/\/ ----------------------------------------------------------------\r\n function syncPersonal() {\r\n state.personal.fullName = fullNameInp.value;\r\n state.personal.jobTitle = jobTitleInp.value;\r\n state.personal.email = emailInp.value;\r\n state.personal.phone = phoneInp.value;\r\n state.personal.state = stateInp.value;\r\n state.personal.country = countryInp.value;\r\n state.personal.zip = zipInp.value;\r\n state.personal.website = websiteInp.value;\r\n state.personal.linkedin = linkedinInp.value;\r\n state.personal.github = githubInp.value;\r\n state.personal.summary = summaryInp.value;\r\n state.personal.photoURL = photoURLInp.value;\r\n saveStateToHistory();\r\n updatePreview();\r\n }\r\n [fullNameInp, jobTitleInp, emailInp, phoneInp, stateInp, countryInp, zipInp, websiteInp, linkedinInp, githubInp,\r\n summaryInp, photoURLInp\r\n ].forEach(inp => inp.addEventListener('input', syncPersonal));\r\n\r\n window.handlePhotoUpload = function(e) {\r\n const file = e.target.files[0];\r\n if (!file) return;\r\n const reader = new FileReader();\r\n reader.onload = function(ev) {\r\n state.personal.photoURL = ev.target.result;\r\n photoURLInp.value = ev.target.result;\r\n saveStateToHistory();\r\n updatePreview();\r\n showToast('\u062a\u0645 \u0631\u0641\u0639 \u0627\u0644\u0635\u0648\u0631\u0629', 'success');\r\n };\r\n reader.readAsDataURL(file);\r\n document.getElementById('photoFileInput').value = '';\r\n };\r\n\r\n window.addCustomSection = function() {\r\n const title = prompt('\u0623\u062f\u062e\u0644 \u0627\u0633\u0645 \u0627\u0644\u0642\u0633\u0645 \u0627\u0644\u062c\u062f\u064a\u062f:', '\u0642\u0633\u0645 \u0645\u062e\u0635\u0635');\r\n if (!title) return;\r\n state.customSections.push({ id: genId(), type: 'custom', title, items: [], visible: true });\r\n saveStateToHistory();\r\n renderSectionsEditor();\r\n renderToggleSections();\r\n updatePreview();\r\n showToast('\u062a\u0645 \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0642\u0633\u0645', 'success');\r\n };\r\n window.removeCustomSection = function(id) {\r\n state.customSections = state.customSections.filter(s => s.id !== id);\r\n saveStateToHistory();\r\n renderSectionsEditor();\r\n renderToggleSections();\r\n updatePreview();\r\n showToast('\u062a\u0645 \u062d\u0630\u0641 \u0627\u0644\u0642\u0633\u0645', 'info');\r\n };\r\n window.toggleSectionVisibility = function(id) {\r\n let sec = state.sections.find(s => s.id === id);\r\n if (!sec) sec = state.customSections.find(s => s.id === id);\r\n if (sec) { sec.visible = !sec.visible;\r\n saveStateToHistory();\r\n renderSectionsEditor();\r\n renderToggleSections();\r\n updatePreview(); }\r\n };\r\n window.addItemToSection = function(secId) {\r\n let sec = state.sections.find(s => s.id === secId);\r\n if (!sec) sec = state.customSections.find(s => s.id === secId);\r\n if (!sec) return;\r\n const newItem = { id: genId(), title: '', sub: '', desc: '', start: '', end: '', isCurrent: false,\r\n date: '' };\r\n sec.items.push(newItem);\r\n saveStateToHistory();\r\n renderSectionsEditor();\r\n updatePreview();\r\n };\r\n window.removeItemFromSection = function(secId, itemId) {\r\n let sec = state.sections.find(s => s.id === secId);\r\n if (!sec) sec = state.customSections.find(s => s.id === secId);\r\n if (!sec) return;\r\n sec.items = sec.items.filter(i => i.id !== itemId);\r\n saveStateToHistory();\r\n renderSectionsEditor();\r\n updatePreview();\r\n };\r\n window.updateItemField = function(secId, itemId, key, val) {\r\n let sec = state.sections.find(s => s.id === secId);\r\n if (!sec) sec = state.customSections.find(s => s.id === secId);\r\n if (!sec) return;\r\n const item = sec.items.find(i => i.id === itemId);\r\n if (!item) return;\r\n if (key === 'isCurrent') { item.isCurrent = !!val; if (item.isCurrent) item.end = '';\r\n renderSectionsEditor(); } else { item[key] = val; }\r\n saveStateToHistory();\r\n updatePreview();\r\n };\r\n\r\n window.addSkill = function() { state.skills.push({ name: '\u0645\u0647\u0627\u0631\u0629 \u062c\u062f\u064a\u062f\u0629', level: '\u0645\u062a\u0648\u0633\u0637' });\r\n saveStateToHistory();\r\n renderSkillsEditor();\r\n updatePreview(); };\r\n window.updateSkill = function(idx, key, val) { if (state.skills[idx]) { state.skills[idx][key] = val;\r\n saveStateToHistory();\r\n updatePreview(); } };\r\n window.removeSkill = function(idx) { state.skills.splice(idx, 1);\r\n saveStateToHistory();\r\n renderSkillsEditor();\r\n updatePreview(); };\r\n\r\n window.addLanguage = function() { state.languages.push({ name: '\u0644\u063a\u0629 \u062c\u062f\u064a\u062f\u0629', level: '\u0645\u062a\u0648\u0633\u0637' });\r\n saveStateToHistory();\r\n renderLanguagesEditor();\r\n updatePreview(); };\r\n window.updateLanguage = function(idx, key, val) { if (state.languages[idx]) { state.languages[idx][key] = val;\r\n saveStateToHistory();\r\n updatePreview(); } };\r\n window.removeLanguage = function(idx) { state.languages.splice(idx, 1);\r\n saveStateToHistory();\r\n renderLanguagesEditor();\r\n updatePreview(); };\r\n\r\n window.setTemplate = function(tpl) { state.design.template = tpl;\r\n document.querySelectorAll('.design-card').forEach(el => el.classList.toggle('active', el.dataset.template ===\r\n tpl));\r\n saveStateToHistory();\r\n updatePreview(); };\r\n window.setPrimaryColor = function(color, el) {\r\n if (!color) return;\r\n state.design.primaryColor = color;\r\n colorHexInput.value = color;\r\n customColorPicker.value = color;\r\n document.querySelectorAll('.color-swatch').forEach(c => c.classList.remove('active'));\r\n if (el) el.classList.add('active');\r\n else { document.querySelectorAll('.color-swatch').forEach(c => { if (c.dataset.color === color) c.classList\r\n .add('active'); }); }\r\n saveStateToHistory();\r\n updatePreview();\r\n };\r\n\r\n window.changeDirection = function() { state.dir = dirSelect.value;\r\n saveStateToHistory();\r\n updatePreview(); };\r\n window.changeLanguage = function() { state.lang = langSelect.value;\r\n saveStateToHistory();\r\n updatePreview(); };\r\n\r\n fontSelect.addEventListener('change', function() { state.design.font = this.value;\r\n saveStateToHistory();\r\n updatePreview(); });\r\n bgColorPicker.addEventListener('input', function() { state.design.bgColor = this.value;\r\n saveStateToHistory();\r\n updatePreview(); });\r\n textColorPicker.addEventListener('input', function() { state.design.textColor = this.value;\r\n saveStateToHistory();\r\n updatePreview(); });\r\n sidebarBgColor.addEventListener('input', function() { state.design.sidebarBg = this.value;\r\n saveStateToHistory();\r\n updatePreview(); });\r\n sidebarTextColor.addEventListener('input', function() { state.design.sidebarText = this.value;\r\n saveStateToHistory();\r\n updatePreview(); });\r\n fontSizeRange.addEventListener('input', function() { state.design.fontSize = parseFloat(this.value);\r\n fontSizeLabel.textContent = state.design.fontSize + 'px';\r\n saveStateToHistory();\r\n updatePreview(); });\r\n spacingRange.addEventListener('input', function() { state.design.spacing = parseFloat(this.value);\r\n spacingLabel.textContent = state.design.spacing + 'rem';\r\n saveStateToHistory();\r\n updatePreview(); });\r\n marginSelect.addEventListener('change', function() { state.design.margin = this.value;\r\n saveStateToHistory();\r\n updatePreview(); });\r\n sidebarLayout.addEventListener('change', function() { state.design.sidebarLayout = this.value;\r\n saveStateToHistory();\r\n updatePreview(); });\r\n modernColumns.addEventListener('change', function() { state.design.modernColumns = parseInt(this.value);\r\n saveStateToHistory();\r\n updatePreview(); });\r\n footerToggle.addEventListener('change', function() { state.design.footer.show = this.checked;\r\n saveStateToHistory();\r\n updatePreview(); });\r\n footerText.addEventListener('input', function() { state.design.footer.text = this.value;\r\n saveStateToHistory();\r\n updatePreview(); });\r\n\r\n window.zoomIn = function() { if (!isFullscreen) { currentZoom = Math.min(1.4, currentZoom + 0.05);\r\n updateZoomDisplay(); } };\r\n window.zoomOut = function() { if (!isFullscreen) { currentZoom = Math.max(0.35, currentZoom - 0.05);\r\n updateZoomDisplay(); } };\r\n window.resetZoom = function() { if (!isFullscreen) { currentZoom = 0.9;\r\n updateZoomDisplay(); } };\r\n\r\n function updateZoomDisplay() {\r\n zoomLevel.textContent = Math.round(currentZoom * 100) + '%';\r\n previewEl.style.transform = `scale(${currentZoom})`;\r\n }\r\n\r\n \/\/ Templates\r\n window.loadTemplate = function(type) {\r\n const templates = {\r\n developer: {\r\n fullName: 'Ahmed Benissa',\r\n jobTitle: 'Senior Software Engineer',\r\n email: 'ahmed.dev@example.dz',\r\n phone: '+213 5 50 12 34 56',\r\n state: 'Oran',\r\n country: 'Algeria',\r\n zip: '31000',\r\n website: 'ahmed-dev.dz',\r\n linkedin: 'linkedin.com\/in\/ahmed-dev',\r\n github: 'github.com\/ahmed-dev',\r\n summary: 'Senior Software Engineer with 7+ years of experience building scalable web and mobile applications. Specialized in React, Node.js, and Python.',\r\n skills: [\r\n { name: 'React.js', level: '\u062e\u0628\u064a\u0631' },\r\n { name: 'Node.js', level: '\u062e\u0628\u064a\u0631' },\r\n { name: 'Python', level: '\u0645\u062a\u0642\u062f\u0645' },\r\n { name: 'Docker', level: '\u0645\u062a\u0642\u062f\u0645' },\r\n { name: 'AWS', level: '\u0645\u062a\u0648\u0633\u0637' },\r\n { name: 'TypeScript', level: '\u062e\u0628\u064a\u0631' }\r\n ],\r\n languages: [\r\n { name: 'Arabic', level: '\u062e\u0628\u064a\u0631' },\r\n { name: 'French', level: '\u0645\u062a\u0642\u062f\u0645' },\r\n { name: 'English', level: '\u0645\u062a\u0642\u062f\u0645' }\r\n ],\r\n sections: [{\r\n id: genId(),\r\n type: 'experience',\r\n title: 'Experience',\r\n items: [\r\n { id: genId(), title: 'Senior Software Engineer', sub: 'Sonatrach - Algeria',\r\n start: '2019-04', end: '', isCurrent: true,\r\n desc: 'Leading a team of 6 engineers building a digital platform. Using React, Node.js, and MongoDB.' },\r\n { id: genId(), title: 'Web Developer', sub: 'Tech Algeria', start: '2016-02',\r\n end: '2019-03', isCurrent: false,\r\n desc: 'Developed web applications for the banking sector using Laravel and Vue.js.' }\r\n ],\r\n visible: true\r\n }, {\r\n id: genId(),\r\n type: 'education',\r\n title: 'Education',\r\n items: [\r\n { id: genId(), title: 'Master in Computer Science', sub: 'University of Oran 1',\r\n start: '2014-09', end: '2016-06', isCurrent: false, desc: '' },\r\n { id: genId(), title: 'Bachelor in Computer Science', sub: 'University of Oran 1',\r\n start: '2010-09', end: '2014-06', isCurrent: false, desc: '' }\r\n ],\r\n visible: true\r\n }, {\r\n id: genId(),\r\n type: 'projects',\r\n title: 'Projects',\r\n items: [\r\n { id: genId(), title: 'E-Learning Platform', desc: 'Interactive platform using React and WebRTC.',\r\n date: '2023-01' },\r\n { id: genId(), title: 'Inventory Management App', desc: 'Mobile app using Flutter with Firebase.',\r\n date: '2022-08' }\r\n ],\r\n visible: true\r\n }]\r\n },\r\n marketing: {\r\n fullName: 'Sara Ben Omar',\r\n jobTitle: 'Digital Marketing Director',\r\n email: 'sara.marketing@example.dz',\r\n phone: '+213 5 60 78 90 12',\r\n state: 'Algiers',\r\n country: 'Algeria',\r\n zip: '16000',\r\n website: 'sara-dz.dz',\r\n linkedin: 'linkedin.com\/in\/sara-marketing',\r\n github: '',\r\n summary: 'Digital Marketing Director with 8 years of experience in developing digital marketing strategies and brand management. Expert in SEO, SEM, and social media advertising.',\r\n skills: [\r\n { name: 'SEO \/ SEM', level: '\u062e\u0628\u064a\u0631' },\r\n { name: 'Google Ads', level: '\u062e\u0628\u064a\u0631' },\r\n { name: 'Social Media', level: '\u062e\u0628\u064a\u0631' },\r\n { name: 'Analytics', level: '\u0645\u062a\u0642\u062f\u0645' },\r\n { name: 'Content Strategy', level: '\u0645\u062a\u0642\u062f\u0645' }\r\n ],\r\n languages: [\r\n { name: 'Arabic', level: '\u062e\u0628\u064a\u0631' },\r\n { name: 'French', level: '\u062e\u0628\u064a\u0631' },\r\n { name: 'English', level: '\u0645\u062a\u0642\u062f\u0645' }\r\n ],\r\n sections: [{\r\n id: genId(),\r\n type: 'experience',\r\n title: 'Experience',\r\n items: [\r\n { id: genId(), title: 'Digital Marketing Director', sub: 'Creative Agency - Algeria',\r\n start: '2018-06', end: '', isCurrent: true,\r\n desc: 'Managing a marketing team of 10. Increased sales by 40% in one year.' },\r\n { id: genId(), title: 'Marketing Specialist', sub: 'Smart Services',\r\n start: '2015-01', end: '2018-05', isCurrent: false,\r\n desc: 'Developed and executed digital marketing campaigns.' }\r\n ],\r\n visible: true\r\n }, {\r\n id: genId(),\r\n type: 'education',\r\n title: 'Education',\r\n items: [\r\n { id: genId(), title: 'MBA', sub: 'University of Algiers 3', start: '2013-09',\r\n end: '2015-06', isCurrent: false, desc: '' },\r\n { id: genId(), title: 'Bachelor in Business', sub: 'University of Algiers 1',\r\n start: '2009-09', end: '2013-06', isCurrent: false, desc: '' }\r\n ],\r\n visible: true\r\n }]\r\n },\r\n student: {\r\n fullName: 'Leila Ben Salah',\r\n jobTitle: 'Computer Engineering Student',\r\n email: 'leila.student@example.dz',\r\n phone: '+213 5 70 12 34 56',\r\n state: 'Blida',\r\n country: 'Algeria',\r\n zip: '09000',\r\n website: '',\r\n linkedin: 'linkedin.com\/in\/leila-student',\r\n github: 'github.com\/leila-dev',\r\n summary: 'Final year Computer Engineering student passionate about AI and web development. Seeking an internship to gain practical experience.',\r\n skills: [\r\n { name: 'Python', level: '\u0645\u062a\u0642\u062f\u0645' },\r\n { name: 'HTML \/ CSS', level: '\u0645\u062a\u0642\u062f\u0645' },\r\n { name: 'JavaScript', level: '\u0645\u062a\u0648\u0633\u0637' },\r\n { name: 'Machine Learning', level: '\u0645\u0628\u062a\u062f\u0626' },\r\n { name: 'C++', level: '\u0645\u062a\u0648\u0633\u0637' }\r\n ],\r\n languages: [\r\n { name: 'Arabic', level: '\u062e\u0628\u064a\u0631' },\r\n { name: 'French', level: '\u0645\u062a\u0642\u062f\u0645' },\r\n { name: 'English', level: '\u0645\u062a\u0648\u0633\u0637' }\r\n ],\r\n sections: [{\r\n id: genId(),\r\n type: 'education',\r\n title: 'Education',\r\n items: [\r\n { id: genId(), title: 'Computer Engineering (Final Year)', sub: 'University of Blida 2',\r\n start: '2020-09', end: '', isCurrent: true, desc: '' },\r\n { id: genId(), title: 'Baccalaureate (Experimental Sciences)', sub: 'Blida High School',\r\n start: '2019-09', end: '2020-06', isCurrent: false, desc: '' }\r\n ],\r\n visible: true\r\n }, {\r\n id: genId(),\r\n type: 'courses',\r\n title: 'Courses',\r\n items: [\r\n { id: genId(), title: 'Advanced Web Development', sub: 'Google', date: '2023-12',\r\n desc: '' },\r\n { id: genId(), title: 'AI Fundamentals', sub: 'Coursera', date: '2023-08',\r\n desc: '' }\r\n ],\r\n visible: true\r\n }, {\r\n id: genId(),\r\n type: 'volunteering',\r\n title: 'Volunteering',\r\n items: [\r\n { id: genId(), title: 'Website Developer for Charity', sub: 'Hope Association',\r\n desc: 'Designed and developed a website to raise awareness and collect donations.',\r\n date: '' }\r\n ],\r\n visible: true\r\n }]\r\n },\r\n designer: {\r\n fullName: 'Lina Boumediene',\r\n jobTitle: 'Creative Graphic Designer',\r\n email: 'lina.design@example.dz',\r\n phone: '+213 5 40 23 45 67',\r\n state: 'Constantine',\r\n country: 'Algeria',\r\n zip: '25000',\r\n website: 'lina-design.dz',\r\n linkedin: 'linkedin.com\/in\/lina-design',\r\n github: '',\r\n summary: 'Creative Graphic Designer with 5 years of experience in brand identity, print design, and digital media. Passionate about visual storytelling and creating impactful designs.',\r\n skills: [\r\n { name: 'Adobe Photoshop', level: '\u062e\u0628\u064a\u0631' },\r\n { name: 'Adobe Illustrator', level: '\u062e\u0628\u064a\u0631' },\r\n { name: 'Figma', level: '\u0645\u062a\u0642\u062f\u0645' },\r\n { name: 'Brand Identity', level: '\u062e\u0628\u064a\u0631' },\r\n { name: 'Typography', level: '\u0645\u062a\u0642\u062f\u0645' }\r\n ],\r\n languages: [\r\n { name: 'Arabic', level: '\u062e\u0628\u064a\u0631' },\r\n { name: 'French', level: '\u0645\u062a\u0642\u062f\u0645' },\r\n { name: 'English', level: '\u0645\u062a\u0648\u0633\u0637' }\r\n ],\r\n sections: [{\r\n id: genId(),\r\n type: 'experience',\r\n title: 'Experience',\r\n items: [\r\n { id: genId(), title: 'Senior Graphic Designer', sub: 'Creative Studio - Algeria',\r\n start: '2019-03', end: '', isCurrent: true,\r\n desc: 'Leading design projects for major clients. Created visual identities for 20+ brands.' },\r\n { id: genId(), title: 'Junior Designer', sub: 'Digital Agency', start: '2017-01',\r\n end: '2019-02', isCurrent: false,\r\n desc: 'Designed marketing materials, social media content, and website layouts.' }\r\n ],\r\n visible: true\r\n }, {\r\n id: genId(),\r\n type: 'education',\r\n title: 'Education',\r\n items: [\r\n { id: genId(), title: 'Bachelor in Graphic Design', sub: 'University of Constantine',\r\n start: '2013-09', end: '2017-06', isCurrent: false, desc: '' }\r\n ],\r\n visible: true\r\n }, {\r\n id: genId(),\r\n type: 'certificates',\r\n title: 'Certificates',\r\n items: [\r\n { id: genId(), title: 'Advanced Figma', sub: 'Design Academy', date: '2022-05',\r\n desc: '' },\r\n { id: genId(), title: 'Adobe Creative Cloud Mastery', sub: 'Adobe', date: '2021-11',\r\n desc: '' }\r\n ],\r\n visible: true\r\n }]\r\n }\r\n };\r\n const data = templates[type];\r\n if (!data) return;\r\n state.personal.fullName = data.fullName;\r\n state.personal.jobTitle = data.jobTitle;\r\n state.personal.email = data.email;\r\n state.personal.phone = data.phone;\r\n state.personal.state = data.state;\r\n state.personal.country = data.country;\r\n state.personal.zip = data.zip;\r\n state.personal.website = data.website || '';\r\n state.personal.linkedin = data.linkedin || '';\r\n state.personal.github = data.github || '';\r\n state.personal.summary = data.summary;\r\n state.skills = data.skills || [];\r\n state.languages = data.languages || [];\r\n if (data.sections) {\r\n const templateTypes = data.sections.map(s => s.type);\r\n const newSections = [];\r\n state.customSections.forEach(c => newSections.push(c));\r\n data.sections.forEach(sec => {\r\n const existing = state.sections.find(s => s.type === sec.type);\r\n if (existing) {\r\n existing.items = sec.items || [];\r\n existing.visible = sec.visible !== undefined ? sec.visible : true;\r\n existing.title = sec.title || existing.title;\r\n newSections.push(existing);\r\n } else {\r\n newSections.push(sec);\r\n }\r\n });\r\n state.sections = state.sections.filter(s => templateTypes.includes(s.type));\r\n const finalSections = [];\r\n data.sections.forEach(sec => {\r\n const found = state.sections.find(s => s.type === sec.type);\r\n if (found) finalSections.push(found);\r\n });\r\n state.customSections.forEach(c => finalSections.push(c));\r\n state.sections = finalSections;\r\n }\r\n saveStateToHistory();\r\n applyStateToUI();\r\n showToast('\u062a\u0645 \u062a\u062d\u0645\u064a\u0644 \u0642\u0627\u0644\u0628 ' + (type === 'developer' ? '\u0627\u0644\u0645\u0637\u0648\u0631' : type === 'marketing' ? '\u0627\u0644\u0645\u0633\u0648\u0642' : type ===\r\n 'student' ? '\u0627\u0644\u0637\u0627\u0644\u0628' : '\u0627\u0644\u0645\u0635\u0645\u0645'), 'success');\r\n };\r\n\r\n window.resetAll = function() {\r\n if (!confirm('\u0647\u0644 \u0623\u0646\u062a \u0645\u062a\u0623\u0643\u062f \u0645\u0646 \u0625\u0639\u0627\u062f\u0629 \u062a\u0639\u064a\u064a\u0646 \u0643\u0644 \u0634\u064a\u0621\u061f')) return;\r\n localStorage.removeItem('cv_pro_ultimate_data');\r\n location.reload();\r\n };\r\n\r\n window.exportJSON = function() {\r\n const data = { state: deepClone(state), versions: versions, currentVersionIndex: currentVersionIndex };\r\n const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application\/json' });\r\n const url = URL.createObjectURL(blob);\r\n const a = document.createElement('a');\r\n a.href = url;\r\n a.download = 'cv_pro_ultimate_data.json';\r\n a.click();\r\n URL.revokeObjectURL(url);\r\n showToast('\u062a\u0645 \u062a\u0635\u062f\u064a\u0631 JSON', 'success');\r\n };\r\n window.importJSON = function(e) {\r\n const file = e.target.files[0];\r\n if (!file) return;\r\n const reader = new FileReader();\r\n reader.onload = function(ev) {\r\n try {\r\n const data = JSON.parse(ev.target.result);\r\n if (data.state) state = deepMerge(state, data.state);\r\n if (data.versions) versions = data.versions;\r\n if (data.currentVersionIndex !== undefined) currentVersionIndex = data.currentVersionIndex;\r\n saveStateToHistory();\r\n applyStateToUI();\r\n showToast('\u062a\u0645 \u0627\u0633\u062a\u064a\u0631\u0627\u062f JSON', 'success');\r\n } catch (err) { showToast('\u062e\u0637\u0623 \u0641\u064a \u0627\u0644\u0645\u0644\u0641', 'error'); }\r\n };\r\n reader.readAsText(file);\r\n document.getElementById('importJSON').value = '';\r\n };\r\n\r\n window.downloadPDF = function() {\r\n const el = previewEl;\r\n const origTransform = el.style.transform;\r\n const origOrigin = el.style.transformOrigin;\r\n el.style.transform = 'scale(1)';\r\n el.style.transformOrigin = 'top left';\r\n\r\n showToast('\u062c\u0627\u0631\u064a \u062a\u062d\u0636\u064a\u0631 PDF \u0639\u0627\u0644\u064a \u0627\u0644\u062f\u0642\u0629...', 'info', 2500);\r\n\r\n const opt = {\r\n margin: 0,\r\n filename: '\u0627\u0644\u0633\u064a\u0631\u0629_\u0627\u0644\u0630\u0627\u062a\u064a\u0629.pdf',\r\n image: { type: 'jpeg', quality: 0.98 },\r\n html2canvas: {\r\n scale: 3,\r\n useCORS: true,\r\n backgroundColor: '#ffffff',\r\n allowTaint: true,\r\n logging: false,\r\n letterRendering: true\r\n },\r\n jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }\r\n };\r\n\r\n html2pdf().from(el).set(opt).save().then(() => {\r\n el.style.transform = origTransform;\r\n el.style.transformOrigin = origOrigin;\r\n showToast('\u062a\u0645 \u062a\u062d\u0645\u064a\u0644 PDF \u0628\u0646\u062c\u0627\u062d', 'success');\r\n }).catch((err) => {\r\n el.style.transform = origTransform;\r\n el.style.transformOrigin = origOrigin;\r\n console.error(err);\r\n showToast('\u0641\u0634\u0644 \u062a\u062d\u0645\u064a\u0644 PDF\u060c \u062d\u0627\u0648\u0644 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649', 'error');\r\n });\r\n };\r\n\r\n document.querySelectorAll('.editor-tabs button').forEach(btn => {\r\n btn.addEventListener('click', function() {\r\n document.querySelectorAll('.editor-tabs button').forEach(b => b.classList.remove('active'));\r\n this.classList.add('active');\r\n document.querySelectorAll('.tab-content').forEach(tc => tc.classList.remove('active'));\r\n document.getElementById(this.dataset.tab).classList.add('active');\r\n setTimeout(setupScrollSync, 300);\r\n });\r\n });\r\n\r\n \/\/ ----------------------------------------------------------------\r\n \/\/ 8. INIT\r\n \/\/ ----------------------------------------------------------------\r\n function init() {\r\n const hasSaved = loadSaved();\r\n if (!hasSaved) {\r\n state.dir = 'rtl';\r\n state.lang = 'ar';\r\n if (state.sections.length === 0) {\r\n state.sections = [\r\n { id: genId(), type: 'experience', title: '\u0627\u0644\u062e\u0628\u0631\u0627\u062a', items: [], visible: true },\r\n { id: genId(), type: 'education', title: '\u0627\u0644\u062a\u0639\u0644\u064a\u0645', items: [], visible: true },\r\n { id: genId(), type: 'certificates', title: '\u0627\u0644\u0634\u0647\u0627\u062f\u0627\u062a', items: [], visible: true },\r\n { id: genId(), type: 'projects', title: '\u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639', items: [], visible: true },\r\n { id: genId(), type: 'references', title: '\u0627\u0644\u0645\u0631\u0627\u062c\u0639', items: [], visible: true },\r\n { id: genId(), type: 'hobbies', title: '\u0627\u0644\u0647\u0648\u0627\u064a\u0627\u062a', items: [], visible: true },\r\n { id: genId(), type: 'awards', title: '\u0627\u0644\u062c\u0648\u0627\u0626\u0632', items: [], visible: true },\r\n { id: genId(), type: 'volunteering', title: '\u0627\u0644\u062a\u0637\u0648\u0639', items: [], visible: true },\r\n { id: genId(), type: 'courses', title: '\u0627\u0644\u062f\u0648\u0631\u0627\u062a', items: [], visible: true },\r\n ];\r\n }\r\n if (state.skills.length === 0) state.skills = [{ name: '\u0645\u0647\u0627\u0631\u0629 1', level: '\u0645\u062a\u0648\u0633\u0637' }];\r\n if (state.languages.length === 0) state.languages = [{ name: '\u0627\u0644\u0639\u0631\u0628\u064a\u0629', level: '\u062e\u0628\u064a\u0631' }];\r\n if (state.sections[0].items.length === 0) {\r\n state.sections[0].items = [{ id: genId(), title: '\u0645\u0647\u0646\u062f\u0633 \u0628\u0631\u0645\u062c\u064a\u0627\u062a', sub: '\u0634\u0631\u0643\u0629 \u062c\u0632\u0627\u0626\u0631\u064a\u0629',\r\n start: '2020-01', end: '', isCurrent: true, desc: '\u062a\u0637\u0648\u064a\u0631 \u0623\u0646\u0638\u0645\u0629 \u0648\u064a\u0628.' }];\r\n }\r\n if (state.sections[1].items.length === 0) {\r\n state.sections[1].items = [{ id: genId(), title: '\u0628\u0643\u0627\u0644\u0648\u0631\u064a\u0648\u0633 \u0639\u0644\u0648\u0645 \u062d\u0627\u0633\u0628', sub: '\u062c\u0627\u0645\u0639\u0629 \u0627\u0644\u062c\u0632\u0627\u0626\u0631',\r\n start: '2015-09', end: '2019-06', isCurrent: false, desc: '' }];\r\n }\r\n }\r\n\r\n if (versions.length === 0) {\r\n versions.push({ name: '\u0627\u0644\u0625\u0635\u062f\u0627\u0631 1', data: deepClone(state) });\r\n currentVersionIndex = 0;\r\n }\r\n\r\n history = [deepClone(state)];\r\n historyIndex = 0;\r\n applyStateToUI();\r\n updateUndoRedoButtons();\r\n updateZoomDisplay();\r\n showToast('\ud83d\ude80 \u0645\u0631\u062d\u0628\u0627\u064b! \u062c\u0647\u0632 \u0633\u064a\u0631\u062a\u0643 \u0627\u0644\u0630\u0627\u062a\u064a\u0629 \u0627\u0644\u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629', 'info', 3500);\r\n }\r\n\r\n init();\r\n\r\n })();\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>CV Pro Ultimate \u2013 \u0645\u0646\u0635\u0629 \u0627\u0644\u0633\u064a\u0631\u0629 \u0627\u0644\u0630\u0627\u062a\u064a\u0629 \u0627\u0644\u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 CV Pro Ultimate \u2713 \u062d\u0641\u0638 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u062a\u062d\u0633\u064a\u0646 \u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u0627\u0643\u062a\u0645\u0627\u06440% \u0642\u0648\u0627\u0644\u0628 \u0633\u0631\u064a\u0639\u0629 \u0645\u0637\u0648\u0631 \u0645\u0633\u0648\u0642 \u0637\u0627\u0644\u0628 \u0645\u0635\u0645\u0645 \u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u0643\u0627\u0645\u0644 \u0627\u0644\u0645\u0633\u0645\u0649 \u0627\u0644\u0648\u0638\u064a\u0641\u064a \u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0627\u0644\u0647\u0627\u062a\u0641 \u0627\u0644\u0648\u0644\u0627\u064a\u0629 \u0627\u0644\u0628\u0644\u062f \u0627\u0644\u0631\u0645\u0632 \u0627\u0644\u0628\u0631\u064a\u062f\u064a \u0627\u0644\u0645\u0648\u0642\u0639 \u0627\u0644\u0634\u062e\u0635\u064a \u0644\u064a\u0646\u0643\u062f \u0625\u0646 \u062c\u064a\u062a \u0647\u0627\u0628 \u0646\u0628\u0630\u0629 \u062a\u0639\u0631\u064a\u0641\u064a\u0629 \u0627\u0644\u0635\u0648\u0631\u0629 \u0627\u0644\u0634\u062e\u0635\u064a\u0629 \u0627\u0644\u0623\u0642\u0633\u0627\u0645 \u0645\u062e\u0635\u0635 \u0627\u0644\u0645\u0647\u0627\u0631\u0627\u062a \u0627\u0644\u0644\u063a\u0627\u062a \u0625\u0639\u0627\u062f\u0629 JSON \u0627\u0633\u062a\u064a\u0631\u0627\u062f PDF \u0637\u0628\u0627\u0639\u0629 \u0645\u0644\u0621 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"..\/public\/views\/revslider-page-template.php","meta":{"footnotes":""},"class_list":["post-27724","page","type-page","status-publish","hentry"],"mb":[],"jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":21963,"url":"https:\/\/jobsdz.com\/fr\/submit-resume\/","url_meta":{"origin":27724,"position":0},"title":"Soumettre un CV","author":"Admin","date":"\u0633\u0628\u062a\u0645\u0628\u0631 17, 2025","format":false,"excerpt":"","rel":"","context":"\u062a\u062f\u0648\u064a\u0646\u0629 \u0645\u0634\u0627\u0628\u0647\u0629","block_context":{"text":"\u062a\u062f\u0648\u064a\u0646\u0629 \u0645\u0634\u0627\u0628\u0647\u0629","link":""},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":40,"url":"https:\/\/jobsdz.com\/about\/","url_meta":{"origin":27724,"position":1},"title":"About","author":"Admin","date":"\u0645\u0627\u0631\u0633 10, 2021","format":false,"excerpt":"4 million daily active users 0 M Over 12k open job positions 0 k Over 20 million stories shared 0 M About Us: Your Gateway to Career Opportunities in Algeria Welcome to Jobsdz, your leading platform in the Algerian job market. We are more than just a job board; we\u2026","rel":"","context":"\u062a\u062f\u0648\u064a\u0646\u0629 \u0645\u0634\u0627\u0628\u0647\u0629","block_context":{"text":"\u062a\u062f\u0648\u064a\u0646\u0629 \u0645\u0634\u0627\u0628\u0647\u0629","link":""},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/jobsdz.com\/wp-content\/uploads\/2021\/03\/g1.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":19872,"url":"https:\/\/jobsdz.com\/fr\/accieul-fr\/","url_meta":{"origin":27724,"position":2},"title":"Accieul fr","author":"Admin","date":"\u0646\u0648\u0641\u0645\u0628\u0631 24, 2022","format":false,"excerpt":"Votre destination sur : Votre passion Les meilleurs talents Connaissances professionnelles D\u00e9marrez votre carri\u00e8re en Alg\u00e9rie \ud83c\udde9\ud83c\uddff - Utilisez le formulaire de recherche ci-dessous\u00a0: AdrarA\u00efn Deflaain-temouchentalgerannabaBatnaBecharBejaiaB\u00e9ni Abb\u00e8sBiskraBlidaBordj Badji MokhtarBordj Bou ArreridjBouiraBoumerdesChlefConstantineDjanetDjelfaEl BayadhEl MeniaaEl M\u2019GhaierEl OuedEl TarfGhardaiaGuelmaIlliziIn GuezzamIn SalahJijelKhenchelaLaghouatMascaraMedeaMilaMostaganemMsilaNaamaOranOuarglaOuled DjellalOum El BouaghiRelizaneSa\u00efdaSetifSidi Bel AbbesSkikdaSouk AhrasTamanrassetTebessaTiaretTimimounTindoufTipazaTissemsiltTizi OuzouTlemcenTouggourt Recherche Termes de recherche populaires\u00a0:","rel":"","context":"\u062a\u062f\u0648\u064a\u0646\u0629 \u0645\u0634\u0627\u0628\u0647\u0629","block_context":{"text":"\u062a\u062f\u0648\u064a\u0646\u0629 \u0645\u0634\u0627\u0628\u0647\u0629","link":""},"img":{"alt_text":"ALgerian","src":"https:\/\/i0.wp.com\/jobsdz.com\/wp-content\/uploads\/2025\/08\/Algeria-story-Youth-Day-2022-Photo-1-Copy-1024x682.webp?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/jobsdz.com\/wp-content\/uploads\/2025\/08\/Algeria-story-Youth-Day-2022-Photo-1-Copy-1024x682.webp?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/jobsdz.com\/wp-content\/uploads\/2025\/08\/Algeria-story-Youth-Day-2022-Photo-1-Copy-1024x682.webp?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/jobsdz.com\/wp-content\/uploads\/2025\/08\/Algeria-story-Youth-Day-2022-Photo-1-Copy-1024x682.webp?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":3,"url":"https:\/\/jobsdz.com\/privacy-center\/","url_meta":{"origin":27724,"position":3},"title":"Privacy Policy","author":"Admin","date":"\u0645\u0627\u0631\u0633 25, 2025","format":false,"excerpt":"\ud83d\udd12 Privacy Policy At JobsDZ, your privacy is important to us. This Privacy Policy explains how we collect, use, store, and protect your personal information when you use our website. 1. Information We Collect We may collect the following types of personal data: Account Information: Name, email address, phone number,\u2026","rel":"","context":"\u062a\u062f\u0648\u064a\u0646\u0629 \u0645\u0634\u0627\u0628\u0647\u0629","block_context":{"text":"\u062a\u062f\u0648\u064a\u0646\u0629 \u0645\u0634\u0627\u0628\u0647\u0629","link":""},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":21947,"url":"https:\/\/jobsdz.com\/fr\/politique-de-confidentialite-2\/","url_meta":{"origin":27724,"position":4},"title":"Politique de confidentialit\u00e9","author":"Admin","date":"\u0645\u0627\u0631\u0633 25, 2025","format":false,"excerpt":"\ud83d\udd12 Politique de confidentialit\u00e9 Chez JobsDZ, votre vie priv\u00e9e est notre priorit\u00e9. Cette politique de confidentialit\u00e9 explique comment nous collectons, utilisons, stockons et prot\u00e9geons vos informations personnelles lorsque vous utilisez notre site web. 1. Informations que nous collectons Nous pouvons collecter les types de donn\u00e9es personnelles suivants : Informations sur\u2026","rel":"","context":"\u062a\u062f\u0648\u064a\u0646\u0629 \u0645\u0634\u0627\u0628\u0647\u0629","block_context":{"text":"\u062a\u062f\u0648\u064a\u0646\u0629 \u0645\u0634\u0627\u0628\u0647\u0629","link":""},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3831,"url":"https:\/\/jobsdz.com\/home-01\/","url_meta":{"origin":27724,"position":5},"title":"Connecting Talent with Opportunity","author":"Admin","date":"\u0646\u0648\u0641\u0645\u0628\u0631 24, 2022","format":false,"excerpt":"Find Your Next Job Connecting talent with opportunities across Algeria Keywords Region All Regions Adrar A\u00efn-Defla A\u00efn-T\u00e9mouchent Alger Annaba Batna B\u00e9char B\u00e9ja\u00efa B\u00e9ni Abb\u00e8s Biskra Blida Bordj Badji Mokhtar Bordj-Bou-Arreridj Bouira Boumerd\u00e8s Chlef Constantine Djanet Djelfa El M\u2019Ghair El Meniaa El-Bayadh El-Oued El-Tarf Ghardaia Guelma Illizi In Guezzam In Salah\u2026","rel":"","context":"\u062a\u062f\u0648\u064a\u0646\u0629 \u0645\u0634\u0627\u0628\u0647\u0629","block_context":{"text":"\u062a\u062f\u0648\u064a\u0646\u0629 \u0645\u0634\u0627\u0628\u0647\u0629","link":""},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"mfb_rest_fields":["title","jetpack_sharing_enabled","jetpack-related-posts","gutenberg_elementor_mode"],"_links":{"self":[{"href":"https:\/\/jobsdz.com\/ar\/wp-json\/wp\/v2\/pages\/27724","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jobsdz.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jobsdz.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jobsdz.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jobsdz.com\/ar\/wp-json\/wp\/v2\/comments?post=27724"}],"version-history":[{"count":5,"href":"https:\/\/jobsdz.com\/ar\/wp-json\/wp\/v2\/pages\/27724\/revisions"}],"predecessor-version":[{"id":47876,"href":"https:\/\/jobsdz.com\/ar\/wp-json\/wp\/v2\/pages\/27724\/revisions\/47876"}],"wp:attachment":[{"href":"https:\/\/jobsdz.com\/ar\/wp-json\/wp\/v2\/media?parent=27724"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}