{"id":15,"date":"2026-08-05T17:29:58","date_gmt":"2026-08-05T17:29:58","guid":{"rendered":"https:\/\/pterocos.eu.org\/?page_id=15"},"modified":"2026-08-05T17:29:58","modified_gmt":"2026-08-05T17:29:58","slug":"code-jc","status":"publish","type":"page","link":"https:\/\/pterocos.eu.org\/?page_id=15","title":{"rendered":"Code-JC"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><!-- Fullscreen Editor Overlay -->\n<div class=\"mlp-fullscreen-editor-overlay\" id=\"mlp-fullscreen-editor-overlay-mlp-15-1\">\n<div class=\"mlp-fullscreen-editor-container\">\n<!-- Fullscreen Editor Header - FLAT HORIZONTAL BAR -->\n<div class=\"mlp-fullscreen-editor-header\">\n<div class=\"mlp-fullscreen-header-left\">\n<div class=\"mlp-fullscreen-title\">\n<span class=\"mlp-fullscreen-brand-text\">PTERO<\/span>\n<\/div>\n<button onclick=\"if(typeof window.mlpProjectsOpen==='function')window.mlpProjectsOpen();\" title=\"Back to Projects\" style=\"background:none;border:none;cursor:pointer;font-size:1.25rem;padding:4px 8px;border-radius:6px;color:rgba(255,255,255,0.75);transition:background 0.15s,color 0.15s;line-height:1;display:inline-flex;align-items:center;\" onmouseover=\"this.style.background='rgba(255,255,255,0.1)';this.style.color='#fff';\" onmouseout=\"this.style.background='none';this.style.color='rgba(255,255,255,0.75)';\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"15 18 9 12 15 6\"\/><\/svg><\/button>\n<\/div>\n<div class=\"mlp-fullscreen-header-right\">\n<!-- Edit Button (shows \"Fork to Edit\" for read-only tabs) -->\n<button class=\"mlp-fullscreen-edit-btn\" id=\"mlp-fullscreen-edit-btn-mlp-15-1\" title=\"Edit Tab\">\n<i class=\"fas fa-edit\"><\/i> Edit\n<\/button>\n<!-- Console Button -->\n<button class=\"mlp-fullscreen-console-btn\" id=\"mlp-fullscreen-console-btn-mlp-15-1\" title=\"Open Console\">\n<span class=\"mlp-console-emoji\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"display:inline-block;vertical-align:middle;color:#00ff00;filter:drop-shadow(0 0 4px rgba(0,255,0,0.7));\"><polyline points=\"4 17 10 11 4 5\"\/><line x1=\"12\" y1=\"19\" x2=\"20\" y2=\"19\"\/><\/svg><\/span> Console\n<\/button>\n<!-- View Button - Opens fullscreen preview -->\n<button class=\"mlp-fullscreen-view-btn\" id=\"mlp-fullscreen-view-btn-mlp-15-1\" title=\"View Fullscreen Preview\">\n<i class=\"fas fa-arrow-right\"><\/i> View\n<\/button>\n<!-- Close Button (X only) -->\n<button class=\"mlp-fullscreen-editor-close-btn\" data-instance=\"mlp-15-1\">\n<i class=\"fas fa-times\"><\/i>\n<\/button>\n<\/div>\n<\/div>\n<!-- Read.me Info Bar (UNDER HEADER) - Modified structure for conditional display -->\n<div class=\"mlp-fullscreen-readme-bar\" id=\"mlp-fullscreen-readme-bar-mlp-15-1\" style=\"display: none;\">\n<div class=\"mlp-fullscreen-readme-row\">\n<span class=\"mlp-fullscreen-readme-badge\">\ud83d\udcd6 Read.me<\/span>\n<!-- Public share elements (hidden for personal) -->\n<div class=\"mlp-fullscreen-readme-url-section\" id=\"mlp-fullscreen-readme-url-section-mlp-15-1\">\n<input type=\"text\" class=\"mlp-fullscreen-readme-url-input\" id=\"mlp-fullscreen-readme-url-mlp-15-1\" readonly>\n<button class=\"mlp-fullscreen-readme-copy-btn\" id=\"mlp-fullscreen-readme-copy-btn-mlp-15-1\">\n<i class=\"fas fa-copy\"><\/i>\n<\/button>\n<\/div>\n<span class=\"mlp-fullscreen-readme-expiry\" id=\"mlp-fullscreen-readme-expiry-mlp-15-1\">\n<i class=\"fas fa-clock\"><\/i> <span>--:--:--<\/span>\n<\/span>\n<\/div>\n<\/div>\n<!-- Fullscreen Editor Content -->\n<div class=\"mlp-fullscreen-editor-content\">\n<!-- Left Sidebar - Tab Previews -->\n<div class=\"mlp-fullscreen-sidebar\">\n<div class=\"mlp-fullscreen-sidebar-header\">\n<h3><i class=\"fas fa-file-code\"><\/i> Tab Previews<\/h3>\n<div class=\"mlp-fullscreen-sidebar-actions\">\n<button class=\"mlp-fullscreen-add-tab-btn\" data-instance=\"mlp-15-1\" title=\"Add New Tab\">\n<i class=\"fas fa-plus\"><\/i>\n<\/button>\n<\/div>\n<\/div>\n<div class=\"mlp-fullscreen-tabs-list\" id=\"mlp-fullscreen-tabs-list-mlp-15-1\">\n<!-- Tab previews will be populated here -->\n<\/div>\n<div class=\"mlp-fullscreen-sidebar-footer\">\n<div class=\"mlp-fullscreen-active-info\">\n\u2570\u2508\u27a4\n<span id=\"mlp-fullscreen-active-tab-mlp-15-1\">No active tab<\/span>\n<\/div>\n<\/div>\n<\/div>\n<!-- Main Editor Area -->\n<div class=\"mlp-fullscreen-main\">\n<!-- Sub-tab bar for HTML\/CSS\/JS \u2014 scoped to editor area only -->\n<div class=\"mlp-fullscreen-lang-bar\">\n<!-- Left: language tabs -->\n<div class=\"mlp-fullscreen-editor-tab-buttons\">\n<button class=\"mlp-fullscreen-editor-tab-button active\" data-tab=\"html\" data-instance=\"mlp-15-1\">\n<i class=\"fab fa-html5\"><\/i>\n<span>HTML<\/span>\n<span class=\"mlp-fullscreen-gear-icon\" data-lang=\"html\" title=\"Change Preprocessor\">\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M12 15.5A3.5 3.5 0 0 1 8.5 12 3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5m7.43-2.92c.04-.3.07-.62.07-.95s-.03-.65-.07-.95l2.04-1.6c.18-.14.23-.38.12-.58l-1.93-3.35c-.12-.21-.37-.28-.58-.21l-2.4.97c-.5-.38-1.04-.7-1.63-.94l-.36-2.55c-.04-.22-.24-.38-.47-.38h-3.86c-.23 0-.43.16-.47.38l-.36 2.55c-.59.24-1.13.57-1.63.94l-2.4-.97c-.21-.07-.46 0-.58.21L2.74 8.87c-.12.2-.07.44.12.58l2.04 1.6c-.04.3-.07.63-.07.95s.03.65.07.95l-2.04 1.6c-.18.14-.23.38-.12.58l1.93 3.35c.12.21.37.28.58.21l2.4-.97c.5.38 1.04.7 1.63.94l.36 2.55c.04.22.24.38.47.38h3.86c.23 0 .43-.16.47-.38l.36-2.55c.59-.24 1.13-.56 1.63-.94l2.4.97c.21.07.46 0 .58-.21l1.93-3.35c.12-.2.07-.44-.12-.58l-2.04-1.6z\"\/><\/svg>\n<\/span>\n<\/button>\n<button class=\"mlp-fullscreen-editor-tab-button\" data-tab=\"css\" data-instance=\"mlp-15-1\">\n<i class=\"fab fa-css3-alt\"><\/i>\n<span>CSS<\/span>\n<span class=\"mlp-fullscreen-gear-icon\" data-lang=\"css\" title=\"Change Preprocessor\">\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M12 15.5A3.5 3.5 0 0 1 8.5 12 3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5m7.43-2.92c.04-.3.07-.62.07-.95s-.03-.65-.07-.95l2.04-1.6c.18-.14.23-.38.12-.58l-1.93-3.35c-.12-.21-.37-.28-.58-.21l-2.4.97c-.5-.38-1.04-.7-1.63-.94l-.36-2.55c-.04-.22-.24-.38-.47-.38h-3.86c-.23 0-.43.16-.47.38l-.36 2.55c-.59.24-1.13.57-1.63.94l-2.4-.97c-.21-.07-.46 0-.58.21L2.74 8.87c-.12.2-.07.44.12.58l2.04 1.6c-.04.3-.07.63-.07.95s.03.65.07.95l-2.04 1.6c-.18.14-.23.38-.12.58l1.93 3.35c.12.21.37.28.58.21l2.4-.97c.5.38 1.04.7 1.63.94l.36 2.55c.04.22.24.38.47.38h3.86c.23 0 .43-.16.47-.38l.36-2.55c.59-.24 1.13-.56 1.63-.94l2.4.97c.21.07.46 0 .58-.21l1.93-3.35c.12-.2.07-.44-.12-.58l-2.04-1.6z\"\/><\/svg>\n<\/span>\n<\/button>\n<button class=\"mlp-fullscreen-editor-tab-button\" data-tab=\"js\" data-instance=\"mlp-15-1\">\n<i class=\"fab fa-js\"><\/i>\n<span>JS<\/span>\n<span class=\"mlp-fullscreen-gear-icon\" data-lang=\"js\" title=\"Change Preprocessor\">\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M12 15.5A3.5 3.5 0 0 1 8.5 12 3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5m7.43-2.92c.04-.3.07-.62.07-.95s-.03-.65-.07-.95l2.04-1.6c.18-.14.23-.38.12-.58l-1.93-3.35c-.12-.21-.37-.28-.58-.21l-2.4.97c-.5-.38-1.04-.7-1.63-.94l-.36-2.55c-.04-.22-.24-.38-.47-.38h-3.86c-.23 0-.43.16-.47.38l-.36 2.55c-.59.24-1.13.57-1.63.94l-2.4-.97c-.21-.07-.46 0-.58.21L2.74 8.87c-.12.2-.07.44.12.58l2.04 1.6c-.04.3-.07.63-.07.95s.03.65.07.95l-2.04 1.6c-.18.14-.23.38-.12.58l1.93 3.35c.12.21.37.28.58.21l2.4-.97c.5.38 1.04.7 1.63.94l.36 2.55c.04.22.24.38.47.38h3.86c.23 0 .43-.16.47-.38l.36-2.55c.59-.24 1.13-.56 1.63-.94l2.4.97c.21.07.46 0 .58-.21l1.93-3.35c.12-.2.07-.44-.12-.58l-2.04-1.6z\"\/><\/svg>\n<\/span>\n<\/button>\n<\/div>\n<!-- Gear Settings Button in Fullscreen -->\n<div class=\"mlp-editor-settings-wrap mlp-fs-gear-wrap\" data-instance=\"mlp-15-1\" style=\"position:relative;display:inline-flex;align-items:center;margin:0 4px;\">\n  <span class=\"mlp-editor-settings-gear\" title=\"Settings\" style=\"cursor:pointer;color:rgba(255,255,255,0.5);font-size:0.92rem;display:inline-flex;align-items:center;padding:5px 7px;border-radius:6px;transition:all 0.2s;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);\">\n    <i class=\"fas fa-cog\" style=\"transition:transform 0.35s ease;\"><\/i>\n  <\/span>\n<\/div>\n<!-- Right: Fork + Manager + Save -->\n<div class=\"mlp-fs-langbar-right\">\n<button class=\"mlp-fs-fork-emoji-btn\" data-instance=\"mlp-15-1\" title=\"Fork Current Tab\">\n<i class=\"fas fa-code-branch\"><\/i>\n<\/button>\n<!-- Manager Dropdown button \u2014 menu is a fixed portal outside the overlay -->\n<div class=\"mlp-manager-dropdown-wrap\" id=\"mlp-manager-dropdown-wrap-mlp-15-1\">\n<button class=\"mlp-manager-dropdown-btn\" data-instance=\"mlp-15-1\" title=\"Manager\">\n<i class=\"fas fa-cube\"><\/i> Manager <i class=\"fas fa-chevron-down mlp-manager-chevron\"><\/i>\n<\/button>\n<\/div>\n<button class=\"mlp-save-btn mlp-fs-lang-save-btn\" data-instance=\"mlp-15-1\" title=\"Save Current Tab\">\n<i class=\"fas fa-save\"><\/i> Save\n<\/button>\n<\/div>\n<\/div>\n<!-- Fullscreen Editors -->\n<div class=\"mlp-fullscreen-editors-container\">\n<div class=\"mlp-fullscreen-editor-wrapper active\" id=\"mlp-fullscreen-html-wrapper-mlp-15-1\">\n<div class=\"mlp-fullscreen-monaco-editor\" id=\"mlp-fullscreen-html-editor-mlp-15-1\"><\/div>\n<\/div>\n<div class=\"mlp-fullscreen-editor-wrapper\" id=\"mlp-fullscreen-css-wrapper-mlp-15-1\">\n<div class=\"mlp-fullscreen-monaco-editor\" id=\"mlp-fullscreen-css-editor-mlp-15-1\"><\/div>\n<\/div>\n<div class=\"mlp-fullscreen-editor-wrapper\" id=\"mlp-fullscreen-js-wrapper-mlp-15-1\">\n<div class=\"mlp-fullscreen-monaco-editor\" id=\"mlp-fullscreen-js-editor-mlp-15-1\"><\/div>\n<\/div>\n<\/div>\n<!-- Fullscreen Bottom Bar with Preprocessor Name -->\n<div class=\"mlp-fullscreen-bottom-bar\">\n<div class=\"mlp-fullscreen-bottom-info\">\n<span id=\"mlp-fullscreen-bottom-tab-name-mlp-15-1\" class=\"mlp-tab-name-truncate\">No active tab<\/span>\n<span class=\"mlp-fullscreen-bottom-preprocessor\" id=\"mlp-fullscreen-bottom-preprocessor-mlp-15-1\">HTML<\/span>\n<\/div>\n<div class=\"mlp-fullscreen-bottom-actions\">\n<button class=\"mlp-fullscreen-action-button mlp-fullscreen-copy-btn\" data-instance=\"mlp-15-1\">\n<i class=\"fas fa-copy\"><\/i> Copy Code\n<\/button>\n<\/div>\n<\/div>\n<\/div>\n<!-- Preview Sidebar for Fullscreen Editor - WIDER -->\n<div class=\"mlp-fullscreen-preview-sidebar\" id=\"mlp-fullscreen-preview-sidebar-mlp-15-1\">\n<div class=\"mlp-fullscreen-preview-sidebar-header\">\n<h3>\u250a Live Preview<\/h3>\n<button class=\"mlp-fullscreen-preview-sidebar-close\" data-instance=\"mlp-15-1\">\n<i class=\"fas fa-times\"><\/i>\n<\/button>\n<\/div>\n<div class=\"mlp-fullscreen-preview-sidebar-content\">\n<div class=\"mlp-preview-indicator\" id=\"mlp-fullscreen-preview-indicator-mlp-15-1\">\n<span class=\"mlp-preview-emoji\">\ud83d\udd04<\/span>\n<\/div>\n<div class=\"mlp-fullscreen-preview-sidebar-iframe-container\">\n<iframe id=\"mlp-fullscreen-preview-frame-mlp-15-1\" class=\"mlp-preview-frame\" sandbox=\"allow-scripts allow-same-origin\"><\/iframe>\n<div class=\"mlp-mobile-mockup\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<!-- Original Container -->\n<div class=\"mlp-fullscreen-overlay\" id=\"mlp-overlay-mlp-15-1\"><\/div>\n<!-- Fullscreen Backups dropdown portal \u2014 outside overflow:hidden ancestors, positioned via JS -->\n<div id=\"mlp-fs-backups-dropdown-mlp-15-1\" style=\"display:none;position:fixed;z-index:999999;background:#1e293b;border:1px solid rgba(255,255,255,0.12);border-radius:8px;min-width:160px;box-shadow:0 8px 24px rgba(0,0,0,0.5);overflow:hidden;\">\n<button class=\"mlp-fs-create-backup-dd-btn\" data-instance=\"mlp-15-1\" style=\"width:100%;text-align:left;padding:9px 14px;background:none;border:none;color:#e2e8f0;cursor:pointer;font-size:0.82rem;display:flex;align-items:center;gap:8px;\">\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#4ec9b0\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14\"\/><path d=\"M5 12h14\"\/><\/svg> Create Backup\n<\/button>\n<button class=\"mlp-fs-load-backups-dd-btn\" data-instance=\"mlp-15-1\" style=\"width:100%;text-align:left;padding:9px 14px;background:none;border:none;color:#e2e8f0;cursor:pointer;font-size:0.82rem;display:flex;align-items:center;gap:8px;\">\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#4ec9b0\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><ellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\"\/><path d=\"M21 12c0 1.66-4 3-9 3s-9-1.34-9-3\"\/><path d=\"M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5\"\/><\/svg> Load Backups\n<\/button>\n<\/div>\n<!-- Fullscreen AI dropdown portal \u2014 outside overflow:hidden ancestors, positioned via JS -->\n<div class=\"mlp-fs-ai-dropdown\" id=\"mlp-fs-ai-dropdown-mlp-15-1\" style=\"display:none;position:fixed;background:linear-gradient(135deg,#1f4068 0%,#1b3b5e 100%);border:1px solid #4dccff;border-radius:8px;padding:10px 12px;min-width:230px;z-index:999999;box-shadow:0 -10px 30px rgba(0,0,0,0.6);\">\n<div style=\"color:#a0d8ef;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:7px;\"><i class=\"fas fa-crosshairs\"><\/i> Fix a Specific Line<\/div>\n<div style=\"display:flex;gap:6px;align-items:center;\">\n<input type=\"number\" class=\"mlp-fs-ai-line-input\" data-instance=\"mlp-15-1\" min=\"1\" placeholder=\"Line #\" style=\"width:75px;padding:7px 8px;background:#0a1628;border:1.5px solid #4dccff;border-radius:6px;color:#fff;font-size:0.9rem;outline:none;box-sizing:border-box;\" \/>\n<button class=\"mlp-fs-ai-solve-btn\" data-instance=\"mlp-15-1\" style=\"flex:1;padding:7px 10px;background:rgba(77,204,255,0.15);border:1px solid #4dccff;border-radius:6px;color:#4dccff;cursor:pointer;font-size:0.85rem;font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px;transition:all 0.2s;\">\n<i class=\"fas fa-bolt\"><\/i> Fix Line\n<\/button>\n<\/div>\n<div style=\"color:#4a6a85;font-size:0.7rem;margin-top:5px;\">HTML lines first, then CSS, then JS<\/div>\n<\/div>\n<!-- Manager dropdown portal \u2014 outside overflow:hidden ancestors, positioned via JS -->\n<div class=\"mlp-manager-dropdown-menu\" id=\"mlp-manager-dropdown-menu-mlp-15-1\" style=\"display:none;position:fixed;z-index:9999999;background:#111215;border:1px solid #1e2230;border-radius:10px !important;min-width:230px;box-shadow:0 0 0 1px rgba(77,204,255,0.05),0 24px 60px rgba(0,0,0,0.98);overflow:hidden;font-family:'Consolas','Monaco','Courier New',monospace;\">\n<style>\n.mlp-manager-titlebar{background:#161820;border-bottom:1px solid #1e2230;padding:10px 14px;display:flex;align-items:center;gap:8px;}\n.mlp-manager-titlebar-label{font-size:0.67rem;font-weight:700;color:#4a5870;letter-spacing:0.12em;text-transform:uppercase;flex:1;}\n.mlp-manager-titlebar-close{background:none;border:none;color:#333d50;cursor:pointer;padding:2px 5px;font-size:0.75rem;line-height:1;border-radius:4px;transition:color 0.15s,background 0.15s;}\n.mlp-manager-titlebar-close:hover{color:#ff5555;background:rgba(255,85,85,0.1);}\n.mlp-manager-section-label{padding:8px 14px 5px;font-size:0.62rem;font-weight:700;color:#283040;letter-spacing:0.12em;text-transform:uppercase;display:flex;align-items:center;gap:7px;}\n.mlp-manager-section-label::before{content:'';display:block;width:5px;height:5px;border-radius:50%;flex-shrink:0;}\n.mlp-manager-section-label.s-readme::before{background:#34d399;}\n.mlp-manager-section-label.s-backups::before{background:#4ec9b0;}\n.mlp-manager-section-label.s-console::before{background:#4ade80;}\n.mlp-manager-section-label.s-media::before{background:#f59e0b;}\n.mlp-manager-section-label.s-storage::before{background:#4dccff;}\n.mlp-manager-section-sep{height:1px;background:#1a1c24;margin:4px 0;}\n.mlp-manager-item-list{display:flex;flex-direction:column;}\n<\/style>\n<div class=\"mlp-manager-titlebar\">\n<svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#4dccff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"opacity:0.6;flex-shrink:0\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"\/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"\/><\/svg>\n<span class=\"mlp-manager-titlebar-label\">Manager<\/span>\n<button class=\"mlp-manager-titlebar-close\" id=\"mlp-manager-titlebar-close-mlp-15-1\" data-instance=\"mlp-15-1\"><i class=\"fas fa-times\"><\/i><\/button>\n<\/div>\n<div class=\"mlp-manager-item-list\">\n<span class=\"mlp-manager-section-label s-readme\">Read.Me<\/span>\n<button class=\"mlp-manager-item mlp-manager-readme-btn\" data-instance=\"mlp-15-1\">\n<i class=\"fas fa-plus-circle\"><\/i> Create Read.Me\n<\/button>\n<div class=\"mlp-manager-section-sep\"><\/div>\n<span class=\"mlp-manager-section-label s-backups\">Backups<\/span>\n<button class=\"mlp-manager-item mlp-manager-create-backup-btn\" data-instance=\"mlp-15-1\">\n<i class=\"fas fa-plus\"><\/i> Create Backup\n<\/button>\n<button class=\"mlp-manager-item mlp-manager-load-backups-btn\" data-instance=\"mlp-15-1\">\n<i class=\"fas fa-folder-open\"><\/i> Load Backups\n<\/button>\n<div class=\"mlp-manager-section-sep\"><\/div>\n<span class=\"mlp-manager-section-label s-console\">Console<\/span>\n<button class=\"mlp-manager-item mlp-manager-console-btn\" data-instance=\"mlp-15-1\">\n<i class=\"fas fa-terminal\"><\/i> Open Console\n<\/button>\n<div class=\"mlp-manager-section-sep\"><\/div>\n<span class=\"mlp-manager-section-label s-media\">Insert Media<\/span>\n<button class=\"mlp-manager-item mlp-manager-media-btn\" data-instance=\"mlp-15-1\">\n<i class=\"fas fa-upload\"><\/i> Insert Media\n<\/button>\n<button class=\"mlp-manager-item mlp-manager-media-library-btn\" data-instance=\"mlp-15-1\">\n<i class=\"fas fa-th\"><\/i> Media Library\n<\/button>\n<button class=\"mlp-manager-item mlp-manager-media-history-btn\" data-instance=\"mlp-15-1\">\n<i class=\"fas fa-history\"><\/i> Upload History\n<\/button>\n<div class=\"mlp-manager-section-sep\"><\/div>\n<span class=\"mlp-manager-section-label s-storage\">Storage<\/span>\n<button class=\"mlp-manager-item mlp-manager-storage-btn\" data-instance=\"mlp-15-1\">\n<i class=\"fas fa-database\"><\/i> Free Usage\n<\/button>\n<\/div>\n<script>\n(function(){\n  document.addEventListener('click', function(e){\n    var btn = e.target.closest('#mlp-manager-titlebar-close-mlp-15-1');\n    if(btn){ e.stopPropagation(); var m=document.getElementById('mlp-manager-dropdown-menu-mlp-15-1'); if(m) m.style.display='none'; }\n  });\n})();\n<\/script>\n<\/div>\n<!-- Preprocessor Modal with Icons -->\n<div class=\"mlp-preprocessor-modal\" id=\"mlp-modal-mlp-15-1\">\n<div class=\"mlp-modal-content\">\n<div class=\"mlp-modal-header\">\n<h3><i class=\"fas fa-sliders-h\"><\/i> <span class=\"mlp-modal-title\">Select Preprocessor<\/span><\/h3>\n<button class=\"mlp-modal-close-btn\" data-instance=\"mlp-15-1\">\u2715<\/button>\n<\/div>\n<div class=\"mlp-modal-body\">\n<div class=\"mlp-preprocessor-options\" id=\"mlp-preprocessor-options-mlp-15-1\">\n<!-- Options populated by JS with icons -->\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<!-- Create Read.Me Choice Modal -->\n<div class=\"mlp-readme-choice-modal\" id=\"mlp-readme-choice-modal-mlp-15-1\">\n<div class=\"mlp-modal-content\">\n<div class=\"mlp-modal-header\">\n<h3><i class=\"fas fa-book-open\"><\/i> <span class=\"mlp-modal-title\">Create Read.Me<\/span><\/h3>\n<button class=\"mlp-modal-close-btn\" data-instance=\"mlp-15-1\">&times;<\/button>\n<\/div>\n<div class=\"mlp-modal-body\">\n<div class=\"mlp-readme-choice-description\">\n<p><i class=\"fas fa-info-circle\"><\/i> Create a local read-only copy of your current tab:<\/p>\n<\/div>\n<div class=\"mlp-readme-choice-options\">\n<!-- Personal Option only -->\n<button class=\"mlp-readme-choice-btn mlp-readme-personal-btn\"\ndata-instance=\"mlp-15-1\">\n<div class=\"mlp-readme-choice-icon\">\n<i class=\"fas fa-user\"><\/i>\n<\/div>\n<div class=\"mlp-readme-choice-content\">\n<span class=\"mlp-readme-choice-title\">Personal Read.me<\/span>\n<span class=\"mlp-readme-choice-desc\">Create a local read-only copy stored in your browser<\/span>\n<\/div>\n<\/button>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<!-- Share Modal -->\n<div class=\"mlp-share-modal\" id=\"mlp-share-modal-mlp-15-1\">\n<div class=\"mlp-modal-content\">\n<div class=\"mlp-modal-header\">\n<h3><i class=\"fas fa-share-alt\"><\/i> <span class=\"mlp-modal-title\">Share Tab<\/span><\/h3>\n<button class=\"mlp-modal-close-btn\" data-instance=\"mlp-15-1\">&times;<\/button>\n<\/div>\n<div class=\"mlp-modal-body\">\n<div class=\"mlp-share-form\">\n<div class=\"mlp-form-group\">\n<label for=\"share-tab-name-mlp-15-1\">\n<i class=\"fas fa-heading\"><\/i> Tab Name\n<\/label>\n<input type=\"text\" id=\"share-tab-name-mlp-15-1\"\nclass=\"mlp-form-control\" placeholder=\"Enter tab name\"\nvalue=\"\" readonly>\n<\/div>\n<div class=\"mlp-form-group\">\n<label for=\"share-expiry-mlp-15-1\">\n<i class=\"fas fa-clock\"><\/i> Expiry Time (1-10 minutes)\n<\/label>\n<div class=\"mlp-expiry-controls\">\n<button class=\"mlp-expiry-btn\" data-minutes=\"1\">1 min<\/button>\n<button class=\"mlp-expiry-btn\" data-minutes=\"5\">5 min<\/button>\n<button class=\"mlp-expiry-btn\" data-minutes=\"10\">10 min<\/button>\n<input type=\"number\" id=\"share-expiry-mlp-15-1\"\nclass=\"mlp-form-control\" min=\"1\" max=\"10\" value=\"5\">\n<span class=\"mlp-expiry-label\">minutes<\/span>\n<\/div>\n<\/div>\n<div class=\"mlp-form-group\">\n<label for=\"share-url-mlp-15-1\">\n<i class=\"fas fa-link\"><\/i> Share URL\n<\/label>\n<div class=\"mlp-url-container\">\n<input type=\"text\" id=\"share-url-mlp-15-1\"\nclass=\"mlp-form-control\" readonly>\n<button class=\"mlp-copy-url-btn\" data-instance=\"mlp-15-1\">\n<i class=\"fas fa-copy\"><\/i>\n<\/button>\n<\/div>\n<\/div>\n<div class=\"mlp-share-actions\">\n<button class=\"mlp-action-button mlp-generate-btn\"\ndata-instance=\"mlp-15-1\">\n<i class=\"fas fa-bolt\"><\/i> Generate Share Link\n<\/button>\n<\/div>\n<div class=\"mlp-share-info\">\n<p><i class=\"fas fa-info-circle\"><\/i> The shared tab will open in the same editor interface with view-only access.<\/p>\n<p><i class=\"fas fa-book\"><\/i> Users can view expired Read.me tabs in fullscreen mode.<\/p>\n<p><i class=\"fas fa-lock\"><\/i> Editors are read-only in shared view.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n    <div class=\"mlp-console-modal\" id=\"mlp-console-modal-mlp-15-1\" role=\"dialog\" aria-label=\"Developer Console\">\n        <div class=\"mlp-console-panel\" id=\"mlp-console-panel-mlp-15-1\">\n\n            <!-- Resize handle (top edge) -->\n            <div class=\"mlp-con-resize-handle\" id=\"mlp-con-resize-mlp-15-1\"><\/div>\n\n            <!-- Title bar -->\n            <div class=\"mlp-con-titlebar\" id=\"mlp-console-drag-handle-mlp-15-1\">\n                <div class=\"mlp-con-titlebar-left\">\n                    <svg class=\"mlp-con-title-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"4 17 10 11 4 5\"\/><line x1=\"12\" y1=\"19\" x2=\"20\" y2=\"19\"\/><\/svg>\n                    <span class=\"mlp-con-title-text\">Console<\/span>\n                <\/div>\n                <div class=\"mlp-con-titlebar-right\">\n                    <button class=\"mlp-con-tb-btn mlp-con-minimize-btn\" id=\"mlp-con-minimize-mlp-15-1\" title=\"Minimize\" data-instance=\"mlp-15-1\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg>\n                    <\/button>\n                    <button class=\"mlp-con-tb-btn mlp-modal-close-btn\" data-instance=\"mlp-15-1\" title=\"Close\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg>\n                    <\/button>\n                <\/div>\n            <\/div>\n\n            <!-- Toolbar: filter tabs + action buttons -->\n            <div class=\"mlp-con-toolbar\">\n                <div class=\"mlp-con-filter-tabs\" id=\"mlp-con-tabs-mlp-15-1\">\n                    <button class=\"mlp-con-tab active\" data-filter=\"all\" data-instance=\"mlp-15-1\">\n                        All\n                        <span class=\"mlp-con-tab-count\" id=\"mlp-con-count-all-mlp-15-1\"><\/span>\n                    <\/button>\n                    <button class=\"mlp-con-tab mlp-con-tab-error\" data-filter=\"error\" data-instance=\"mlp-15-1\">\n                        Errors\n                        <span class=\"mlp-con-tab-count\" id=\"mlp-con-count-error-mlp-15-1\"><\/span>\n                    <\/button>\n                    <button class=\"mlp-con-tab mlp-con-tab-warn\" data-filter=\"warn\" data-instance=\"mlp-15-1\">\n                        Warnings\n                        <span class=\"mlp-con-tab-count\" id=\"mlp-con-count-warn-mlp-15-1\"><\/span>\n                    <\/button>\n                    <button class=\"mlp-con-tab mlp-con-tab-info\" data-filter=\"info\" data-instance=\"mlp-15-1\">\n                        Info\n                        <span class=\"mlp-con-tab-count\" id=\"mlp-con-count-info-mlp-15-1\"><\/span>\n                    <\/button>\n                    <button class=\"mlp-con-tab\" data-filter=\"log\" data-instance=\"mlp-15-1\">\n                        Log\n                        <span class=\"mlp-con-tab-count\" id=\"mlp-con-count-log-mlp-15-1\"><\/span>\n                    <\/button>\n                <\/div>\n                <div class=\"mlp-con-actions\">\n                    <button class=\"mlp-con-action-btn mlp-console-pause-btn\" data-instance=\"mlp-15-1\" title=\"Pause logging\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><rect x=\"6\" y=\"4\" width=\"4\" height=\"16\"\/><rect x=\"14\" y=\"4\" width=\"4\" height=\"16\"\/><\/svg>\n                    <\/button>\n                    <button class=\"mlp-con-action-btn mlp-console-copy-btn\" data-instance=\"mlp-15-1\" title=\"Copy all output\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\"\/><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"\/><\/svg>\n                    <\/button>\n                    <div class=\"mlp-con-divider\"><\/div>\n                    <button class=\"mlp-con-action-btn mlp-console-clear-btn\" data-instance=\"mlp-15-1\" title=\"Clear console\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"\/><path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\"\/><path d=\"M10 11v6\"\/><path d=\"M14 11v6\"\/><path d=\"M9 6V4h6v2\"\/><\/svg>\n                    <\/button>\n                <\/div>\n            <\/div>\n\n            <!-- Output area -->\n            <div class=\"mlp-con-output\" id=\"mlp-console-output-mlp-15-1\" tabindex=\"0\">\n                <div class=\"mlp-con-welcome\" id=\"mlp-con-welcome-mlp-15-1\">\n                    <div class=\"mlp-con-welcome-inner\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"4 17 10 11 4 5\"\/><line x1=\"12\" y1=\"19\" x2=\"20\" y2=\"19\"\/><\/svg>\n                        <span>Console ready \u2014 run your code or type a command below<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Status bar -->\n            <div class=\"mlp-con-statusbar\">\n                <span class=\"mlp-con-status-counts\" id=\"mlp-con-status-mlp-15-1\">No messages<\/span>\n                <span class=\"mlp-con-status-hint\">\u2191\u2193 history &nbsp;\u00b7&nbsp; Enter to run<\/span>\n            <\/div>\n\n            <!-- REPL Input -->\n            <div class=\"mlp-con-repl\" id=\"mlp-con-repl-mlp-15-1\">\n                <div class=\"mlp-con-repl-prompt\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n                <\/div>\n                <div class=\"mlp-con-repl-input-wrap\">\n                    <input\n                        type=\"text\"\n                        class=\"mlp-con-repl-input\"\n                        id=\"mlp-console-input-mlp-15-1\"\n                        placeholder=\"JavaScript expression\u2026\"\n                        autocomplete=\"off\"\n                        spellcheck=\"false\"\n                        autocorrect=\"off\"\n                        autocapitalize=\"off\"\n                    >\n                <\/div>\n                <button class=\"mlp-con-run-btn\" id=\"mlp-console-input-btn-mlp-15-1\" title=\"Run (Enter)\">\n                    Run\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"5 3 19 12 5 21 5 3\"\/><\/svg>\n                <\/button>\n            <\/div>\n\n        <\/div>\n    <\/div>\n        <style id=\"mlp-console-styles\">\n    \/* \u2500\u2500 Overlay shell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n    .mlp-console-modal {\n        display: none;\n        position: fixed;\n        inset: 0;\n        z-index: 100005;\n        pointer-events: none;\n    }\n    .mlp-console-modal.active { display: block; }\n\n    \/* \u2500\u2500 Main panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n    .mlp-console-panel {\n        position: fixed;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        height: 320px;\n        min-height: 120px;\n        max-height: 80vh;\n        display: flex;\n        flex-direction: column;\n        background: #1e1e1e;\n        border-top: 1px solid #3c3c3c;\n        font-family: 'Consolas', 'Menlo', 'Monaco', 'Courier New', monospace;\n        font-size: 12px;\n        color: #d4d4d4;\n        pointer-events: all;\n        animation: mlp-con-fadein 0.18s ease;\n        overflow: hidden;\n    }\n    @keyframes mlp-con-fadein {\n        from { opacity: 0; transform: translateY(12px); }\n        to   { opacity: 1; transform: translateY(0); }\n    }\n    .mlp-console-panel.mlp-con-dragging { animation: none !important; }\n    .mlp-console-panel.mlp-con-floating {\n        bottom: 24px;\n        left: 50%;\n        right: auto;\n        transform: translateX(-50%);\n        width: 780px;\n        max-width: 96vw;\n        border: 1px solid #3c3c3c;\n        border-radius: 6px;\n        box-shadow: 0 16px 48px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04);\n    }\n    .mlp-console-panel.mlp-con-minimised {\n        height: auto !important;\n        min-height: unset !important;\n    }\n    .mlp-console-panel.mlp-con-minimised .mlp-con-toolbar,\n    .mlp-console-panel.mlp-con-minimised .mlp-con-output,\n    .mlp-console-panel.mlp-con-minimised .mlp-con-statusbar,\n    .mlp-console-panel.mlp-con-minimised .mlp-con-repl,\n    .mlp-console-panel.mlp-con-minimised .mlp-con-resize-handle { display: none !important; }\n\n    \/* \u2500\u2500 Resize handle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n    .mlp-con-resize-handle {\n        position: absolute;\n        top: 0; left: 0; right: 0;\n        height: 4px;\n        cursor: ns-resize;\n        z-index: 10;\n        background: transparent;\n    }\n    .mlp-con-resize-handle:hover { background: rgba(86,156,214,0.4); }\n\n    \/* \u2500\u2500 Title bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n    .mlp-con-titlebar {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: 0 8px;\n        height: 28px;\n        background: #252526;\n        border-bottom: 1px solid #3c3c3c;\n        cursor: grab;\n        user-select: none;\n        -webkit-user-select: none;\n        flex-shrink: 0;\n    }\n    .mlp-con-titlebar:active { cursor: grabbing; }\n    .mlp-con-titlebar-left {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        color: #9d9d9d;\n    }\n    .mlp-con-title-icon { color: #9d9d9d; flex-shrink: 0; }\n    .mlp-con-title-text {\n        font-size: 11px;\n        font-weight: 600;\n        letter-spacing: 0.05em;\n        text-transform: uppercase;\n        color: #cccccc;\n    }\n    .mlp-con-titlebar-right { display: flex; align-items: center; gap: 2px; }\n    .mlp-con-tb-btn {\n        display: flex; align-items: center; justify-content: center;\n        width: 22px; height: 22px;\n        background: none; border: none; border-radius: 4px;\n        color: #9d9d9d; cursor: pointer;\n        transition: background 0.1s, color 0.1s;\n        padding: 0;\n    }\n    .mlp-con-tb-btn:hover { background: rgba(255,255,255,0.08); color: #ffffff; }\n    .mlp-modal-close-btn.mlp-con-tb-btn:hover { background: #c42b1c; color: #ffffff; }\n\n    \/* \u2500\u2500 Toolbar (tabs + actions) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n    .mlp-con-toolbar {\n        display: flex;\n        align-items: stretch;\n        justify-content: space-between;\n        background: #252526;\n        border-bottom: 1px solid #3c3c3c;\n        flex-shrink: 0;\n        height: 30px;\n    }\n    .mlp-con-filter-tabs { display: flex; align-items: stretch; }\n    .mlp-con-tab {\n        display: inline-flex; align-items: center; gap: 5px;\n        padding: 0 12px;\n        background: none; border: none; border-bottom: 2px solid transparent;\n        color: #9d9d9d; font-size: 11.5px; font-family: inherit;\n        cursor: pointer; white-space: nowrap;\n        transition: color 0.15s, border-color 0.15s;\n        position: relative;\n    }\n    .mlp-con-tab:hover { color: #d4d4d4; background: rgba(255,255,255,0.04); }\n    .mlp-con-tab.active { color: #ffffff; border-bottom-color: #569cd6; }\n    .mlp-con-tab-error { }\n    .mlp-con-tab-error.active { border-bottom-color: #f14c4c; }\n    .mlp-con-tab-warn.active  { border-bottom-color: #cca700; }\n    .mlp-con-tab-info.active  { border-bottom-color: #75beff; }\n    .mlp-con-tab-count {\n        display: inline-flex; align-items: center; justify-content: center;\n        min-width: 16px; height: 16px; padding: 0 4px;\n        background: rgba(255,255,255,0.08);\n        border-radius: 8px;\n        font-size: 10px; font-weight: 700; line-height: 1;\n        color: #9d9d9d;\n        display: none;\n    }\n    .mlp-con-tab-count.has-count { display: inline-flex; }\n    .mlp-con-tab-error .mlp-con-tab-count.has-count { background: rgba(241,76,76,0.2); color: #f14c4c; }\n    .mlp-con-tab-warn  .mlp-con-tab-count.has-count { background: rgba(204,167,0,0.2); color: #cca700; }\n    .mlp-con-tab-info  .mlp-con-tab-count.has-count { background: rgba(117,190,255,0.2); color: #75beff; }\n\n    .mlp-con-actions {\n        display: flex; align-items: center; gap: 1px;\n        padding: 0 6px;\n    }\n    .mlp-con-action-btn {\n        display: flex; align-items: center; justify-content: center;\n        width: 24px; height: 24px;\n        background: none; border: none; border-radius: 4px;\n        color: #9d9d9d; cursor: pointer;\n        transition: background 0.1s, color 0.1s;\n        padding: 0;\n    }\n    .mlp-con-action-btn:hover { background: rgba(255,255,255,0.08); color: #cccccc; }\n    .mlp-con-action-btn.paused { color: #569cd6; }\n    .mlp-con-divider {\n        width: 1px; height: 16px;\n        background: #3c3c3c;\n        margin: 0 3px;\n    }\n\n    \/* \u2500\u2500 Output area \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n    .mlp-con-output {\n        flex: 1; overflow-y: auto; overflow-x: hidden;\n        background: #1e1e1e;\n        outline: none;\n        scrollbar-width: thin;\n        scrollbar-color: #424242 transparent;\n    }\n    .mlp-con-output::-webkit-scrollbar { width: 8px; }\n    .mlp-con-output::-webkit-scrollbar-track { background: transparent; }\n    .mlp-con-output::-webkit-scrollbar-thumb { background: #424242; border-radius: 4px; }\n    .mlp-con-output::-webkit-scrollbar-thumb:hover { background: #555; }\n\n    \/* Welcome state *\/\n    .mlp-con-welcome {\n        display: flex; align-items: center; justify-content: center;\n        height: 100%; min-height: 80px;\n    }\n    .mlp-con-welcome-inner {\n        display: flex; align-items: center; gap: 10px;\n        color: #4d4d4d; font-size: 12px;\n    }\n    .mlp-con-welcome-inner svg { color: #3a3a3a; flex-shrink: 0; }\n\n    \/* \u2500\u2500 Log rows \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n    .mlp-con-row {\n        display: flex;\n        align-items: flex-start;\n        min-height: 20px;\n        padding: 1px 8px 1px 0;\n        border-bottom: 1px solid rgba(255,255,255,0.04);\n        position: relative;\n        cursor: default;\n    }\n    .mlp-con-row:hover { background: rgba(255,255,255,0.03); }\n\n    \/* Left severity stripe *\/\n    .mlp-con-row::before {\n        content: '';\n        display: block;\n        width: 3px;\n        min-height: 100%;\n        flex-shrink: 0;\n        align-self: stretch;\n        margin-right: 6px;\n    }\n    .mlp-con-row.mlp-row-error { background: rgba(241,76,76,0.07); }\n    .mlp-con-row.mlp-row-error::before { background: #f14c4c; }\n    .mlp-con-row.mlp-row-warn  { background: rgba(204,167,0,0.07); }\n    .mlp-con-row.mlp-row-warn::before  { background: #cca700; }\n    .mlp-con-row.mlp-row-info::before  { background: #569cd6; }\n    .mlp-con-row.mlp-row-log::before   { background: transparent; }\n    .mlp-con-row.mlp-row-input { background: rgba(255,255,255,0.025); }\n    .mlp-con-row.mlp-row-input::before { background: #9d9d9d; }\n    .mlp-con-row.mlp-row-result::before { background: #4ec9b0; }\n\n    \/* Icon *\/\n    .mlp-con-row-icon {\n        flex-shrink: 0; width: 14px; height: 20px;\n        display: flex; align-items: center; justify-content: center;\n        margin-right: 6px;\n    }\n    .mlp-con-row-icon svg { display: block; }\n    .mlp-row-error .mlp-con-row-icon { color: #f14c4c; }\n    .mlp-row-warn  .mlp-con-row-icon { color: #cca700; }\n    .mlp-row-info  .mlp-con-row-icon { color: #75beff; }\n    .mlp-row-log   .mlp-con-row-icon { color: #6a6a6a; }\n    .mlp-row-input .mlp-con-row-icon { color: #9d9d9d; }\n    .mlp-row-result .mlp-con-row-icon { color: #4ec9b0; }\n\n    \/* Content + timestamp *\/\n    .mlp-con-row-body {\n        flex: 1; min-width: 0;\n        display: flex; align-items: baseline;\n        gap: 8px;\n        padding: 2px 0;\n    }\n    .mlp-con-row-msg {\n        flex: 1; word-break: break-word;\n        white-space: pre-wrap;\n        line-height: 1.5;\n        color: #d4d4d4;\n    }\n    .mlp-row-error .mlp-con-row-msg { color: #f88070; }\n    .mlp-row-warn  .mlp-con-row-msg { color: #ddbf6a; }\n    .mlp-row-info  .mlp-con-row-msg { color: #9cdcfe; }\n    .mlp-row-input .mlp-con-row-msg { color: #c8c8c8; font-style: italic; }\n    .mlp-row-result .mlp-con-row-msg { color: #4ec9b0; }\n    .mlp-con-row-time {\n        flex-shrink: 0;\n        font-size: 10px; color: #555; line-height: 1.5;\n        white-space: nowrap;\n    }\n\n    \/* Repeat badge *\/\n    .mlp-con-row-repeat {\n        flex-shrink: 0;\n        font-size: 10px; font-weight: 700;\n        background: rgba(255,255,255,0.1);\n        border-radius: 8px;\n        padding: 0 5px; height: 16px; line-height: 16px;\n        color: #9d9d9d; margin-left: 4px;\n        display: none;\n    }\n    .mlp-con-row-repeat.visible { display: inline-block; }\n\n    \/* Filter-empty state *\/\n    .mlp-con-filter-empty {\n        padding: 20px 12px;\n        color: #555; font-style: italic; text-align: center; font-size: 12px;\n    }\n\n    \/* \u2500\u2500 Status bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n    .mlp-con-statusbar {\n        display: flex; align-items: center; justify-content: space-between;\n        padding: 0 10px;\n        height: 20px;\n        background: #007acc;\n        font-size: 10.5px; color: rgba(255,255,255,0.85);\n        flex-shrink: 0;\n    }\n    .mlp-con-statusbar.has-errors { background: #c72e0f; }\n    .mlp-con-statusbar.has-warnings:not(.has-errors) { background: #7d6608; }\n    .mlp-con-status-hint { opacity: 0.65; font-size: 10px; }\n\n    \/* \u2500\u2500 REPL input \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n    .mlp-con-repl {\n        display: flex; align-items: center;\n        background: #1e1e1e;\n        border-top: 1px solid #3c3c3c;\n        padding: 0 8px;\n        min-height: 34px;\n        flex-shrink: 0;\n        gap: 6px;\n    }\n    .mlp-con-repl-prompt {\n        flex-shrink: 0; color: #569cd6;\n        display: flex; align-items: center;\n    }\n    .mlp-con-repl-input-wrap { flex: 1; display: flex; align-items: center; }\n    .mlp-con-repl-input {\n        width: 100%; background: none; border: none; outline: none;\n        color: #d4d4d4; font-family: inherit; font-size: 12.5px;\n        padding: 6px 0; caret-color: #569cd6;\n    }\n    .mlp-con-repl-input::placeholder { color: #4a4a4a; }\n    .mlp-con-run-btn {\n        flex-shrink: 0;\n        display: inline-flex; align-items: center; gap: 5px;\n        padding: 4px 10px;\n        background: #0e639c; border: none; border-radius: 3px;\n        color: #ffffff; font-size: 11px; font-family: inherit;\n        font-weight: 600; cursor: pointer; letter-spacing: 0.02em;\n        transition: background 0.15s;\n    }\n    .mlp-con-run-btn:hover { background: #1177bb; }\n    .mlp-con-run-btn:active { background: #0a5280; }\n\n    \/* \u2500\u2500 Minimised pill \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n    .mlp-console-panel.mlp-con-minimised {\n        bottom: 0; left: 0; right: 0;\n        height: 28px !important;\n        border-radius: 0;\n        border-top: 1px solid #3c3c3c;\n    }\n    .mlp-console-panel.mlp-con-floating.mlp-con-minimised {\n        left: 50%; right: auto;\n        transform: translateX(-50%);\n        width: 260px; border-radius: 14px;\n        bottom: 24px;\n    }\n\n    \/* \u2500\u2500 Mobile \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n    @media (max-width: 600px) {\n        .mlp-console-panel { font-size: 11px; }\n        .mlp-con-repl-input { font-size: 12px; }\n        .mlp-con-tab { padding: 0 8px; font-size: 10.5px; }\n        .mlp-con-status-hint { display: none; }\n    }\n    <\/style>\n    <!-- Device Picker Modal (shown when clicking Preview Fullscreen button) -->\n<div class=\"mlp-device-picker-modal\" id=\"mlp-device-picker-modal-mlp-15-1\">\n<div class=\"mlp-device-picker-content\">\n<div class=\"mlp-device-picker-header\">\n<h3><i class=\"fas fa-desktop\"><\/i> <span>Choose Preview Device<\/span><\/h3>\n<button class=\"mlp-device-picker-close\" data-instance=\"mlp-15-1\">&times;<\/button>\n<\/div>\n<div class=\"mlp-device-picker-body\">\n<p class=\"mlp-device-picker-subtitle\">Select the device type for your fullscreen preview<\/p>\n<!-- Search bar for picker -->\n<div class=\"mlp-picker-search-wrap\">\n<i class=\"fas fa-search mlp-picker-search-icon\"><\/i>\n<input type=\"text\" class=\"mlp-picker-search-input\" id=\"mlp-picker-search-mlp-15-1\" placeholder=\"Search devices... e.g. iPhone, Galaxy, iPad\" autocomplete=\"off\" \/>\n<button class=\"mlp-picker-search-clear\" id=\"mlp-picker-search-clear-mlp-15-1\" style=\"display:none\"><i class=\"fas fa-times\"><\/i><\/button>\n<\/div>\n<!-- Search results container (hidden when empty) -->\n<div class=\"mlp-picker-search-results\" id=\"mlp-picker-search-results-mlp-15-1\" style=\"display:none\"><\/div>\n<!-- Main 3 devices -->\n<div class=\"mlp-device-picker-options\">\n<button class=\"mlp-device-option\" data-device=\"desktop\" data-width=\"0\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-desktop\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Desktop<\/div>\n<div class=\"mlp-device-option-sub\">Full width<\/div>\n<\/button>\n<button class=\"mlp-device-option\" data-device=\"tablet\" data-width=\"768\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-tablet-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Tablet<\/div>\n<div class=\"mlp-device-option-sub\">768px<\/div>\n<\/button>\n<button class=\"mlp-device-option\" data-device=\"mobile\" data-width=\"375\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Mobile<\/div>\n<div class=\"mlp-device-option-sub\">375px<\/div>\n<\/button>\n<\/div>\n<!-- View More toggle -->\n<button class=\"mlp-device-picker-more-btn\" data-instance=\"mlp-15-1\">\n<i class=\"fas fa-chevron-down mlp-picker-more-arrow\"><\/i>\nView More Devices<\/button>\n<!-- Extended devices (hidden by default) -->\n<div class=\"mlp-device-picker-extended\" id=\"mlp-device-picker-extended-mlp-15-1\">\n<div class=\"mlp-picker-ext-group-label\">Desktop<\/div>\n<div class=\"mlp-device-picker-options mlp-device-picker-options-ext\">\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"laptop-sm\" data-width=\"1024\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-laptop\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Laptop S<\/div>\n<div class=\"mlp-device-option-sub\">1024px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"laptop\" data-width=\"1280\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-laptop\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Laptop<\/div>\n<div class=\"mlp-device-option-sub\">1280px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"laptop-lg\" data-width=\"1366\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-laptop\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Laptop L<\/div>\n<div class=\"mlp-device-option-sub\">1366px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"laptop-xl\" data-width=\"1440\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-laptop\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Laptop XL<\/div>\n<div class=\"mlp-device-option-sub\">1440px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"laptop-2xl\" data-width=\"1536\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-laptop\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Laptop 2XL<\/div>\n<div class=\"mlp-device-option-sub\">1536px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"fullhd\" data-width=\"1920\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-tv\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Full HD<\/div>\n<div class=\"mlp-device-option-sub\">1920px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"wuxga\" data-width=\"1920\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-tv\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">WUXGA<\/div>\n<div class=\"mlp-device-option-sub\">1920px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"2k\" data-width=\"2560\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-tv\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">2K QHD<\/div>\n<div class=\"mlp-device-option-sub\">2560px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"ultrawide\" data-width=\"3440\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-tv\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Ultrawide 34\"<\/div>\n<div class=\"mlp-device-option-sub\">3440px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"4k\" data-width=\"3840\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-tv\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">4K UHD<\/div>\n<div class=\"mlp-device-option-sub\">3840px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"5k\" data-width=\"5120\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-tv\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">5K Ultrawide<\/div>\n<div class=\"mlp-device-option-sub\">5120px<\/div>\n<\/button>\n<\/div>\n<div class=\"mlp-picker-ext-two-col\">\n<div class=\"mlp-picker-ext-col\">\n<div class=\"mlp-picker-ext-group-label\">Tablet<\/div>\n<div class=\"mlp-device-picker-options mlp-device-picker-options-ext mlp-device-picker-options-col\">\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"kindle-fire\" data-width=\"600\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-tablet-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Kindle Fire HD<\/div>\n<div class=\"mlp-device-option-sub\">600px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"ipad-mini\" data-width=\"768\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-tablet-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">iPad Mini 6<\/div>\n<div class=\"mlp-device-option-sub\">768px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"galaxy-tab-a\" data-width=\"800\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-tablet-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Galaxy Tab A8<\/div>\n<div class=\"mlp-device-option-sub\">800px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"galaxy-tab-s6\" data-width=\"800\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-tablet-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Galaxy Tab S6<\/div>\n<div class=\"mlp-device-option-sub\">800px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"ipad-air\" data-width=\"820\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-tablet-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">iPad Air<\/div>\n<div class=\"mlp-device-option-sub\">820px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"galaxy-tab-s9\" data-width=\"834\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-tablet-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Galaxy Tab S9<\/div>\n<div class=\"mlp-device-option-sub\">834px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"surface-go\" data-width=\"912\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-tablet-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Surface Go 3<\/div>\n<div class=\"mlp-device-option-sub\">912px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"surface-pro\" data-width=\"912\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-tablet-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Surface Pro 9<\/div>\n<div class=\"mlp-device-option-sub\">912px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"ipad-pro\" data-width=\"1024\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-tablet-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">iPad Pro 11\"<\/div>\n<div class=\"mlp-device-option-sub\">1024px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"ipad-pro-13\" data-width=\"1032\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-tablet-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">iPad Pro 13\"<\/div>\n<div class=\"mlp-device-option-sub\">1032px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"galaxy-tab-s8u\" data-width=\"960\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-tablet-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Galaxy Tab S8 Ultra<\/div>\n<div class=\"mlp-device-option-sub\">960px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"galaxy-tab-s9u\" data-width=\"916\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-tablet-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Galaxy Tab S9+<\/div>\n<div class=\"mlp-device-option-sub\">916px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"xiaomi-pad-6\" data-width=\"800\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-tablet-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Xiaomi Pad 6<\/div>\n<div class=\"mlp-device-option-sub\">800px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"lenovo-tab\" data-width=\"1600\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-tablet-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Lenovo Tab P12<\/div>\n<div class=\"mlp-device-option-sub\">1600px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"galaxy-fold-open\" data-width=\"717\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-tablet-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Galaxy Z Fold Open<\/div>\n<div class=\"mlp-device-option-sub\">717px<\/div>\n<\/button>\n<\/div>\n<\/div>\n<div class=\"mlp-picker-ext-col mlp-picker-ext-col-border\">\n<div class=\"mlp-picker-ext-group-label\">Mobile<\/div>\n<div class=\"mlp-device-picker-options mlp-device-picker-options-ext mlp-device-picker-options-col\">\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"iphone-5\" data-width=\"320\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">iPhone 5<\/div>\n<div class=\"mlp-device-option-sub\">320px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"galaxy-a14\" data-width=\"360\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Galaxy A14<\/div>\n<div class=\"mlp-device-option-sub\">360px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"galaxy-a34\" data-width=\"360\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Galaxy A34<\/div>\n<div class=\"mlp-device-option-sub\">360px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"galaxy-a54\" data-width=\"360\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Galaxy A54<\/div>\n<div class=\"mlp-device-option-sub\">360px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"galaxy-s21\" data-width=\"360\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Galaxy S21<\/div>\n<div class=\"mlp-device-option-sub\">360px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"galaxy-s22\" data-width=\"360\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Galaxy S22<\/div>\n<div class=\"mlp-device-option-sub\">360px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"galaxy-s23\" data-width=\"360\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Galaxy S23<\/div>\n<div class=\"mlp-device-option-sub\">360px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"galaxy-s24\" data-width=\"360\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Galaxy S24<\/div>\n<div class=\"mlp-device-option-sub\">360px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"galaxy-s25\" data-width=\"360\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Galaxy S25<\/div>\n<div class=\"mlp-device-option-sub\">360px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"iphone-12-mini\" data-width=\"360\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">iPhone 12 Mini<\/div>\n<div class=\"mlp-device-option-sub\">360px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"iphone-13-mini\" data-width=\"375\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">iPhone 13 Mini<\/div>\n<div class=\"mlp-device-option-sub\">375px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"iphone-se\" data-width=\"375\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">iPhone SE (2022)<\/div>\n<div class=\"mlp-device-option-sub\">375px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"iphone-12\" data-width=\"390\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">iPhone 12<\/div>\n<div class=\"mlp-device-option-sub\">390px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"iphone-13\" data-width=\"390\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">iPhone 13<\/div>\n<div class=\"mlp-device-option-sub\">390px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"iphone-14\" data-width=\"390\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">iPhone 14<\/div>\n<div class=\"mlp-device-option-sub\">390px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"iphone-15\" data-width=\"393\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">iPhone 15<\/div>\n<div class=\"mlp-device-option-sub\">393px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"iphone-16\" data-width=\"393\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">iPhone 16<\/div>\n<div class=\"mlp-device-option-sub\">393px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"xiaomi-14\" data-width=\"393\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Xiaomi 14<\/div>\n<div class=\"mlp-device-option-sub\">393px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"huawei-p60\" data-width=\"393\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Huawei P60 Pro<\/div>\n<div class=\"mlp-device-option-sub\">393px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"oppo-find-x7\" data-width=\"412\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">OPPO Find X7<\/div>\n<div class=\"mlp-device-option-sub\">412px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"pixel-6\" data-width=\"412\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Pixel 6<\/div>\n<div class=\"mlp-device-option-sub\">412px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"pixel-7\" data-width=\"412\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Pixel 7<\/div>\n<div class=\"mlp-device-option-sub\">412px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"pixel-8\" data-width=\"412\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Pixel 8 Pro<\/div>\n<div class=\"mlp-device-option-sub\">412px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"pixel-9\" data-width=\"412\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Pixel 9 Pro<\/div>\n<div class=\"mlp-device-option-sub\">412px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"oneplus-12\" data-width=\"412\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">OnePlus 12<\/div>\n<div class=\"mlp-device-option-sub\">412px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"oneplus-13\" data-width=\"412\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">OnePlus 13<\/div>\n<div class=\"mlp-device-option-sub\">412px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"moto-edge-40\" data-width=\"400\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Moto Edge 40<\/div>\n<div class=\"mlp-device-option-sub\">400px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"asus-rog-8\" data-width=\"393\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">ASUS ROG 8<\/div>\n<div class=\"mlp-device-option-sub\">393px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"sony-xperia-1\" data-width=\"360\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Sony Xperia 1 VI<\/div>\n<div class=\"mlp-device-option-sub\">360px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"nokia-g60\" data-width=\"360\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Nokia G60<\/div>\n<div class=\"mlp-device-option-sub\">360px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"galaxy-s23u\" data-width=\"384\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Galaxy S23 Ultra<\/div>\n<div class=\"mlp-device-option-sub\">384px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"galaxy-s24u\" data-width=\"384\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Galaxy S24 Ultra<\/div>\n<div class=\"mlp-device-option-sub\">384px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"galaxy-s25u\" data-width=\"384\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Galaxy S25 Ultra<\/div>\n<div class=\"mlp-device-option-sub\">384px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"iphone-14-pm\" data-width=\"430\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">iPhone 14 Pro Max<\/div>\n<div class=\"mlp-device-option-sub\">430px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"iphone-15-pm\" data-width=\"430\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">iPhone 15 Pro Max<\/div>\n<div class=\"mlp-device-option-sub\">430px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"iphone-16-pm\" data-width=\"440\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">iPhone 16 Pro Max<\/div>\n<div class=\"mlp-device-option-sub\">440px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"galaxy-fold\" data-width=\"344\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Galaxy Z Fold<\/div>\n<div class=\"mlp-device-option-sub\">344px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"galaxy-flip\" data-width=\"360\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Galaxy Z Flip 5<\/div>\n<div class=\"mlp-device-option-sub\">360px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"pixel-9-fold\" data-width=\"412\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Pixel 9 Pro Fold<\/div>\n<div class=\"mlp-device-option-sub\">412px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"xiaomi-14u\" data-width=\"412\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Xiaomi 14 Ultra<\/div>\n<div class=\"mlp-device-option-sub\">412px<\/div>\n<\/button>\n<button class=\"mlp-device-option mlp-device-option-sm\" data-device=\"xiaomi-15\" data-width=\"393\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-device-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\n<div class=\"mlp-device-option-label\">Xiaomi 15<\/div>\n<div class=\"mlp-device-option-sub\">393px<\/div>\n<\/button>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<!-- Fullscreen Preview Popup (shown after device selection) -->\n<div class=\"mlp-preview-popup-modal\" id=\"mlp-preview-popup-modal-mlp-15-1\">\n<div class=\"mlp-preview-popup-inner\" id=\"mlp-preview-popup-inner-mlp-15-1\">\n<!-- Top bar (console-style) -->\n<div class=\"mlp-preview-popup-topbar\">\n<div class=\"mlp-preview-popup-topbar-left\">\n<!-- Traffic light circles -->\n<span class=\"mlp-topbar-circle mlp-tc-red\"><\/span>\n<span class=\"mlp-topbar-circle mlp-tc-yellow\"><\/span>\n<span class=\"mlp-topbar-circle mlp-tc-green\"><\/span>\n<span class=\"mlp-preview-popup-topbar-sep\" style=\"margin:0 8px 0 10px;\"><\/span>\n<!-- Logo -->\n<img decoding=\"async\" src=\"https:\/\/pterocos.eu.org\/wp-content\/uploads\/2026\/07\/pterocos.png\" alt=\"ptero\" style=\"height:22px;width:auto;object-fit:contain;border-radius:3px;flex-shrink:0;filter:brightness(1.1);\">\n<!-- Brand + tab name -->\n<span class=\"mlp-preview-popup-brand-text\">ptero.us.ci<\/span>\n<span class=\"mlp-topbar-tilde\">~<\/span>\n<span class=\"mlp-topbar-tab-name\" id=\"mlp-topbar-tab-name-mlp-15-1\">Preview<\/span>\n<!-- Device badge (hidden visually, kept for JS) -->\n<span class=\"mlp-preview-popup-device-badge\" id=\"mlp-preview-popup-device-badge-mlp-15-1\" style=\"display:none;\">\n<i class=\"fas fa-desktop\"><\/i> <span>Desktop<\/span>\n<\/span>\n<\/div>\n<!-- Device switcher dropdown -->\n<div class=\"mlp-device-switcher\" id=\"mlp-device-switcher-mlp-15-1\">\n<button class=\"mlp-device-switcher-trigger\" id=\"mlp-device-switcher-trigger-mlp-15-1\" data-instance=\"mlp-15-1\">\n<i class=\"fas fa-desktop\" id=\"mlp-switcher-icon-mlp-15-1\"><\/i>\n<span id=\"mlp-switcher-label-mlp-15-1\">Desktop<\/span>\n<i class=\"fas fa-chevron-down mlp-switcher-arrow\" id=\"mlp-switcher-arrow-mlp-15-1\"><\/i>\n<\/button>\n<div class=\"mlp-device-switcher-dropdown\" id=\"mlp-device-switcher-dropdown-mlp-15-1\">\n<div class=\"mlp-switcher-dropdown-header\" style=\"display:flex;align-items:center;justify-content:space-between;\">Switch View<button class=\"mlp-switcher-close-btn\" data-instance=\"mlp-15-1\" title=\"Close\" style=\"background:none;border:none;color:#555;cursor:pointer;font-size:0.85rem;padding:0 0 0 8px;line-height:1;transition:color 0.15s;\" onmouseover=\"this.style.color='#fff'\" onmouseout=\"this.style.color='#555'\"><i class=\"fas fa-times\"><\/i><\/button><\/div>\n<!-- Search bar for switcher -->\n<div class=\"mlp-switcher-search-wrap\">\n<i class=\"fas fa-search mlp-switcher-search-icon\"><\/i>\n<input type=\"text\" class=\"mlp-switcher-search-input\" id=\"mlp-switcher-search-mlp-15-1\" placeholder=\"Search...\" autocomplete=\"off\" \/>\n<button class=\"mlp-switcher-search-clear\" id=\"mlp-switcher-search-clear-mlp-15-1\" style=\"display:none\"><i class=\"fas fa-times\"><\/i><\/button>\n<\/div>\n<!-- Search results (shown while typing) -->\n<div class=\"mlp-switcher-search-results\" id=\"mlp-switcher-search-results-mlp-15-1\" style=\"display:none\"><\/div>\n<button class=\"mlp-switcher-option active\" data-device=\"desktop\" data-width=\"0\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-desktop\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Desktop<\/span>\n<span class=\"mlp-switcher-option-sub\">Full width<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option\" data-device=\"tablet\" data-width=\"768\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-tablet-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Tablet<\/span>\n<span class=\"mlp-switcher-option-sub\">768px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option\" data-device=\"mobile\" data-width=\"375\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Mobile<\/span>\n<span class=\"mlp-switcher-option-sub\">375px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<!-- View More toggle -->\n<button class=\"mlp-switcher-view-more-btn\" data-instance=\"mlp-15-1\">\n<i class=\"fas fa-chevron-down mlp-switcher-more-arrow\"><\/i>\nView More<\/button>\n<!-- Extended list -->\n<div class=\"mlp-switcher-extended\" id=\"mlp-switcher-extended-mlp-15-1\">\n<div class=\"mlp-switcher-group-label\">Desktop<\/div>\n<button class=\"mlp-switcher-option\" data-device=\"laptop-sm\" data-width=\"1024\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-laptop\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Laptop S<\/span>\n<span class=\"mlp-switcher-option-sub\">1024px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option\" data-device=\"laptop\" data-width=\"1280\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-laptop\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Laptop<\/span>\n<span class=\"mlp-switcher-option-sub\">1280px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option\" data-device=\"laptop-lg\" data-width=\"1366\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-laptop\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Laptop L<\/span>\n<span class=\"mlp-switcher-option-sub\">1366px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option\" data-device=\"laptop-xl\" data-width=\"1440\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-laptop\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Laptop XL<\/span>\n<span class=\"mlp-switcher-option-sub\">1440px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option\" data-device=\"laptop-2xl\" data-width=\"1536\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-laptop\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Laptop 2XL<\/span>\n<span class=\"mlp-switcher-option-sub\">1536px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option\" data-device=\"fullhd\" data-width=\"1920\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-tv\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Full HD<\/span>\n<span class=\"mlp-switcher-option-sub\">1920px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option\" data-device=\"wuxga\" data-width=\"1920\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-tv\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">WUXGA<\/span>\n<span class=\"mlp-switcher-option-sub\">1920px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option\" data-device=\"2k\" data-width=\"2560\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-tv\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">2K QHD<\/span>\n<span class=\"mlp-switcher-option-sub\">2560px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option\" data-device=\"ultrawide\" data-width=\"3440\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-tv\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Ultrawide 34\"<\/span>\n<span class=\"mlp-switcher-option-sub\">3440px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option\" data-device=\"4k\" data-width=\"3840\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-tv\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">4K UHD<\/span>\n<span class=\"mlp-switcher-option-sub\">3840px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option\" data-device=\"5k\" data-width=\"5120\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-tv\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">5K Ultrawide<\/span>\n<span class=\"mlp-switcher-option-sub\">5120px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<div class=\"mlp-switcher-group-label\">Tablet<\/div>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"kindle-fire\" data-width=\"600\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-tablet-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Kindle Fire HD<\/span>\n<span class=\"mlp-switcher-option-sub\">600px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"ipad-mini\" data-width=\"768\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-tablet-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">iPad Mini 6<\/span>\n<span class=\"mlp-switcher-option-sub\">768px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"galaxy-tab-a\" data-width=\"800\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-tablet-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Galaxy Tab A8<\/span>\n<span class=\"mlp-switcher-option-sub\">800px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"galaxy-tab-s6\" data-width=\"800\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-tablet-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Galaxy Tab S6<\/span>\n<span class=\"mlp-switcher-option-sub\">800px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"ipad-air\" data-width=\"820\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-tablet-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">iPad Air<\/span>\n<span class=\"mlp-switcher-option-sub\">820px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"galaxy-tab-s9\" data-width=\"834\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-tablet-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Galaxy Tab S9<\/span>\n<span class=\"mlp-switcher-option-sub\">834px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"surface-go\" data-width=\"912\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-tablet-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Surface Go 3<\/span>\n<span class=\"mlp-switcher-option-sub\">912px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"surface-pro\" data-width=\"912\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-tablet-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Surface Pro 9<\/span>\n<span class=\"mlp-switcher-option-sub\">912px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"ipad-pro\" data-width=\"1024\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-tablet-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">iPad Pro 11\"<\/span>\n<span class=\"mlp-switcher-option-sub\">1024px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"ipad-pro-13\" data-width=\"1032\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-tablet-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">iPad Pro 13\"<\/span>\n<span class=\"mlp-switcher-option-sub\">1032px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"galaxy-tab-s8u\" data-width=\"960\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-tablet-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Galaxy Tab S8 Ultra<\/span>\n<span class=\"mlp-switcher-option-sub\">960px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"galaxy-tab-s9u\" data-width=\"916\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-tablet-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Galaxy Tab S9+<\/span>\n<span class=\"mlp-switcher-option-sub\">916px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"xiaomi-pad-6\" data-width=\"800\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-tablet-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Xiaomi Pad 6<\/span>\n<span class=\"mlp-switcher-option-sub\">800px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"lenovo-tab\" data-width=\"1600\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-tablet-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Lenovo Tab P12<\/span>\n<span class=\"mlp-switcher-option-sub\">1600px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"galaxy-fold-open\" data-width=\"717\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-tablet-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Galaxy Z Fold Open<\/span>\n<span class=\"mlp-switcher-option-sub\">717px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<div class=\"mlp-switcher-group-label\">Mobile<\/div>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"iphone-5\" data-width=\"320\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">iPhone 5<\/span>\n<span class=\"mlp-switcher-option-sub\">320px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"galaxy-a14\" data-width=\"360\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Galaxy A14<\/span>\n<span class=\"mlp-switcher-option-sub\">360px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"galaxy-a34\" data-width=\"360\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Galaxy A34<\/span>\n<span class=\"mlp-switcher-option-sub\">360px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"galaxy-a54\" data-width=\"360\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Galaxy A54<\/span>\n<span class=\"mlp-switcher-option-sub\">360px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"galaxy-s21\" data-width=\"360\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Galaxy S21<\/span>\n<span class=\"mlp-switcher-option-sub\">360px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"galaxy-s22\" data-width=\"360\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Galaxy S22<\/span>\n<span class=\"mlp-switcher-option-sub\">360px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"galaxy-s23\" data-width=\"360\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Galaxy S23<\/span>\n<span class=\"mlp-switcher-option-sub\">360px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"galaxy-s24\" data-width=\"360\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Galaxy S24<\/span>\n<span class=\"mlp-switcher-option-sub\">360px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"galaxy-s25\" data-width=\"360\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Galaxy S25<\/span>\n<span class=\"mlp-switcher-option-sub\">360px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"iphone-12-mini\" data-width=\"360\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">iPhone 12 Mini<\/span>\n<span class=\"mlp-switcher-option-sub\">360px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"iphone-13-mini\" data-width=\"375\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">iPhone 13 Mini<\/span>\n<span class=\"mlp-switcher-option-sub\">375px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"iphone-se\" data-width=\"375\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">iPhone SE (2022)<\/span>\n<span class=\"mlp-switcher-option-sub\">375px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"iphone-12\" data-width=\"390\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">iPhone 12<\/span>\n<span class=\"mlp-switcher-option-sub\">390px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"iphone-13\" data-width=\"390\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">iPhone 13<\/span>\n<span class=\"mlp-switcher-option-sub\">390px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"iphone-14\" data-width=\"390\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">iPhone 14<\/span>\n<span class=\"mlp-switcher-option-sub\">390px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"iphone-15\" data-width=\"393\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">iPhone 15<\/span>\n<span class=\"mlp-switcher-option-sub\">393px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"iphone-16\" data-width=\"393\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">iPhone 16<\/span>\n<span class=\"mlp-switcher-option-sub\">393px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"xiaomi-14\" data-width=\"393\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Xiaomi 14<\/span>\n<span class=\"mlp-switcher-option-sub\">393px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"huawei-p60\" data-width=\"393\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Huawei P60 Pro<\/span>\n<span class=\"mlp-switcher-option-sub\">393px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"oppo-find-x7\" data-width=\"412\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">OPPO Find X7<\/span>\n<span class=\"mlp-switcher-option-sub\">412px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"pixel-6\" data-width=\"412\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Pixel 6<\/span>\n<span class=\"mlp-switcher-option-sub\">412px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"pixel-7\" data-width=\"412\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Pixel 7<\/span>\n<span class=\"mlp-switcher-option-sub\">412px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"pixel-8\" data-width=\"412\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Pixel 8 Pro<\/span>\n<span class=\"mlp-switcher-option-sub\">412px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"pixel-9\" data-width=\"412\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Pixel 9 Pro<\/span>\n<span class=\"mlp-switcher-option-sub\">412px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"oneplus-12\" data-width=\"412\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">OnePlus 12<\/span>\n<span class=\"mlp-switcher-option-sub\">412px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"oneplus-13\" data-width=\"412\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">OnePlus 13<\/span>\n<span class=\"mlp-switcher-option-sub\">412px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"moto-edge-40\" data-width=\"400\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Moto Edge 40<\/span>\n<span class=\"mlp-switcher-option-sub\">400px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"asus-rog-8\" data-width=\"393\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">ASUS ROG 8<\/span>\n<span class=\"mlp-switcher-option-sub\">393px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"sony-xperia-1\" data-width=\"360\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Sony Xperia 1 VI<\/span>\n<span class=\"mlp-switcher-option-sub\">360px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"nokia-g60\" data-width=\"360\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Nokia G60<\/span>\n<span class=\"mlp-switcher-option-sub\">360px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"galaxy-s23u\" data-width=\"384\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Galaxy S23 Ultra<\/span>\n<span class=\"mlp-switcher-option-sub\">384px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"galaxy-s24u\" data-width=\"384\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Galaxy S24 Ultra<\/span>\n<span class=\"mlp-switcher-option-sub\">384px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"galaxy-s25u\" data-width=\"384\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Galaxy S25 Ultra<\/span>\n<span class=\"mlp-switcher-option-sub\">384px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"iphone-14-pm\" data-width=\"430\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">iPhone 14 Pro Max<\/span>\n<span class=\"mlp-switcher-option-sub\">430px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"iphone-15-pm\" data-width=\"430\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">iPhone 15 Pro Max<\/span>\n<span class=\"mlp-switcher-option-sub\">430px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"iphone-16-pm\" data-width=\"440\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">iPhone 16 Pro Max<\/span>\n<span class=\"mlp-switcher-option-sub\">440px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"galaxy-fold\" data-width=\"344\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Galaxy Z Fold<\/span>\n<span class=\"mlp-switcher-option-sub\">344px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"galaxy-flip\" data-width=\"360\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Galaxy Z Flip 5<\/span>\n<span class=\"mlp-switcher-option-sub\">360px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"pixel-9-fold\" data-width=\"412\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Pixel 9 Pro Fold<\/span>\n<span class=\"mlp-switcher-option-sub\">412px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option mlp-switcher-option-col\" data-device=\"xiaomi-14u\" data-width=\"412\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Xiaomi 14 Ultra<\/span>\n<span class=\"mlp-switcher-option-sub\">412px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<button class=\"mlp-switcher-option\" data-device=\"xiaomi-15\" data-width=\"393\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-switcher-option-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/span>\n<span class=\"mlp-switcher-option-info\">\n<span class=\"mlp-switcher-option-label\">Xiaomi 15<\/span>\n<span class=\"mlp-switcher-option-sub\">393px<\/span>\n<\/span>\n<i class=\"fas fa-check mlp-switcher-check\"><\/i>\n<\/button>\n<\/div><!-- \/mlp-switcher-extended -->\n<\/div><!-- \/mlp-device-switcher-dropdown -->\n<\/div><!-- \/mlp-device-switcher -->\n<!-- Folding cube loading overlay -->\n<div class=\"mlp-popup-cube-loader\" id=\"mlp-popup-cube-loader-mlp-15-1\" style=\"display:none;position:absolute;inset:0;z-index:9999;background:rgba(10,10,12,0.88);align-items:center;justify-content:center;\">\n<div class=\"mlp-fold-scene\"><div class=\"mlp-fold\"><div class=\"mlp-q mlp-q1\"><\/div><div class=\"mlp-q mlp-q2\"><\/div><div class=\"mlp-q mlp-q4\"><\/div><div class=\"mlp-q mlp-q3\"><\/div><\/div><\/div>\n<\/div>\n<!-- Reload button -->\n<button class=\"mlp-preview-popup-reload-btn\" id=\"mlp-preview-popup-reload-mlp-15-1\" data-instance=\"mlp-15-1\" title=\"Reload Preview\">\n<i class=\"fas fa-sync-alt\"><\/i>\n<\/button>\n<button class=\"mlp-preview-popup-close-btn\" data-instance=\"mlp-15-1\" title=\"Close Preview\">\n<i class=\"fas fa-times\"><\/i>\n<\/button>\n<\/div><!-- \/mlp-preview-popup-topbar -->\n<!-- Preview frame area -->\n<div class=\"mlp-preview-popup-frame-wrap\" id=\"mlp-preview-popup-frame-wrap-mlp-15-1\">\n<div class=\"mlp-preview-popup-device-shell\" id=\"mlp-preview-popup-device-shell-mlp-15-1\">\n<iframe id=\"mlp-preview-popup-frame-mlp-15-1\" class=\"mlp-preview-popup-frame\" sandbox=\"allow-scripts allow-same-origin\"><\/iframe>\n<\/div>\n<\/div>\n<\/div><!-- \/mlp-preview-popup-inner -->\n<\/div><!-- \/mlp-preview-popup-modal -->\n<!-- Analyze Modal - NEW with extremely unique design -->\n<div class=\"mlp-analyze-modal\" id=\"mlp-analyze-modal-mlp-15-1\">\n<div class=\"mlp-modal-content mlp-analyze-content\">\n<!-- Header: VS Code style -->\n<div class=\"mlp-analyze-header\">\n<h3><span class=\"mlp-analyze-header-logo\">\ud83d\udd0d<\/span> <span>Code Analyzer<\/span><\/h3>\n<button class=\"mlp-analyze-close-btn\" id=\"mlp-analyze-close-btn-mlp-15-1\" data-instance=\"mlp-15-1\">\u2715<\/button>\n<\/div>\n<!-- Toolbar: tabs + actions -->\n<div class=\"mlp-analyze-toolbar\">\n<div class=\"mlp-analyze-tabs\">\n<button class=\"mlp-analyze-tab active\" data-analyze-tab=\"html\">\n<i class=\"fab fa-html5\"><\/i> HTML\n<\/button>\n<button class=\"mlp-analyze-tab\" data-analyze-tab=\"css\">\n<i class=\"fab fa-css3-alt\"><\/i> CSS\n<\/button>\n<button class=\"mlp-analyze-tab\" data-analyze-tab=\"js\">\n<i class=\"fab fa-js\"><\/i> JS\n<\/button>\n<\/div>\n<div class=\"mlp-analyze-toolbar-actions\">\n<button class=\"mlp-analyze-action-btn mlp-analyze-run-btn\" id=\"mlp-analyze-run-btn-mlp-15-1\" data-instance=\"mlp-15-1\" data-state=\"ready\">\n<i class=\"fas fa-play\"><\/i> Analyze\n<\/button>\n<button class=\"mlp-analyze-action-btn mlp-analyze-clear-btn\" data-instance=\"mlp-15-1\">\n<i class=\"fas fa-trash\"><\/i> Clear\n<\/button>\n<\/div>\n<\/div>\n<!-- Metrics bar (shown after analysis) -->\n<div class=\"mlp-analyze-metrics\" id=\"mlp-analyze-metrics-mlp-15-1\" style=\"display:none;\">\n<div class=\"mlp-analyze-metric\">\n<span class=\"mlp-analyze-metric-label\">LINES<\/span>\n<span class=\"mlp-analyze-metric-value\" id=\"analyze-loc-mlp-15-1\">0<\/span>\n<\/div>\n<div class=\"mlp-analyze-metric\">\n<span class=\"mlp-analyze-metric-label\">COMPLEXITY<\/span>\n<span class=\"mlp-analyze-metric-value\" id=\"analyze-complexity-mlp-15-1\">0<\/span>\n<\/div>\n<div class=\"mlp-analyze-metric\">\n<span class=\"mlp-analyze-metric-label\">ISSUES<\/span>\n<span class=\"mlp-analyze-metric-value\" id=\"analyze-suggestions-mlp-15-1\">0<\/span>\n<\/div>\n<\/div>\n<!-- Progress bar -->\n<div class=\"mlp-analyze-progress\" id=\"mlp-analyze-progress-mlp-15-1\" style=\"display:none;\">\n<div class=\"mlp-analyze-progress-bar\"><\/div>\n<div class=\"mlp-analyze-progress-text\">Scanning code with AI...<\/div>\n<\/div>\n<!-- Output area -->\n<div class=\"mlp-analyze-output\" id=\"mlp-analyze-content-mlp-15-1\">\n<div class=\"mlp-analyze-welcome\">\n<div class=\"mlp-analyze-welcome-icon\">\ud83d\udd0d<\/div>\n<div class=\"mlp-analyze-welcome-text\">\n<h4>Ready to analyze<\/h4>\n<p>Select a tab and click Analyze to scan your code for issues with AI<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<!-- Create Backup Modal - Step 1: Name Input -->\n<div class=\"mlp-backup-modal\" id=\"mlp-backup-modal-mlp-15-1\">\n<div class=\"mlp-modal-content mlp-backup-modal-content\">\n<div class=\"mlp-modal-header mlp-backup-header\">\n<h3>\n<span class=\"mlp-backup-modal-logo\">\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"display:inline-block;vertical-align:middle;color:#4ec9b0;filter:drop-shadow(0 0 5px rgba(78,201,176,0.7));\"><ellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\"\/><path d=\"M21 12c0 1.66-4 3-9 3s-9-1.34-9-3\"\/><path d=\"M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5\"\/><\/svg>\n<\/span>\n<span class=\"mlp-modal-title\">Create Backup<\/span>\n<\/h3>\n<button class=\"mlp-modal-close-btn mlp-backup-close-btn\" data-instance=\"mlp-15-1\">&times;<\/button>\n<\/div>\n<div class=\"mlp-modal-body mlp-backup-modal-body\">\n<div class=\"mlp-backup-icon-row\">\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"color:#4ec9b0;filter:drop-shadow(0 0 10px rgba(78,201,176,0.5));\"><ellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\"\/><path d=\"M21 12c0 1.66-4 3-9 3s-9-1.34-9-3\"\/><path d=\"M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5\"\/><\/svg>\n<div class=\"mlp-backup-icon-pulse\"><\/div>\n<\/div>\n<div class=\"mlp-backup-form\">\n<div class=\"mlp-form-group\">\n<label for=\"backup-name-mlp-15-1\">\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"display:inline-block;vertical-align:middle;color:#4ec9b0;margin-right:4px;\"><path d=\"M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z\"\/><line x1=\"7\" y1=\"7\" x2=\"7.01\" y2=\"7\"\/><\/svg> Backup Name\n<\/label>\n<input type=\"text\" id=\"backup-name-mlp-15-1\"\nclass=\"mlp-form-control mlp-backup-input\" placeholder=\"Enter a descriptive name...\"\nautocomplete=\"off\">\n<\/div>\n<div class=\"mlp-backup-actions\">\n<button class=\"mlp-action-button mlp-cancel-backup-first-btn\" data-instance=\"mlp-15-1\">\n<i class=\"fas fa-times\"><\/i> Cancel\n<\/button>\n<button class=\"mlp-action-button mlp-continue-backup-btn\" data-instance=\"mlp-15-1\">\n<i class=\"fas fa-arrow-right\"><\/i> Continue\n<\/button>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<!-- Create Backup Modal - Step 2: Warning -->\n<div class=\"mlp-backup-warning-modal\" id=\"mlp-backup-warning-modal-mlp-15-1\">\n<div class=\"mlp-modal-content mlp-backup-warning-content\">\n<div class=\"mlp-modal-header mlp-backup-warning-header\">\n<h3>\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"display:inline-block;vertical-align:middle;color:#d4a72c;filter:drop-shadow(0 0 4px rgba(212,167,44,0.7));\"><path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"\/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"\/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"\/><\/svg>\n<span class=\"mlp-modal-title\">Important Notice<\/span>\n<\/h3>\n<button class=\"mlp-modal-close-btn mlp-backup-warning-close-btn\" data-instance=\"mlp-15-1\">&times;<\/button>\n<\/div>\n<div class=\"mlp-modal-body mlp-backup-modal-body\">\n<div class=\"mlp-backup-warning-content-inner\">\n<div class=\"mlp-backup-warning-icon\">\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"44\" height=\"44\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"color:#d4a72c;filter:drop-shadow(0 0 8px rgba(212,167,44,0.5));\"><path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"\/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"\/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"\/><\/svg>\n<\/div>\n<div class=\"mlp-backup-warning-text\">\n<p class=\"mlp-backup-warning-title\"><strong>Before you create a backup:<\/strong><\/p>\n<ul class=\"mlp-backup-warning-list\">\n<li><i class=\"fas fa-database\"><\/i> Backups are stored in your browser's LocalStorage only<\/li>\n<li><i class=\"fas fa-trash-alt\"><\/i> They will be lost if you clear browser data<\/li>\n<li><i class=\"fas fa-sync-alt\"><\/i> They will be lost if you restart your browser<\/li>\n<li><i class=\"fas fa-laptop\"><\/i> Backups are not synced across devices<\/li>\n<li><i class=\"fas fa-hdd\"><\/i> They are stored locally on this device only<\/li>\n<\/ul>\n<p class=\"mlp-backup-confirm-text\">Do you understand and want to continue?<\/p>\n<\/div>\n<div class=\"mlp-backup-warning-actions\">\n<button class=\"mlp-action-button mlp-cancel-backup-warning-btn\" data-instance=\"mlp-15-1\">\n<i class=\"fas fa-times\"><\/i> Cancel\n<\/button>\n<button class=\"mlp-action-button mlp-confirm-backup-btn\" data-instance=\"mlp-15-1\">\n<i class=\"fas fa-check-circle\"><\/i> I Understand, Create Backup\n<\/button>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<!-- Create Backup Success Modal -->\n<div class=\"mlp-backup-success-modal\" id=\"mlp-backup-success-modal-mlp-15-1\">\n<div class=\"mlp-modal-content mlp-backup-success-content\">\n<div class=\"mlp-modal-header mlp-backup-success-header\">\n<h3>\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"display:inline-block;vertical-align:middle;color:#4ec9b0;filter:drop-shadow(0 0 4px rgba(78,201,176,0.7));\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n<span class=\"mlp-modal-title\">Backup Created<\/span>\n<\/h3>\n<button class=\"mlp-modal-close-btn mlp-backup-success-close-btn\" data-instance=\"mlp-15-1\">&times;<\/button>\n<\/div>\n<div class=\"mlp-modal-body mlp-backup-modal-body\">\n<div class=\"mlp-backup-success-content-inner\">\n<div class=\"mlp-backup-success-icon\">\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"52\" height=\"52\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"color:#4ec9b0;filter:drop-shadow(0 0 12px rgba(78,201,176,0.6));\"><ellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\"\/><path d=\"M21 12c0 1.66-4 3-9 3s-9-1.34-9-3\"\/><path d=\"M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5\"\/><\/svg>\n<div class=\"mlp-backup-success-pulse\"><\/div>\n<\/div>\n<div class=\"mlp-backup-success-text\">\n<p class=\"mlp-backup-success-message\">Backup created successfully!<\/p>\n<div class=\"mlp-backup-success-id-container\">\n<span class=\"mlp-backup-success-id-label\">ID:<\/span>\n<span class=\"mlp-backup-success-id\" id=\"backup-success-id-mlp-15-1\"><\/span>\n<\/div>\n<p class=\"mlp-backup-success-note\">Access this backup anytime from the Backups list.<\/p>\n<\/div>\n<div class=\"mlp-backup-success-actions\">\n<button class=\"mlp-action-button mlp-thanks-btn\" data-instance=\"mlp-15-1\">\n<i class=\"fas fa-check\"><\/i> Got it!\n<\/button>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<!-- Backups List Modal - Console-style dark theme -->\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nTEMPLATES MODAL\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"mlp-templates-modal\" id=\"mlp-templates-modal-mlp-15-1\">\n<div class=\"mlp-modal-content mlp-templates-modal-content\">\n<!-- Header -->\n<div class=\"mlp-modal-header mlp-templates-header\">\n<h3>\n<span class=\"mlp-templates-logo\">\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"display:inline-block;vertical-align:middle;color:#a78bfa;filter:drop-shadow(0 0 5px rgba(167,139,250,0.7));\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"\/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"\/><\/svg>\n<\/span>\n<span class=\"mlp-modal-title\" id=\"mlp-tpl-modal-title-mlp-15-1\">Choose a Category<\/span>\n<span class=\"mlp-templates-count-badge\" id=\"mlp-templates-count-mlp-15-1\" style=\"display:none;\"><\/span>\n<\/h3>\n<div style=\"display:flex;align-items:center;gap:8px;\">\n<!-- Back button (step 2 only) -->\n<button class=\"mlp-tpl-back-btn\" id=\"mlp-tpl-back-btn-mlp-15-1\" data-instance=\"mlp-15-1\" style=\"display:none;\">\n<i class=\"fas fa-arrow-left\"><\/i> Back\n<\/button>\n<button class=\"mlp-modal-close-btn mlp-templates-close-btn\" data-instance=\"mlp-15-1\">&times;<\/button>\n<\/div>\n<\/div>\n<!-- STEP 1: Category Picker -->\n<div class=\"mlp-tpl-step\" id=\"mlp-tpl-step1-mlp-15-1\">\n<div class=\"mlp-tpl-step1-grid\" id=\"mlp-tpl-catgrid-mlp-15-1\">\n<!-- Populated by JS -->\n<\/div>\n<\/div>\n<!-- STEP 2: Template Grid -->\n<div class=\"mlp-tpl-step\" id=\"mlp-tpl-step2-mlp-15-1\" style=\"display:none;flex-direction:column;flex:1;overflow:hidden;\">\n<!-- Search bar -->\n<div class=\"mlp-templates-toolbar\">\n<div class=\"mlp-templates-search-wrap\">\n<i class=\"fas fa-search mlp-templates-search-icon\"><\/i>\n<input type=\"text\"\nid=\"mlp-templates-search-mlp-15-1\"\nclass=\"mlp-templates-search-input\"\nplaceholder=\"Search templates...\" \/>\n<\/div>\n<\/div>\n<!-- Grid -->\n<div class=\"mlp-templates-grid\" id=\"mlp-templates-grid-mlp-15-1\">\n<!-- Populated by JS -->\n<\/div>\n<!-- Empty state -->\n<div class=\"mlp-templates-empty\" id=\"mlp-templates-empty-mlp-15-1\" style=\"display:none;\">\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"color:#a78bfa;opacity:0.4;margin-bottom:15px;\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"\/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"\/><\/svg>\n<p>No templates match your search<\/p>\n<\/div>\n<\/div>\n<!-- STEP 3: Confirmation Preview -->\n<div class=\"mlp-tpl-step mlp-tpl-step3\" id=\"mlp-tpl-step3-mlp-15-1\" style=\"display:none;flex-direction:column;flex:1;overflow:hidden;\">\n<div class=\"mlp-tpl-confirm-wrap\">\n<!-- Preview pane (SVG thumbnail) -->\n<div class=\"mlp-tpl-confirm-preview-box\">\n<div class=\"mlp-tpl-confirm-preview-label\"><i class=\"fas fa-eye\"><\/i> Preview<\/div>\n<div class=\"mlp-tpl-confirm-frame-wrap\" id=\"mlp-tpl-confirm-frame-wrap-mlp-15-1\">\n<!-- SVG thumbnail injected by JS -->\n<\/div>\n<\/div>\n<!-- Info + action pane -->\n<div class=\"mlp-tpl-confirm-info\">\n<div class=\"mlp-tpl-confirm-cat\" id=\"mlp-tpl-confirm-cat-mlp-15-1\"><\/div>\n<div class=\"mlp-tpl-confirm-name\" id=\"mlp-tpl-confirm-name-mlp-15-1\"><\/div>\n<div class=\"mlp-tpl-confirm-tags\" id=\"mlp-tpl-confirm-tags-mlp-15-1\"><\/div>\n<p class=\"mlp-tpl-confirm-desc\">This will open the template in a <strong>new tab<\/strong> in the editor. Your existing tabs will not be changed.<\/p>\n<div class=\"mlp-tpl-confirm-actions\">\n<button class=\"mlp-tpl-confirm-cancel-btn\" data-instance=\"mlp-15-1\">\n<i class=\"fas fa-arrow-left\"><\/i> Back\n<\/button>\n<button class=\"mlp-tpl-confirm-apply-btn\" id=\"mlp-tpl-confirm-apply-mlp-15-1\" data-instance=\"mlp-15-1\" data-id=\"\">\n<i class=\"fas fa-check\"><\/i> Apply Template\n<\/button>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<!-- TEMPLATE ADD\/EDIT FORM MODAL (admin only) -->\n<!-- END TEMPLATES MODAL -->\n<div class=\"mlp-backups-list-modal\" id=\"mlp-backups-list-modal-mlp-15-1\">\n<div class=\"mlp-modal-content mlp-backups-list-content\">\n<div class=\"mlp-modal-header mlp-backups-list-header\">\n<h3>\n<span class=\"mlp-backups-logo\">\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"display:inline-block;vertical-align:middle;color:#4ec9b0;filter:drop-shadow(0 0 5px rgba(78,201,176,0.7));\"><ellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\"\/><path d=\"M21 12c0 1.66-4 3-9 3s-9-1.34-9-3\"\/><path d=\"M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5\"\/><\/svg>\n<\/span>\n<span class=\"mlp-modal-title\">Backup Manager<\/span>\n<\/h3>\n<button class=\"mlp-modal-close-btn mlp-backups-list-close-btn\" data-instance=\"mlp-15-1\">&times;<\/button>\n<\/div>\n<div class=\"mlp-modal-body mlp-backups-modal-body\">\n<div class=\"mlp-backups-toolbar\">\n<div class=\"mlp-backups-toolbar-left\">\n<label class=\"mlp-backup-select-all-label\">\n<input type=\"checkbox\" class=\"mlp-backup-select-all\" id=\"mlp-backup-select-all-mlp-15-1\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-backup-checkbox-custom\"><\/span>\n<span class=\"mlp-select-all-text\">Select All<\/span>\n<\/label>\n<span class=\"mlp-backups-count\" id=\"mlp-backups-count-mlp-15-1\"><\/span>\n<\/div>\n<div class=\"mlp-backups-toolbar-right\">\n<button class=\"mlp-backup-delete-selected-btn\" id=\"mlp-backup-delete-selected-mlp-15-1\" data-instance=\"mlp-15-1\" style=\"display:none;\">\n<i class=\"fas fa-trash\"><\/i> Delete Selected\n<\/button>\n<\/div>\n<\/div>\n<div class=\"mlp-backups-search\">\n<i class=\"fas fa-search\"><\/i>\n<input type=\"text\" id=\"backups-search-mlp-15-1\"\nclass=\"mlp-form-control\" placeholder=\"Search backups...\">\n<\/div>\n<div class=\"mlp-backups-list\" id=\"mlp-backups-list-mlp-15-1\">\n<!-- Backups will be populated here -->\n<\/div>\n<div class=\"mlp-backups-empty\" id=\"mlp-backups-empty-mlp-15-1\" style=\"display: none;\">\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"color:#4ec9b0;opacity:0.4;margin-bottom:15px;\"><ellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\"\/><path d=\"M21 12c0 1.66-4 3-9 3s-9-1.34-9-3\"\/><path d=\"M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5\"\/><\/svg>\n<p>No backups found<\/p>\n<p class=\"mlp-backups-empty-sub\">Click \"Create Backup\" to save your work<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<!-- INSERT MEDIA DISCLAIMER POPUP (Step 1) -->\n<div class=\"mlp-media-disclaimer\" id=\"mlp-media-disclaimer-mlp-15-1\">\n<div class=\"mlp-media-disclaimer-box\">\n<div class=\"mlp-media-disclaimer-header\">\n<h3>\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#f59e0b\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"display:inline-block;vertical-align:middle;margin-right:7px;\"><path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"\/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"\/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"\/><\/svg>\nThird-Party Service Notice\n<\/h3>\n<button class=\"mlp-modal-close-btn mlp-media-modal-close-btn\" data-instance=\"mlp-15-1\">&times;<\/button>\n<\/div>\n<div class=\"mlp-media-disclaimer-body\">\n<p class=\"mlp-media-disc-intro\">The <strong>Insert Media<\/strong> feature uploads files directly from your browser to a free third-party hosting service. We have no affiliation with these services.<\/p>\n<div class=\"mlp-media-disc-warning\">\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#d16969\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex-shrink:0;margin-top:2px;\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg>\n<span>We are <strong>not responsible<\/strong> for any data loss, downtime, or service changes from these providers. Files may be deleted or become unavailable at any time without notice. Do not use these services for critical or irreplaceable files.<\/span>\n<\/div>\n<label class=\"mlp-media-disc-checkbox-label\">\n<input type=\"checkbox\" class=\"mlp-media-disc-checkbox\" id=\"mlp-media-disc-checkbox-mlp-15-1\" data-instance=\"mlp-15-1\" \/>\n<span class=\"mlp-media-disc-checkbox-custom\"><\/span>\n<span>I understand and I accept this<\/span>\n<\/label>\n<\/div>\n<div class=\"mlp-media-disclaimer-footer\">\n<button class=\"mlp-media-modal-close-btn mlp-media-disc-cancel\" data-instance=\"mlp-15-1\">Cancel<\/button>\n<button class=\"mlp-media-disc-continue\" id=\"mlp-media-disc-continue-mlp-15-1\" data-instance=\"mlp-15-1\" disabled>Continue &rarr;<\/button>\n<\/div>\n<\/div>\n<\/div>\n<!-- END DISCLAIMER -->\n<!-- INSERT MEDIA SERVICE PICKER (Step 2) -->\n<div class=\"mlp-media-picker\" id=\"mlp-media-picker-mlp-15-1\">\n<div class=\"mlp-media-disclaimer-box\">\n<div class=\"mlp-media-disclaimer-header\">\n<h3>\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#f59e0b\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"display:inline-block;vertical-align:middle;margin-right:7px;\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/><polyline points=\"21 15 16 10 5 21\"\/><\/svg>\nChoose a Service\n<\/h3>\n<button class=\"mlp-modal-close-btn mlp-media-modal-close-btn\" data-instance=\"mlp-15-1\">&times;<\/button>\n<\/div>\n<div class=\"mlp-media-disclaimer-body\">\n<p class=\"mlp-media-disc-intro\">Select which service to upload to. Click a card to select it \u2014 details will appear below.<\/p>\n<!-- Service cards -->\n<div class=\"mlp-media-picker-cards\" id=\"mlp-media-picker-cards-mlp-15-1\">\n<div class=\"mlp-media-picker-card\" data-service=\"catbox\" data-instance=\"mlp-15-1\">\n<div class=\"mlp-media-picker-card-top\">\n<span class=\"mlp-media-disc-badge mlp-media-disc-badge-amber\">catbox.moe<\/span>\n<span class=\"mlp-media-picker-card-name\">catbox.moe<\/span>\n<\/div>\n<p class=\"mlp-media-picker-card-summary\">Any file \u00b7 Max 1 GB<\/p>\n<\/div>\n<\/div>\n<!-- Details dropdown (shown when a card is selected) -->\n<div class=\"mlp-media-picker-details\" id=\"mlp-media-picker-details-mlp-15-1\" style=\"display:none;\">\n<div class=\"mlp-media-picker-details-inner\" id=\"mlp-media-picker-details-inner-mlp-15-1\"><\/div>\n<\/div>\n<\/div>\n<div class=\"mlp-media-disclaimer-footer\">\n<button class=\"mlp-media-modal-close-btn mlp-media-disc-cancel\" data-instance=\"mlp-15-1\">Cancel<\/button>\n<button class=\"mlp-media-picker-continue\" id=\"mlp-media-picker-continue-mlp-15-1\" data-instance=\"mlp-15-1\" disabled>Continue &rarr;<\/button>\n<\/div>\n<\/div>\n<\/div>\n<!-- END SERVICE PICKER -->\n<!-- INSERT MEDIA MODAL (Step 3) -->\n<div class=\"mlp-media-modal\" id=\"mlp-media-modal-mlp-15-1\">\n<div class=\"mlp-modal-content mlp-media-modal-content\">\n<div class=\"mlp-modal-header mlp-media-modal-header\">\n<h3>\n<span class=\"mlp-media-modal-logo\">\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"display:inline-block;vertical-align:middle;color:#f59e0b;filter:drop-shadow(0 0 5px rgba(245,158,11,0.7));\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/><polyline points=\"21 15 16 10 5 21\"\/><\/svg>\n<\/span>\n<span class=\"mlp-modal-title\">Insert Media<\/span>\n<span class=\"mlp-media-active-badge\" id=\"mlp-media-active-badge-mlp-15-1\"><\/span>\n<\/h3>\n<div style=\"display:flex;align-items:center;gap:8px;\">\n<button class=\"mlp-media-switch-service-btn\" data-instance=\"mlp-15-1\" title=\"Switch service\" style=\"background:none;border:1px solid #333;border-radius:4px;color:#666;font-size:0.75rem;padding:3px 9px;cursor:pointer;transition:all 0.2s;\">&#8644; Switch<\/button>\n<button class=\"mlp-modal-close-btn mlp-media-modal-close-btn\" data-instance=\"mlp-15-1\">&times;<\/button>\n<\/div>\n<\/div>\n<div class=\"mlp-media-warning-bar\" id=\"mlp-media-info-bar-mlp-15-1\">\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#f59e0b\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex-shrink:0;margin-top:1px;\"><path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"\/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"\/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"\/><\/svg>\n<span id=\"mlp-media-info-text-mlp-15-1\"><\/span>\n<\/div>\n<div class=\"mlp-media-modal-body\">\n<input type=\"file\" id=\"mlp-media-file-input-mlp-15-1\" class=\"mlp-media-file-input\" data-instance=\"mlp-15-1\" style=\"display:none;position:absolute;left:-9999px;\" \/>\n<div class=\"mlp-media-dropzone\" id=\"mlp-media-dropzone-mlp-15-1\">\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"36\" height=\"36\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"color:#f59e0b;opacity:0.6;margin-bottom:10px;\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/><polyline points=\"21 15 16 10 5 21\"\/><\/svg>\n<p class=\"mlp-media-drop-label\">Drop a file here or <span class=\"mlp-media-browse-link\">browse<\/span><\/p>\n<p class=\"mlp-media-drop-sub\" id=\"mlp-media-drop-sub-mlp-15-1\"><\/p>\n<\/div>\n<div class=\"mlp-media-options-row\" id=\"mlp-media-expiry-row-mlp-15-1\" style=\"display:none;\">\n<label class=\"mlp-media-option-label\">\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#888\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>\nExpires after:\n<\/label>\n<select class=\"mlp-media-expiry-select\" id=\"mlp-media-expiry-mlp-15-1\">\n<option value=\"1h\">1 hour<\/option>\n<option value=\"12h\">12 hours<\/option>\n<option value=\"24h\" selected>24 hours<\/option>\n<option value=\"72h\">3 days<\/option>\n<option value=\"1w\">1 week<\/option>\n<\/select>\n<\/div>\n<div class=\"mlp-media-progress-wrap\" id=\"mlp-media-progress-wrap-mlp-15-1\" style=\"display:none;\">\n<div class=\"mlp-media-progress-bar-track\">\n<div class=\"mlp-media-progress-bar-fill\" id=\"mlp-media-progress-fill-mlp-15-1\"><\/div>\n<\/div>\n<span class=\"mlp-media-progress-label\" id=\"mlp-media-progress-label-mlp-15-1\">Uploading...<\/span>\n<\/div>\n<div class=\"mlp-media-result-wrap\" id=\"mlp-media-result-wrap-mlp-15-1\" style=\"display:none;\">\n<div class=\"mlp-media-result-label\"><i class=\"fas fa-check-circle\" style=\"color:#4ec9b0;margin-right:5px;\"><\/i>Ready \u2014 URL copied to clipboard<\/div>\n<div class=\"mlp-media-result-row\">\n<input type=\"text\" class=\"mlp-media-result-url\" id=\"mlp-media-result-url-mlp-15-1\" readonly \/>\n<button class=\"mlp-media-copy-btn\" data-instance=\"mlp-15-1\" title=\"Copy URL\"><i class=\"fas fa-copy\"><\/i><\/button>\n<button class=\"mlp-media-insert-btn\" data-instance=\"mlp-15-1\" title=\"Insert into editor\"><i class=\"fas fa-code\"><\/i> Insert<\/button>\n<\/div>\n<p class=\"mlp-media-result-note\">Click Insert to place the URL at your cursor, or copy it manually.<\/p>\n<\/div>\n<div class=\"mlp-media-error-wrap\" id=\"mlp-media-error-wrap-mlp-15-1\" style=\"display:none;\">\n<i class=\"fas fa-exclamation-triangle\" style=\"color:#d16969;margin-right:6px;\"><\/i>\n<span id=\"mlp-media-error-msg-mlp-15-1\"><\/span>\n<\/div>\n<\/div>\n<div class=\"mlp-media-modal-footer\">\n<span class=\"mlp-media-footer-note\">\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#555\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg>\nFiles go directly to the selected service from your browser.\n<\/span>\n<button class=\"mlp-media-modal-close-footer mlp-media-modal-close-btn\" data-instance=\"mlp-15-1\">Close<\/button>\n<\/div>\n<\/div>\n<\/div>\n<!-- END INSERT MEDIA MODAL -->\n<!-- MEDIA LIBRARY MODAL -->\n<div class=\"mlp-media-library-modal\" id=\"mlp-media-library-modal-mlp-15-1\">\n<div class=\"mlp-modal-content mlp-media-lib-content\">\n<div class=\"mlp-modal-header mlp-media-lib-header\">\n<h3>\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#a78bfa\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"display:inline-block;vertical-align:middle;filter:drop-shadow(0 0 4px rgba(167,139,250,0.7));margin-right:8px;\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"\/><\/svg>\n<span class=\"mlp-modal-title\">Media Library<\/span>\n<span class=\"mlp-media-lib-count\" id=\"mlp-media-lib-count-mlp-15-1\" style=\"font-size:0.72rem;color:#555;font-weight:400;margin-left:6px;\"><\/span>\n<\/h3>\n<button class=\"mlp-modal-close-btn mlp-media-lib-close\" data-instance=\"mlp-15-1\">&times;<\/button>\n<\/div>\n<div class=\"mlp-media-lib-toolbar\">\n<input type=\"text\" class=\"mlp-media-lib-search\" id=\"mlp-media-lib-search-mlp-15-1\" placeholder=\"Search by name or URL...\" data-instance=\"mlp-15-1\" \/>\n<button class=\"mlp-media-lib-clear-all\" data-instance=\"mlp-15-1\"><i class=\"fas fa-trash\"><\/i> Clear All<\/button>\n<\/div>\n<div class=\"mlp-media-lib-grid\" id=\"mlp-media-lib-grid-mlp-15-1\"><\/div>\n<div class=\"mlp-media-lib-empty\" id=\"mlp-media-lib-empty-mlp-15-1\" style=\"display:none;\">\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"color:#a78bfa;opacity:0.3;margin-bottom:12px;\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"\/><\/svg>\n<p>No media saved yet.<\/p>\n<p style=\"font-size:0.78rem;color:#444;\">Uploaded files will appear here.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<!-- MEDIA HISTORY MODAL -->\n<div class=\"mlp-media-history-modal\" id=\"mlp-media-history-modal-mlp-15-1\">\n<div class=\"mlp-modal-content mlp-media-hist-content\">\n<div class=\"mlp-modal-header mlp-media-hist-header\">\n<h3>\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#4ec9b0\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"display:inline-block;vertical-align:middle;filter:drop-shadow(0 0 4px rgba(78,201,176,0.7));margin-right:8px;\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>\n<span class=\"mlp-modal-title\">Upload History<\/span>\n<\/h3>\n<button class=\"mlp-modal-close-btn mlp-media-hist-close\" data-instance=\"mlp-15-1\">&times;<\/button>\n<\/div>\n<div class=\"mlp-media-hist-toolbar\">\n<span class=\"mlp-media-hist-note\"><i class=\"fas fa-info-circle\" style=\"color:#4ec9b0;margin-right:5px;\"><\/i>Showing your last 50 uploads this session.<\/span>\n<button class=\"mlp-media-hist-clear\" data-instance=\"mlp-15-1\"><i class=\"fas fa-trash\"><\/i> Clear<\/button>\n<\/div>\n<div class=\"mlp-media-hist-list\" id=\"mlp-media-hist-list-mlp-15-1\"><\/div>\n<div class=\"mlp-media-hist-empty\" id=\"mlp-media-hist-empty-mlp-15-1\" style=\"display:none;\">\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"color:#4ec9b0;opacity:0.3;margin-bottom:12px;\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>\n<p>No uploads yet this session.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<!-- STORAGE USAGE MODAL -->\n<div class=\"mlp-storage-modal\" id=\"mlp-storage-modal-mlp-15-1\">\n<div class=\"mlp-modal-content mlp-storage-content\">\n<div class=\"mlp-modal-header mlp-storage-header\">\n<h3>\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#4dccff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"display:inline-block;vertical-align:middle;filter:drop-shadow(0 0 4px rgba(77,204,255,0.7));margin-right:8px;\"><ellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\"\/><path d=\"M21 12c0 1.66-4 3-9 3s-9-1.34-9-3\"\/><path d=\"M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5\"\/><\/svg>\n<span class=\"mlp-modal-title\">Storage Usage<\/span>\n<\/h3>\n<button class=\"mlp-modal-close-btn mlp-storage-close\" data-instance=\"mlp-15-1\">&times;<\/button>\n<\/div>\n<div class=\"mlp-storage-body\" id=\"mlp-storage-body-mlp-15-1\">\n<div class=\"mlp-storage-bar-wrap\">\n<div class=\"mlp-storage-bar-track\">\n<div class=\"mlp-storage-bar-fill\" id=\"mlp-storage-bar-fill-mlp-15-1\"><\/div>\n<\/div>\n<div class=\"mlp-storage-bar-labels\">\n<span id=\"mlp-storage-used-mlp-15-1\">\u2014 KB used<\/span>\n<span style=\"color:#444;\">\/ 5 MB total<\/span>\n<\/div>\n<\/div>\n<div class=\"mlp-storage-rows\" id=\"mlp-storage-rows-mlp-15-1\"><\/div>\n<div class=\"mlp-storage-note\">\n<i class=\"fas fa-info-circle\" style=\"color:#4dccff;margin-right:5px;\"><\/i>\nlocalStorage is browser-only. Clearing browser data will erase all saved tabs, backups and media library.\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<!-- STORAGE WARNING MODAL -->\n<div class=\"mlp-storage-warning-modal\" id=\"mlp-storage-warning-modal-mlp-15-1\">\n<div class=\"mlp-modal-content mlp-storage-warn-content\">\n<div class=\"mlp-modal-header mlp-storage-warn-header\">\n<h3>\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#d16969\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"display:inline-block;vertical-align:middle;margin-right:8px;\"><path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"\/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"\/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"\/><\/svg>\n<span class=\"mlp-modal-title\" style=\"color:#d16969;\">Storage Almost Full<\/span>\n<\/h3>\n<button class=\"mlp-modal-close-btn mlp-storage-warn-close\" data-instance=\"mlp-15-1\">&times;<\/button>\n<\/div>\n<div class=\"mlp-storage-warn-body\">\n<p class=\"mlp-storage-warn-intro\">Your browser's <strong>localStorage<\/strong> is almost full.<\/p>\n<div class=\"mlp-storage-bar-wrap\" style=\"margin-bottom:14px;\">\n<div class=\"mlp-storage-bar-track\">\n<div class=\"mlp-storage-bar-fill mlp-storage-warn-fill\" id=\"mlp-storage-warn-fill-mlp-15-1\"><\/div>\n<\/div>\n<div class=\"mlp-storage-bar-labels\">\n<span id=\"mlp-storage-warn-used-mlp-15-1\"><\/span>\n<span style=\"color:#444;\">\/ 5 MB total<\/span>\n<\/div>\n<\/div>\n<div class=\"mlp-media-disc-warning\">\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#d16969\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex-shrink:0;margin-top:2px;\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg>\n<span>localStorage is limited to <strong>~5 MB<\/strong> per browser. This is shared across all saved tabs, backups, media library, and other plugin data. Once full, new saves will fail silently.<\/span>\n<\/div>\n<p style=\"color:#666;font-size:0.8rem;margin:10px 0 4px;\">What uses storage:<\/p>\n<ul style=\"color:#777;font-size:0.78rem;margin:0 0 14px;padding-left:18px;line-height:1.8;\">\n<li>Saved tabs (code content)<\/li>\n<li>Backups<\/li>\n<li>Media library (URLs only)<\/li>\n<li>AI cooldown timer<\/li>\n<\/ul>\n<p style=\"color:#666;font-size:0.8rem;margin:0 0 4px;\">To free space:<\/p>\n<ul style=\"color:#777;font-size:0.78rem;margin:0;padding-left:18px;line-height:1.8;\">\n<li>Delete old backups you no longer need<\/li>\n<li>Close saved tabs you're done with<\/li>\n<li>Clear media library<\/li>\n<\/ul>\n<\/div>\n<div class=\"mlp-media-disclaimer-footer\">\n<button class=\"mlp-storage-warn-view-btn\" data-instance=\"mlp-15-1\"><i class=\"fas fa-database\"><\/i> View Storage<\/button>\n<button class=\"mlp-modal-close-btn mlp-storage-warn-close\" data-instance=\"mlp-15-1\">Dismiss<\/button>\n<\/div>\n<\/div>\n<\/div>\n<!-- Save Warning Modal - 3-Step Wizard -->\n<div class=\"mlp-save-warning-modal\" id=\"mlp-save-warning-modal-mlp-15-1\">\n<div class=\"mlp-modal-content mlp-save-warning-content\" style=\"max-width:500px;width:94%;border-radius:14px!important;overflow:hidden;\">\n<!-- Progress bar header -->\n<div style=\"background:rgba(0,0,0,0.3);padding:18px 20px 0;\">\n<div style=\"display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;\">\n<span style=\"color:rgba(255,255,255,0.7);font-size:0.78rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;\">Save Tab<\/span>\n<button class=\"mlp-modal-close-btn mlp-save-warning-close-btn\" data-instance=\"mlp-15-1\" style=\"background:rgba(255,255,255,0.1);border:none;color:white;width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:0.9rem;display:flex;align-items:center;justify-content:center;\"><i class=\"fas fa-times\"><\/i><\/button>\n<\/div>\n<!-- Step indicators -->\n<div style=\"display:flex;align-items:center;gap:0;margin-bottom:0;\" id=\"mlp-wizard-steps-mlp-15-1\">\n<div class=\"mlp-wiz-step mlp-wiz-step-active\" data-step=\"1\" style=\"flex:1;text-align:center;padding-bottom:12px;border-bottom:3px solid #fff;transition:all 0.3s;\">\n<div style=\"font-size:1.3rem;margin-bottom:3px;\">\ud83d\udce6<\/div>\n<div style=\"font-size:0.68rem;font-weight:700;color:#fff;letter-spacing:0.04em;\">BACKUP<\/div>\n<\/div>\n<div class=\"mlp-wiz-step\" data-step=\"2\" style=\"flex:1;text-align:center;padding-bottom:12px;border-bottom:3px solid rgba(255,255,255,0.25);transition:all 0.3s;\">\n<div style=\"font-size:1.3rem;margin-bottom:3px;opacity:0.45;\">\ud83d\udccb<\/div>\n<div style=\"font-size:0.68rem;font-weight:700;color:rgba(255,255,255,0.45);letter-spacing:0.04em;\">TERMS<\/div>\n<\/div>\n<div class=\"mlp-wiz-step\" data-step=\"3\" style=\"flex:1;text-align:center;padding-bottom:12px;border-bottom:3px solid rgba(255,255,255,0.25);transition:all 0.3s;\">\n<div style=\"font-size:1.3rem;margin-bottom:3px;opacity:0.45;\">\ud83d\udcbe<\/div>\n<div style=\"font-size:0.68rem;font-weight:700;color:rgba(255,255,255,0.45);letter-spacing:0.04em;\">SAVE<\/div>\n<\/div>\n<\/div>\n<\/div>\n<!-- Step 1: Backup -->\n<div class=\"mlp-wiz-panel\" id=\"mlp-wiz-panel-1-mlp-15-1\" style=\"padding:22px 22px 18px;\">\n<div style=\"text-align:center;margin-bottom:16px;\">\n<div style=\"font-size:2.8rem;margin-bottom:8px;\">\ud83d\udce6<\/div>\n<h3 style=\"margin:0 0 6px;font-size:1.05rem;color:#fff;\">Back up your code<\/h3>\n<p style=\"margin:0;font-size:0.83rem;color:rgba(255,255,255,0.75);line-height:1.5;\">Browser storage can vanish \u2014 clear cache, different device, server reset. Download a ZIP now so your work is safe no matter what.<\/p>\n<\/div>\n<button class=\"mlp-action-button mlp-export-zip-btn\" id=\"mlp-export-zip-btn-mlp-15-1\" data-instance=\"mlp-15-1\" style=\"width:100%;background:rgba(255,255,255,0.18)!important;border:2px solid rgba(255,255,255,0.55)!important;font-size:0.95rem;padding:13px!important;border-radius:9px!important;margin-bottom:10px;\">\n<i class=\"fas fa-file-archive\"><\/i> \u2b07\ufe0f Export ZIP (HTML + CSS + JS)\n<\/button>\n<\/div>\n<!-- Step 2: Terms -->\n<div class=\"mlp-wiz-panel\" id=\"mlp-wiz-panel-2-mlp-15-1\" style=\"padding:22px 22px 18px;display:none;\">\n<div style=\"text-align:center;margin-bottom:16px;\">\n<div style=\"font-size:2.8rem;margin-bottom:8px;\">\ud83d\udccb<\/div>\n<h3 style=\"margin:0 0 6px;font-size:1.05rem;color:#fff;\">Understand the risks<\/h3>\n<\/div>\n<div style=\"background:rgba(0,0,0,0.25);border-radius:10px;padding:14px 16px;margin-bottom:16px;\">\n<ul style=\"margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;\">\n<li style=\"display:flex;align-items:flex-start;gap:10px;font-size:0.82rem;color:rgba(255,255,255,0.85);line-height:1.45;\"><span style=\"flex-shrink:0;margin-top:1px;\">\ud83d\uddd1\ufe0f<\/span><span>Clearing browser data or cache <strong>permanently deletes<\/strong> all saved tabs<\/span><\/li>\n<li style=\"display:flex;align-items:flex-start;gap:10px;font-size:0.82rem;color:rgba(255,255,255,0.85);line-height:1.45;\"><span style=\"flex-shrink:0;margin-top:1px;\">\ud83d\udcf1<\/span><span>Saved tabs are <strong>device &amp; browser specific<\/strong> \u2014 not synced anywhere<\/span><\/li>\n<li style=\"display:flex;align-items:flex-start;gap:10px;font-size:0.82rem;color:rgba(255,255,255,0.85);line-height:1.45;\"><span style=\"flex-shrink:0;margin-top:1px;\">\ud83c\udf10<\/span><span>If the site goes down, <strong>your data goes with it<\/strong> unless you exported<\/span><\/li>\n<li style=\"display:flex;align-items:flex-start;gap:10px;font-size:0.82rem;color:rgba(255,255,255,0.85);line-height:1.45;\"><span style=\"flex-shrink:0;margin-top:1px;\">\u26a0\ufe0f<\/span><span>We provide <strong>no data retention guarantee<\/strong> during beta<\/span><\/li>\n<\/ul>\n<\/div>\n<label style=\"display:flex;align-items:center;gap:10px;cursor:pointer;padding:4px 0;margin-bottom:14px;\">\n<input type=\"checkbox\" id=\"mlp-terms-check-mlp-15-1\" style=\"width:17px;height:17px;accent-color:#fff;cursor:pointer;\">\n<span style=\"font-size:0.83rem;color:rgba(255,255,255,0.9);\">I understand my data can be lost at any time<\/span>\n<\/label>\n<button class=\"mlp-wiz-terms-next\" data-instance=\"mlp-15-1\" disabled style=\"width:100%;background:rgba(255,255,255,0.15)!important;border:2px solid rgba(255,255,255,0.3)!important;font-size:0.92rem;padding:12px!important;border-radius:9px!important;cursor:not-allowed;opacity:0.5;transition:all 0.2s;\">\nContinue \u2192\n<\/button>\n<\/div>\n<!-- Step 3: Save -->\n<div class=\"mlp-wiz-panel\" id=\"mlp-wiz-panel-3-mlp-15-1\" style=\"padding:22px 22px 18px;display:none;\">\n<div style=\"text-align:center;margin-bottom:20px;\">\n<div style=\"font-size:2.8rem;margin-bottom:8px;\">\ud83d\udcbe<\/div>\n<h3 style=\"margin:0 0 6px;font-size:1.05rem;color:#fff;\">Save to browser<\/h3>\n<p style=\"margin:0;font-size:0.83rem;color:rgba(255,255,255,0.75);line-height:1.5;\">Your tab will be saved in this browser's LocalStorage and reload automatically next visit.<\/p>\n<\/div>\n<div style=\"display:flex;gap:10px;\">\n<button class=\"mlp-action-button mlp-save-cancel-btn\" data-instance=\"mlp-15-1\" style=\"flex:1;background:rgba(255,255,255,0.12)!important;border:1px solid rgba(255,255,255,0.25)!important;\">\n<i class=\"fas fa-times\"><\/i> Cancel\n<\/button>\n<button class=\"mlp-action-button mlp-save-confirm-btn\" id=\"mlp-save-confirm-btn-mlp-15-1\" data-instance=\"mlp-15-1\" style=\"flex:2;background:rgba(255,255,255,0.9)!important;color:#2196F3!important;font-weight:700;font-size:0.95rem;\">\n<i class=\"fas fa-check\"><\/i> Save Now\n<\/button>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<!-- Save Success Modal - New -->\n<div class=\"mlp-save-success-modal\" id=\"mlp-save-success-modal-mlp-15-1\">\n<div class=\"mlp-modal-content mlp-save-success-content\">\n<div class=\"mlp-modal-header mlp-save-success-header\">\n<h3><i class=\"fas fa-save\"><\/i> <span class=\"mlp-modal-title\">Success<\/span><\/h3>\n<button class=\"mlp-modal-close-btn mlp-save-success-close-btn\" data-instance=\"mlp-15-1\">\n<i class=\"fas fa-times\"><\/i>\n<\/button>\n<\/div>\n<div class=\"mlp-modal-body\">\n<div class=\"mlp-save-success-content-inner\">\n<div class=\"mlp-save-cloud-icon\">\n<i class=\"fas fa-save\"><\/i>\n<\/div>\n<div class=\"mlp-save-success-text\">\n<p class=\"mlp-save-success-message\">Tab saved successfully!<\/p>\n<p class=\"mlp-save-success-info\">This tab will now appear every time you visit this site.<\/p>\n<p class=\"mlp-save-success-note\"><small>Saved tabs are marked with a \ud83d\udcbe icon.<\/small><\/p>\n<\/div>\n<div class=\"mlp-save-success-actions\">\n<button class=\"mlp-action-button mlp-save-thanks-btn\"\ndata-instance=\"mlp-15-1\">\n<i class=\"fas fa-smile\"><\/i> Thanks!\n<\/button>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<!-- Close Tab Warning Modal - Updated with clearer message -->\n<div class=\"mlp-close-tab-warning-modal\" id=\"mlp-close-tab-warning-modal-mlp-15-1\">\n<div class=\"mlp-modal-content mlp-close-tab-warning-content\">\n<div class=\"mlp-modal-header mlp-close-tab-warning-header\">\n<h3><i class=\"fas fa-exclamation-triangle\"><\/i> <span class=\"mlp-modal-title\">Delete Saved Tab<\/span><\/h3>\n<button class=\"mlp-modal-close-btn mlp-close-tab-warning-close-btn\" data-instance=\"mlp-15-1\">\n<i class=\"fas fa-times\"><\/i>\n<\/button>\n<\/div>\n<div class=\"mlp-modal-body\">\n<div class=\"mlp-close-tab-warning-content-inner\">\n<div class=\"mlp-close-tab-warning-icon\">\n<i class=\"fas fa-trash-alt\"><\/i>\n<\/div>\n<div class=\"mlp-close-tab-warning-text\">\n<p><strong>\u26a0\ufe0f Permanently Delete Saved Tab?<\/strong><\/p>\n<p>This saved tab will be <strong>permanently deleted from localStorage<\/strong>.<\/p>\n<p>This means:<\/p>\n<ul>\n<li>\ud83d\uddd1\ufe0f The tab will be completely removed from storage<\/li>\n<li>\ud83d\udcbe It will NOT reappear when you reload the page<\/li>\n<li>\ud83d\udd04 This action cannot be undone<\/li>\n<\/ul>\n<p class=\"mlp-close-tab-confirm-text\">Are you sure you want to permanently delete this saved tab?<\/p>\n<\/div>\n<div class=\"mlp-close-tab-warning-actions\">\n<button class=\"mlp-action-button mlp-close-tab-cancel-btn\"\ndata-instance=\"mlp-15-1\">\n<i class=\"fas fa-times\"><\/i> Cancel\n<\/button>\n<button class=\"mlp-action-button mlp-close-tab-confirm-btn\"\ndata-instance=\"mlp-15-1\">\n<i class=\"fas fa-trash-alt\"><\/i> Yes, Delete Permanently\n<\/button>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<!-- Docs Modal -->\n<div class=\"mlp-docs-modal\" id=\"mlp-docs-modal-mlp-15-1\">\n<div class=\"mlp-modal-content mlp-docs-content\">\n<div class=\"mlp-docs-header\">\n<div class=\"mlp-docs-header-left\">\n<span class=\"mlp-docs-icon-wrap\"><i class=\"fas fa-book-open\"><\/i><\/span>\n<span class=\"mlp-docs-title-text\">Documentation<\/span>\n<span class=\"mlp-docs-version-badge\">v5.9.0 &mdash; ptero.us.ci<\/span>\n<\/div>\n<button class=\"mlp-docs-close-btn\" data-instance=\"mlp-15-1\">&#x2715;<\/button>\n<\/div>\n<div class=\"mlp-docs-body\">\n<nav class=\"mlp-docs-sidebar\">\n<div class=\"mlp-docs-nav-label\">Contents<\/div>\n<a class=\"mlp-docs-nav-item active\" data-section=\"overview\" href=\"#\">Overview<\/a>\n<a class=\"mlp-docs-nav-item\" data-section=\"ai\" href=\"#\">AI Assistant<\/a>\n<a class=\"mlp-docs-nav-item\" data-section=\"backups\" href=\"#\">Backups<\/a>\n<a class=\"mlp-docs-nav-item\" data-section=\"tabs\" href=\"#\">Tab System<\/a>\n<a class=\"mlp-docs-nav-item\" data-section=\"share\" href=\"#\">Sharing<\/a>\n<a class=\"mlp-docs-nav-item\" data-section=\"limits\" href=\"#\">Free Plan Limits<\/a>\n<\/nav>\n<div class=\"mlp-docs-main\">\n<div class=\"mlp-docs-section active\" data-section=\"overview\">\n<div class=\"mlp-docs-section-heading\"><i class=\"fas fa-rocket\"><\/i> Overview<\/div>\n<p class=\"mlp-docs-lead\">Welcome to ptero.us.ci, ptero is an online html editor &mdash; all running directly inside your browser.<\/p>\n<div class=\"mlp-docs-card\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-star\"><\/i> Key Features<\/div>\n<ul class=\"mlp-docs-list\">\n<li><i class=\"fas fa-check-circle\"><\/i> Live HTML, CSS &amp; JS editor with instant preview<\/li>\n<li><i class=\"fas fa-check-circle\"><\/i> Mobile device simulator (100+ device presets)<\/li>\n<li><i class=\"fas fa-check-circle\"><\/i> Multi-tab workspace with fork &amp; save<\/li>\n<li><i class=\"fas fa-check-circle\"><\/i> AI-powered code fixer (fixes lines automatically)<\/li>\n<li><i class=\"fas fa-check-circle\"><\/i> Code Analyzer with HTML, CSS &amp; JS breakdown<\/li>\n<li><i class=\"fas fa-check-circle\"><\/i> Browser-based backup system<\/li>\n<li><i class=\"fas fa-check-circle\"><\/i> Real-time collaboration via WebSocket<\/li>\n<li><i class=\"fas fa-check-circle\"><\/i> Code sharing with expiry links<\/li>\n<li><i class=\"fas fa-check-circle\"><\/i> Monaco Editor (same engine as VS Code)<\/li>\n<li><i class=\"fas fa-check-circle\"><\/i> Preprocessor support: SCSS, Less, TypeScript, Babel, CoffeeScript, Pug, Markdown<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<div class=\"mlp-docs-section\" data-section=\"ai\">\n<div class=\"mlp-docs-section-heading\"><i class=\"fas fa-robot\"><\/i> AI Assistant<\/div>\n<p class=\"mlp-docs-lead\">The AI button lets you automatically fix specific lines of code using the AI service.<\/p>\n<div class=\"mlp-docs-card\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-bolt\"><\/i> Fix a Line<\/div>\n<ul class=\"mlp-docs-list\">\n<li>Click the <strong>AI<\/strong> button in the editor toolbar<\/li>\n<li>Enter the line number you want fixed<\/li>\n<li>Click <strong>Fix Line<\/strong> &mdash; the AI will rewrite that line<\/li>\n<li>Lines are counted HTML first, then CSS, then JS<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<div class=\"mlp-docs-section\" data-section=\"backups\">\n<div class=\"mlp-docs-section-heading\"><i class=\"fas fa-database\"><\/i> Backup System<\/div>\n<p class=\"mlp-docs-lead\">Backups save your current tab content to your <strong>browser LocalStorage<\/strong>. They are fast and private, but have important limitations.<\/p>\n<div class=\"mlp-docs-card mlp-docs-card-warning\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-exclamation-triangle\"><\/i> Important Limitations<\/div>\n<ul class=\"mlp-docs-list\">\n<li><i class=\"fas fa-times-circle\"><\/i> Backups are stored <strong>only in this browser<\/strong> on this device<\/li>\n<li><i class=\"fas fa-times-circle\"><\/i> Clearing browser data <strong>deletes all backups permanently<\/strong><\/li>\n<li><i class=\"fas fa-times-circle\"><\/i> Backups do <strong>not sync<\/strong> across devices or browsers<\/li>\n<li><i class=\"fas fa-times-circle\"><\/i> They are <strong>not saved to the server<\/strong><\/li>\n<\/ul>\n<\/div>\n<div class=\"mlp-docs-card\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-list\"><\/i> How to Use<\/div>\n<ul class=\"mlp-docs-list\">\n<li>Click <strong>Backups<\/strong> in the editor bar, then <strong>Create Backup<\/strong><\/li>\n<li>To restore, open Backups and click <strong>Load Backups<\/strong><\/li>\n<li>Each backup is identified by a unique timestamp ID<\/li>\n<li>You can delete individual backups or select all and delete in bulk<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<div class=\"mlp-docs-section\" data-section=\"tabs\">\n<div class=\"mlp-docs-section-heading\"><i class=\"fas fa-layer-group\"><\/i> Tab System<\/div>\n<p class=\"mlp-docs-lead\">Tabs let you work on multiple separate projects in the same editor session.<\/p>\n<div class=\"mlp-docs-card\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-plus\"><\/i> Tab Actions<\/div>\n<ul class=\"mlp-docs-list\">\n<li><strong>Add Tab<\/strong> &mdash; creates a new empty workspace<\/li>\n<li><strong>Fork Tab<\/strong> &mdash; duplicates the current tab with a new name<\/li>\n<li><strong>Save Tab<\/strong> &mdash; saves the tab to LocalStorage so it reappears on reload<\/li>\n<li><strong>Duplicate Tab<\/strong> &mdash; creates an identical copy<\/li>\n<li><strong>Close All Tabs<\/strong> &mdash; removes all unsaved tabs<\/li>\n<\/ul>\n<\/div>\n<div class=\"mlp-docs-card mlp-docs-card-info\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-save\"><\/i> Saved Tabs<\/div>\n<p>Saved tabs are marked with a <strong>&#x1F4BE;<\/strong> icon and will automatically reload when you visit the page. Deleting a saved tab removes it permanently from LocalStorage.<\/p>\n<\/div>\n<\/div>\n<div class=\"mlp-docs-section\" data-section=\"share\">\n<div class=\"mlp-docs-section-heading\"><i class=\"fas fa-share-alt\"><\/i> Sharing<\/div>\n<p class=\"mlp-docs-lead\">Share your code with a temporary link that expires automatically.<\/p>\n<div class=\"mlp-docs-card\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-link\"><\/i> How Sharing Works<\/div>\n<ul class=\"mlp-docs-list\">\n<li>Click <strong>Share<\/strong> and choose an expiry time (1&ndash;10 minutes)<\/li>\n<li>A unique short URL is generated and copied to your clipboard<\/li>\n<li>Anyone with the link can view the shared tab in the editor<\/li>\n<li>The link expires automatically at the chosen time &mdash; expired shares show a 404 page<\/li>\n<li>Share data is encrypted in the redirect URL using AES-256-GCM so it cannot be tampered with in transit<\/li>\n<li><strong>Maximum share payload:<\/strong> 128 KB per tab (HTML + CSS + JS combined)<\/li>\n<li>The server keeps up to <strong>100,000 active share records<\/strong> before the oldest are pruned<\/li>\n<\/ul>\n<\/div>\n<div class=\"mlp-docs-card mlp-docs-card-warning\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-exclamation-triangle\"><\/i> Share Safety Reminder<\/div>\n<p>Do <strong>not<\/strong> share code containing passwords, API keys, or confidential information.<\/p>\n<\/div>\n<li>Click <strong>Read.me<\/strong> then choose <strong>Public<\/strong> (admin only) or <strong>Personal<\/strong><\/li>\n<li>Public links expire in <strong>1 to 10 minutes<\/strong> and open as read-only tabs for recipients<\/li>\n<li>Personal read-me tabs are stored locally in your browser<\/li>\n<li>Shared code is stored in the server database until it expires<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<div class=\"mlp-docs-section\" data-section=\"limits\">\n<div class=\"mlp-docs-section-heading\"><i class=\"fas fa-tachometer-alt\"><\/i> Free Plan Limits<\/div>\n<p class=\"mlp-docs-lead\">You are on the <strong>Free Plan<\/strong>. Here is a full breakdown of what is included and what applies &mdash; updated for v5.9.0.<\/p>\n<div class=\"mlp-docs-card\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-check-circle\" style=\"color:#4ec9b0;\"><\/i> Included in Free<\/div>\n<ul class=\"mlp-docs-list\">\n<li><i class=\"fas fa-check\"><\/i> Unlimited tabs (session only or saved locally)<\/li>\n<li><i class=\"fas fa-check\"><\/i> All device presets (100+ devices)<\/li>\n<li><i class=\"fas fa-check\"><\/i> All preprocessors (SCSS, Babel, TypeScript, etc.)<\/li>\n<li><i class=\"fas fa-check\"><\/i> Browser-based backups (LocalStorage)<\/li>\n<li><i class=\"fas fa-check\"><\/i> Code collaboration (join as guest or host)<\/li>\n<li><i class=\"fas fa-check\"><\/i> AI line fixer (with 60s cooldown, 10,000 req\/day global pool)<\/li>\n<li><i class=\"fas fa-check\"><\/i> Code Analyzer with two-layer response cache<\/li>\n<li><i class=\"fas fa-check\"><\/i> Fullscreen editor mode<\/li>\n<\/ul>\n<\/div>\n<div class=\"mlp-docs-card mlp-docs-card-warning\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-hourglass-half\"><\/i> Free Plan Restrictions<\/div>\n<ul class=\"mlp-docs-list\">\n<li><i class=\"fas fa-clock\"><\/i> <strong>60-second AI cooldown<\/strong> between each AI request per IP<\/li>\n<li><i class=\"fas fa-globe\"><\/i> <strong>10,000 AI requests \/ day<\/strong> shared across all users globally<\/li>\n<li><i class=\"fas fa-share-alt\"><\/i> Public code sharing is <strong>admin-only<\/strong><\/li>\n<li><i class=\"fas fa-hdd\"><\/i> Backups stored in <strong>browser only<\/strong> (no server sync)<\/li>\n<li><i class=\"fas fa-weight-hanging\"><\/i> Share payload limit: <strong>128 KB<\/strong> per tab<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div><!-- \/mlp-docs-main -->\n<\/div><!-- \/mlp-docs-body -->\n<\/div>\n<\/div>\n<!-- Terms of Service Modal -->\n<div class=\"mlp-docs-modal mlp-tos-modal\" id=\"mlp-tos-modal-mlp-15-1\">\n<div class=\"mlp-modal-content mlp-docs-content\">\n<div class=\"mlp-docs-header\">\n<div class=\"mlp-docs-header-left\">\n<span class=\"mlp-docs-icon-wrap\" style=\"background:linear-gradient(135deg,#c0392b,#e74c3c);\"><i class=\"fas fa-gavel\"><\/i><\/span>\n<span class=\"mlp-docs-title-text\">Terms of Service<\/span>\n<span class=\"mlp-docs-version-badge\">ptero.us.ci<\/span>\n<\/div>\n<button class=\"mlp-docs-close-btn mlp-tos-close-btn\" data-instance=\"mlp-15-1\">&#x2715;<\/button>\n<\/div>\n<div class=\"mlp-docs-body\">\n<nav class=\"mlp-docs-sidebar\">\n<div class=\"mlp-docs-nav-label\">Sections<\/div>\n<a class=\"mlp-docs-nav-item active\" data-section=\"tos-1\" href=\"#\">Halal Content Policy<\/a>\n<a class=\"mlp-docs-nav-item\" data-section=\"tos-2\" href=\"#\">Prohibited Activities<\/a>\n<a class=\"mlp-docs-nav-item\" data-section=\"tos-3\" href=\"#\">Anti-Fraud Rules<\/a>\n<a class=\"mlp-docs-nav-item\" data-section=\"tos-4\" href=\"#\">Account Conduct<\/a>\n<a class=\"mlp-docs-nav-item\" data-section=\"tos-5\" href=\"#\">Intellectual Property<\/a>\n<a class=\"mlp-docs-nav-item\" data-section=\"tos-6\" href=\"#\">Enforcement<\/a>\n<a class=\"mlp-docs-nav-item\" data-section=\"tos-7\" href=\"#\">Liability<\/a>\n<a class=\"mlp-docs-nav-item\" data-section=\"tos-8\" href=\"#\">Governing Law<\/a>\n<a class=\"mlp-docs-nav-item\" data-section=\"tos-9\" href=\"#\">Beta &amp; Data Loss<\/a>\n<a class=\"mlp-docs-nav-item\" data-section=\"tos-10\" href=\"#\"><i class=\"fas fa-bolt\" style=\"color:#f0c040;margin-right:4px;\"><\/i>Capacity &amp; Fair Use<\/a>\n<\/nav>\n<div class=\"mlp-docs-main\">\n<div class=\"mlp-docs-section active\" data-section=\"tos-1\">\n<div class=\"mlp-docs-section-heading\"><i class=\"fas fa-star-and-crescent\"><\/i> Term 1 \u2014 Halal Content Policy<\/div>\n<p class=\"mlp-docs-lead\">All content created, published, shared, or hosted through ptero.us.ci must strictly comply with Islamic Halal standards. This is a mandatory, non-negotiable condition of using our platform.<\/p>\n<div class=\"mlp-docs-card\" style=\"border-color:rgba(230,92,0,0.4);background:rgba(230,92,0,0.06);\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-ban\"><\/i> Strictly Forbidden Content<\/div>\n<ul class=\"mlp-docs-list\">\n<li>Any content depicting, promoting, or glorifying alcohol, pork, or other haram substances<\/li>\n<li>Sexually explicit, suggestive, or pornographic material of any kind<\/li>\n<li>Content that mocks, disrespects, or blasphemes Islam, the Quran, the Prophet, or any Islamic value<\/li>\n<li>Gambling platforms, betting systems, or any interest (riba)-based financial tools<\/li>\n<li>Violence, gore, or content that glorifies harm against any person or group<\/li>\n<li>Content promoting idol worship, polytheism, or practices forbidden in Islam<\/li>\n<\/ul>\n<\/div>\n<div class=\"mlp-docs-card mlp-docs-card-info\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-check-circle\"><\/i> Standard of Compliance<\/div>\n<p>ptero.us.ci reserves the absolute right to remove any content deemed haram or contrary to Islamic ethics without prior notice. Repeated violations will result in permanent account termination with no right of appeal.<\/p>\n<\/div>\n<\/div>\n<div class=\"mlp-docs-section\" data-section=\"tos-2\">\n<div class=\"mlp-docs-section-heading\"><i class=\"fas fa-skull-crossbones\"><\/i> Term 2 \u2014 Prohibited Activities<\/div>\n<p class=\"mlp-docs-lead\">The following activities are strictly prohibited on ptero.us.ci and will result in immediate account suspension and potential legal action.<\/p>\n<div class=\"mlp-docs-card\" style=\"border-color:rgba(220,38,38,0.4);background:rgba(220,38,38,0.05);\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-times-circle\"><\/i> Absolute Prohibitions<\/div>\n<ul class=\"mlp-docs-list\">\n<li><strong>Malware Distribution:<\/strong> Creating, hosting, or sharing any malicious code, viruses, spyware, ransomware, or exploits<\/li>\n<li><strong>Phishing:<\/strong> Building fake login pages, credential harvesting tools, or deceptive websites that impersonate legitimate services<\/li>\n<li><strong>Illegal Content:<\/strong> Any content that violates local, national, or international law in your jurisdiction<\/li>\n<li><strong>CSAM:<\/strong> Any content involving the exploitation of minors \u2014 zero tolerance, reported immediately to authorities<\/li>\n<li><strong>DDoS Tools:<\/strong> Scripts or tools designed to disrupt or overload external services<\/li>\n<li><strong>Data Exfiltration:<\/strong> Tools designed to steal or harvest private user data without consent<\/li>\n<li><strong>Spam Infrastructure:<\/strong> Building bulk-email senders, SMS bombers, or automated spamming tools<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<div class=\"mlp-docs-section\" data-section=\"tos-3\">\n<div class=\"mlp-docs-section-heading\"><i class=\"fas fa-shield-alt\"><\/i> Term 3 \u2014 Anti-Fraud Rules<\/div>\n<p class=\"mlp-docs-lead\">ptero.us.ci enforces a strict zero-tolerance policy against all forms of fraud, deception, and manipulation on the platform.<\/p>\n<div class=\"mlp-docs-card mlp-docs-card-warning\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-exclamation-triangle\"><\/i> Fraud-Related Violations<\/div>\n<ul class=\"mlp-docs-list\">\n<li><strong>Identity Fraud:<\/strong> Impersonating other users, organizations, brands, or any individual without authorization<\/li>\n<li><strong>Financial Fraud:<\/strong> Creating tools for credit card fraud, carding, money laundering, or unauthorized payment processing<\/li>\n<li><strong>AI Abuse:<\/strong> Using our AI assistant to generate fraudulent content, bypass security systems, or generate harmful code<\/li>\n<li><strong>Sharing Abuse:<\/strong> Using the share feature to distribute prohibited content under disguised or misleading URLs<\/li>\n<li><strong>Rate-Limit Evasion:<\/strong> Using VPNs, proxies, or automation to bypass AI cooldown timers or usage limits<\/li>\n<li><strong>Account Farming:<\/strong> Creating multiple accounts to circumvent restrictions or accumulate unfair usage<\/li>\n<\/ul>\n<\/div>\n<div class=\"mlp-docs-card\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-gavel\"><\/i> Consequences<\/div>\n<p>Fraud-related violations result in immediate permanent ban, forfeiture of all saved data, and may be referred to relevant law enforcement agencies. We cooperate fully with legal investigations.<\/p>\n<\/div>\n<\/div>\n<div class=\"mlp-docs-section\" data-section=\"tos-4\">\n<div class=\"mlp-docs-section-heading\"><i class=\"fas fa-user-shield\"><\/i> Term 4 \u2014 Account Conduct<\/div>\n<p class=\"mlp-docs-lead\">Users are solely responsible for all activity conducted through their access to ptero.us.ci.<\/p>\n<div class=\"mlp-docs-card\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-list-ul\"><\/i> Conduct Requirements<\/div>\n<ul class=\"mlp-docs-list\">\n<li>You must not share access credentials with unauthorized parties<\/li>\n<li>You must not attempt to reverse-engineer, decompile, or scrape the ptero.eu.cc platform<\/li>\n<li>You must not use automated bots or scripts to interact with the platform unless explicitly authorized<\/li>\n<li>You must promptly report any security vulnerabilities discovered on the platform to our team<\/li>\n<li>Any abuse of the collaborative editing feature to disrupt other users is strictly prohibited<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<div class=\"mlp-docs-section\" data-section=\"tos-5\">\n<div class=\"mlp-docs-section-heading\"><i class=\"fas fa-copyright\"><\/i> Term 5 \u2014 Intellectual Property<\/div>\n<p class=\"mlp-docs-lead\">You retain ownership of code you create using ptero.us.ci, but you grant us a limited license to store and display your content for platform functionality.<\/p>\n<div class=\"mlp-docs-card\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-info-circle\"><\/i> IP Rules<\/div>\n<ul class=\"mlp-docs-list\">\n<li>Do not upload or publish code or content to which you do not own the rights or have proper licensing<\/li>\n<li>Copyrighted assets, logos, or trademarked materials of third parties must not be used without permission<\/li>\n<li>Shared links to your code are public \u2014 do not share proprietary or confidential code using the share feature<\/li>\n<li>ptero.eu.cc branding, design, and source code remain exclusively our intellectual property<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<div class=\"mlp-docs-section\" data-section=\"tos-6\">\n<div class=\"mlp-docs-section-heading\"><i class=\"fas fa-balance-scale\"><\/i> Term 6 \u2014 Limitation of Liability<\/div>\n<p class=\"mlp-docs-lead\">ptero.us.ci is provided \"as is\" without warranty of any kind, express or implied.<\/p>\n<div class=\"mlp-docs-card\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-exclamation-circle\"><\/i> Disclaimer<\/div>\n<p>We are not liable for any loss of data or damages. Use the platform at your own risk. AI-generated code is provided without warranty.<\/p>\n<\/div>\n<\/div>\n<div class=\"mlp-docs-section\" data-section=\"tos-8\">\n<div class=\"mlp-docs-section-heading\"><i class=\"fas fa-globe\"><\/i> Term 8 \u2014 Governing Law<\/div>\n<p class=\"mlp-docs-lead\">These Terms constitute the entire agreement between you and ptero.eu.cc.<\/p>\n<div class=\"mlp-docs-card\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-gavel\"><\/i> Legal Jurisdiction<\/div>\n<p>By using ptero.eu.cc you agree to these terms. We reserve the right to update them at any time.<\/p>\n<\/div>\n<div class=\"mlp-docs-card mlp-docs-card-info\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-calendar-alt\"><\/i> Effective Date<\/div>\n<p>These Terms are effective as of <strong>March 2026 (v5.9.0)<\/strong> and apply to all users of ptero.eu.cc worldwide.<\/p>\n<\/div>\n<\/div>\n<div class=\"mlp-docs-section\" data-section=\"tos-9\">\n<div class=\"mlp-docs-section-heading\"><i class=\"fas fa-exclamation-triangle\"><\/i> Term 9 \u2014 Beta Platform, Content Loss &amp; Service Disruptions<\/div>\n<p class=\"mlp-docs-lead\">ptero.us.ci is currently operating in <strong>Beta<\/strong>. By using the platform you acknowledge and fully accept the risks associated with beta software, including unexpected data loss, crashes, and service outages.<\/p>\n<div class=\"mlp-docs-card\" style=\"border-color:rgba(234,179,8,0.4);background:rgba(234,179,8,0.05);\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-flask\"><\/i> Beta Status Disclaimer<\/div>\n<p>ptero.eu.cc is in active development. Features may be incomplete, unstable, or subject to sudden change without notice. The platform is provided strictly as-is during this beta period. We make no guarantees of stability, uptime, or data persistence.<\/p>\n<\/div>\n<div class=\"mlp-docs-card\" style=\"border-color:rgba(220,38,38,0.4);background:rgba(220,38,38,0.05);\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-database\"><\/i> Content &amp; Data Loss<\/div>\n<ul class=\"mlp-docs-list\">\n<li><strong>No Data Guarantee:<\/strong> ptero.eu.cc does not guarantee the preservation of any code, project, backup, or shared link during the beta period. Data may be lost at any time without warning.<\/li>\n<li><strong>LocalStorage Wipes:<\/strong> Browser-based backups stored in LocalStorage can be erased by browser updates, clearing cache, or platform resets. We are not liable for any such loss.<\/li>\n<li><strong>Server-Side Resets:<\/strong> During beta, the database may be wiped, migrated, or reset as part of development work. All shared links and AI cache may be permanently deleted.<\/li>\n<li><strong>Your Responsibility:<\/strong> You are solely responsible for maintaining external copies of any code or content you create on ptero.eu.cc. Always save important work locally.<\/li>\n<\/ul>\n<\/div>\n<div class=\"mlp-docs-card\" style=\"border-color:rgba(239,68,68,0.35);background:rgba(239,68,68,0.04);\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-bolt\"><\/i> Crashes &amp; Platform Instability<\/div>\n<ul class=\"mlp-docs-list\">\n<li><strong>Unexpected Crashes:<\/strong> The platform may crash, freeze, or behave unexpectedly at any time during the beta phase. This may result in the loss of unsaved work in the editor.<\/li>\n<li><strong>Editor Failures:<\/strong> The Monaco code editor, AI assistant, live preview, and collaboration features may fail or produce incorrect results during beta.<\/li>\n<li><strong>No Liability:<\/strong> ptero.us.ci and its operators accept zero liability for any damages, losses, or disruption arising from platform crashes during beta.<\/li>\n<\/ul>\n<\/div>\n<div class=\"mlp-docs-card\" style=\"border-color:rgba(168,85,247,0.35);background:rgba(168,85,247,0.04);\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-shield-virus\"><\/i> DDoS Attacks &amp; Service Outages<\/div>\n<ul class=\"mlp-docs-list\">\n<li><strong>DDoS Vulnerability:<\/strong> As a beta platform, ptero.eu.cc may have limited DDoS protection infrastructure. Distributed Denial of Service attacks may cause significant downtime and service disruption for all users.<\/li>\n<li><strong>No Uptime Guarantee:<\/strong> We do not guarantee any specific uptime percentage during beta. The service may go offline at any time due to attacks, maintenance, or infrastructure issues.<\/li>\n<li><strong>Data During Outages:<\/strong> Content being edited or saved during a DDoS attack or service outage may be permanently lost. We strongly advise downloading your code regularly.<\/li>\n<li><strong>Attack Reporting:<\/strong> If you are aware of an ongoing or planned DDoS attack against ptero.eu.cc, you are encouraged to report it immediately. Participating in or facilitating such attacks is a violation of Term 2 and will be referred to authorities.<\/li>\n<\/ul>\n<\/div>\n<div class=\"mlp-docs-card mlp-docs-card-info\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-info-circle\"><\/i> Acceptance of Beta Risks<\/div>\n<p>By continuing to use ptero.eu.cc during the beta period, you explicitly acknowledge and accept all risks described in this term. If you do not accept these risks, you must discontinue use of the platform immediately.<\/p>\n<\/div>\n<\/div>\n<div class=\"mlp-docs-section\" data-section=\"tos-10\">\n<div class=\"mlp-docs-section-heading\"><i class=\"fas fa-bolt\" style=\"color:#f0c040;\"><\/i> Term 10 \u2014 Platform Capacity &amp; Fair Use<\/div>\n<p class=\"mlp-docs-lead\">ptero.us.ci v5.9.0 has been upgraded with a high-performance infrastructure layer designed to serve up to <strong>100,000 concurrent users<\/strong>. These improvements come with updated fair-use obligations for all users.<\/p>\n<div class=\"mlp-docs-card\" style=\"border-color:rgba(240,192,64,0.4);background:rgba(240,192,64,0.05);\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-server\"><\/i> What Changed in v5.9.0<\/div>\n<ul class=\"mlp-docs-list\">\n<li><strong>In-Memory Rate Limiting:<\/strong> All request rate limits are now enforced via a high-speed in-memory cache (Redis\/APCu). Circumventing this system via automation, proxies, or VPN rotation is a violation of these Terms<\/li>\n<li><strong>Global Daily AI Cap:<\/strong> The platform enforces a shared limit of <strong>10,000 AI requests per day<\/strong> across all users. This is a shared resource &mdash; abuse by any single user degrades the experience for everyone<\/li>\n<li><strong>Chunked Cleanup System:<\/strong> Database maintenance now runs in controlled batches. Deliberately triggering mass data creation to stress the cleanup system is prohibited<\/li>\n<li><strong>Share Table Capacity:<\/strong> The platform stores up to <strong>100,000 share records<\/strong>. Automated share creation to exhaust this capacity is a violation<\/li>\n<\/ul>\n<\/div>\n<div class=\"mlp-docs-card mlp-docs-card-warning\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-ban\"><\/i> Fair Use Obligations<\/div>\n<ul class=\"mlp-docs-list\">\n<li>You must not use scripts, bots, or automation to send AI requests in excess of the natural 60-second cooldown<\/li>\n<li>You must not rotate IPs, use VPNs, or use proxies to bypass per-IP rate limits<\/li>\n<li>You must not attempt to flood the AI queue or cache to degrade service for other users<\/li>\n<li>You must not attempt to reverse-engineer or manipulate the rate-limit or circuit-breaker mechanisms<\/li>\n<\/ul>\n<\/div>\n<div class=\"mlp-docs-card\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-gavel\"><\/i> Enforcement<\/div>\n<p>Violations result in immediate permanent ban. Severe cases may be referred to relevant authorities.<\/p>\n<\/div>\n<\/div>\n<\/div><!-- \/mlp-docs-main -->\n<\/div><!-- \/mlp-docs-body -->\n<\/div>\n<\/div>\n<!-- Privacy Policy Modal -->\n<div class=\"mlp-docs-modal mlp-pp-modal\" id=\"mlp-pp-modal-mlp-15-1\">\n<div class=\"mlp-modal-content mlp-docs-content\">\n<div class=\"mlp-docs-header\">\n<div class=\"mlp-docs-header-left\">\n<span class=\"mlp-docs-icon-wrap\" style=\"background:linear-gradient(135deg,#0f4c75,#1b6ca8);\"><i class=\"fas fa-shield-alt\"><\/i><\/span>\n<span class=\"mlp-docs-title-text\">Privacy Policy<\/span>\n<span class=\"mlp-docs-version-badge\">ptero.us.ci<\/span>\n<\/div>\n<button class=\"mlp-docs-close-btn mlp-pp-close-btn\" data-instance=\"mlp-15-1\">&#x2715;<\/button>\n<\/div>\n<div class=\"mlp-docs-body\">\n<nav class=\"mlp-docs-sidebar\">\n<div class=\"mlp-docs-nav-label\">Sections<\/div>\n<a class=\"mlp-docs-nav-item active\" data-section=\"pp-1\" href=\"#\">What We Collect<\/a>\n<a class=\"mlp-docs-nav-item\" data-section=\"pp-2\" href=\"#\">How We Use Data<\/a>\n<a class=\"mlp-docs-nav-item\" data-section=\"pp-3\" href=\"#\">Data Storage<\/a>\n<a class=\"mlp-docs-nav-item\" data-section=\"pp-4\" href=\"#\">AI & Third Parties<\/a>\n<a class=\"mlp-docs-nav-item\" data-section=\"pp-5\" href=\"#\">Cookies<\/a>\n<a class=\"mlp-docs-nav-item\" data-section=\"pp-6\" href=\"#\">Your Rights<\/a>\n<a class=\"mlp-docs-nav-item\" data-section=\"pp-7\" href=\"#\">Data Retention<\/a>\n<a class=\"mlp-docs-nav-item\" data-section=\"pp-infra\" href=\"#\"><i class=\"fas fa-bolt\" style=\"color:#f0c040;margin-right:4px;\"><\/i>Infrastructure<\/a>\n<a class=\"mlp-docs-nav-item\" data-section=\"pp-8\" href=\"#\">Contact<\/a>\n<\/nav>\n<div class=\"mlp-docs-main\">\n<div class=\"mlp-docs-section active\" data-section=\"pp-1\">\n<div class=\"mlp-docs-section-heading\"><i class=\"fas fa-database\"><\/i> What We Collect<\/div>\n<p class=\"mlp-docs-lead\">ptero.eu.cc is committed to transparency about what data we collect and why. We collect only what is necessary to operate the platform.<\/p>\n<div class=\"mlp-docs-card\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-list\"><\/i> Data We Collect<\/div>\n<ul class=\"mlp-docs-list\">\n<li><strong>IP Addresses:<\/strong> Collected temporarily per request to enforce AI cooldown limits and prevent abuse<\/li>\n<li><strong>Shared Code Snippets:<\/strong> When you use the Share feature, your HTML\/CSS\/JS code is stored in our database linked to a unique share ID<\/li>\n<li><strong>AI Prompts:<\/strong> Prompts sent to our AI assistant are logged temporarily for caching and abuse prevention<\/li>\n<li><strong>Browser LocalStorage:<\/strong> Backups are stored locally on your own device \u2014 we do not have access to this data<\/li>\n<li><strong>WordPress Session Data:<\/strong> Standard WordPress session and nonce tokens for security<\/li>\n<\/ul>\n<\/div>\n<div class=\"mlp-docs-card mlp-docs-card-info\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-user-secret\"><\/i> What We Do NOT Collect<\/div>\n<ul class=\"mlp-docs-list\">\n<li>We do not require account registration to use the editor<\/li>\n<li>We do not collect your name, email, or personal identifying information unless you register on the WordPress site<\/li>\n<li>We do not sell your data to advertisers or third parties<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<div class=\"mlp-docs-section\" data-section=\"pp-2\">\n<div class=\"mlp-docs-section-heading\"><i class=\"fas fa-cog\"><\/i> How We Use Data<\/div>\n<p class=\"mlp-docs-lead\">All data collected is used exclusively for operating ptero.eu.cc and ensuring a safe, fair experience for all users.<\/p>\n<div class=\"mlp-docs-card\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-tasks\"><\/i> Data Usage Purposes<\/div>\n<ul class=\"mlp-docs-list\">\n<li><strong>IP Data:<\/strong> Used to enforce the AI request cooldown (60 seconds per IP) and share rate limits (30 requests\/minute). In v5.9.0, rate-limit counters are stored in a high-speed in-memory cache (Redis\/APCu) and never written to a permanent log &mdash; they expire naturally after the window closes<\/li>\n<li><strong>Shared Snippets:<\/strong> Stored to provide shareable preview links. Expired shares are deleted automatically by the hourly cleanup job.<\/li>\n<li><strong>AI Prompts:<\/strong> Cached for up to <strong>1 hour<\/strong> (not 24 hours as in previous versions) at two layers: in-memory cache first, then database. This reduces redundant API calls and returns repeat responses in milliseconds<\/li>\n<li><strong>Global AI Counter:<\/strong> An anonymous daily counter tracks total AI requests across all users against the 10,000\/day cap. This counter contains no personal data &mdash; it is a single number incremented atomically<\/li>\n<li><strong>Analytics:<\/strong> Aggregate, anonymized usage statistics may be collected to improve the platform<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<div class=\"mlp-docs-section\" data-section=\"pp-3\">\n<div class=\"mlp-docs-section-heading\"><i class=\"fas fa-server\"><\/i> Data Storage &amp; Security<\/div>\n<p class=\"mlp-docs-lead\">We take reasonable technical measures to secure the data stored on our servers. v5.9.0 significantly reduces the amount of personal data touching the database.<\/p>\n<div class=\"mlp-docs-card\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-lock\"><\/i> Security Measures<\/div>\n<ul class=\"mlp-docs-list\">\n<li>All API requests are validated with WordPress nonces to prevent CSRF attacks<\/li>\n<li>Share URL parameters are encrypted with <strong>AES-256-GCM<\/strong> to prevent tampering in transit<\/li>\n<li>IP addresses used for rate limiting are now stored in an <strong>in-memory cache only<\/strong> &mdash; they are never written to a permanent database record for rate-limit purposes<\/li>\n<li>AI cache and queue tables are automatically pruned in hourly batches &mdash; data is never kept longer than necessary<\/li>\n<li>Shared code links use opaque random identifiers &mdash; not linked to personal identity<\/li>\n<li>Circuit breaker state (AI service health) is stored in the object cache and synced to the database only on state transitions &mdash; not on every request<\/li>\n<\/ul>\n<\/div>\n<div class=\"mlp-docs-card mlp-docs-card-warning\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-exclamation-triangle\"><\/i> Important Notice<\/div>\n<p>Do not share sensitive or confidential code using the Share feature.<\/p>\n<\/div>\n<\/div>\n<div class=\"mlp-docs-section\" data-section=\"pp-5\">\n<div class=\"mlp-docs-section-heading\"><i class=\"fas fa-cookie-bite\"><\/i> Cookies<\/div>\n<p class=\"mlp-docs-lead\">ptero.eu.cc uses minimal cookies, limited to what WordPress requires for standard functionality.<\/p>\n<div class=\"mlp-docs-card\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-info-circle\"><\/i> Cookie Usage<\/div>\n<ul class=\"mlp-docs-list\">\n<li><strong>WordPress Session Cookies:<\/strong> Used for logged-in WordPress users only<\/li>\n<li><strong>Security Nonces:<\/strong> Short-lived tokens embedded in page markup, not cookie-based<\/li>\n<li>We do not use tracking cookies, advertising cookies, or third-party analytics cookies<\/li>\n<li>LocalStorage is used for your code backups \u2014 this is stored only on your device<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<div class=\"mlp-docs-section\" data-section=\"pp-6\">\n<div class=\"mlp-docs-section-heading\"><i class=\"fas fa-user-check\"><\/i> Your Rights<\/div>\n<p class=\"mlp-docs-lead\">You have rights regarding any personal data we may hold about you.<\/p>\n<div class=\"mlp-docs-card\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-hand-paper\"><\/i> Your Rights Include<\/div>\n<ul class=\"mlp-docs-list\">\n<li><strong>Right to Know:<\/strong> You may request a summary of what data we hold related to your IP or account<\/li>\n<li><strong>Right to Deletion:<\/strong> You may request deletion of your shared code snippets by contacting us with the share URL<\/li>\n<li><strong>Right to Withdraw:<\/strong> You may stop using ptero.eu.cc at any time \u2014 no data is tied to a mandatory account<\/li>\n<li><strong>Local Data:<\/strong> Your browser backup data is fully under your control \u2014 you can clear it via your browser's developer tools<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<div class=\"mlp-docs-section\" data-section=\"pp-7\">\n<div class=\"mlp-docs-section-heading\"><i class=\"fas fa-clock\"><\/i> Data Retention<\/div>\n<p class=\"mlp-docs-lead\">We retain data only for as long as necessary for platform operation. v5.9.0 reduces retention windows and moves short-lived data out of the database entirely.<\/p>\n<div class=\"mlp-docs-card\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-table\"><\/i> Retention Schedule (v5.9.0)<\/div>\n<ul class=\"mlp-docs-list\">\n<li><strong>Rate-Limit Counters (IP):<\/strong> Stored in in-memory cache only &mdash; never persisted to disk. Expire automatically after 60&ndash;65 seconds<\/li>\n<li><strong>Shared Code:<\/strong> Retained until the share expiration date you set (1&ndash;10 minutes), then deleted in the next hourly cleanup batch. Maximum 100,000 records kept<\/li>\n<li><strong>Anomaly Log:<\/strong> Last 500 security events kept in the database (IPs are partially redacted before storage). Oldest entries are dropped when the limit is reached<\/li>\n<li><strong>WordPress User Data:<\/strong> Retained per WordPress standard for registered accounts<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<div class=\"mlp-docs-section\" data-section=\"pp-infra\">\n<div class=\"mlp-docs-section-heading\"><i class=\"fas fa-bolt\" style=\"color:#f0c040;\"><\/i> Performance Infrastructure &amp; Your Data (v5.9.0)<\/div>\n<p class=\"mlp-docs-lead\">The v5.9.0 infrastructure upgrade changes how and where your data is processed. This section explains the implications for your privacy.<\/p>\n<div class=\"mlp-docs-card\" style=\"border-color:rgba(240,192,64,0.4);background:rgba(240,192,64,0.05);\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-memory\"><\/i> In-Memory Object Cache (Redis \/ APCu)<\/div>\n<p>To handle high traffic, the platform now uses an <strong>in-memory object cache<\/strong> (Redis or APCu, depending on server configuration). The following data may live in this cache:<\/p>\n<ul class=\"mlp-docs-list\" style=\"margin-top:8px;\">\n<li><strong>Rate-limit hit counts<\/strong> keyed to a hashed version of your IP address &mdash; the hash is one-way and cannot be reversed to recover your original IP<\/li>\n<\/ul>\n<p style=\"margin-top:8px;\">This in-memory data is <strong>volatile<\/strong>: it is lost on server restart and is never written to disk by this plugin.<\/p>\n<\/div>\n<div class=\"mlp-docs-card\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-shield-alt\"><\/i> What This Means for Privacy<\/div>\n<ul class=\"mlp-docs-list\">\n<li>Your IP address is now processed in-memory (not in the database) for rate-limiting purposes &mdash; this is a privacy improvement over previous versions<\/li>\n<li>If your server uses Redis, a system administrator with Redis access could theoretically read hashed rate-limit keys, but not your original IP<\/li>\n<li>No new categories of personal data are collected &mdash; only the <em>location<\/em> of data processing has changed (memory vs. database)<\/li>\n<\/ul>\n<\/div>\n<div class=\"mlp-docs-card mlp-docs-card-info\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-info-circle\"><\/i> Object Cache Availability<\/div>\n<p>The in-memory object cache is only active if the server has Redis or APCu installed with a WordPress object-cache drop-in. If not available, the plugin falls back to WordPress transients (database-backed). The same data is processed in both cases &mdash; only the storage medium differs. This section applies equally to both paths.<\/p>\n<\/div>\n<\/div>\n<div class=\"mlp-docs-section\" data-section=\"pp-8\">\n<div class=\"mlp-docs-section-heading\"><i class=\"fas fa-envelope\"><\/i> Contact<\/div>\n<p class=\"mlp-docs-lead\">If you have any questions about this Privacy Policy or wish to exercise your data rights, you may contact us.<\/p>\n<div class=\"mlp-docs-card mlp-docs-card-info\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-at\"><\/i> Contact Information<\/div>\n<p>You can reach the ptero.eu.cc team via the contact page on the website. For data deletion requests, include the specific share URL or your account username. We aim to respond to all privacy-related requests within 7 business days.<\/p>\n<\/div>\n<div class=\"mlp-docs-card\">\n<div class=\"mlp-docs-card-title\"><i class=\"fas fa-calendar\"><\/i> Policy Updates<\/div>\n<p>This Privacy Policy was last updated in <strong>March 2026 (v5.9.0)<\/strong>. We reserve the right to update this policy at any time. Continued use of ptero.eu.cc following an update constitutes acceptance of the revised policy.<\/p>\n<\/div>\n<\/div>\n<\/div><!-- \/mlp-docs-main -->\n<\/div><!-- \/mlp-docs-body -->\n<\/div>\n<\/div>\n<!-- My Plan Modal -->\n<div class=\"mlp-plan-modal\" id=\"mlp-plan-modal-mlp-15-1\">\n<div class=\"mlp-modal-content mlp-plan-content\">\n<div class=\"mlp-plan-header\">\n<div class=\"mlp-plan-header-left\">\n<span class=\"mlp-plan-icon-wrap\"><i class=\"fas fa-user-circle\"><\/i><\/span>\n<span class=\"mlp-plan-title-text\">My Plan<\/span>\n<\/div>\n<button class=\"mlp-plan-close-btn\" data-instance=\"mlp-15-1\">&#x2715;<\/button>\n<\/div>\n<div class=\"mlp-plan-body\">\n<div class=\"mlp-plan-badge-row\">\n<div class=\"mlp-plan-badge\">\n<i class=\"fas fa-certificate\"><\/i>\n<span class=\"mlp-plan-badge-name\">Free Plan<\/span>\n<\/div>\n<span class=\"mlp-plan-badge-status\"><i class=\"fas fa-circle\"><\/i> Active<\/span>\n<\/div>\n<div class=\"mlp-plan-desc\">You are on the <strong>Free Plan<\/strong> &mdash; no account or payment required. All core features are unlocked.<\/div>\n<div class=\"mlp-plan-section-label\">What You Can Do<\/div>\n<div class=\"mlp-plan-features-grid\">\n<div class=\"mlp-plan-feature-card\">\n<i class=\"fas fa-code mlp-pf-icon\"><\/i>\n<div class=\"mlp-pf-text\">\n<strong>Unlimited Tabs<\/strong>\n<span>Create, fork, save and manage as many tabs as your browser allows<\/span>\n<\/div>\n<\/div>\n<div class=\"mlp-plan-feature-card\">\n<i class=\"fas fa-mobile-alt mlp-pf-icon\"><\/i>\n<div class=\"mlp-pf-text\">\n<strong>100+ Device Presets<\/strong>\n<span>Preview on any phone, tablet or desktop resolution<\/span>\n<\/div>\n<\/div>\n<div class=\"mlp-plan-feature-card\">\n<i class=\"fas fa-layer-group mlp-pf-icon\"><\/i>\n<div class=\"mlp-pf-text\">\n<strong>All Preprocessors<\/strong>\n<span>SCSS, Less, TypeScript, Babel, CoffeeScript, Pug, Markdown<\/span>\n<\/div>\n<\/div>\n<div class=\"mlp-plan-feature-card\">\n<i class=\"fas fa-database mlp-pf-icon\"><\/i>\n<div class=\"mlp-pf-text\">\n<strong>Browser Backups<\/strong>\n<span>Save and restore your work locally at any time<\/span>\n<\/div>\n<\/div>\n<div class=\"mlp-plan-feature-card\">\n<i class=\"fas fa-users mlp-pf-icon\"><\/i>\n<div class=\"mlp-pf-text\">\n<strong>Live Collaboration<\/strong>\n<span>Host or join real-time coding sessions with others<\/span>\n<\/div>\n<\/div>\n<div class=\"mlp-plan-feature-card\">\n<i class=\"fas fa-robot mlp-pf-icon\"><\/i>\n<div class=\"mlp-pf-text\">\n<strong>AI Line Fixer<\/strong>\n<span>AI-powered automatic code fixing (60s cooldown, two-layer cache for instant repeat results)<\/span>\n<\/div>\n<\/div>\n<div class=\"mlp-plan-feature-card\">\n<i class=\"fas fa-search mlp-pf-icon\"><\/i>\n<div class=\"mlp-pf-text\">\n<strong>Code Analyzer<\/strong>\n<span>Get a full breakdown and suggestions for your HTML, CSS and JS<\/span>\n<\/div>\n<\/div>\n<div class=\"mlp-plan-feature-card\">\n<i class=\"fas fa-expand mlp-pf-icon\"><\/i>\n<div class=\"mlp-pf-text\">\n<strong>Fullscreen Editor<\/strong>\n<span>Focus mode with sidebar tab manager and live preview pane<\/span>\n<\/div>\n<\/div>\n<div class=\"mlp-plan-feature-card\">\n<i class=\"fas fa-bolt mlp-pf-icon\" style=\"color:#f0c040;\"><\/i>\n<div class=\"mlp-pf-text\">\n<strong>High-Performance Backend<\/strong>\n<span>v5.9.0: Redis\/APCu object-cache layer, chunked DB cleanup &mdash; built for up to 100k concurrent users<\/span>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"mlp-plan-section-label mlp-plan-section-label-warn\">Restrictions on Free Plan<\/div>\n<div class=\"mlp-plan-limits\">\n<div class=\"mlp-plan-limit-row\">\n<i class=\"fas fa-hourglass-half\"><\/i>\n<div>\n<strong>60-second AI cooldown<\/strong>\n<span>After each successful AI request, you must wait 60 seconds before making another. Rate limiting is now enforced via high-speed in-memory cache &mdash; no database involved.<\/span>\n<\/div>\n<\/div>\n<div class=\"mlp-plan-limit-row\">\n<i class=\"fas fa-globe\"><\/i>\n<div>\n<strong>10,000 AI requests \/ day (global pool)<\/strong>\n<span>All users share a daily pool of 10,000 AI requests (up from 2,000 in v5.8). Once the pool is exhausted, AI is unavailable until midnight reset. Cached responses do not consume the pool.<\/span>\n<\/div>\n<\/div>\n<div class=\"mlp-plan-limit-row\">\n<i class=\"fas fa-weight-hanging\"><\/i>\n<div>\n<strong>128 KB share payload limit<\/strong>\n<span>Each shared tab may contain up to 128 KB of combined HTML, CSS and JS. This is enough for any typical project.<\/span>\n<\/div>\n<\/div>\n<div class=\"mlp-plan-limit-row\">\n<i class=\"fas fa-share-alt\"><\/i>\n<div>\n<strong>Public sharing is admin-only<\/strong>\n<span>Personal read-only local copies only.<\/span>\n<\/div>\n<\/div>\n<div class=\"mlp-plan-limit-row\">\n<i class=\"fas fa-hdd\"><\/i>\n<div>\n<strong>Backups are browser-local only<\/strong>\n<span>Your backups live in this browser on this device. They are not synced to a server or other devices.<\/span>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div id=\"mlp-15-1\" class=\"mobile-live-preview-container\" data-theme=\"dark\" data-editor-theme=\"vs-dark\" data-original-defaults='{&quot;html&quot;:&quot;&lt;!DOCTYPE html&gt;\\n&lt;html&gt;\\n&lt;title&gt;HTML Tutorial&lt;\\\/title&gt;\\n&lt;body&gt;\\n&lt;h1&gt;This is a heading&lt;\\\/h1&gt;\\n&lt;p&gt;This is a paragraph.&lt;\\\/p&gt;\\n&lt;\\\/body&gt;\\n&lt;\\\/html&gt;&quot;,&quot;css&quot;:&quot;&quot;,&quot;js&quot;:&quot;&quot;}'>\n<script>\n(function(){\n  try {\n    var iid = 'mlp-15-1';\n    var stored = localStorage.getItem('mlp_ptero_settings');\n    if (!stored) return;\n    var all = JSON.parse(stored);\n    var ps = all[iid];\n    if (!ps || !ps.normalTheme || ps.normalTheme === 'default') return;\n    var themes = {\n      ocean:   {h:'linear-gradient(135deg,#0077b6 0%,#4dccff 100%)',e:'linear-gradient(135deg,#023e6e 0%,#041630 100%)',t:'linear-gradient(135deg,#012a50 0%,#041630 100%)',f:'linear-gradient(135deg,#041630 0%,#012a50 100%)',bg:'#041630'},\n      purple:  {h:'linear-gradient(135deg,#7c3aed 0%,#a78bfa 100%)',e:'linear-gradient(135deg,#2d1a4a 0%,#1a0a2e 100%)',t:'linear-gradient(135deg,#1e1040 0%,#1a0a2e 100%)',f:'linear-gradient(135deg,#1a0a2e 0%,#1e1040 100%)',bg:'#1a0a2e'},\n      forest:  {h:'linear-gradient(135deg,#1a6b2e 0%,#4ade80 100%)',e:'linear-gradient(135deg,#0a2a14 0%,#0a1a0a 100%)',t:'linear-gradient(135deg,#082010 0%,#0a1a0a 100%)',f:'linear-gradient(135deg,#0a1a0a 0%,#082010 100%)',bg:'#0a1a0a'},\n      midnight:{h:'linear-gradient(135deg,#1a1a1a 0%,#3a3a3a 100%)',e:'linear-gradient(135deg,#111 0%,#0a0a0a 100%)',t:'linear-gradient(135deg,#0a0a0a 0%,#080808 100%)',f:'linear-gradient(135deg,#0a0a0a 0%,#080808 100%)',bg:'#080808'},\n      rose:    {h:'linear-gradient(135deg,#9d174d 0%,#f472b6 100%)',e:'linear-gradient(135deg,#2d0030 0%,#1a0010 100%)',t:'linear-gradient(135deg,#1e0020 0%,#1a0010 100%)',f:'linear-gradient(135deg,#1a0010 0%,#1e0020 100%)',bg:'#1a0010'},\n      sunset:  {h:'linear-gradient(135deg,#c2410c 0%,#fbbf24 100%)',e:'linear-gradient(135deg,#2a1000 0%,#1a0a00 100%)',t:'linear-gradient(135deg,#1a0800 0%,#1a0a00 100%)',f:'linear-gradient(135deg,#1a0a00 0%,#1a0800 100%)',bg:'#1a0a00'},\n      arctic:  {h:'linear-gradient(135deg,#2563eb 0%,#93c5fd 100%)',e:'linear-gradient(135deg,#1a2a4a 0%,#0a1520 100%)',t:'linear-gradient(135deg,#0e1e36 0%,#0a1520 100%)',f:'linear-gradient(135deg,#0a1520 0%,#0e1e36 100%)',bg:'#0a1520'},\n      ember:   {h:'linear-gradient(135deg,#7f1d1d 0%,#f87171 100%)',e:'linear-gradient(135deg,#200000 0%,#1a0000 100%)',t:'linear-gradient(135deg,#180000 0%,#1a0000 100%)',f:'linear-gradient(135deg,#1a0000 0%,#180000 100%)',bg:'#1a0000'}\n    };\n    var v = themes[ps.normalTheme];\n    if (!v) return;\n    var sid = 'mlp-ptero-normal-' + iid;\n    var old = document.getElementById(sid);\n    if (old) old.parentNode.removeChild(old);\n    var css = '#'+iid+' .mlp-header{background:'+v.h+'!important;border-bottom-color:'+v.h+'!important}'\n      + '#'+iid+' .mlp-editor-section{background:'+v.e+'!important}'\n      + '#'+iid+' .mlp-editor-header-bar{background:'+v.e+'!important}'\n      + '#'+iid+' .mlp-tabs-system{background:'+v.t+'!important}'\n      + '#'+iid+' .mlp-footer{background:'+v.f+'!important}'\n      + '#'+iid+'{background:'+v.bg+'!important}'\n      + '#'+iid+' .mlp-editor-actions{background:'+v.e+'!important}'\n      + '#'+iid+' .mlp-backup-bar{background:'+v.e+'!important}'\n      + '#'+iid+' .mlp-preview-header{background:'+v.e+'!important}';\n    var el = document.createElement('style');\n    el.id = sid; el.textContent = css;\n    document.head.appendChild(el);\n  } catch(e) {}\n})();\n<\/script>\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     PTEROCOS \u2014 Normal-mode editor redesign (CodePen layout + sidebar)\n     Adds: top bar, left sidebar (projects.php style), and CodePen-style\n     three-column editor (HTML | CSS | JS) with preview stacked below.\n     The original .mlp-header is kept in DOM (JS still updates its title)\n     but hidden via CSS \u2014 the new top bar replaces it visually.\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<style id=\"ptr-codepen-style-mlp-15-1\">\n\/* Full-page editor \u2014 container is the scroll root *\/\n#mlp-15-1.mobile-live-preview-container{display:block !important;background:#0a0f1c;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,sans-serif;position:fixed !important;top:0 !important;left:0 !important;width:100vw !important;height:100vh !important;z-index:9999 !important;overflow-y:auto !important;overflow-x:hidden !important;}\n\/* Topbar sticks to top while scrolling *\/\n#mlp-15-1 .ptr-topbar{position:sticky !important;top:0 !important;z-index:10 !important;}\n\/* Hide WP admin bar so it doesn't sit on top of the editor *\/\n#wpadminbar{display:none !important;}html{margin-top:0 !important;}\n\/* Hide the original logo-based header \u2014 replaced by the new top bar *\/\n#mlp-15-1 > .mlp-header{display:none !important;}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 TOP BAR (CodePen-style flat dark) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n#mlp-15-1 .ptr-topbar{display:flex;align-items:center;justify-content:space-between;background:#1f1f1f;height:48px;padding:0 16px;border-bottom:1px solid #000;box-shadow:none;position:relative;z-index:5;flex-shrink:0;}\n#mlp-15-1 .ptr-topbar-left{display:flex;align-items:center;gap:12px;}\n#mlp-15-1 .ptr-brand{display:flex;align-items:center;gap:8px;font-size:0.875rem;font-weight:700;color:#e6e6e6;letter-spacing:0.01em;}\n#mlp-15-1 .ptr-brand svg{color:#e6e6e6;}\n#mlp-15-1 .ptr-sidebar-toggle{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;background:transparent;color:#abacae;border:1px solid #3a3a3a;border-radius:3px;cursor:pointer;transition:all 0.15s;padding:0;margin-left:4px;}\n#mlp-15-1 .ptr-sidebar-toggle:hover{background:#2c2c2c;color:#fff;border-color:#4a4a4a;}\n#mlp-15-1 .ptr-topbar-right{display:flex;align-items:center;gap:8px;}\n#mlp-15-1 .ptr-topbar-status{display:inline-flex;align-items:center;gap:6px;color:#abacae;font-size:0.75rem;padding:5px 10px;border-radius:3px;background:#2c2c2c;border:1px solid #3a3a3a;font-family:inherit;cursor:pointer;transition:background 0.15s,color 0.15s,border-color 0.15s;}\n#mlp-15-1 .ptr-topbar-status:hover{background:#363636;color:#fff;border-color:#4a4a4a;}\n#mlp-15-1 .ptr-topbar-status .ptr-dot{width:6px;height:6px;border-radius:50%;background:#47cf73;box-shadow:none;}\n#mlp-15-1 .ptr-topbar-status i{font-size:0.75rem;line-height:1;}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 SHELL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n#mlp-15-1 .ptr-shell{display:flex;width:100%;background:#0a0f1c;}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 SIDEBAR (matches projects.php .mlp-sidebar) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n#mlp-15-1 .ptr-sidebar{width:220px;flex-shrink:0;background:#0f172a;padding:20px 0;border-right:1px solid rgba(255,255,255,0.04);display:flex;flex-direction:column;transition:margin-left 0.2s ease;}\n#mlp-15-1.ptr-sidebar-collapsed .ptr-sidebar{margin-left:-220px;}\n#mlp-15-1 .ptr-sidebar-brand-row{padding:0 14px 10px;display:flex;flex-direction:column;gap:4px;border-bottom:1px solid rgba(255,255,255,0.04);margin-bottom:10px;}\n#mlp-15-1 .ptr-back-to-projects{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;padding:3px 7px 3px 4px;background:transparent;color:#64748b;border:none;border-radius:4px;font-size:0.7rem;font-weight:500;cursor:pointer;font-family:inherit;text-align:left;transition:background 0.15s,color 0.15s;}\n#mlp-15-1 .ptr-back-to-projects:hover{background:rgba(255,255,255,0.05);color:#cbd5e1;}\n#mlp-15-1 .ptr-back-to-projects svg{flex-shrink:0;color:inherit;transition:transform 0.15s;}\n#mlp-15-1 .ptr-back-to-projects:hover svg{transform:translateX(-1px);}\n#mlp-15-1 .ptr-sidebar-brand-text{font-size:0.88rem;font-weight:700;color:#fff;letter-spacing:0.005em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px;}\n#mlp-15-1 .ptr-sidebar-section-label{padding:0 18px;font-size:0.66rem;font-weight:700;color:#475569;text-transform:uppercase;letter-spacing:0.1em;margin:14px 0 8px;}\n#mlp-15-1 .ptr-sidebar-section-label:first-of-type{margin-top:0;}\n#mlp-15-1 .ptr-sidebar-nav{display:flex;flex-direction:column;gap:1px;padding:0 8px;}\n#mlp-15-1 .ptr-sidebar-link{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:6px;color:#64748b;text-decoration:none;font-size:0.875rem;transition:background 0.12s,color 0.12s;cursor:pointer;background:transparent;border:none;text-align:left;width:100%;font-family:inherit;}\n#mlp-15-1 .ptr-sidebar-link:hover{background:rgba(255,255,255,0.05);color:#cbd5e1;}\n#mlp-15-1 .ptr-sidebar-link.active{background:rgba(37,99,235,0.20);color:#93c5fd;}\n#mlp-15-1 .ptr-sidebar-link svg{flex-shrink:0;}\n#mlp-15-1 .ptr-sidebar-spacer{flex:1 1 auto;}\n#mlp-15-1 .ptr-sidebar-profile-divider{height:1px;background:rgba(255,255,255,0.04);margin:14px 18px 0;}\n#mlp-15-1 .ptr-sidebar-profile-card{display:flex;align-items:center;gap:10px;padding:14px 18px 0;}\n#mlp-15-1 .ptr-sidebar-profile-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#2563eb,#7c3aed);display:flex;align-items:center;justify-content:center;color:#fff;font-size:0.78rem;font-weight:700;flex-shrink:0;}\n#mlp-15-1 .ptr-sidebar-profile-info{flex:1;display:flex;flex-direction:column;min-width:0;}\n#mlp-15-1 .ptr-sidebar-profile-name{color:#cbd5e1;font-size:0.83rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}\n#mlp-15-1 .ptr-sidebar-profile-plan{display:inline-flex;align-items:center;gap:4px;color:#475569;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.09);border-radius:10px;padding:1px 7px;font-size:0.62rem;font-weight:600;margin-top:3px;width:fit-content;}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 MAIN PANE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n#mlp-15-1 .ptr-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 CODEPEN-STYLE EDITOR (HTML | CSS | JS row, preview below) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\/* Stack editor + preview vertically *\/\n#mlp-15-1 .mlp-main-content{display:flex !important;flex-direction:column !important;gap:0 !important;height:auto !important;flex:0 0 auto !important;}\n#mlp-15-1 .mlp-editor-section{display:flex !important;flex-direction:column !important;width:100% !important;max-width:none !important;flex:0 0 auto !important;background:#1e1e1e !important;}\n#mlp-15-1 .mlp-preview-section{display:flex !important;flex-direction:column !important;width:100% !important;max-width:none !important;flex:0 0 auto !important;background:#ffffff !important;}\n\n\/* Three editor columns side-by-side, all visible at once (CodePen) *\/\n#mlp-15-1 .mlp-editor-container{display:flex !important;flex-direction:row !important;gap:8px !important;padding:8px !important;flex:0 0 auto !important;height:380px !important;min-height:280px !important;width:100% !important;background:#1e1e1e !important;box-sizing:border-box !important;}\n#mlp-15-1 .mlp-editor-wrapper{display:flex !important;flex:1 1 0 !important;min-width:0 !important;flex-direction:column !important;border:1px solid #2a2a2a !important;border-radius:4px !important;position:relative !important;background:#1e1e1e !important;height:100% !important;opacity:1 !important;visibility:visible !important;overflow:hidden !important;box-shadow:0 1px 2px rgba(0,0,0,0.4) !important;}\n#mlp-15-1 .mlp-editor-wrapper:last-child{border-right:1px solid #2a2a2a !important;}\n#mlp-15-1 .mlp-monaco-editor{flex:1 1 auto !important;min-height:0 !important;width:100% !important;height:100% !important;}\n\n\/* CodePen-style column header (colored icon badge + label on the left, real fullscreen button on the right) *\/\n#mlp-15-1 .mlp-editor-wrapper::before{display:flex !important;align-items:center !important;gap:8px !important;padding:0 10px 0 0 !important;background:#0c0c0c !important;color:#e8e8e8 !important;font-size:0.78rem !important;font-weight:700 !important;letter-spacing:0.06em !important;text-transform:uppercase !important;border-bottom:1px solid #000 !important;font-family:\"Font Awesome 6 Brands\",\"Font Awesome 5 Brands\",\"Consolas\",\"Monaco\",monospace !important;height:30px !important;flex-shrink:0 !important;line-height:1 !important;}\n#mlp-15-1 #mlp-html-wrapper-mlp-15-1::before{content:\"\\f13b\\00a0\\00a0HTML\" !important;color:#ffffff !important;box-shadow:inset 6px 0 0 0 #e34c26 !important;padding-left:18px !important;}\n#mlp-15-1 #mlp-css-wrapper-mlp-15-1::before{content:\"\\f38b\\0000a0\\0000a0CSS\" !important;color:#ffffff !important;box-shadow:inset 6px 0 0 0 #2965f1 !important;padding-left:18px !important;}\n#mlp-15-1 #mlp-js-wrapper-mlp-15-1::before{content:\"\\f3b8\\00a0\\00a0JS\" !important;color:#ffffff !important;box-shadow:inset 6px 0 0 0 #f7df1e !important;padding-left:18px !important;}\n\n\/* Real per-panel fullscreen button \u2014 sits on top of the panel header in the top-right (shifted left to make room for the actions group) *\/\n#mlp-15-1 .ptr-panel-fs-btn{position:absolute !important;top:4px !important;right:68px !important;z-index:5 !important;width:24px !important;height:22px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;background:transparent !important;color:#abacae !important;border:1px solid transparent !important;border-radius:3px !important;cursor:pointer !important;padding:0 !important;font-size:0.78rem !important;line-height:1 !important;transition:all 0.15s !important;}\n#mlp-15-1 .ptr-panel-fs-btn:hover{background:#2c2c2c !important;color:#fff !important;border-color:#4a4a4a !important;}\n#mlp-15-1 .ptr-panel-fs-btn i{font-size:0.78rem !important;}\n\n\/* Per-panel actions group (gear + chevron) \u2014 CodePen-style header buttons in the top-right *\/\n#mlp-15-1 .ptr-panel-actions{position:absolute !important;top:4px !important;right:6px !important;z-index:6 !important;display:inline-flex !important;align-items:center !important;background:rgba(0,0,0,0.55) !important;border:1px solid #2a2a2a !important;border-radius:4px !important;overflow:hidden !important;}\n#mlp-15-1 .ptr-panel-actions > button{background:transparent !important;color:#cfd0d3 !important;border:none !important;width:26px !important;height:22px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;cursor:pointer !important;padding:0 !important;line-height:1 !important;transition:background 0.15s,color 0.15s !important;}\n#mlp-15-1 .ptr-panel-actions > button + button{border-left:1px solid #2a2a2a !important;}\n#mlp-15-1 .ptr-panel-actions > button:hover{background:#2c2c2c !important;color:#fff !important;}\n#mlp-15-1 .ptr-panel-actions > button i{font-size:0.72rem !important;line-height:1 !important;}\n\n\/* Hide the old tab-switcher buttons (no longer needed \u2014 all 3 visible) *\/\n#mlp-15-1 .mlp-editor-tabs-horizontal{display:none !important;}\n\/* Slim editor header bar (gear \/ Copy \/ fullscreen) \u2014 removed; the per-panel buttons replace it *\/\n#mlp-15-1 .mlp-editor-header-bar{display:none !important;}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 CODEPEN-STYLE HEADER BARS (tabs row + manager bar) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\/* Tabs system row (Preview 1 tab + add\/branch\/menu) *\/\n#mlp-15-1 .mlp-tabs-system{background:#1a1a1a !important;border-bottom:1px solid #000 !important;box-shadow:none !important;padding:0 !important;}\n#mlp-15-1 .mlp-tabs-container{background:transparent !important;padding:0 8px !important;}\n#mlp-15-1 .mlp-tabs-list{gap:2px !important;padding:6px 0 0 !important;}\n\n\/* Individual tab cards \u2014 CodePen-style flat tabs that lift into the editor area *\/\n#mlp-15-1 .mlp-tab{display:inline-flex !important;align-items:center !important;height:30px !important;padding:0 10px !important;background:#2c2c2c !important;color:#abacae !important;border:1px solid #000 !important;border-bottom:none !important;border-radius:4px 4px 0 0 !important;font-size:0.78rem !important;font-weight:500 !important;letter-spacing:0.02em !important;cursor:pointer !important;transition:background 0.15s,color 0.15s !important;position:relative !important;margin:0 !important;box-shadow:none !important;max-width:200px !important;min-width:80px !important;}\n#mlp-15-1 .mlp-tab:hover{background:#363636 !important;color:#e6e6e6 !important;}\n#mlp-15-1 .mlp-tab.active{background:#1e1e1e !important;color:#fff !important;border-color:#000 !important;border-bottom:1px solid #1e1e1e !important;margin-bottom:-1px !important;z-index:2 !important;}\n#mlp-15-1 .mlp-tab .mlp-tab-content{display:flex !important;align-items:center !important;gap:6px !important;flex:1 !important;min-width:0 !important;overflow:hidden !important;}\n#mlp-15-1 .mlp-tab .mlp-tab-emoji{font-size:0.85rem !important;flex-shrink:0 !important;}\n#mlp-15-1 .mlp-tab .mlp-tab-title{overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;font-weight:500 !important;}\n#mlp-15-1 .mlp-tab.active .mlp-tab-title{font-weight:600 !important;}\n#mlp-15-1 .mlp-tab .mlp-tab-saved-icon,\n#mlp-15-1 .mlp-tab .mlp-tab-forked-icon{color:#666 !important;font-size:0.7rem !important;flex-shrink:0 !important;}\n#mlp-15-1 .mlp-tab.active .mlp-tab-saved-icon,\n#mlp-15-1 .mlp-tab.active .mlp-tab-forked-icon{color:#47cf73 !important;}\n\n\/* Tab close + rename buttons inside cards *\/\n#mlp-15-1 .mlp-tab .mlp-tab-rename,\n#mlp-15-1 .mlp-tab .mlp-tab-close{background:transparent !important;border:none !important;color:#666 !important;width:18px !important;height:18px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;border-radius:3px !important;cursor:pointer !important;padding:0 !important;margin-left:4px !important;font-size:0.7rem !important;opacity:0 !important;transition:all 0.15s !important;}\n#mlp-15-1 .mlp-tab:hover .mlp-tab-rename,\n#mlp-15-1 .mlp-tab:hover .mlp-tab-close,\n#mlp-15-1 .mlp-tab.active .mlp-tab-rename,\n#mlp-15-1 .mlp-tab.active .mlp-tab-close{opacity:1 !important;}\n#mlp-15-1 .mlp-tab .mlp-tab-rename:hover{background:#3a3a3a !important;color:#e6e6e6 !important;}\n#mlp-15-1 .mlp-tab .mlp-tab-close:hover{background:#5a2a2a !important;color:#ff6b6b !important;}\n\n\/* Saved-tab subtle accent line on top *\/\n#mlp-15-1 .mlp-tab.mlp-saved-tab::before{content:\"\" !important;position:absolute !important;top:-1px !important;left:0 !important;right:0 !important;height:2px !important;background:#47cf73 !important;border-radius:4px 4px 0 0 !important;}\n#mlp-15-1 .mlp-tab.mlp-readme-tab::before{content:\"\" !important;position:absolute !important;top:-1px !important;left:0 !important;right:0 !important;height:2px !important;background:#a78bfa !important;border-radius:4px 4px 0 0 !important;}\n\n\/* Tab controls (+ add, fork, menu) \u2014 flat icon buttons *\/\n#mlp-15-1 .mlp-tabs-controls{display:flex !important;align-items:center !important;gap:2px !important;padding:0 8px !important;background:transparent !important;}\n#mlp-15-1 .mlp-tabs-controls > button,\n#mlp-15-1 .mlp-tabs-controls .mlp-add-tab-btn,\n#mlp-15-1 .mlp-tabs-controls .mlp-fork-tab-btn,\n#mlp-15-1 .mlp-tabs-controls .mlp-tab-menu-btn{background:transparent !important;color:#abacae !important;border:1px solid transparent !important;border-radius:3px !important;width:28px !important;height:28px !important;padding:0 !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;font-size:0.85rem !important;cursor:pointer !important;transition:all 0.15s !important;box-shadow:none !important;}\n#mlp-15-1 .mlp-tabs-controls > button:hover,\n#mlp-15-1 .mlp-tabs-controls .mlp-add-tab-btn:hover,\n#mlp-15-1 .mlp-tabs-controls .mlp-fork-tab-btn:hover,\n#mlp-15-1 .mlp-tabs-controls .mlp-tab-menu-btn:hover{background:#2c2c2c !important;color:#fff !important;border-color:#3a3a3a !important;}\n\n\/* Backup \/ Manager bar (PREVIEW 1 label + Manager \/ AI Assistant \/ Export \/ Save) *\/\n#mlp-15-1 .mlp-backup-bar{background:#1f1f1f !important;border-bottom:1px solid #000 !important;border-top:1px solid #1a1a1a !important;box-shadow:none !important;}\n#mlp-15-1 .mlp-current-tab-label{color:#abacae !important;font-size:0.72rem !important;font-weight:700 !important;letter-spacing:0.08em !important;text-transform:uppercase !important;background:transparent !important;border:none !important;padding:0 14px 0 12px !important;}\n#mlp-15-1 .mlp-current-tab-label i{color:#666 !important;}\n#mlp-15-1 .mlp-projects-back-btn{border-right-color:#000 !important;color:#abacae !important;}\n#mlp-15-1 .mlp-projects-back-btn:hover{background:#2c2c2c !important;color:#fff !important;}\n\n\/* Manager \/ AI Assistant tab-style buttons *\/\n#mlp-15-1 .mlp-manager-dropdown-btn,\n#mlp-15-1 .mlp-ai-btn{background:transparent !important;color:#abacae !important;border:none !important;border-bottom:2px solid transparent !important;font-size:0.78rem !important;font-weight:600 !important;letter-spacing:0.04em !important;text-transform:uppercase !important;padding:0 14px !important;}\n#mlp-15-1 .mlp-manager-dropdown-btn:hover,\n#mlp-15-1 .mlp-ai-btn:hover{color:#fff !important;background:#2c2c2c !important;}\n\n\/* Export dropdown (action-dd-btn) \u2014 flat dark *\/\n#mlp-15-1 .mlp-action-dd-btn{background:transparent !important;color:#abacae !important;border:none !important;border-radius:0 !important;padding:0 14px !important;font-size:0.78rem !important;font-weight:600 !important;letter-spacing:0.04em !important;text-transform:uppercase !important;height:100% !important;box-shadow:none !important;}\n#mlp-15-1 .mlp-action-dd-btn:hover{background:#2c2c2c !important;color:#fff !important;border-color:transparent !important;}\n\n\/* Save button \u2014 CodePen-style accent *\/\n#mlp-15-1 .mlp-save-btn{background:#2c2c2c !important;color:#47cf73 !important;border:1px solid #3a3a3a !important;border-radius:3px !important;padding:6px 14px !important;font-size:0.75rem !important;font-weight:700 !important;letter-spacing:0.05em !important;text-transform:uppercase !important;box-shadow:none !important;margin:0 8px !important;transition:all 0.15s !important;}\n#mlp-15-1 .mlp-save-btn:hover{background:#47cf73 !important;color:#1f1f1f !important;border-color:#47cf73 !important;}\n\n\/* Slim editor-header-bar buttons (gear, Copy, fullscreen) *\/\n#mlp-15-1 .mlp-copy-current-button{background:transparent !important;color:#abacae !important;border:1px solid #3a3a3a !important;border-radius:3px !important;font-size:0.72rem !important;}\n#mlp-15-1 .mlp-copy-current-button:hover{background:#2c2c2c !important;color:#fff !important;border-color:#4a4a4a !important;}\n#mlp-15-1 .mlp-fullscreen-editor-btn{background:transparent !important;color:#abacae !important;border:1px solid #3a3a3a !important;border-radius:3px !important;}\n#mlp-15-1 .mlp-fullscreen-editor-btn:hover{background:#2c2c2c !important;color:#fff !important;border-color:#4a4a4a !important;}\n\n\/* Preview always full-width below \u2014 white background as requested *\/\n#mlp-15-1 .mlp-preview-container{width:100% !important;height:480px !important;flex:0 0 auto !important;background:#ffffff !important;}\n#mlp-15-1 .mlp-preview-frame{width:100% !important;height:100% !important;background:#ffffff !important;}\n#mlp-15-1 .mlp-preview-header{background:#ffffff !important;color:#222 !important;border-bottom:1px solid #e5e7eb !important;}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n@media (max-width: 900px){\n  \/* Hide the normal-editor left sidebar entirely on mobile so the editor uses the full width. *\/\n  #mlp-15-1 .ptr-sidebar{display:none !important;}\n  #mlp-15-1 .mlp-editor-container{flex-direction:column !important;height:auto !important;}\n  #mlp-15-1 .mlp-editor-wrapper{border-right:none !important;border-bottom:1px solid #1f2937 !important;min-height:200px !important;}\n  #mlp-15-1 .mlp-editor-wrapper:last-child{border-bottom:none !important;}\n  \/* Hide the fullscreen-editor left sidebar (tabs list) on mobile so the editor uses the full width. *\/\n  #mlp-fullscreen-editor-overlay-mlp-15-1 .mlp-fullscreen-sidebar{display:none !important;}\n  #mlp-fullscreen-editor-overlay-mlp-15-1 .mlp-fullscreen-main{width:100% !important;flex:1 1 100% !important;max-width:100% !important;}\n}\n<\/style>\n\n<!-- New top bar (projects.php-style) -->\n<div class=\"ptr-topbar\">\n  <div class=\"ptr-topbar-left\">\n    <div class=\"ptr-brand\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n        <polyline points=\"16 18 22 12 16 6\"\/><polyline points=\"8 6 2 12 8 18\"\/>\n      <\/svg>\n      <span>pterocos.eu.org<\/span>\n    <\/div>\n    <button class=\"ptr-sidebar-toggle\" type=\"button\" data-instance=\"mlp-15-1\" aria-label=\"Toggle sidebar\" title=\"Toggle sidebar\">\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n        <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"\/><line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"\/><line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\"\/>\n      <\/svg>\n    <\/button>\n  <\/div>\n  <div class=\"ptr-topbar-right\">\n    <button type=\"button\" class=\"ptr-topbar-status ptr-topbar-settings-btn\" data-instance=\"mlp-15-1\" title=\"Open Settings\">\n      <i class=\"fas fa-cog\"><\/i>\n      <span>Settings<\/span>\n    <\/button>\n  <\/div>\n<\/div>\n\n<!-- Shell: sidebar + main content -->\n<div class=\"ptr-shell\">\n  <aside class=\"ptr-sidebar\" role=\"navigation\" aria-label=\"Editor navigation\">\n    <div class=\"ptr-sidebar-brand-row\">\n      <button type=\"button\" class=\"ptr-back-to-projects\" data-ptr-action=\"back-to-projects\" aria-label=\"Back to Projects\" title=\"Back to Projects\">\n        <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n          <polyline points=\"15 18 9 12 15 6\"\/>\n        <\/svg>\n        <span>Projects<\/span>\n      <\/button>\n      <span class=\"ptr-sidebar-brand-text ptr-project-name\" title=\"Untitled Project\">Untitled Project<\/span>\n    <\/div>\n\n    <div class=\"ptr-sidebar-section-label\">Workspace<\/div>\n    <nav class=\"ptr-sidebar-nav\">\n      <button type=\"button\" class=\"ptr-sidebar-link active\" data-ptr-action=\"editor\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n          <polyline points=\"16 18 22 12 16 6\"\/><polyline points=\"8 6 2 12 8 18\"\/>\n        <\/svg>\n        Editor\n      <\/button>\n      <button type=\"button\" class=\"ptr-sidebar-link\" data-ptr-action=\"preview\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n          <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"\/><circle cx=\"12\" cy=\"12\" r=\"3\"\/>\n        <\/svg>\n        Preview\n      <\/button>\n    <\/nav>\n\n    <div class=\"ptr-sidebar-section-label\">Tools<\/div>\n    <nav class=\"ptr-sidebar-nav\">\n      <button type=\"button\" class=\"ptr-sidebar-link\" data-ptr-action=\"insert-media\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n          <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"\/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/><polyline points=\"21 15 16 10 5 21\"\/>\n        <\/svg>\n        Insert Media\n      <\/button>\n      <button type=\"button\" class=\"ptr-sidebar-link\" data-ptr-action=\"backups\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n          <ellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\"\/><path d=\"M21 12c0 1.66-4 3-9 3s-9-1.34-9-3\"\/><path d=\"M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5\"\/>\n        <\/svg>\n        Backups\n      <\/button>\n      <button type=\"button\" class=\"ptr-sidebar-link\" data-ptr-action=\"fullscreen-preview\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n          <path d=\"M8 3H5a2 2 0 0 0-2 2v3\"\/><path d=\"M21 8V5a2 2 0 0 0-2-2h-3\"\/><path d=\"M3 16v3a2 2 0 0 0 2 2h3\"\/><path d=\"M16 21h3a2 2 0 0 0 2-2v-3\"\/>\n        <\/svg>\n        Fullscreen Preview\n      <\/button>\n      <button type=\"button\" class=\"ptr-sidebar-link\" data-ptr-action=\"readme\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n          <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"\/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"\/>\n        <\/svg>\n        Create Read.Me\n      <\/button>\n      <button type=\"button\" class=\"ptr-sidebar-link\" data-ptr-action=\"fullscreen-editor\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n          <polyline points=\"15 3 21 3 21 9\"\/><polyline points=\"9 21 3 21 3 15\"\/><line x1=\"21\" y1=\"3\" x2=\"14\" y2=\"10\"\/><line x1=\"3\" y1=\"21\" x2=\"10\" y2=\"14\"\/>\n        <\/svg>\n        Fullscreen Editor\n      <\/button>\n    <\/nav>\n\n    <div class=\"ptr-sidebar-spacer\"><\/div>\n    <div class=\"ptr-sidebar-profile-divider\"><\/div>\n    <div class=\"ptr-sidebar-profile-card\">\n      <div class=\"ptr-sidebar-profile-avatar\">P<\/div>\n      <div class=\"ptr-sidebar-profile-info\">\n        <span class=\"ptr-sidebar-profile-name\">Editor<\/span>\n        <span class=\"ptr-sidebar-profile-plan\">\n          <svg width=\"9\" height=\"9\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <path d=\"M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z\"\/>\n          <\/svg>\n          Developer\n        <\/span>\n      <\/div>\n    <\/div>\n  <\/aside>\n\n  <div class=\"ptr-main\">\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     \/PTEROCOS REDESIGN \u2014 original .mlp-header now starts (kept hidden)\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"mlp-header\">\n<img decoding=\"async\" src=\"https:\/\/pterocos.eu.org\/wp-content\/uploads\/2026\/07\/pterocos.png\" alt=\"Logo\" class=\"mlp-header-logo\" \/>\n<h1 id=\"mlp-header-title\" style=\"white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;\">Beta<\/h1>\n<script>\n(function(){\n  function getCurrentProjectName(){\n    var projName = '';\n    try {\n      var projId = window.mlpCurrentProjectId;\n      if(projId){\n        var raw = localStorage.getItem('mlp_projects');\n        if(raw){\n          var projects = JSON.parse(raw);\n          for(var i=0;i<projects.length;i++){\n            if(projects[i].id===projId){ projName = projects[i].name||''; break; }\n          }\n        }\n      }\n    } catch(e){}\n    return projName;\n  }\n  function updateBrandLabels(projName){\n    var label = projName || 'Untitled Project';\n    var nodes = document.getElementsByClassName('ptr-project-name');\n    for(var i=0;i<nodes.length;i++){\n      if(nodes[i].textContent !== label){\n        nodes[i].textContent = label;\n      }\n      if(nodes[i].getAttribute('title') !== label){\n        nodes[i].setAttribute('title', label);\n      }\n    }\n  }\n  function updateHeaderTitle(){\n    var projName = getCurrentProjectName();\n    updateBrandLabels(projName);\n    var h1 = document.getElementById('mlp-header-title');\n    if(!h1) return;\n    var tabName = '';\n    \/\/ Get active tab name\n    try {\n      if(window.monacoInstances){\n        var keys = Object.keys(window.monacoInstances);\n        for(var k=0;k<keys.length;k++){\n          var inst = window.monacoInstances[keys[k]];\n          if(inst && inst.activeTabId && inst.tabs && inst.tabs[inst.activeTabId]){\n            tabName = inst.tabs[inst.activeTabId].title||'';\n            break;\n          }\n        }\n      }\n    } catch(e){}\n    if(projName && tabName){\n      h1.textContent = projName + ' \\u2192 ' + tabName;\n    } else if(projName){\n      h1.textContent = projName;\n    } else if(tabName){\n      h1.textContent = tabName;\n    } else {\n      h1.textContent = 'Beta';\n    }\n  }\n  \/\/ Run after a short delay to ensure everything is initialized\n  setTimeout(updateHeaderTitle, 500);\n  setTimeout(updateHeaderTitle, 1500);\n  \/\/ Also update on tab switch and project load\n  var _origLoadProject = window.mlpLoadProject;\n  window.mlpLoadProject = function(p){\n    if(typeof _origLoadProject === 'function') _origLoadProject.apply(this, arguments);\n    setTimeout(updateHeaderTitle, 300);\n  };\n  \/\/ Poll for tab changes\n  setInterval(updateHeaderTitle, 2000);\n})();\n<\/script>\n<!-- Gear Settings Menu -->\n<div class=\"mlp-editor-settings-wrap\" data-instance=\"mlp-15-1\" style=\"position:relative;display:inline-flex;align-items:center;margin-top:4px;\">\n  <span class=\"mlp-editor-settings-gear\" title=\"Settings\" style=\"cursor:pointer;color:rgba(255,255,255,0.8);font-size:1.05rem;opacity:0.8;display:inline-flex;align-items:center;padding:5px 9px;border-radius:6px;transition:all 0.2s;background:rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.25);\">\n    <i class=\"fas fa-cog\" style=\"transition:transform 0.35s ease;margin-right:4px;\"><\/i><span style=\"font-size:0.78rem;font-weight:600;letter-spacing:0.03em;\">Settings<\/span>\n  <\/span>\n\n  <!-- TOP MENU \u2014 styled like More dropdown -->\n  <div class=\"mlp-gear-top-menu\" style=\"display:none;position:fixed;background:#0c0c0c;border:1px solid #444;border-radius:0 !important;min-width:220px;box-shadow:0 20px 50px rgba(0,0,0,0.9);z-index:9999999;flex-direction:column;font-family:'Consolas','Monaco','Courier New',monospace;animation:mlp-more-dropdown-fade 0.15s ease;\">\n    <div class=\"mlp-more-dropdown-header\">\n      <div class=\"mlp-more-dropdown-header-dot\" style=\"background:#4dccff;box-shadow:0 0 6px rgba(77,204,255,0.7);\"><\/div>\n      <span class=\"mlp-more-dropdown-header-label\">Settings<\/span>\n    <\/div>\n    <button class=\"mlp-more-dropdown-item mlp-gear-menu-btn\" data-panel=\"language\" data-instance=\"mlp-15-1\">\n      <i class=\"fas fa-language\" style=\"color:#4dccff;\"><\/i> Language\n    <\/button>\n    <button class=\"mlp-more-dropdown-item mlp-gear-menu-btn\" data-panel=\"editor\" data-instance=\"mlp-15-1\">\n      <i class=\"fas fa-sliders-h\" style=\"color:#a78bfa;\"><\/i> Editor Appearance &amp; Settings\n    <\/button>\n    <button class=\"mlp-more-dropdown-item mlp-gear-menu-btn\" data-panel=\"ptero\" data-instance=\"mlp-15-1\">\n      <i class=\"fas fa-paint-brush\" style=\"color:#f59e0b;\"><\/i> Ptero Appearance\n    <\/button>\n    <button class=\"mlp-more-dropdown-item mlp-gear-menu-btn\" data-panel=\"privacy\" data-instance=\"mlp-15-1\">\n      <i class=\"fas fa-shield-alt\" style=\"color:#4ec9b0;\"><\/i> Privacy\n    <\/button>\n  <\/div>\n\n  <!-- PANEL: Language -->\n  <div class=\"mlp-gear-panel mlp-gear-panel-language\" data-instance=\"mlp-15-1\" style=\"display:none;position:fixed;background:#0c0c0c;border:1px solid #444;border-radius:0 !important;min-width:260px;box-shadow:0 20px 50px rgba(0,0,0,0.9);z-index:9999999;font-family:'Consolas','Monaco','Courier New',monospace;animation:mlp-more-dropdown-fade 0.15s ease;\">\n    <div class=\"mlp-more-dropdown-header\">\n      <div class=\"mlp-more-dropdown-header-dot\" style=\"background:#4dccff;box-shadow:0 0 6px rgba(77,204,255,0.6);\"><\/div>\n      <span class=\"mlp-more-dropdown-header-label\" style=\"flex:1;\">Language<\/span>\n      <button class=\"mlp-gear-back-btn\" style=\"background:none;border:none;color:#666;cursor:pointer;font-size:0.72rem;padding:0 0 0 8px;display:flex;align-items:center;gap:4px;\"><i class=\"fas fa-arrow-left\"><\/i> Back<\/button>\n    <\/div>\n    <div style=\"padding:12px 16px;\">\n      <p style=\"font-size:0.75rem;color:#555;margin:0 0 10px;line-height:1.5;\">The editor interface language. Currently only English is available.<\/p>\n      <div style=\"position:relative;\">\n        <select disabled style=\"width:100%;padding:6px 28px 6px 10px;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:0;color:#4dccff;font-size:0.82rem;font-family:inherit;appearance:none;-webkit-appearance:none;cursor:not-allowed;opacity:0.85;\">\n          <option>\ud83c\uddec\ud83c\udde7  English<\/option>\n        <\/select>\n        <i class=\"fas fa-lock\" style=\"position:absolute;right:9px;top:50%;transform:translateY(-50%);color:#444;font-size:0.6rem;pointer-events:none;\"><\/i>\n      <\/div>\n      <p style=\"font-size:0.65rem;color:#3a3a3a;margin:6px 0 0;font-style:italic;\">More languages may be added in future updates.<\/p>\n    <\/div>\n  <\/div>\n\n  <!-- PANEL: Editor Appearance & Settings -->\n  <div class=\"mlp-gear-panel mlp-gear-panel-editor\" data-instance=\"mlp-15-1\" style=\"display:none;position:fixed;background:#0c0c0c;border:1px solid #444;border-radius:0 !important;min-width:268px;max-height:500px;overflow-y:auto;box-shadow:0 20px 50px rgba(0,0,0,0.9);z-index:9999999;font-family:'Consolas','Monaco','Courier New',monospace;animation:mlp-more-dropdown-fade 0.15s ease;scrollbar-width:thin;scrollbar-color:#2a2a2a transparent;\">\n    <div class=\"mlp-more-dropdown-header\" style=\"position:sticky;top:0;z-index:2;background:#161616;\">\n      <div class=\"mlp-more-dropdown-header-dot\" style=\"background:#a78bfa;box-shadow:0 0 6px rgba(167,139,250,0.6);\"><\/div>\n      <span class=\"mlp-more-dropdown-header-label\" style=\"flex:1;\">Editor Appearance &amp; Settings<\/span>\n      <button class=\"mlp-gear-back-btn\" style=\"background:none;border:none;color:#666;cursor:pointer;font-size:0.72rem;padding:0 0 0 8px;display:flex;align-items:center;gap:4px;\"><i class=\"fas fa-arrow-left\"><\/i> Back<\/button>\n    <\/div>\n    <!-- Appearance section label -->\n    <div style=\"padding:6px 16px 2px;\"><span style=\"font-size:0.6rem;color:#a78bfa;text-transform:uppercase;letter-spacing:0.1em;font-weight:700;opacity:0.7;\">Appearance<\/span><\/div>\n    <!-- Editor Theme -->\n    <div style=\"padding:5px 16px 10px;border-bottom:1px solid #1a1a1a;\">\n      <label style=\"font-size:0.72rem;color:#888;display:flex;align-items:center;gap:5px;margin-bottom:5px;\"><i class=\"fas fa-palette\" style=\"color:#a78bfa;width:13px;text-align:center;font-size:0.7rem;\"><\/i>Editor Theme<\/label>\n      <div style=\"position:relative;\">\n        <select class=\"mlp-settings-theme-select\" data-instance=\"mlp-15-1\" style=\"width:100%;padding:5px 24px 5px 9px;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:0;color:#ccc;font-size:0.78rem;font-family:inherit;appearance:none;-webkit-appearance:none;cursor:pointer;outline:none;\">\n          <optgroup label=\"\u2500\u2500 Dark \u2500\u2500\"><option value=\"vs-dark\">VS Dark<\/option><option value=\"hc-black\">High Contrast Dark<\/option><\/optgroup>\n          <optgroup label=\"\u2500\u2500 Light \u2500\u2500\"><option value=\"vs\">VS Light<\/option><option value=\"hc-light\">High Contrast Light<\/option><\/optgroup>\n          <optgroup label=\"\u2500\u2500 Custom \u2500\u2500\">\n            <option value=\"mlp-monokai\">Monokai<\/option><option value=\"mlp-dracula\">Dracula<\/option><option value=\"mlp-nord\">Nord<\/option>\n            <option value=\"mlp-night-owl\">Night Owl<\/option><option value=\"mlp-solarized-dark\">Solarized Dark<\/option><option value=\"mlp-solarized-light\">Solarized Light<\/option>\n            <option value=\"mlp-github-dark\">GitHub Dark<\/option><option value=\"mlp-github-light\">GitHub Light<\/option><option value=\"mlp-one-dark\">One Dark Pro<\/option>\n            <option value=\"mlp-cobalt\">Cobalt2<\/option><option value=\"mlp-synthwave\">SynthWave '84<\/option><option value=\"mlp-abyss\">Abyss<\/option><option value=\"mlp-tokyo-night\">Tokyo Night<\/option>\n          <\/optgroup>\n        <\/select>\n        <i class=\"fas fa-chevron-down\" style=\"position:absolute;right:8px;top:50%;transform:translateY(-50%);color:#555;font-size:0.55rem;pointer-events:none;\"><\/i>\n      <\/div>\n    <\/div>\n    <!-- Font Size -->\n    <div style=\"padding:7px 16px;border-bottom:1px solid #1a1a1a;display:flex;align-items:center;justify-content:space-between;\">\n      <label style=\"font-size:0.78rem;color:#aaa;display:flex;align-items:center;gap:5px;flex:1;\"><i class=\"fas fa-text-height\" style=\"color:#a78bfa;width:13px;text-align:center;font-size:0.7rem;\"><\/i>Font Size<\/label>\n      <div style=\"display:flex;align-items:center;gap:5px;\">\n        <button class=\"mlp-settings-font-dec\" data-instance=\"mlp-15-1\" style=\"width:20px;height:20px;background:rgba(255,255,255,0.06);border:1px solid #2a2a2a;border-radius:0;color:#ccc;cursor:pointer;font-size:0.85rem;display:flex;align-items:center;justify-content:center;line-height:1;\">\u2212<\/button>\n        <span class=\"mlp-settings-font-val\" style=\"font-size:0.8rem;color:#4dccff;min-width:24px;text-align:center;font-weight:700;\">14<\/span>\n        <button class=\"mlp-settings-font-inc\" data-instance=\"mlp-15-1\" style=\"width:20px;height:20px;background:rgba(255,255,255,0.06);border:1px solid #2a2a2a;border-radius:0;color:#ccc;cursor:pointer;font-size:0.85rem;display:flex;align-items:center;justify-content:center;line-height:1;\">+<\/button>\n      <\/div>\n    <\/div>\n    <!-- Tab Size -->\n    <div style=\"padding:7px 16px;border-bottom:1px solid #1a1a1a;display:flex;align-items:center;justify-content:space-between;\">\n      <label style=\"font-size:0.78rem;color:#aaa;display:flex;align-items:center;gap:5px;flex:1;\"><i class=\"fas fa-arrows-alt-h\" style=\"color:#a78bfa;width:13px;text-align:center;font-size:0.7rem;\"><\/i>Tab Size<\/label>\n      <div style=\"position:relative;\">\n        <select class=\"mlp-settings-tabsize-select\" data-instance=\"mlp-15-1\" style=\"padding:4px 22px 4px 8px;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:0;color:#ccc;font-size:0.78rem;font-family:inherit;appearance:none;-webkit-appearance:none;cursor:pointer;outline:none;\">\n          <option value=\"2\">2 spaces<\/option><option value=\"4\" selected>4 spaces<\/option><option value=\"8\">8 spaces<\/option>\n        <\/select>\n        <i class=\"fas fa-chevron-down\" style=\"position:absolute;right:6px;top:50%;transform:translateY(-50%);color:#555;font-size:0.5rem;pointer-events:none;\"><\/i>\n      <\/div>\n    <\/div>\n    <!-- Cursor Style -->\n    <div style=\"padding:7px 16px;border-bottom:1px solid #1a1a1a;display:flex;align-items:center;justify-content:space-between;\">\n      <label style=\"font-size:0.78rem;color:#aaa;display:flex;align-items:center;gap:5px;flex:1;\"><i class=\"fas fa-i-cursor\" style=\"color:#a78bfa;width:13px;text-align:center;font-size:0.7rem;\"><\/i>Cursor Style<\/label>\n      <div style=\"position:relative;\">\n        <select class=\"mlp-settings-cursor-select\" data-instance=\"mlp-15-1\" style=\"padding:4px 22px 4px 8px;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:0;color:#ccc;font-size:0.78rem;font-family:inherit;appearance:none;-webkit-appearance:none;cursor:pointer;outline:none;\">\n          <option value=\"line\" selected>Line<\/option><option value=\"block\">Block<\/option><option value=\"underline\">Underline<\/option>\n          <option value=\"line-thin\">Line Thin<\/option><option value=\"block-outline\">Block Outline<\/option><option value=\"underline-thin\">Underline Thin<\/option>\n        <\/select>\n        <i class=\"fas fa-chevron-down\" style=\"position:absolute;right:6px;top:50%;transform:translateY(-50%);color:#555;font-size:0.5rem;pointer-events:none;\"><\/i>\n      <\/div>\n    <\/div>\n    <!-- Behavior label -->\n    <div style=\"padding:6px 16px 2px;\"><span style=\"font-size:0.6rem;color:#4ec9b0;text-transform:uppercase;letter-spacing:0.1em;font-weight:700;opacity:0.7;\">Behavior<\/span><\/div>\n    <!-- Toggles -->\n    <div style=\"padding:6px 16px;border-bottom:1px solid #1a1a1a;display:flex;align-items:center;justify-content:space-between;\"><label style=\"font-size:0.78rem;color:#ccc;display:flex;align-items:center;gap:7px;\"><i class=\"fas fa-indent\" style=\"color:#4ec9b0;width:13px;text-align:center;font-size:0.7rem;\"><\/i>Word Wrap<\/label><label style=\"position:relative;display:inline-block;width:32px;height:17px;cursor:pointer;flex-shrink:0;\"><input type=\"checkbox\" class=\"mlp-settings-wrap-toggle\" data-instance=\"mlp-15-1\" style=\"opacity:0;width:0;height:0;position:absolute;\"><span class=\"mlp-settings-toggle-slider\" style=\"position:absolute;top:0;left:0;right:0;bottom:0;background:#2a2a2a;border-radius:17px;transition:0.2s;\"><\/span><\/label><\/div>\n    <div style=\"padding:6px 16px;border-bottom:1px solid #1a1a1a;display:flex;align-items:center;justify-content:space-between;\"><label style=\"font-size:0.78rem;color:#ccc;display:flex;align-items:center;gap:7px;\"><i class=\"fas fa-code\" style=\"color:#4ec9b0;width:13px;text-align:center;font-size:0.7rem;\"><\/i>Auto Close Brackets<\/label><label style=\"position:relative;display:inline-block;width:32px;height:17px;cursor:pointer;flex-shrink:0;\"><input type=\"checkbox\" class=\"mlp-settings-brackets-toggle\" data-instance=\"mlp-15-1\" checked style=\"opacity:0;width:0;height:0;position:absolute;\"><span class=\"mlp-settings-toggle-slider\" style=\"position:absolute;top:0;left:0;right:0;bottom:0;background:#4dccff;border-radius:17px;transition:0.2s;\"><\/span><\/label><\/div>\n    <div style=\"padding:6px 16px;border-bottom:1px solid #1a1a1a;display:flex;align-items:center;justify-content:space-between;\"><label style=\"font-size:0.78rem;color:#ccc;display:flex;align-items:center;gap:7px;\"><i class=\"fas fa-paste\" style=\"color:#4ec9b0;width:13px;text-align:center;font-size:0.7rem;\"><\/i>Format on Paste<\/label><label style=\"position:relative;display:inline-block;width:32px;height:17px;cursor:pointer;flex-shrink:0;\"><input type=\"checkbox\" class=\"mlp-settings-formatpaste-toggle\" data-instance=\"mlp-15-1\" style=\"opacity:0;width:0;height:0;position:absolute;\"><span class=\"mlp-settings-toggle-slider\" style=\"position:absolute;top:0;left:0;right:0;bottom:0;background:#2a2a2a;border-radius:17px;transition:0.2s;\"><\/span><\/label><\/div>\n    <div style=\"padding:6px 16px;border-bottom:1px solid #1a1a1a;display:flex;align-items:center;justify-content:space-between;\"><label style=\"font-size:0.78rem;color:#ccc;display:flex;align-items:center;gap:7px;\"><i class=\"fas fa-scroll\" style=\"color:#4ec9b0;width:13px;text-align:center;font-size:0.7rem;\"><\/i>Smooth Scrolling<\/label><label style=\"position:relative;display:inline-block;width:32px;height:17px;cursor:pointer;flex-shrink:0;\"><input type=\"checkbox\" class=\"mlp-settings-smooth-toggle\" data-instance=\"mlp-15-1\" checked style=\"opacity:0;width:0;height:0;position:absolute;\"><span class=\"mlp-settings-toggle-slider\" style=\"position:absolute;top:0;left:0;right:0;bottom:0;background:#4dccff;border-radius:17px;transition:0.2s;\"><\/span><\/label><\/div>\n    <!-- Display label -->\n    <div style=\"padding:6px 16px 2px;\"><span style=\"font-size:0.6rem;color:#f59e0b;text-transform:uppercase;letter-spacing:0.1em;font-weight:700;opacity:0.7;\">Display<\/span><\/div>\n    <div style=\"padding:6px 16px;border-bottom:1px solid #1a1a1a;display:flex;align-items:center;justify-content:space-between;\"><label style=\"font-size:0.78rem;color:#ccc;display:flex;align-items:center;gap:7px;\"><i class=\"fas fa-map\" style=\"color:#f59e0b;width:13px;text-align:center;font-size:0.7rem;\"><\/i>Minimap<\/label><label style=\"position:relative;display:inline-block;width:32px;height:17px;cursor:pointer;flex-shrink:0;\"><input type=\"checkbox\" class=\"mlp-settings-minimap-toggle\" data-instance=\"mlp-15-1\" style=\"opacity:0;width:0;height:0;position:absolute;\"><span class=\"mlp-settings-toggle-slider\" style=\"position:absolute;top:0;left:0;right:0;bottom:0;background:#4dccff;border-radius:17px;transition:0.2s;\"><\/span><\/label><\/div>\n    <div style=\"padding:6px 16px;border-bottom:1px solid #1a1a1a;display:flex;align-items:center;justify-content:space-between;\"><label style=\"font-size:0.78rem;color:#ccc;display:flex;align-items:center;gap:7px;\"><i class=\"fas fa-list-ol\" style=\"color:#f59e0b;width:13px;text-align:center;font-size:0.7rem;\"><\/i>Line Numbers<\/label><label style=\"position:relative;display:inline-block;width:32px;height:17px;cursor:pointer;flex-shrink:0;\"><input type=\"checkbox\" class=\"mlp-settings-lines-toggle\" data-instance=\"mlp-15-1\" checked style=\"opacity:0;width:0;height:0;position:absolute;\"><span class=\"mlp-settings-toggle-slider\" style=\"position:absolute;top:0;left:0;right:0;bottom:0;background:#4dccff;border-radius:17px;transition:0.2s;\"><\/span><\/label><\/div>\n    <div style=\"padding:6px 16px;border-bottom:1px solid #1a1a1a;display:flex;align-items:center;justify-content:space-between;\"><label style=\"font-size:0.78rem;color:#ccc;display:flex;align-items:center;gap:7px;\"><i class=\"fas fa-eye\" style=\"color:#f59e0b;width:13px;text-align:center;font-size:0.7rem;\"><\/i>Show Whitespace<\/label><label style=\"position:relative;display:inline-block;width:32px;height:17px;cursor:pointer;flex-shrink:0;\"><input type=\"checkbox\" class=\"mlp-settings-whitespace-toggle\" data-instance=\"mlp-15-1\" style=\"opacity:0;width:0;height:0;position:absolute;\"><span class=\"mlp-settings-toggle-slider\" style=\"position:absolute;top:0;left:0;right:0;bottom:0;background:#2a2a2a;border-radius:17px;transition:0.2s;\"><\/span><\/label><\/div>\n    <div style=\"padding:6px 16px;border-bottom:1px solid #1a1a1a;display:flex;align-items:center;justify-content:space-between;\"><label style=\"font-size:0.78rem;color:#ccc;display:flex;align-items:center;gap:7px;\"><i class=\"fas fa-brackets-curly\" style=\"color:#f59e0b;width:13px;text-align:center;font-size:0.7rem;\"><\/i>Bracket Guides<\/label><label style=\"position:relative;display:inline-block;width:32px;height:17px;cursor:pointer;flex-shrink:0;\"><input type=\"checkbox\" class=\"mlp-settings-bracketguides-toggle\" data-instance=\"mlp-15-1\" checked style=\"opacity:0;width:0;height:0;position:absolute;\"><span class=\"mlp-settings-toggle-slider\" style=\"position:absolute;top:0;left:0;right:0;bottom:0;background:#4dccff;border-radius:17px;transition:0.2s;\"><\/span><\/label><\/div>\n    <!-- Reset -->\n    <button class=\"mlp-settings-reset-btn\" data-instance=\"mlp-15-1\" style=\"width:100%;padding:9px 16px;background:rgba(209,105,105,0.1);border:none;border-top:1px solid #1e1e1e;color:#d16969;font-size:0.78rem;font-family:inherit;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all 0.18s;letter-spacing:0.03em;border-radius:0;\">\n      <i class=\"fas fa-undo-alt\" style=\"font-size:0.7rem;\"><\/i> Reset to Defaults\n    <\/button>\n  <\/div>\n\n  <!-- PANEL: Ptero Appearance -->\n  <div class=\"mlp-gear-panel mlp-gear-panel-ptero\" data-instance=\"mlp-15-1\" style=\"display:none;position:fixed;background:#0c0c0c;border:1px solid #444;border-radius:0 !important;min-width:300px;box-shadow:0 20px 50px rgba(0,0,0,0.9);z-index:9999999;font-family:'Consolas','Monaco','Courier New',monospace;animation:mlp-more-dropdown-fade 0.15s ease;overflow:hidden;\">\n    <div class=\"mlp-more-dropdown-header\" style=\"background:#161616;\">\n      <div class=\"mlp-more-dropdown-header-dot\" style=\"background:#f59e0b;box-shadow:0 0 6px rgba(245,158,11,0.6);\"><\/div>\n      <span class=\"mlp-more-dropdown-header-label\" style=\"flex:1;\">Ptero Appearance<\/span>\n      <button class=\"mlp-gear-back-btn\" style=\"background:none;border:none;color:#666;cursor:pointer;font-size:0.72rem;padding:0 0 0 8px;display:flex;align-items:center;gap:4px;\"><i class=\"fas fa-arrow-left\"><\/i> Back<\/button>\n    <\/div>\n    <!-- Fullscreen Mode -->\n    <div style=\"padding:8px 16px 4px;display:flex;align-items:center;gap:6px;border-bottom:1px solid #1a1a1a;\">\n      <i class=\"fas fa-expand\" style=\"color:#4dccff;font-size:0.68rem;\"><\/i>\n      <span style=\"font-size:0.62rem;color:#4dccff;text-transform:uppercase;letter-spacing:0.1em;font-weight:700;opacity:0.8;\">Fullscreen Mode<\/span>\n    <\/div>\n    <div style=\"padding:8px 16px 12px;border-bottom:1px solid #1a1a1a;\">\n      <p style=\"font-size:0.68rem;color:#555;margin:0 0 8px;\">Changes the fullscreen editor look.<\/p>\n      <div class=\"mlp-ptero-theme-grid\" data-mode=\"fullscreen\" data-instance=\"mlp-15-1\" style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:6px;\">\n        <button class=\"mlp-ptero-theme-btn\" data-theme=\"default\" data-mode=\"fullscreen\" data-instance=\"mlp-15-1\" style=\"border:2px solid #333;padding:7px 4px;background:#0d0f14;cursor:pointer;transition:all 0.15s;display:flex;flex-direction:column;align-items:center;gap:3px;border-radius:0;\"><span style=\"width:100%;height:14px;background:#161b27;display:block;border:1px solid #222;\"><\/span><span style=\"font-size:0.58rem;color:#aaa;font-family:inherit;\">Default<\/span><\/button>\n        <button class=\"mlp-ptero-theme-btn\" data-theme=\"ocean\" data-mode=\"fullscreen\" data-instance=\"mlp-15-1\" style=\"border:2px solid #333;padding:7px 4px;background:#041630;cursor:pointer;transition:all 0.15s;display:flex;flex-direction:column;align-items:center;gap:3px;border-radius:0;\"><span style=\"width:100%;height:14px;background:linear-gradient(135deg,#041630,#0a2a50);display:block;\"><\/span><span style=\"font-size:0.58rem;color:#aaa;font-family:inherit;\">Ocean<\/span><\/button>\n        <button class=\"mlp-ptero-theme-btn\" data-theme=\"purple\" data-mode=\"fullscreen\" data-instance=\"mlp-15-1\" style=\"border:2px solid #333;padding:7px 4px;background:#0f0a1e;cursor:pointer;transition:all 0.15s;display:flex;flex-direction:column;align-items:center;gap:3px;border-radius:0;\"><span style=\"width:100%;height:14px;background:linear-gradient(135deg,#1a0a2e,#2d1a4a);display:block;\"><\/span><span style=\"font-size:0.58rem;color:#aaa;font-family:inherit;\">Purple<\/span><\/button>\n        <button class=\"mlp-ptero-theme-btn\" data-theme=\"forest\" data-mode=\"fullscreen\" data-instance=\"mlp-15-1\" style=\"border:2px solid #333;padding:7px 4px;background:#060f06;cursor:pointer;transition:all 0.15s;display:flex;flex-direction:column;align-items:center;gap:3px;border-radius:0;\"><span style=\"width:100%;height:14px;background:linear-gradient(135deg,#0a1a0a,#142a14);display:block;\"><\/span><span style=\"font-size:0.58rem;color:#aaa;font-family:inherit;\">Forest<\/span><\/button>\n        <button class=\"mlp-ptero-theme-btn\" data-theme=\"midnight\" data-mode=\"fullscreen\" data-instance=\"mlp-15-1\" style=\"border:2px solid #333;padding:7px 4px;background:#000;cursor:pointer;transition:all 0.15s;display:flex;flex-direction:column;align-items:center;gap:3px;border-radius:0;\"><span style=\"width:100%;height:14px;background:#000;display:block;border:1px solid #1a1a1a;\"><\/span><span style=\"font-size:0.58rem;color:#aaa;font-family:inherit;\">Midnight<\/span><\/button>\n        <button class=\"mlp-ptero-theme-btn\" data-theme=\"rose\" data-mode=\"fullscreen\" data-instance=\"mlp-15-1\" style=\"border:2px solid #333;padding:7px 4px;background:#1a0010;cursor:pointer;transition:all 0.15s;display:flex;flex-direction:column;align-items:center;gap:3px;border-radius:0;\"><span style=\"width:100%;height:14px;background:linear-gradient(135deg,#1a0010,#2d0020);display:block;\"><\/span><span style=\"font-size:0.58rem;color:#aaa;font-family:inherit;\">Rose<\/span><\/button>\n      <\/div>\n    <\/div>\n    <!-- Reset Ptero -->\n    <button class=\"mlp-ptero-reset-btn\" data-instance=\"mlp-15-1\" style=\"width:100%;padding:9px 16px;background:rgba(209,105,105,0.1);border:none;color:#d16969;font-size:0.78rem;font-family:inherit;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all 0.18s;letter-spacing:0.03em;border-radius:0;\">\n      <i class=\"fas fa-undo-alt\" style=\"font-size:0.7rem;\"><\/i> Reset Ptero Theme\n    <\/button>\n  <\/div>\n\n  <!-- PANEL: Privacy -->\n  <div class=\"mlp-gear-panel mlp-gear-panel-privacy\" data-instance=\"mlp-15-1\" style=\"display:none;position:fixed;background:#0c0c0c;border:1px solid #444;border-radius:0 !important;min-width:280px;box-shadow:0 20px 50px rgba(0,0,0,0.9);z-index:9999999;font-family:'Consolas','Monaco','Courier New',monospace;animation:mlp-more-dropdown-fade 0.15s ease;overflow:hidden;\">\n    <div class=\"mlp-more-dropdown-header\" style=\"background:#161616;\">\n      <div class=\"mlp-more-dropdown-header-dot\" style=\"background:#4ec9b0;box-shadow:0 0 6px rgba(78,201,176,0.6);\"><\/div>\n      <span class=\"mlp-more-dropdown-header-label\" style=\"flex:1;\">Privacy<\/span>\n      <button class=\"mlp-gear-back-btn\" style=\"background:none;border:none;color:#666;cursor:pointer;font-size:0.72rem;padding:0 0 0 8px;display:flex;align-items:center;gap:4px;\"><i class=\"fas fa-arrow-left\"><\/i> Back<\/button>\n    <\/div>\n    <!-- Secured badge -->\n    <div style=\"padding:16px;\">\n      <div style=\"display:flex;align-items:center;gap:10px;background:rgba(78,201,176,0.08);border:1px solid rgba(78,201,176,0.25);padding:12px 14px;margin-bottom:12px;\">\n        <i class=\"fas fa-shield-alt\" style=\"color:#4ec9b0;font-size:1.3rem;flex-shrink:0;filter:drop-shadow(0 0 8px rgba(78,201,176,0.5));\"><\/i>\n        <div>\n          <div style=\"font-size:0.85rem;font-weight:700;color:#4ec9b0;letter-spacing:0.04em;\">&#x2714; Secured<\/div>\n          <div style=\"font-size:0.7rem;color:#4ec9b0;opacity:0.7;margin-top:1px;\">Your data stays on your device<\/div>\n        <\/div>\n      <\/div>\n      <div style=\"background:#252526;border-bottom:1px solid #1e1e1e;padding:9px 0 7px;\">\n        <div style=\"font-size:0.6rem;color:#4ec9b0;text-transform:uppercase;letter-spacing:0.1em;font-weight:700;opacity:0.7;\">What We Store<\/div>\n      <\/div>\n      <div style=\"border-bottom:1px solid #1a1a1a;padding:8px 0;display:flex;align-items:flex-start;gap:9px;\">\n        <i class=\"fas fa-database\" style=\"color:#4dccff;font-size:0.75rem;margin-top:2px;flex-shrink:0;width:14px;text-align:center;\"><\/i>\n        <div>\n          <div style=\"font-size:0.78rem;color:#ccc;font-weight:600;\">Editor Settings<\/div>\n          <div style=\"font-size:0.68rem;color:#555;margin-top:2px;line-height:1.45;\">Font size, theme, word wrap, minimap and other editor preferences.<\/div>\n        <\/div>\n        <span style=\"font-size:0.6rem;background:rgba(78,201,176,0.12);color:#4ec9b0;padding:2px 6px;white-space:nowrap;flex-shrink:0;border:1px solid rgba(78,201,176,0.25);margin-top:1px;\">localStorage<\/span>\n      <\/div>\n      <div style=\"border-bottom:1px solid #1a1a1a;padding:8px 0;display:flex;align-items:flex-start;gap:9px;\">\n        <i class=\"fas fa-paint-brush\" style=\"color:#f59e0b;font-size:0.75rem;margin-top:2px;flex-shrink:0;width:14px;text-align:center;\"><\/i>\n        <div>\n          <div style=\"font-size:0.78rem;color:#ccc;font-weight:600;\">Ptero Theme<\/div>\n          <div style=\"font-size:0.68rem;color:#555;margin-top:2px;line-height:1.45;\">Your chosen Normal and Fullscreen mode color themes.<\/div>\n        <\/div>\n        <span style=\"font-size:0.6rem;background:rgba(78,201,176,0.12);color:#4ec9b0;padding:2px 6px;white-space:nowrap;flex-shrink:0;border:1px solid rgba(78,201,176,0.25);margin-top:1px;\">localStorage<\/span>\n      <\/div>\n      <div style=\"padding:8px 0;display:flex;align-items:flex-start;gap:9px;\">\n        <i class=\"fas fa-save\" style=\"color:#a78bfa;font-size:0.75rem;margin-top:2px;flex-shrink:0;width:14px;text-align:center;\"><\/i>\n        <div>\n          <div style=\"font-size:0.78rem;color:#ccc;font-weight:600;\">Backups &amp; Code<\/div>\n          <div style=\"font-size:0.68rem;color:#555;margin-top:2px;line-height:1.45;\">Any saved backups and your code tabs.<\/div>\n        <\/div>\n        <span style=\"font-size:0.6rem;background:rgba(78,201,176,0.12);color:#4ec9b0;padding:2px 6px;white-space:nowrap;flex-shrink:0;border:1px solid rgba(78,201,176,0.25);margin-top:1px;\">localStorage<\/span>\n      <\/div>\n      <div style=\"margin-top:10px;padding:9px 11px;background:#111;border:1px solid #1e1e1e;display:flex;gap:8px;align-items:flex-start;\">\n        <i class=\"fas fa-lock\" style=\"color:#4ec9b0;font-size:0.7rem;margin-top:2px;flex-shrink:0;\"><\/i>\n        <p style=\"font-size:0.65rem;color:#444;margin:0;line-height:1.55;\">All data is stored exclusively in your browser's localStorage \u2014 read-only by this plugin, never sent to any server, and fully under your control. Clear your browser data to remove it.<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<button class=\"mlp-community-open-btn\" data-instance=\"mlp-15-1\" title=\"Explore Community Builds\" style=\"cursor:pointer;color:rgba(255,255,255,0.8);font-size:1.05rem;opacity:0.8;display:inline-flex;align-items:center;padding:5px 9px;border-radius:6px;transition:all 0.2s;background:rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.25);margin-top:4px;font-family:inherit;gap:4px;\">\n    <i class=\"fas fa-globe\" style=\"transition:transform 0.35s ease;margin-right:2px;color:#4dccff;\"><\/i><span style=\"font-size:0.78rem;font-weight:600;letter-spacing:0.03em;\">Explore<\/span>\n<\/button>\n\n<div class=\"mlp-header-nav-btns\">\n<div class=\"mlp-more-dropdown-wrap\" data-instance=\"mlp-15-1\">\n<button class=\"mlp-more-dropdown-btn\">\n<i class=\"fas fa-th-large\"><\/i> More <i class=\"fas fa-chevron-down mlp-more-chevron\"><\/i>\n<\/button>\n<div class=\"mlp-more-dropdown-menu\" style=\"display:none;position:fixed;background:#0c0c0c;border:1px solid #444;border-radius:0 !important;min-width:210px;box-shadow:0 20px 50px rgba(0,0,0,0.9);z-index:9999999;flex-direction:column;font-family:'Consolas','Monaco','Courier New',monospace;\">\n<div class=\"mlp-more-dropdown-header\">\n<div class=\"mlp-more-dropdown-header-dot\"><\/div>\n<span class=\"mlp-more-dropdown-header-label\">Menu<\/span>\n<\/div>\n<button class=\"mlp-more-dropdown-item mlp-docs-open-btn\" data-instance=\"mlp-15-1\">\n<i class=\"fas fa-book-open\"><\/i> Docs\n<\/button>\n<button class=\"mlp-more-dropdown-item mlp-tos-open-btn\" data-instance=\"mlp-15-1\">\n<i class=\"fas fa-gavel\"><\/i> Terms of Service\n<\/button>\n<button class=\"mlp-more-dropdown-item mlp-pp-open-btn\" data-instance=\"mlp-15-1\">\n<i class=\"fas fa-shield-alt\"><\/i> Privacy Policy\n<\/button>\n<\/div>\n<\/div>\n<button class=\"mlp-plan-open-btn\" data-instance=\"mlp-15-1\">\n<i class=\"fas fa-user-circle\"><\/i> My Plan\n<\/button>\n<\/div>\n<\/div>\n<!-- TAB SYSTEM \u2014 collab tabs inject here when connected -->\n<div class=\"mlp-tabs-system\" id=\"mlp-tabs-system-mlp-15-1\">\n<div class=\"mlp-tabs-container\">\n<div class=\"mlp-tabs-scroll-wrapper\">\n<div class=\"mlp-tabs-list\" id=\"mlp-tabs-list-mlp-15-1\">\n<!-- Tabs will be added dynamically -->\n<\/div>\n<\/div>\n<div class=\"mlp-tabs-controls\">\n<!-- Online dropdown \u2014 shown when connected -->\n<div class=\"mlp-online-dropdown-wrap\" id=\"mlp-online-wrap-mlp-15-1\" style=\"display:none;\">\n<button class=\"mlp-online-btn\" id=\"mlp-online-btn-mlp-15-1\" data-instance=\"mlp-15-1\">\n<span class=\"mlp-online-dot\"><\/span>\n<span class=\"mlp-online-count\" id=\"mlp-online-count-mlp-15-1\">1<\/span> Online\n<i class=\"fas fa-caret-down\" style=\"margin-left:3px;font-size:0.7rem;\"><\/i>\n<\/button>\n<div class=\"mlp-online-dropdown\" id=\"mlp-online-dropdown-mlp-15-1\">\n<div class=\"mlp-online-list\" id=\"mlp-online-list-mlp-15-1\"><\/div>\n<div class=\"mlp-online-footer\">\n<button class=\"mlp-collab-bar-copy mlp-online-copy\" data-instance=\"mlp-15-1\" title=\"Copy Room ID\">\n<i class=\"fas fa-copy\"><\/i> Copy Room ID\n<\/button>\n<\/div>\n<\/div>\n<\/div>\n<!-- Collab action buttons \u2014 shown when connected -->\n<div class=\"mlp-collab-action-btns\" id=\"mlp-collab-action-btns-mlp-15-1\" style=\"display:none;\">\n<button class=\"mlp-collab-invite-btn\" data-instance=\"mlp-15-1\" title=\"Invite someone\">\n<i class=\"fas fa-user-plus\"><\/i> Invite\n<\/button>\n<button class=\"mlp-collab-leave-btn\" data-instance=\"mlp-15-1\" title=\"Leave session\">\n<i class=\"fas fa-sign-out-alt\"><\/i> Leave\n<\/button>\n<\/div>\n<!-- Normal tab controls \u2014 hidden when connected -->\n<div class=\"mlp-personal-controls\" id=\"mlp-personal-controls-mlp-15-1\">\n<button class=\"mlp-tab-add-btn\" data-instance=\"mlp-15-1\" title=\"Add New Tab\">\n<i class=\"fas fa-plus\"><\/i>\n<\/button>\n<button class=\"mlp-tab-fork-btn\" data-instance=\"mlp-15-1\" title=\"Fork Current Tab\">\n<i class=\"fas fa-code-branch\"><\/i>\n<\/button>\n<button class=\"mlp-tab-menu-btn\" data-instance=\"mlp-15-1\" title=\"Tab Menu\">\n<i class=\"fas fa-ellipsis-v\"><\/i>\n<\/button>\n<div class=\"mlp-tab-dropdown\" id=\"mlp-tab-dropdown-mlp-15-1\">\n<button class=\"mlp-tab-dropdown-item mlp-close-all-tabs\" data-instance=\"mlp-15-1\">\n<i class=\"fas fa-times-circle\"><\/i> Close All Tabs\n<\/button>\n<button class=\"mlp-tab-dropdown-item mlp-duplicate-tab\" data-instance=\"mlp-15-1\">\n<i class=\"fas fa-copy\"><\/i> Duplicate Current Tab\n<\/button>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<!-- BACKUP BAR - Now with Save button at top right and Analyze button -->\n<div class=\"mlp-backup-bar\" id=\"mlp-backup-bar-mlp-15-1\">\n<button onclick=\"if(typeof window.mlpProjectsOpen==='function')window.mlpProjectsOpen();\" title=\"Back to Projects\" class=\"mlp-projects-back-btn\" style=\"flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;border-right:1px solid rgba(255,255,255,0.1);cursor:pointer;padding:0 11px;align-self:stretch;color:rgba(255,255,255,0.5);transition:color 0.15s,background 0.15s;\" onmouseover=\"this.style.color='#fff';this.style.background='rgba(255,255,255,0.07)';\" onmouseout=\"this.style.color='rgba(255,255,255,0.5)';this.style.background='none';\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"15 18 9 12 15 6\"\/><\/svg><\/button>\n<div class=\"mlp-current-tab-label\" title=\"Current Editor Tab\">\n<i class=\"fas fa-file-code\"><\/i> <span class=\"mlp-current-tab-name-display-mlp-15-1 mlp-tab-name-truncate\">Preview 1<\/span>\n<span class=\"mlp-saved-indicator mlp-saved-indicator-mlp-15-1\"><i class=\"fas fa-check-circle\"><\/i> Thanks<\/span>\n<\/div>\n<div class=\"mlp-action-buttons-group\" style=\"gap:0;align-items:stretch;\">\n<!-- CONSOLE BUTTON -->\n<button class=\"mlp-console-btn\" data-instance=\"mlp-15-1\" title=\"Console\" style=\"padding:0 16px;background:transparent;color:#94a3b8;border:none;border-bottom:2px solid transparent;border-radius:0;cursor:pointer;font-weight:500;display:flex;align-items:center;gap:6px;transition:color 0.2s,border-color 0.2s;font-size:0.85rem;letter-spacing:0.02em;box-sizing:border-box;height:100%;\">\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"opacity:0.85;\"><polyline points=\"4 17 10 11 4 5\"\/><line x1=\"12\" y1=\"19\" x2=\"20\" y2=\"19\"\/><\/svg>\nConsole\n<\/button>\n<!-- BACKUPS DROPDOWN BUTTON -->\n<div class=\"mlp-bar-backups-dropdown-wrap\" id=\"mlp-bar-backups-dropdown-wrap-mlp-15-1\" style=\"position:relative;display:inline-flex;\">\n<button class=\"mlp-bar-backups-dropdown-btn\" data-instance=\"mlp-15-1\" title=\"Backups\" style=\"padding:0 16px;background:transparent;color:#94a3b8;border:none;border-bottom:2px solid transparent;border-radius:0;cursor:pointer;font-weight:500;display:flex;align-items:center;gap:6px;transition:color 0.2s,border-color 0.2s;font-size:0.85rem;letter-spacing:0.02em;box-sizing:border-box;height:100%;\">\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"opacity:0.85;\"><ellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\"\/><path d=\"M21 12c0 1.66-4 3-9 3s-9-1.34-9-3\"\/><path d=\"M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5\"\/><\/svg>\nBackups <i class=\"fas fa-chevron-down\" style=\"font-size:0.55rem;opacity:0.6;\"><\/i>\n<\/button>\n<div class=\"mlp-bar-backups-dropdown-menu\" id=\"mlp-bar-backups-dropdown-menu-mlp-15-1\" style=\"display:none;position:absolute;top:100%;left:0;background:#1e293b;border:1px solid rgba(255,255,255,0.12);border-radius:8px;min-width:180px;z-index:10000;box-shadow:0 10px 30px rgba(0,0,0,0.5);margin-top:6px;overflow:hidden;\">\n<button class=\"mlp-manager-create-backup-btn\" data-instance=\"mlp-15-1\" style=\"width:100%;text-align:left;padding:10px 14px;background:none;border:none;color:#e2e8f0;cursor:pointer;font-size:0.82rem;display:flex;align-items:center;gap:8px;\">\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#4ec9b0\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14\"\/><path d=\"M5 12h14\"\/><\/svg> Create Backup\n<\/button>\n<button class=\"mlp-manager-load-backups-btn\" data-instance=\"mlp-15-1\" style=\"width:100%;text-align:left;padding:10px 14px;background:none;border:none;color:#e2e8f0;cursor:pointer;font-size:0.82rem;display:flex;align-items:center;gap:8px;border-top:1px solid rgba(255,255,255,0.06);\">\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#4ec9b0\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><ellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\"\/><path d=\"M21 12c0 1.66-4 3-9 3s-9-1.34-9-3\"\/><path d=\"M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5\"\/><\/svg> Load Backup\n<\/button>\n<\/div>\n<\/div>\n<script>\n(function(){\n  var iid = 'mlp-15-1';\n  var wrap = document.getElementById('mlp-bar-backups-dropdown-wrap-'+iid);\n  var btn = wrap ? wrap.querySelector('.mlp-bar-backups-dropdown-btn') : null;\n  var menu = document.getElementById('mlp-bar-backups-dropdown-menu-'+iid);\n  if(!wrap || !btn || !menu) return;\n  btn.addEventListener('click', function(e){\n    e.preventDefault(); e.stopPropagation();\n    var isOpen = menu.style.display === 'block';\n    document.querySelectorAll('.mlp-bar-backups-dropdown-menu').forEach(function(m){ m.style.display = 'none'; });\n    if(!isOpen) menu.style.display = 'block';\n  });\n  menu.querySelectorAll('button').forEach(function(b){\n    b.addEventListener('click', function(){ menu.style.display = 'none'; });\n  });\n  document.addEventListener('click', function(e){\n    if(!wrap.contains(e.target)) menu.style.display = 'none';\n  });\n})();\n<\/script>\n<!-- AI DROPDOWN BUTTON -->\n<div class=\"mlp-ai-dropdown-container\" style=\"position:relative;display:flex;z-index:10000;\">\n<button class=\"mlp-ai-btn\" data-instance=\"mlp-15-1\" title=\"AI Assistant\" style=\"padding:0 16px;background:transparent;color:#94a3b8;border:none;border-bottom:2px solid transparent;border-radius:0;cursor:pointer;font-weight:500;display:flex;align-items:center;gap:6px;transition:color 0.2s,border-color 0.2s;font-size:0.85rem;letter-spacing:0.02em;box-sizing:border-box;height:100%;box-shadow:none;\">\nAI Assistant <i class=\"fas fa-caret-down\" style=\"font-size:0.6rem;opacity:0.6;\"><\/i>\n\n<\/button>\n<div class=\"mlp-ai-dropdown-menu\" id=\"mlp-ai-dropdown-mlp-15-1\" style=\"display: none; position: absolute; top: 100%; left: 0; background: linear-gradient(135deg, #1f4068 0%, #1b3b5e 100%); border: 1px solid #4dccff; border-radius: 8px; padding: 10px 12px; min-width: 240px; z-index: 1000; box-shadow: 0 10px 30px rgba(0,0,0,0.4); margin-top: 8px;\">\n\n<!-- Option 1: Fix a Specific Line (inline expander) -->\n<div class=\"mlp-ai-dd-item mlp-ai-fixline-toggle\" data-instance=\"mlp-15-1\" style=\"display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:6px; cursor:pointer; transition:background 0.2s; margin-bottom:4px;\" onmouseover=\"this.style.background='rgba(77,204,255,0.1)'\" onmouseout=\"this.style.background='transparent'\">\n  <i class=\"fas fa-crosshairs\" style=\"color:#4dccff; width:14px; text-align:center;\"><\/i>\n  <span style=\"color:#cdd9e5; font-size:0.85rem; font-weight:600; flex:1;\">Fix specific line<\/span>\n  <i class=\"fas fa-chevron-right mlp-ai-fixline-chevron\" style=\"color:#4a6a85; font-size:0.65rem; transition:transform 0.2s;\"><\/i>\n<\/div>\n<div class=\"mlp-ai-fixline-panel\" id=\"mlp-ai-fixline-panel-mlp-15-1\" style=\"display:none; padding:6px 8px 8px 8px; background:rgba(0,0,0,0.25); border-radius:6px; margin-bottom:4px;\">\n  <div style=\"display:flex; gap:6px; align-items:center;\">\n    <input type=\"number\" class=\"mlp-ai-line-input\" data-instance=\"mlp-15-1\" min=\"1\" placeholder=\"Line #\" style=\"width:75px; padding:7px 8px; background:#0a1628; border:1.5px solid #4dccff; border-radius:6px; color:#fff; font-size:0.9rem; outline:none; box-sizing:border-box;\" \/>\n    <button class=\"mlp-ai-solve-btn\" data-instance=\"mlp-15-1\" style=\"flex:1; padding:7px 10px; background:rgba(77,204,255,0.15); border:1px solid #4dccff; border-radius:6px; color:#4dccff; cursor:pointer; font-size:0.85rem; font-weight:600; display:flex; align-items:center; justify-content:center; gap:6px; transition:all 0.2s;\">\n      <i class=\"fas fa-bolt\"><\/i> Fix Line\n    <\/button>\n  <\/div>\n  <div style=\"color:#4a6a85; font-size:0.7rem; margin-top:5px;\">HTML lines first, then CSS, then JS<\/div>\n<\/div>\n\n<!-- Divider -->\n<div style=\"border-top:1px solid rgba(77,204,255,0.12); margin:4px 0;\"><\/div>\n\n<!-- Option 2: Build something (opens AI chat) -->\n<div class=\"mlp-ai-dd-chat-btn\" data-instance=\"mlp-15-1\" data-prompt=\"Build something\" style=\"display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:6px; cursor:pointer; transition:background 0.2s; margin-bottom:2px;\" onmouseover=\"this.style.background='rgba(77,204,255,0.1)'\" onmouseout=\"this.style.background='transparent'\">\n  <i class=\"fas fa-hammer\" style=\"color:#a78bfa; width:14px; text-align:center;\"><\/i>\n  <span style=\"color:#cdd9e5; font-size:0.85rem; font-weight:600;\">Build something<\/span>\n<\/div>\n\n<!-- Option 2b: Edit something (opens AI chat) -->\n<div class=\"mlp-ai-dd-chat-btn\" data-instance=\"mlp-15-1\" data-prompt=\"Edit something\" style=\"display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:6px; cursor:pointer; transition:background 0.2s; margin-bottom:2px;\" onmouseover=\"this.style.background='rgba(77,204,255,0.1)'\" onmouseout=\"this.style.background='transparent'\">\n  <i class=\"fas fa-pen\" style=\"color:#63b3ed; width:14px; text-align:center;\"><\/i>\n  <span style=\"color:#cdd9e5; font-size:0.85rem; font-weight:600;\">Edit something<\/span>\n<\/div>\n\n<!-- Option 3: Fix something (opens AI chat) -->\n<div class=\"mlp-ai-dd-chat-btn\" data-instance=\"mlp-15-1\" data-prompt=\"Fix something\" style=\"display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:6px; cursor:pointer; transition:background 0.2s; margin-bottom:2px;\" onmouseover=\"this.style.background='rgba(77,204,255,0.1)'\" onmouseout=\"this.style.background='transparent'\">\n  <i class=\"fas fa-wrench\" style=\"color:#fb923c; width:14px; text-align:center;\"><\/i>\n  <span style=\"color:#cdd9e5; font-size:0.85rem; font-weight:600;\">Fix something<\/span>\n<\/div>\n\n<!-- Divider -->\n<div style=\"border-top:1px solid rgba(77,204,255,0.12); margin:4px 0;\"><\/div>\n\n<!-- Option 4: Explain (expandable sub-menu) -->\n<div class=\"mlp-ai-dd-item mlp-ai-editor-toggle\" data-instance=\"mlp-15-1\" style=\"display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:6px; cursor:pointer; transition:background 0.2s; margin-bottom:2px;\" onmouseover=\"this.style.background='rgba(77,204,255,0.1)'\" onmouseout=\"this.style.background='transparent'\">\n  <i class=\"fas fa-code\" style=\"color:#4ec9b0; width:14px; text-align:center;\"><\/i>\n  <span style=\"color:#cdd9e5; font-size:0.85rem; font-weight:600; flex:1;\">Explain<\/span>\n  <i class=\"fas fa-chevron-right mlp-ai-editor-chevron\" style=\"color:#4a6a85; font-size:0.65rem; transition:transform 0.2s;\"><\/i>\n<\/div>\n<div class=\"mlp-ai-editor-panel\" id=\"mlp-ai-editor-panel-mlp-15-1\" style=\"display:none; padding:4px 4px 4px 8px; background:rgba(0,0,0,0.2); border-radius:6px; margin-bottom:2px;\">\n  <div class=\"mlp-ai-dd-chat-btn\" data-instance=\"mlp-15-1\" data-prompt=\"Explain what this code does, how it works, and highlight any important patterns or things I should know\" style=\"display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:6px; cursor:pointer; transition:background 0.2s;\" onmouseover=\"this.style.background='rgba(77,204,255,0.1)'\" onmouseout=\"this.style.background='transparent'\">\n    <i class=\"fas fa-lightbulb\" style=\"color:#fbbf24; width:14px; text-align:center; font-size:0.8rem;\"><\/i>\n    <span style=\"color:#cdd9e5; font-size:0.82rem; font-weight:500;\">Explain code<\/span>\n  <\/div>\n<\/div>\n\n<\/div>\n<\/div>\n<!-- EXPORT DROPDOWN BUTTON -->\n<div class=\"mlp-export-dropdown-container\" style=\"position:relative;display:flex;z-index:10000;\">\n<button class=\"mlp-export-dd-btn\" data-instance=\"mlp-15-1\" title=\"Export\" style=\"padding:0 16px;background:transparent;color:#94a3b8;border:none;border-bottom:2px solid transparent;border-radius:0;cursor:pointer;font-weight:500;display:flex;align-items:center;gap:6px;transition:color 0.2s,border-color 0.2s;font-size:0.85rem;letter-spacing:0.02em;box-sizing:border-box;height:100%;box-shadow:none;\">\nExport <i class=\"fas fa-caret-down\" style=\"font-size:0.6rem;opacity:0.6;\"><\/i>\n<\/button>\n<div class=\"mlp-export-dropdown-menu\" id=\"mlp-export-dropdown-mlp-15-1\" style=\"display:none;position:absolute;top:100%;left:0;background:linear-gradient(135deg,#1f2d1a 0%,#1a2b18 100%);border:1px solid #4ec9b0;border-radius:8px;padding:10px 12px;min-width:220px;z-index:1000;box-shadow:0 10px 30px rgba(0,0,0,0.4);margin-top:8px;\">\n\n<!-- Section: Download -->\n<div style=\"font-size:0.68rem;font-weight:700;color:#4ec9b0;text-transform:uppercase;letter-spacing:0.09em;padding:2px 4px 6px;opacity:0.7;\">Download<\/div>\n\n<!-- Export to Browser (ZIP) -->\n<div class=\"mlp-export-dd-item mlp-export-zip-trigger\" data-instance=\"mlp-15-1\" style=\"display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;cursor:pointer;transition:background 0.2s;margin-bottom:2px;\" onmouseover=\"this.style.background='rgba(78,201,176,0.12)'\" onmouseout=\"this.style.background='transparent'\">\n  <i class=\"fas fa-file-archive\" style=\"color:#4ec9b0;width:14px;text-align:center;\"><\/i>\n  <div style=\"flex:1;\">\n    <span style=\"color:#cdd9e5;font-size:0.85rem;font-weight:600;display:block;\">Export to Browser<\/span>\n    <span style=\"color:#4a6a55;font-size:0.72rem;\">Downloads a .zip file<\/span>\n  <\/div>\n  <i class=\"fas fa-download\" style=\"color:#4a6a55;font-size:0.65rem;\"><\/i>\n<\/div>\n\n<!-- Divider -->\n<div style=\"border-top:1px solid rgba(78,201,176,0.12);margin:6px 0;\"><\/div>\n\n<!-- Section: Online Services -->\n<div style=\"font-size:0.68rem;font-weight:700;color:#4ec9b0;text-transform:uppercase;letter-spacing:0.09em;padding:2px 4px 6px;opacity:0.7;\">Online Services<\/div>\n\n<!-- Export to CodePen -->\n<div class=\"mlp-export-dd-item mlp-export-codepen-btn\" data-instance=\"mlp-15-1\" style=\"display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;cursor:pointer;transition:background 0.2s;margin-bottom:2px;\" onmouseover=\"this.style.background='rgba(78,201,176,0.12)'\" onmouseout=\"this.style.background='transparent'\">\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"flex-shrink:0;\"><path d=\"M12 2L2 8.5v7L12 22l10-6.5v-7L12 2z\" stroke=\"#a3e635\" stroke-width=\"1.8\" stroke-linejoin=\"round\"\/><path d=\"M12 2v20M2 8.5l10 6.5 10-6.5M2 15.5l10-6.5 10 6.5\" stroke=\"#a3e635\" stroke-width=\"1.8\" stroke-linejoin=\"round\"\/><\/svg>\n  <div style=\"flex:1;\">\n    <span style=\"color:#cdd9e5;font-size:0.85rem;font-weight:600;display:block;\">Export to CodePen<\/span>\n    <span style=\"color:#4a6a55;font-size:0.72rem;\">Opens in codepen.io<\/span>\n  <\/div>\n  <i class=\"fas fa-external-link-alt\" style=\"color:#4a6a55;font-size:0.62rem;\"><\/i>\n<\/div>\n\n<!-- Export to JSFiddle -->\n<div class=\"mlp-export-dd-item mlp-export-jsfiddle-btn\" data-instance=\"mlp-15-1\" style=\"display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;cursor:pointer;transition:background 0.2s;margin-bottom:2px;\" onmouseover=\"this.style.background='rgba(78,201,176,0.12)'\" onmouseout=\"this.style.background='transparent'\">\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"flex-shrink:0;\"><circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"#60a5fa\" stroke-width=\"1.8\"\/><path d=\"M8 12h8M12 8v8\" stroke=\"#60a5fa\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/><\/svg>\n  <div style=\"flex:1;\">\n    <span style=\"color:#cdd9e5;font-size:0.85rem;font-weight:600;display:block;\">Export to JSFiddle<\/span>\n    <span style=\"color:#4a6a55;font-size:0.72rem;\">Opens in jsfiddle.net<\/span>\n  <\/div>\n  <i class=\"fas fa-external-link-alt\" style=\"color:#4a6a55;font-size:0.62rem;\"><\/i>\n<\/div>\n\n<!-- Export to StackBlitz -->\n<div class=\"mlp-export-dd-item mlp-export-stackblitz-btn\" data-instance=\"mlp-15-1\" style=\"display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;cursor:pointer;transition:background 0.2s;\" onmouseover=\"this.style.background='rgba(78,201,176,0.12)'\" onmouseout=\"this.style.background='transparent'\">\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"flex-shrink:0;\"><path d=\"M13 2L4.5 13.5H11L11 22L19.5 10.5H13L13 2Z\" stroke=\"#fbbf24\" stroke-width=\"1.8\" stroke-linejoin=\"round\"\/><\/svg>\n  <div style=\"flex:1;\">\n    <span style=\"color:#cdd9e5;font-size:0.85rem;font-weight:600;display:block;\">Export to StackBlitz<\/span>\n    <span style=\"color:#4a6a55;font-size:0.72rem;\">Opens in stackblitz.com<\/span>\n  <\/div>\n  <i class=\"fas fa-external-link-alt\" style=\"color:#4a6a55;font-size:0.62rem;\"><\/i>\n<\/div>\n\n<\/div>\n<\/div>\n<\/div>\n<!-- MOBILE TOOLS DROPDOWN \u2014 replaces action buttons group on small screens -->\n<div class=\"mlp-mobile-tools-wrap\" id=\"mlp-mobile-tools-wrap-mlp-15-1\">\n<button class=\"mlp-mobile-tools-btn\" id=\"mlp-mobile-tools-btn-mlp-15-1\" data-instance=\"mlp-15-1\" title=\"Tools\">\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"display:inline-block;vertical-align:middle;\"><polyline points=\"4 17 10 11 4 5\"\/><line x1=\"12\" y1=\"19\" x2=\"20\" y2=\"19\"\/><\/svg>\nTools <i class=\"fas fa-caret-down\" style=\"font-size:0.68rem;margin-left:1px;\"><\/i>\n<\/button>\n<div class=\"mlp-mobile-tools-menu\" id=\"mlp-mobile-tools-menu-mlp-15-1\">\n<!-- Backups -->\n<button class=\"mlp-mobile-tools-item mlp-mobile-backups-item\" data-instance=\"mlp-15-1\">\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#4ec9b0\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><ellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\"\/><path d=\"M21 12c0 1.66-4 3-9 3s-9-1.34-9-3\"\/><path d=\"M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5\"\/><\/svg>\nBackups\n<\/button>\n<!-- Console -->\n<button class=\"mlp-mobile-tools-item mlp-mobile-console-item\" data-instance=\"mlp-15-1\">\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#00ff00\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"4 17 10 11 4 5\"\/><line x1=\"12\" y1=\"19\" x2=\"20\" y2=\"19\"\/><\/svg>\nConsole\n<\/button>\n<!-- AI Assistant \u2014 inline line fixer directly in the mobile menu -->\n<div class=\"mlp-mobile-tools-ai-row\">\n<div class=\"mlp-mobile-tools-ai-label\"><i class=\"fas fa-bolt\"><\/i> Fix a Line (AI)<\/div>\n<div class=\"mlp-mobile-tools-ai-inputs\">\n<input type=\"number\" class=\"mlp-mobile-line-input\" data-instance=\"mlp-15-1\" min=\"1\" placeholder=\"Line #\" \/>\n<button class=\"mlp-mobile-tools-ai-solve mlp-mobile-ai-item\" data-instance=\"mlp-15-1\">\n<i class=\"fas fa-wrench\"><\/i> Fix Line\n\n<\/button>\n<\/div>\n<\/div>\n<!-- Analyze -->\n<button class=\"mlp-mobile-tools-item mlp-mobile-analyze-item\" data-instance=\"mlp-15-1\">\n<span style=\"font-size:13px;line-height:1;\">\u2728<\/span>\nAnalyze\n\n<\/button>\n<!-- Templates -->\n<button class=\"mlp-mobile-tools-item mlp-mobile-templates-item\" data-instance=\"mlp-15-1\">\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#a78bfa\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"\/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"\/><\/svg>\nTemplates\n<\/button>\n<!-- Library -->\n<button class=\"mlp-mobile-tools-item mlp-mobile-media-library-item\" data-instance=\"mlp-15-1\">\n<i class=\"fas fa-th\" style=\"color:#a78bfa;\"><\/i>\nLibrary\n<\/button>\n<!-- Storage -->\n<button class=\"mlp-mobile-tools-item mlp-mobile-storage-item\" data-instance=\"mlp-15-1\">\n<i class=\"fas fa-database\" style=\"color:#4dccff;\"><\/i>\nStorage\n<\/button>\n<\/div>\n<\/div>\n<!-- END MOBILE TOOLS DROPDOWN -->\n<!-- SAVE BUTTON - With save emoji -->\n<button class=\"mlp-save-btn\" data-instance=\"mlp-15-1\" title=\"Save Current Tab\">\n<i class=\"fas fa-save\"><\/i> Save\n<\/button>\n<!-- Host name badge shown to guests in collab mode -->\n<span class=\"mlp-host-name-badge\" id=\"mlp-host-name-badge-mlp-15-1\" style=\"display:none;\">\n<i class=\"fas fa-crown\"><\/i>\n<span id=\"mlp-host-name-text-mlp-15-1\"><\/span>\n<span style=\"opacity:0.6;font-weight:400;\">(host)<\/span>\n<\/span>\n<\/div>\n<!-- COLLAB HOST BAR \u2014 shown only when host is connected -->\n<div class=\"mlp-collab-host-bar\" id=\"mlp-collab-host-bar-mlp-15-1\" style=\"display:none;\">\n<div class=\"mlp-collab-host-bar-left\">\n<i class=\"fas fa-shield-alt\" style=\"color:#a78bfa;font-size:0.8rem;\"><\/i>\n<span class=\"mlp-collab-host-bar-label\">Host Controls<\/span>\n<\/div>\n<div class=\"mlp-collab-host-bar-actions\">\n<!-- Lock\/Unlock dropdown -->\n<div class=\"mlp-host-lock-wrap\" style=\"position:relative;\">\n<button class=\"mlp-host-lock-btn locked\" data-instance=\"mlp-15-1\" title=\"Writing permissions\">\n<i class=\"fas fa-lock\" id=\"mlp-lock-icon-mlp-15-1\"><\/i>\n<span id=\"mlp-lock-label-mlp-15-1\">Locked<\/span>\n<i class=\"fas fa-caret-down\" style=\"font-size:0.7rem;margin-left:2px;\"><\/i>\n<\/button>\n<div class=\"mlp-host-lock-dropdown\" id=\"mlp-host-lock-dropdown-mlp-15-1\">\n<button class=\"mlp-host-lock-item\" data-instance=\"mlp-15-1\" data-action=\"lock\">\n<i class=\"fas fa-lock\" style=\"color:#f87171;\"><\/i> Read-only for guests\n<\/button>\n<\/div>\n<\/div>\n<!-- Users dropdown (kick\/ban) -->\n<div class=\"mlp-host-users-wrap\" style=\"position:relative;\">\n<button class=\"mlp-host-users-btn\" data-instance=\"mlp-15-1\" title=\"Manage users\">\n<i class=\"fas fa-users\"><\/i>\n<span>Manage Users<\/span>\n<i class=\"fas fa-caret-down\" style=\"font-size:0.7rem;margin-left:2px;\"><\/i>\n<\/button>\n<div class=\"mlp-host-users-dropdown\" id=\"mlp-host-users-dropdown-mlp-15-1\">\n<div class=\"mlp-host-users-list\" id=\"mlp-host-users-list-mlp-15-1\">\n<div class=\"mlp-host-users-empty\">No users connected<\/div>\n<\/div>\n<\/div>\n<\/div>\n<!-- Banned users dropdown -->\n<div class=\"mlp-host-banned-wrap\" style=\"position:relative;\">\n<button class=\"mlp-host-banned-btn\" data-instance=\"mlp-15-1\" title=\"Banned users\">\n<i class=\"fas fa-ban\"><\/i>\n<span>Banned<\/span>\n<span class=\"mlp-banned-count\" id=\"mlp-banned-count-mlp-15-1\" style=\"display:none;\"><\/span>\n<i class=\"fas fa-caret-down\" style=\"font-size:0.7rem;margin-left:2px;\"><\/i>\n<\/button>\n<div class=\"mlp-host-banned-dropdown\" id=\"mlp-host-banned-dropdown-mlp-15-1\">\n<div class=\"mlp-host-banned-header\">Banned Users<\/div>\n<div class=\"mlp-host-banned-list\" id=\"mlp-host-banned-list-mlp-15-1\">\n<div class=\"mlp-host-users-empty\">No banned users<\/div>\n<\/div>\n<\/div>\n<\/div>\n<!-- Settings button -->\n<button class=\"mlp-host-settings-btn\" data-instance=\"mlp-15-1\" title=\"Session Settings\">\n<i class=\"fas fa-cog\"><\/i> Settings\n<\/button>\n<\/div>\n<\/div>\n<!-- COLLAB SETTINGS MODAL -->\n<div class=\"mlp-collab-settings-modal\" id=\"mlp-collab-settings-modal-mlp-15-1\" style=\"display:none;\">\n<div class=\"mlp-collab-settings-inner\">\n<div class=\"mlp-collab-settings-header\">\n<span><i class=\"fas fa-shield-alt\" style=\"color:#a78bfa;margin-right:6px;\"><\/i>Session Settings<\/span>\n<button class=\"mlp-collab-settings-close\" data-instance=\"mlp-15-1\">&times;<\/button>\n<\/div>\n<div class=\"mlp-collab-settings-body\">\n<div class=\"mlp-settings-section-title\">Guest Permissions<\/div>\n<div class=\"mlp-settings-row\">\n<span class=\"mlp-settings-label\"><i class=\"fas fa-terminal\"><\/i> Console<\/span>\n<label class=\"mlp-settings-toggle\"><input type=\"checkbox\" class=\"mlp-perm-toggle\" data-perm=\"console\" data-instance=\"mlp-15-1\" checked><span class=\"mlp-toggle-slider\"><\/span><\/label>\n<\/div>\n<div class=\"mlp-settings-row\">\n<span class=\"mlp-settings-label\"><i class=\"fas fa-database\"><\/i> Backups (view)<\/span>\n<label class=\"mlp-settings-toggle\"><input type=\"checkbox\" class=\"mlp-perm-toggle\" data-perm=\"backups\" data-instance=\"mlp-15-1\" checked><span class=\"mlp-toggle-slider\"><\/span><\/label>\n<\/div>\n<div class=\"mlp-settings-row\">\n<span class=\"mlp-settings-label\"><i class=\"fas fa-save\"><\/i> Create Backups<\/span>\n<label class=\"mlp-settings-toggle\"><input type=\"checkbox\" class=\"mlp-perm-toggle\" data-perm=\"create-backups\" data-instance=\"mlp-15-1\" checked><span class=\"mlp-toggle-slider\"><\/span><\/label>\n<\/div>\n<div class=\"mlp-settings-row\">\n<span class=\"mlp-settings-label\"><i class=\"fas fa-plus\"><\/i> Create Tabs<\/span>\n<label class=\"mlp-settings-toggle\"><input type=\"checkbox\" class=\"mlp-perm-toggle\" data-perm=\"create-tabs\" data-instance=\"mlp-15-1\" checked><span class=\"mlp-toggle-slider\"><\/span><\/label>\n<\/div>\n<div class=\"mlp-settings-row\">\n<span class=\"mlp-settings-label\"><i class=\"fas fa-times\"><\/i> Delete Tabs<\/span>\n<label class=\"mlp-settings-toggle\"><input type=\"checkbox\" class=\"mlp-perm-toggle\" data-perm=\"delete-tabs\" data-instance=\"mlp-15-1\" checked><span class=\"mlp-toggle-slider\"><\/span><\/label>\n<\/div>\n<div class=\"mlp-settings-row\">\n<span class=\"mlp-settings-label\"><i class=\"fas fa-magic\"><\/i> AI Assistant<\/span>\n<label class=\"mlp-settings-toggle\"><input type=\"checkbox\" class=\"mlp-perm-toggle\" data-perm=\"ai\" data-instance=\"mlp-15-1\" checked><span class=\"mlp-toggle-slider\"><\/span><\/label>\n<\/div>\n<div class=\"mlp-settings-row\">\n<span class=\"mlp-settings-label\"><i class=\"fas fa-search\"><\/i> Analyze<\/span>\n<label class=\"mlp-settings-toggle\"><input type=\"checkbox\" class=\"mlp-perm-toggle\" data-perm=\"analyze\" data-instance=\"mlp-15-1\" checked><span class=\"mlp-toggle-slider\"><\/span><\/label>\n<\/div>\n<div class=\"mlp-settings-row\">\n<span class=\"mlp-settings-label\"><i class=\"fas fa-image\"><\/i> Insert Media<\/span>\n<label class=\"mlp-settings-toggle\"><input type=\"checkbox\" class=\"mlp-perm-toggle\" data-perm=\"media\" data-instance=\"mlp-15-1\" checked><span class=\"mlp-toggle-slider\"><\/span><\/label>\n<\/div>\n<div class=\"mlp-settings-section-title\" style=\"margin-top:14px;\">Preprocessor<\/div>\n<div class=\"mlp-settings-row\">\n<span class=\"mlp-settings-label\"><i class=\"fas fa-code\"><\/i> Lock preprocessor changes<\/span>\n<label class=\"mlp-settings-toggle\"><input type=\"checkbox\" id=\"mlp-lock-pp-mlp-15-1\" class=\"mlp-lock-pp-toggle\" data-instance=\"mlp-15-1\"><span class=\"mlp-toggle-slider\"><\/span><\/label>\n<\/div>\n<div class=\"mlp-settings-note\" style=\"margin-bottom:10px;\">Guests cannot open or change the preprocessor (SCSS, Babel, etc).<\/div>\n<div class=\"mlp-settings-section-title\" style=\"margin-top:4px;\">Solo Writer<\/div>\n<div class=\"mlp-settings-row\">\n<span class=\"mlp-settings-label\"><i class=\"fas fa-pen\"><\/i> Assign solo writer<\/span>\n<select class=\"mlp-solo-writer-select\" id=\"mlp-solo-writer-mlp-15-1\" data-instance=\"mlp-15-1\">\n<option value=\"\">\u2014 Everyone writes \u2014<\/option>\n<\/select>\n<\/div>\n<div class=\"mlp-settings-note\">Solo writer can edit; all others become read-only.<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"mlp-collab-panel\" id=\"mlp-collab-panel-mlp-15-1\" style=\"display:none;\">\n<div class=\"mlp-collab-panel-inner\">\n<div class=\"mlp-collab-panel-header\">\n<span><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#a78bfa\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg> Live Collab<\/span>\n<button class=\"mlp-collab-panel-close\" data-instance=\"mlp-15-1\">&times;<\/button>\n<\/div>\n<div class=\"mlp-collab-panel-body\">\n<div class=\"mlp-collab-name-wrap\">\n<label class=\"mlp-collab-field-label\"><i class=\"fas fa-user\" style=\"color:#a78bfa;margin-right:4px;\"><\/i>Name<\/label>\n<input type=\"text\" id=\"mlp-collab-name-mlp-15-1\" class=\"mlp-collab-input\" placeholder=\"Anonymous\" maxlength=\"20\" style=\"width:130px;\" \/>\n<\/div>\n<!-- Mode dropdown: Create or Join -->\n<div class=\"mlp-collab-mode-wrap\" id=\"mlp-collab-mode-wrap-mlp-15-1\">\n<label class=\"mlp-collab-field-label\"><i class=\"fas fa-users-cog\" style=\"color:#a78bfa;margin-right:4px;\"><\/i>Mode<\/label>\n<div class=\"mlp-collab-mode-dropdown-wrap\">\n<select class=\"mlp-collab-mode-select mlp-collab-input\" id=\"mlp-collab-mode-mlp-15-1\" data-instance=\"mlp-15-1\" style=\"cursor:pointer;padding-right:28px;\">\n<option value=\"\">\u2014 Select \u2014<\/option>\n<option value=\"create\"><i class=\"fas fa-plus-circle\"><\/i> Create a room<\/option>\n<option value=\"join\">Join a room<\/option>\n<\/select>\n<\/div>\n<\/div>\n<!-- Join: Room ID input \u2014 shown only when mode=join -->\n<div class=\"mlp-collab-room-wrap\" id=\"mlp-collab-room-wrap-mlp-15-1\" style=\"display:none;\">\n<label class=\"mlp-collab-field-label\"><i class=\"fas fa-hashtag\" style=\"color:#a78bfa;margin-right:4px;\"><\/i>Room ID<\/label>\n<input type=\"text\" id=\"mlp-collab-room-mlp-15-1\" class=\"mlp-collab-input\" placeholder=\"Paste Room ID here\u2026\" style=\"font-family:monospace;flex:1;min-width:120px;\" \/>\n<\/div>\n<button class=\"mlp-collab-join-btn\" id=\"mlp-collab-join-btn-mlp-15-1\" data-instance=\"mlp-15-1\" style=\"display:none;\">\n<i class=\"fas fa-plug\"><\/i> <span class=\"mlp-collab-join-btn-label\">Connect<\/span>\n<\/button>\n<button class=\"mlp-collab-panel-dismiss\" data-instance=\"mlp-15-1\" title=\"Close\"><i class=\"fas fa-times\"><\/i><\/button>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"mlp-main-content\">\n<div class=\"mlp-editor-section\" id=\"mlp-editor-section-mlp-15-1\">\n<!-- NEW: Editor Header Bar with Code Editor text and tabs -->\n<div class=\"mlp-editor-header-bar\">\n<div class=\"mlp-editor-header-left\">\n<!-- Editor Settings Gear Icon with Dropdown -->\n<div class=\"mlp-editor-settings-wrap\" data-instance=\"mlp-15-1\" style=\"position:relative;display:inline-flex;align-items:center;\">\n  <span class=\"mlp-editor-settings-gear\" title=\"Editor Settings\" style=\"cursor:pointer;color:#4dccff;font-size:1.05rem;opacity:0.75;transition:opacity 0.2s,transform 0.3s;display:inline-flex;align-items:center;padding:4px 6px;border-radius:6px;\">\n    <i class=\"fas fa-cog\"><\/i>\n  <\/span>\n  <div class=\"mlp-gear-top-menu\" style=\"display:none;position:fixed;background:#0c0c0c;border:1px solid #444;border-radius:0 !important;min-width:200px;box-shadow:0 20px 50px rgba(0,0,0,0.9);z-index:9999999;flex-direction:column;font-family:'Consolas','Monaco','Courier New',monospace;animation:mlp-more-dropdown-fade 0.15s ease;\">\n    <div class=\"mlp-more-dropdown-header\">\n      <div class=\"mlp-more-dropdown-header-dot\" style=\"background:#4dccff;box-shadow:0 0 6px rgba(77,204,255,0.7);\"><\/div>\n      <span class=\"mlp-more-dropdown-header-label\">Editor Actions<\/span>\n    <\/div>\n    <button class=\"mlp-more-dropdown-item mlp-settings-format-btn\" data-instance=\"mlp-15-1\">\n      <i class=\"fas fa-magic\" style=\"color:#4dccff;\"><\/i> <span class=\"mlp-settings-format-label\">Format HTML<\/span>\n    <\/button>\n    <button class=\"mlp-more-dropdown-item mlp-settings-analyze-btn\" data-instance=\"mlp-15-1\">\n      <i class=\"fas fa-search\" style=\"color:#a0ff00;\"><\/i> Analyze\n    <\/button>\n    <button class=\"mlp-more-dropdown-item mlp-settings-prepro-btn\" data-instance=\"mlp-15-1\">\n      <i class=\"fas fa-cogs\" style=\"color:#f9a825;\"><\/i> <span class=\"mlp-settings-prepro-label\">Prepro of HTML<\/span>\n    <\/button>\n    <button class=\"mlp-more-dropdown-item mlp-settings-copy-btn\" data-instance=\"mlp-15-1\">\n      <i class=\"fas fa-copy\" style=\"color:#a78bfa;\"><\/i> <span class=\"mlp-settings-copy-label\">Copy HTML<\/span>\n    <\/button>\n    <button class=\"mlp-more-dropdown-item mlp-settings-fork-btn\" data-instance=\"mlp-15-1\">\n      <i class=\"fas fa-code-branch\" style=\"color:#fbbf24;\"><\/i> Fork Tab\n    <\/button>\n    <button class=\"mlp-more-dropdown-item mlp-settings-fullscreen-btn\" data-instance=\"mlp-15-1\">\n      <i class=\"fas fa-expand\" style=\"color:#94a3b8;\"><\/i> Fullscreen Editor\n    <\/button>\n    <button class=\"mlp-more-dropdown-item mlp-settings-export-btn\" data-instance=\"mlp-15-1\">\n      <i class=\"fas fa-file-code\" style=\"color:#34d399;\"><\/i> <span class=\"mlp-settings-export-label\">Export (HTML CSS JS)<\/span>\n    <\/button>\n    <button class=\"mlp-more-dropdown-item mlp-settings-exportzip-btn\" data-instance=\"mlp-15-1\">\n      <i class=\"fas fa-file-archive\" style=\"color:#f9a825;\"><\/i> <span class=\"mlp-settings-exportzip-label\">Export .zip (HTML CSS JS)<\/span>\n    <\/button>\n    <button class=\"mlp-more-dropdown-item mlp-settings-clear-btn\" data-instance=\"mlp-15-1\" style=\"color:#d16969;\">\n      <i class=\"fas fa-trash\" style=\"color:#d16969;\"><\/i> <span class=\"mlp-settings-clear-label\">Clear HTML<\/span>\n    <\/button>\n  <\/div>\n  <div style=\"display:none;\">\n    <!-- Header -->\n    <div style=\"background:#161616;border-bottom:1px solid #2a2a2a;padding:7px 14px;display:flex;align-items:center;gap:8px;\">\n      <i class=\"fas fa-cog\" style=\"color:#4dccff;font-size:0.75rem;\"><\/i>\n      <span style=\"font-size:0.7rem;font-weight:700;color:#4dccff;letter-spacing:0.08em;text-transform:uppercase;\">Editor Settings<\/span>\n    <\/div>\n    <!-- Language (locked to English) -->\n    <div style=\"padding:12px 14px;border-bottom:1px solid #1e1e1e;\">\n      <label style=\"font-size:0.68rem;color:#555;text-transform:uppercase;letter-spacing:0.08em;display:block;margin-bottom:6px;font-weight:700;\">\n        <i class=\"fas fa-language\" style=\"margin-right:4px;color:#4dccff;\"><\/i>Language\n      <\/label>\n      <div style=\"position:relative;\">\n        <select disabled style=\"width:100%;padding:6px 30px 6px 10px;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:5px;color:#4dccff;font-size:0.8rem;font-family:inherit;appearance:none;-webkit-appearance:none;cursor:not-allowed;opacity:0.85;\">\n          <option value=\"en\" selected>English<\/option>\n        <\/select>\n        <i class=\"fas fa-lock\" style=\"position:absolute;right:9px;top:50%;transform:translateY(-50%);color:#555;font-size:0.65rem;pointer-events:none;\"><\/i>\n      <\/div>\n      <p style=\"font-size:0.62rem;color:#444;margin:4px 0 0;font-style:italic;\">Language is fixed to English.<\/p>\n    <\/div>\n    <!-- Font Size -->\n    <div style=\"padding:10px 14px;border-bottom:1px solid #1e1e1e;display:flex;align-items:center;justify-content:space-between;gap:10px;\">\n      <label style=\"font-size:0.78rem;color:#aaa;display:flex;align-items:center;gap:6px;flex:1;\">\n        <i class=\"fas fa-text-height\" style=\"color:#a78bfa;font-size:0.75rem;width:14px;text-align:center;\"><\/i>Font Size\n      <\/label>\n      <div style=\"display:flex;align-items:center;gap:6px;\">\n        <button class=\"mlp-settings-font-dec\" data-instance=\"mlp-15-1\" style=\"width:22px;height:22px;background:rgba(255,255,255,0.06);border:1px solid #2a2a2a;border-radius:4px;color:#ccc;cursor:pointer;font-size:0.8rem;display:flex;align-items:center;justify-content:center;transition:all 0.15s;\" title=\"Decrease\">\u2212<\/button>\n        <span class=\"mlp-settings-font-val\" style=\"font-size:0.8rem;color:#4dccff;min-width:26px;text-align:center;font-weight:700;\">14<\/span>\n        <button class=\"mlp-settings-font-inc\" data-instance=\"mlp-15-1\" style=\"width:22px;height:22px;background:rgba(255,255,255,0.06);border:1px solid #2a2a2a;border-radius:4px;color:#ccc;cursor:pointer;font-size:0.8rem;display:flex;align-items:center;justify-content:center;transition:all 0.15s;\" title=\"Increase\">+<\/button>\n      <\/div>\n    <\/div>\n    <!-- Word Wrap -->\n    <div style=\"padding:10px 14px;border-bottom:1px solid #1e1e1e;display:flex;align-items:center;justify-content:space-between;gap:10px;\">\n      <label style=\"font-size:0.78rem;color:#aaa;display:flex;align-items:center;gap:6px;cursor:pointer;\">\n        <i class=\"fas fa-indent\" style=\"color:#a78bfa;font-size:0.75rem;width:14px;text-align:center;\"><\/i>Word Wrap\n      <\/label>\n      <label style=\"position:relative;display:inline-block;width:34px;height:18px;cursor:pointer;flex-shrink:0;\">\n        <input type=\"checkbox\" class=\"mlp-settings-wrap-toggle\" data-instance=\"mlp-15-1\" style=\"opacity:0;width:0;height:0;position:absolute;\">\n        <span class=\"mlp-settings-toggle-slider\" style=\"position:absolute;top:0;left:0;right:0;bottom:0;background:#2a2a2a;border-radius:18px;transition:0.2s;\"><\/span>\n      <\/label>\n    <\/div>\n    <!-- Minimap -->\n    <div style=\"padding:10px 14px;border-bottom:1px solid #1e1e1e;display:flex;align-items:center;justify-content:space-between;gap:10px;\">\n      <label style=\"font-size:0.78rem;color:#aaa;display:flex;align-items:center;gap:6px;cursor:pointer;\">\n        <i class=\"fas fa-map\" style=\"color:#a78bfa;font-size:0.75rem;width:14px;text-align:center;\"><\/i>Minimap\n      <\/label>\n      <label style=\"position:relative;display:inline-block;width:34px;height:18px;cursor:pointer;flex-shrink:0;\">\n        <input type=\"checkbox\" class=\"mlp-settings-minimap-toggle\" data-instance=\"mlp-15-1\" style=\"opacity:0;width:0;height:0;position:absolute;\">\n        <span class=\"mlp-settings-toggle-slider\" style=\"position:absolute;top:0;left:0;right:0;bottom:0;background:#4dccff;border-radius:18px;transition:0.2s;\"><\/span>\n      <\/label>\n    <\/div>\n    <!-- Line Numbers -->\n    <div style=\"padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;\">\n      <label style=\"font-size:0.78rem;color:#aaa;display:flex;align-items:center;gap:6px;cursor:pointer;\">\n        <i class=\"fas fa-list-ol\" style=\"color:#a78bfa;font-size:0.75rem;width:14px;text-align:center;\"><\/i>Line Numbers\n      <\/label>\n      <label style=\"position:relative;display:inline-block;width:34px;height:18px;cursor:pointer;flex-shrink:0;\">\n        <input type=\"checkbox\" class=\"mlp-settings-lines-toggle\" data-instance=\"mlp-15-1\" checked style=\"opacity:0;width:0;height:0;position:absolute;\">\n        <span class=\"mlp-settings-toggle-slider\" style=\"position:absolute;top:0;left:0;right:0;bottom:0;background:#4dccff;border-radius:18px;transition:0.2s;\"><\/span>\n      <\/label>\n    <\/div>\n  <\/div>\n<\/div>\n<!-- Horizontal HTML\/CSS\/JS Tabs with Font Awesome icons from preprocessor popup -->\n<div class=\"mlp-editor-tabs-horizontal\">\n<button class=\"mlp-tab-button-horizontal active\" data-tab=\"html\">\n<i class=\"fab fa-html5 mlp-tab-icon\" id=\"mlp-html-tab-icon-mlp-15-1\"><\/i>\n<span class=\"mlp-tab-text\">HTML<\/span>\n<span class=\"mlp-gear-icon-horizontal\" data-lang=\"html\" title=\"Change Preprocessor\">\n<i class=\"fas fa-cogs\"><\/i>\n<\/span>\n<\/button>\n<button class=\"mlp-tab-button-horizontal\" data-tab=\"css\">\n<i class=\"fab fa-css3-alt mlp-tab-icon\" id=\"mlp-css-tab-icon-mlp-15-1\"><\/i>\n<span class=\"mlp-tab-text\">CSS<\/span>\n<span class=\"mlp-gear-icon-horizontal\" data-lang=\"css\" title=\"Change Preprocessor\">\n<i class=\"fas fa-cogs\"><\/i>\n<\/span>\n<\/button>\n<button class=\"mlp-tab-button-horizontal\" data-tab=\"js\">\n<i class=\"fab fa-js mlp-tab-icon\" id=\"mlp-js-tab-icon-mlp-15-1\"><\/i>\n<span class=\"mlp-tab-text\">JS<\/span>\n<span class=\"mlp-gear-icon-horizontal\" data-lang=\"js\" title=\"Change Preprocessor\">\n<i class=\"fas fa-cogs\"><\/i>\n<\/span>\n<\/button>\n<\/div>\n<\/div>\n<div class=\"mlp-editor-header-right\">\n<!-- Copy Button - top right of editor -->\n<button class=\"mlp-copy-current-button\" id=\"mlp-copy-current-mlp-15-1\" data-instance=\"mlp-15-1\" style=\"display:flex;align-items:center;gap:6px;padding:6px 12px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.14);border-radius:6px;color:#94a3b8;cursor:pointer;font-size:0.82rem;font-weight:500;transition:all 0.2s;white-space:nowrap;\">\n<i class=\"fas fa-copy\" style=\"font-size:0.78rem;\"><\/i> Copy<\/button>\n<!-- Fullscreen Editor Button - Shows \"Fork to Edit\" for Read.me tabs -->\n<button class=\"mlp-fullscreen-editor-btn\" data-instance=\"mlp-15-1\" title=\"Open Fullscreen Editor\">\n<i class=\"fas fa-expand\"><\/i>\n<\/button>\n<\/div>\n<\/div>\n<!-- Read.me Info Bar (shown only for read-only tabs) - Modified for conditional display -->\n<div class=\"mlp-readme-info-bar\" id=\"mlp-readme-info-bar-mlp-15-1\" style=\"display: none;\">\n<div class=\"mlp-readme-row\">\n<span class=\"mlp-readme-badge\">\ud83d\udcd6 Read.me<\/span>\n<!-- Public share elements (hidden for personal) -->\n<div class=\"mlp-readme-url-section\" id=\"mlp-readme-url-section-mlp-15-1\">\n<input type=\"text\" id=\"mlp-readme-url-mlp-15-1\" class=\"mlp-readme-url-input\" readonly>\n<button class=\"mlp-readme-copy-btn\" id=\"mlp-readme-copy-btn-mlp-15-1\">\n<i class=\"fas fa-copy\"><\/i>\n<\/button>\n<\/div>\n<span class=\"mlp-readme-expiry\" id=\"mlp-readme-expiry-mlp-15-1\">\n<i class=\"fas fa-clock\"><\/i> <span class=\"mlp-expiry-time\">--:--:--<\/span>\n<\/span>\n<\/div>\n<\/div>\n<div class=\"mlp-editor-container\" id=\"mlp-editor-container-mlp-15-1\">\n<div class=\"mlp-editor-wrapper active\" id=\"mlp-html-wrapper-mlp-15-1\">\n<button type=\"button\" class=\"ptr-panel-fs-btn\" data-instance=\"mlp-15-1\" data-tab=\"html\" title=\"Open HTML in fullscreen\"><i class=\"fas fa-expand\"><\/i><\/button>\n<div class=\"ptr-panel-actions\" data-instance=\"mlp-15-1\" data-tab=\"html\">\n<button type=\"button\" class=\"ptr-panel-gear-btn\" data-instance=\"mlp-15-1\" data-tab=\"html\" title=\"Settings\"><i class=\"fas fa-cog\"><\/i><\/button>\n<button type=\"button\" class=\"ptr-panel-more-btn\" data-instance=\"mlp-15-1\" data-tab=\"html\" title=\"More\"><i class=\"fas fa-chevron-down\"><\/i><\/button>\n<\/div>\n<div class=\"mlp-monaco-editor\" id=\"mlp-html-editor-mlp-15-1\" data-type=\"html\" data-instance=\"mlp-15-1\"><\/div>\n<div class=\"mlp-preprocessor-badge\" id=\"mlp-html-badge-mlp-15-1\" data-lang=\"html\" style=\"display:none;\">HTML<\/div>\n<\/div>\n<div class=\"mlp-editor-wrapper\" id=\"mlp-css-wrapper-mlp-15-1\">\n<button type=\"button\" class=\"ptr-panel-fs-btn\" data-instance=\"mlp-15-1\" data-tab=\"css\" title=\"Open CSS in fullscreen\"><i class=\"fas fa-expand\"><\/i><\/button>\n<div class=\"ptr-panel-actions\" data-instance=\"mlp-15-1\" data-tab=\"css\">\n<button type=\"button\" class=\"ptr-panel-gear-btn\" data-instance=\"mlp-15-1\" data-tab=\"css\" title=\"Settings\"><i class=\"fas fa-cog\"><\/i><\/button>\n<button type=\"button\" class=\"ptr-panel-more-btn\" data-instance=\"mlp-15-1\" data-tab=\"css\" title=\"More\"><i class=\"fas fa-chevron-down\"><\/i><\/button>\n<\/div>\n<div class=\"mlp-monaco-editor\" id=\"mlp-css-editor-mlp-15-1\" data-type=\"css\" data-instance=\"mlp-15-1\"><\/div>\n<div class=\"mlp-preprocessor-badge\" id=\"mlp-css-badge-mlp-15-1\" data-lang=\"css\" style=\"display:none;\">CSS<\/div>\n<\/div>\n<div class=\"mlp-editor-wrapper\" id=\"mlp-js-wrapper-mlp-15-1\">\n<button type=\"button\" class=\"ptr-panel-fs-btn\" data-instance=\"mlp-15-1\" data-tab=\"js\" title=\"Open JS in fullscreen\"><i class=\"fas fa-expand\"><\/i><\/button>\n<div class=\"ptr-panel-actions\" data-instance=\"mlp-15-1\" data-tab=\"js\">\n<button type=\"button\" class=\"ptr-panel-gear-btn\" data-instance=\"mlp-15-1\" data-tab=\"js\" title=\"Settings\"><i class=\"fas fa-cog\"><\/i><\/button>\n<button type=\"button\" class=\"ptr-panel-more-btn\" data-instance=\"mlp-15-1\" data-tab=\"js\" title=\"More\"><i class=\"fas fa-chevron-down\"><\/i><\/button>\n<\/div>\n<div class=\"mlp-monaco-editor\" id=\"mlp-js-editor-mlp-15-1\" data-type=\"js\" data-instance=\"mlp-15-1\"><\/div>\n<div class=\"mlp-preprocessor-badge\" id=\"mlp-js-badge-mlp-15-1\" data-lang=\"js\" style=\"display:none;\">JS<\/div>\n<\/div>\n<\/div>\n<!-- Wire per-panel fullscreen buttons \u2192 opens fullscreen editor, then switches to the clicked language tab.\n     Wire per-panel gear buttons \u2192 opens the preprocessor popup for that language.\n     Wire topbar Settings button \u2192 opens the existing Settings menu (delegates to .mlp-editor-settings-gear). -->\n<!-- Topbar Settings popup styles (self-contained \u2014 does not touch existing gear menu CSS) -->\n<style>\n.ptr-settings-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:999998;display:none;align-items:center;justify-content:center;animation:ptr-settings-fade 0.15s ease;}\n.ptr-settings-modal-backdrop.open{display:flex;}\n.ptr-settings-modal{background:#0c0c0c;border:1px solid #444;min-width:300px;max-width:92vw;box-shadow:0 20px 50px rgba(0,0,0,0.9);font-family:'Consolas','Monaco','Courier New',monospace;color:#e6e6e6;animation:ptr-settings-pop 0.18s ease;}\n.ptr-settings-modal-header{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid #1a1a1a;background:#0a0a0a;}\n.ptr-settings-modal-dot{width:8px;height:8px;border-radius:50%;background:#4dccff;box-shadow:0 0 6px rgba(77,204,255,0.7);}\n.ptr-settings-modal-title{flex:1;font-size:0.78rem;color:#fff;text-transform:uppercase;letter-spacing:0.08em;font-weight:600;}\n.ptr-settings-modal-close{background:none;border:none;color:#888;cursor:pointer;font-size:0.9rem;padding:4px 6px;line-height:1;}\n.ptr-settings-modal-close:hover{color:#fff;}\n.ptr-settings-modal-body{padding:8px 0;display:flex;flex-direction:column;}\n.ptr-settings-modal-item{display:flex;align-items:center;gap:12px;padding:12px 18px;background:transparent;border:none;color:#e6e6e6;font-family:inherit;font-size:0.82rem;cursor:pointer;text-align:left;width:100%;transition:background 0.12s,color 0.12s;}\n.ptr-settings-modal-item:hover{background:#1e1e1e;color:#fff;}\n.ptr-settings-modal-item i{font-size:0.95rem;width:18px;text-align:center;}\n@keyframes ptr-settings-fade{from{opacity:0;}to{opacity:1;}}\n@keyframes ptr-settings-pop{from{opacity:0;transform:translateY(-6px) scale(0.98);}to{opacity:1;transform:none;}}\n<\/style>\n<script>\n(function(){\n  var iid = \"mlp-15-1\";\n  \/* Wait for jQuery + DOM ready (some themes load jQuery in the footer). *\/\n  function whenReady(cb){\n    if (window.jQuery && document.readyState !== \"loading\") { window.jQuery(cb); return; }\n    if (window.jQuery) { window.jQuery(function($){ cb($); }); return; }\n    setTimeout(function(){ whenReady(cb); }, 50);\n  }\n  whenReady(function($){\n    \/* Move the existing Settings wrap (which holds the Ptero\/Editor sub-panels) out of any\n       hidden ancestor into <body> so its position:fixed sub-panels can actually paint when the\n       existing handlers open them. Hide its original gear span \u2014 the topbar Settings button + the\n       new popup replace the inline gear UI. All existing handlers continue to work because they\n       are document-delegated on .mlp-gear-menu-btn \/ .mlp-gear-panel. *\/\n    (function relocateSettingsWrap(){\n      var $w = $(\".mlp-editor-settings-wrap[data-instance='\"+iid+\"']\").not(\".mlp-fs-gear-wrap\").first();\n      if (!$w.length || $w.data(\"ptrRelocated\")) return;\n      $w.appendTo(\"body\").css({position:\"absolute\", top:\"-9999px\", left:\"-9999px\", margin:0, width:\"0\", height:\"0\", overflow:\"visible\"});\n      $w.children(\".mlp-editor-settings-gear\").hide();\n      $w.data(\"ptrRelocated\", true);\n    })();\n\n    \/* Per-panel \"open in fullscreen\" buttons. *\/\n    $(document).off(\"click.ptrPanelFs-\"+iid).on(\"click.ptrPanelFs-\"+iid, \"#\"+iid+\" .ptr-panel-fs-btn\", function(e){\n      e.preventDefault(); e.stopPropagation();\n      var tab = $(this).data(\"tab\") || \"html\";\n      try {\n        if (typeof window.openFullscreenEditor === \"function\") { window.openFullscreenEditor(iid); }\n        setTimeout(function(){\n          if (typeof window.switchFullscreenEditorTab === \"function\") { window.switchFullscreenEditorTab(iid, tab); }\n        }, 60);\n      } catch(err){ \/* silent *\/ }\n    });\n\n    \/* Per-panel gear \u2192 preprocessor popup for that language (HTML \/ CSS \/ JS). *\/\n    $(document).off(\"click.ptrPanelGear-\"+iid).on(\"click.ptrPanelGear-\"+iid, \"#\"+iid+\" .ptr-panel-gear-btn\", function(e){\n      e.preventDefault(); e.stopPropagation();\n      var lang = $(this).data(\"tab\") || \"html\";\n      try {\n        if (typeof window.openPreprocessorModal === \"function\") { window.openPreprocessorModal(iid, lang); }\n      } catch(err){ \/* silent *\/ }\n    });\n\n    \/* Build the topbar Settings popup once, append to body, and wire its events. *\/\n    function buildSettingsPopup(){\n      var existing = document.getElementById(\"ptr-settings-modal-\"+iid);\n      if (existing) return existing;\n      var html =\n        '<div class=\"ptr-settings-modal-backdrop\" id=\"ptr-settings-modal-'+iid+'\" data-instance=\"'+iid+'\">' +\n          '<div class=\"ptr-settings-modal\" role=\"dialog\" aria-label=\"Settings\">' +\n            '<div class=\"ptr-settings-modal-header\">' +\n              '<span class=\"ptr-settings-modal-dot\"><\/span>' +\n              '<span class=\"ptr-settings-modal-title\">Settings<\/span>' +\n              '<button type=\"button\" class=\"ptr-settings-modal-close\" aria-label=\"Close\">&times;<\/button>' +\n            '<\/div>' +\n            '<div class=\"ptr-settings-modal-body\">' +\n              '<button type=\"button\" class=\"ptr-settings-modal-item\" data-panel=\"ptero\">' +\n                '<i class=\"fas fa-paint-brush\" style=\"color:#f59e0b;\"><\/i> Ptero Appearance' +\n              '<\/button>' +\n              '<button type=\"button\" class=\"ptr-settings-modal-item\" data-panel=\"editor\">' +\n                '<i class=\"fas fa-sliders-h\" style=\"color:#a78bfa;\"><\/i> Editor Appearance' +\n              '<\/button>' +\n            '<\/div>' +\n          '<\/div>' +\n        '<\/div>';\n      var wrapper = document.createElement(\"div\");\n      wrapper.innerHTML = html;\n      var node = wrapper.firstElementChild;\n      document.body.appendChild(node);\n      return node;\n    }\n\n    function openSettingsPopup(){\n      var modal = buildSettingsPopup();\n      modal.classList.add(\"open\");\n    }\n    function closeSettingsPopup(){\n      var modal = document.getElementById(\"ptr-settings-modal-\"+iid);\n      if (modal) modal.classList.remove(\"open\");\n    }\n\n    \/* Topbar Settings button \u2192 opens our popup. *\/\n    $(document).off(\"click.ptrTopbarSettings-\"+iid).on(\"click.ptrTopbarSettings-\"+iid, \"#\"+iid+\" .ptr-topbar-settings-btn\", function(e){\n      e.preventDefault(); e.stopPropagation();\n      openSettingsPopup();\n    });\n\n    \/* Close button + click on backdrop. *\/\n    $(document).off(\"click.ptrSettingsClose-\"+iid).on(\"click.ptrSettingsClose-\"+iid, \"#ptr-settings-modal-\"+iid+\" .ptr-settings-modal-close\", function(e){\n      e.preventDefault(); e.stopPropagation();\n      closeSettingsPopup();\n    });\n    $(document).off(\"click.ptrSettingsBackdrop-\"+iid).on(\"click.ptrSettingsBackdrop-\"+iid, \"#ptr-settings-modal-\"+iid, function(e){\n      if (e.target === this) closeSettingsPopup();\n    });\n\n    \/* Popup item \u2192 close popup, then trigger the matching existing menu button so the existing\n       Ptero \/ Editor sub-panel opens with all of its current functionality. *\/\n    $(document).off(\"click.ptrSettingsItem-\"+iid).on(\"click.ptrSettingsItem-\"+iid, \"#ptr-settings-modal-\"+iid+\" .ptr-settings-modal-item\", function(e){\n      e.preventDefault(); e.stopPropagation();\n      var panel = $(this).data(\"panel\");\n      closeSettingsPopup();\n      var $orig = $(\".mlp-gear-menu-btn[data-panel='\"+panel+\"'][data-instance='\"+iid+\"']\").first();\n      if ($orig.length) {\n        setTimeout(function(){ $orig.trigger(\"click\"); }, 60);\n      }\n    });\n  });\n})();\n<\/script>\n<!-- Action dropdown hover styles -->\n<style>\n\/* Trigger button \u2014 all states *\/\n.mlp-action-dd-btn,.mlp-action-dd-btn:hover,.mlp-action-dd-btn:focus,.mlp-action-dd-btn:active,.mlp-action-dd-btn:focus-visible{color:#cbd5e1!important;outline:none!important;box-shadow:none!important;}\n.mlp-action-dd-btn:hover{background:rgba(255,255,255,0.11)!important;border-color:rgba(255,255,255,0.2)!important;color:#e2e8f0!important;}\n.mlp-action-dd-btn:hover .fa-sliders-h{color:#94a3b8!important;}\n\/* All items \u2014 kill browser button default color override on every state *\/\n.mlp-action-dd-item,.mlp-action-dd-item:hover,.mlp-action-dd-item:focus,.mlp-action-dd-item:active,.mlp-action-dd-item:focus-visible{outline:none!important;box-shadow:none!important;-webkit-appearance:none!important;}\n.mlp-action-dd-menu button::-moz-focus-inner{border:0!important;}\n\/* Create Backup *\/\n.mlp-action-dd-item.mlp-create-backup-btn,.mlp-action-dd-item.mlp-create-backup-btn:hover,.mlp-action-dd-item.mlp-create-backup-btn:focus,.mlp-action-dd-item.mlp-create-backup-btn:active{color:#94a3b8!important;background:transparent!important;}\n.mlp-action-dd-item.mlp-create-backup-btn:hover{background:rgba(78,201,176,0.07)!important;color:#4ec9b0!important;}\n.mlp-action-dd-item.mlp-create-backup-btn:hover span{color:#4ec9b0!important;}\n\/* Delete Code *\/\n.mlp-action-dd-item.mlp-action-delete-code,.mlp-action-dd-item.mlp-action-delete-code:hover,.mlp-action-dd-item.mlp-action-delete-code:focus,.mlp-action-dd-item.mlp-action-delete-code:active{color:#94a3b8!important;background:transparent!important;}\n.mlp-action-dd-item.mlp-action-delete-code:hover{background:rgba(252,165,165,0.07)!important;color:#fca5a5!important;}\n.mlp-action-dd-item.mlp-action-delete-code:hover span{color:#fca5a5!important;}\n\/* Use Default *\/\n.mlp-action-dd-item.mlp-action-use-default,.mlp-action-dd-item.mlp-action-use-default:hover,.mlp-action-dd-item.mlp-action-use-default:focus,.mlp-action-dd-item.mlp-action-use-default:active{color:#94a3b8!important;background:transparent!important;}\n.mlp-action-dd-item.mlp-action-use-default:hover{background:rgba(253,230,138,0.07)!important;color:#fde68a!important;}\n.mlp-action-dd-item.mlp-action-use-default:hover span{color:#fde68a!important;}\n\/* Cancel *\/\n.mlp-action-dd-item.mlp-action-dd-cancel,.mlp-action-dd-item.mlp-action-dd-cancel:hover,.mlp-action-dd-item.mlp-action-dd-cancel:focus,.mlp-action-dd-item.mlp-action-dd-cancel:active{color:#334155!important;background:transparent!important;}\n.mlp-action-dd-item.mlp-action-dd-cancel:hover{color:#64748b!important;}\n<\/style>\n<!-- Editor Actions -->\n<div class=\"mlp-editor-actions\" id=\"mlp-editor-actions-mlp-15-1\" style=\"display:none !important;\">\n<!-- Action dropdown -->\n<div class=\"mlp-action-dd-wrap\" style=\"position:relative !important;\">\n<button class=\"mlp-action-dd-btn\" id=\"mlp-action-dd-btn-mlp-15-1\" data-instance=\"mlp-15-1\" style=\"display:flex !important;align-items:center !important;gap:8px !important;padding:9px 18px !important;background:rgba(255,255,255,0.06) !important;border:1px solid rgba(255,255,255,0.12) !important;border-radius:7px !important;color:#cbd5e1 !important;cursor:pointer !important;font-size:0.82rem !important;font-weight:500 !important;letter-spacing:0.03em !important;transition:all 0.18s ease !important;white-space:nowrap !important;font-family:inherit !important;\">\n<i class=\"fas fa-sliders-h\" style=\"font-size:0.75rem !important;color:#64748b !important;\"><\/i>\nActions<i class=\"fas fa-chevron-up\" style=\"font-size:0.55rem !important;color:#475569 !important;margin-left:2px !important;transition:transform 0.18s ease !important;\" id=\"mlp-action-dd-chevron-mlp-15-1\"><\/i>\n<\/button>\n<div class=\"mlp-action-dd-menu\" id=\"mlp-action-dd-menu-mlp-15-1\" style=\"display:none !important;position:absolute !important;bottom:calc(100% + 8px) !important;left:0 !important;background:#0f1117 !important;border:1px solid rgba(255,255,255,0.08) !important;border-radius:10px !important;min-width:230px !important;box-shadow:0 -4px 6px -1px rgba(0,0,0,0.3),0 -20px 40px rgba(0,0,0,0.7),inset 0 1px 0 rgba(255,255,255,0.04) !important;overflow:hidden !important;z-index:9999 !important;animation:mlp-action-dd-up 0.18s cubic-bezier(0.16,1,0.3,1) !important;\">\n<!-- Header -->\n<div style=\"padding:10px 14px 9px !important;border-bottom:1px solid rgba(255,255,255,0.06) !important;display:flex !important;align-items:center !important;justify-content:space-between !important;\">\n  <div style=\"display:flex !important;align-items:center !important;gap:7px !important;\">\n    <div style=\"width:5px !important;height:5px !important;border-radius:50% !important;background:#3b82f6 !important;box-shadow:0 0 6px rgba(59,130,246,0.6) !important;flex-shrink:0 !important;\"><\/div>\n    <span style=\"font-size:0.68rem !important;font-weight:700 !important;color:#475569 !important;letter-spacing:0.12em !important;text-transform:uppercase !important;font-family:'Consolas','Monaco',monospace !important;\">Editor Actions<\/span>\n  <\/div>\n<\/div>\n<!-- Section label: Backup -->\n<div style=\"padding:8px 14px 4px !important;\">\n  <span style=\"font-size:0.62rem !important;color:#334155 !important;text-transform:uppercase !important;letter-spacing:0.1em !important;font-weight:600 !important;font-family:'Consolas','Monaco',monospace !important;\">Backup<\/span>\n<\/div>\n<!-- Create Backup -->\n<button class=\"mlp-action-dd-item mlp-create-backup-btn\" data-instance=\"mlp-15-1\" style=\"width:100% !important;background:transparent !important;border:none !important;border-radius:0 !important;padding:9px 14px !important;font-size:0.82rem !important;cursor:pointer !important;display:flex !important;align-items:center !important;gap:10px !important;text-align:left !important;font-family:'Consolas','Monaco','Courier New',monospace !important;transition:background 0.12s !important;color:#94a3b8 !important;box-sizing:border-box !important;\">\n  <span style=\"width:26px !important;height:26px !important;border-radius:6px !important;background:rgba(78,201,176,0.1) !important;border:1px solid rgba(78,201,176,0.2) !important;display:flex !important;align-items:center !important;justify-content:center !important;flex-shrink:0 !important;\">\n    <i class=\"fas fa-database\" style=\"font-size:0.72rem !important;color:#4ec9b0 !important;\"><\/i>\n  <\/span>\n  <div style=\"display:flex !important;flex-direction:column !important;gap:1px !important;\">\n    <span style=\"color:#94a3b8 !important;font-size:0.82rem !important;font-weight:500 !important;\">Create Backup<\/span>\n    <span style=\"color:#334155 !important;font-size:0.68rem !important;font-family:inherit !important;\">Save current code snapshot<\/span>\n  <\/div>\n<\/button>\n<!-- Section label: Danger Zone -->\n<div style=\"padding:8px 14px 4px !important;border-top:1px solid rgba(255,255,255,0.05) !important;margin-top:4px !important;\">\n  <span style=\"font-size:0.62rem !important;color:#334155 !important;text-transform:uppercase !important;letter-spacing:0.1em !important;font-weight:600 !important;font-family:'Consolas','Monaco',monospace !important;\">Danger Zone<\/span>\n<\/div>\n<!-- Delete -->\n<button class=\"mlp-action-dd-item mlp-action-delete-code\" data-instance=\"mlp-15-1\" style=\"width:100% !important;background:transparent !important;border:none !important;border-radius:0 !important;padding:9px 14px !important;font-size:0.82rem !important;cursor:pointer !important;display:flex !important;align-items:center !important;gap:10px !important;text-align:left !important;font-family:'Consolas','Monaco','Courier New',monospace !important;transition:background 0.12s !important;color:#94a3b8 !important;box-sizing:border-box !important;\">\n  <span style=\"width:26px !important;height:26px !important;border-radius:6px !important;background:rgba(248,113,113,0.1) !important;border:1px solid rgba(248,113,113,0.2) !important;display:flex !important;align-items:center !important;justify-content:center !important;flex-shrink:0 !important;\">\n    <i class=\"fas fa-trash-alt\" style=\"font-size:0.72rem !important;color:#f87171 !important;\"><\/i>\n  <\/span>\n  <div style=\"display:flex !important;flex-direction:column !important;gap:1px !important;\">\n    <span style=\"color:#94a3b8 !important;font-size:0.82rem !important;font-weight:500 !important;\">Delete Current Code<\/span>\n    <span style=\"color:#334155 !important;font-size:0.68rem !important;font-family:inherit !important;\">Clears HTML, CSS &amp; JS<\/span>\n  <\/div>\n<\/button>\n<!-- Use Default -->\n<button class=\"mlp-action-dd-item mlp-action-use-default\" data-instance=\"mlp-15-1\" style=\"width:100% !important;background:transparent !important;border:none !important;border-radius:0 !important;border-top:1px solid rgba(255,255,255,0.04) !important;padding:9px 14px !important;font-size:0.82rem !important;cursor:pointer !important;display:flex !important;align-items:center !important;gap:10px !important;text-align:left !important;font-family:'Consolas','Monaco','Courier New',monospace !important;transition:background 0.12s !important;color:#94a3b8 !important;box-sizing:border-box !important;\">\n  <span style=\"width:26px !important;height:26px !important;border-radius:6px !important;background:rgba(251,191,36,0.1) !important;border:1px solid rgba(251,191,36,0.2) !important;display:flex !important;align-items:center !important;justify-content:center !important;flex-shrink:0 !important;\">\n    <i class=\"fas fa-undo-alt\" style=\"font-size:0.72rem !important;color:#fbbf24 !important;\"><\/i>\n  <\/span>\n  <div style=\"display:flex !important;flex-direction:column !important;gap:1px !important;\">\n    <span style=\"color:#94a3b8 !important;font-size:0.82rem !important;font-weight:500 !important;\">Use Default Code<\/span>\n    <span style=\"color:#334155 !important;font-size:0.68rem !important;font-family:inherit !important;\">Restore plugin defaults<\/span>\n  <\/div>\n<\/button>\n<!-- Separator -->\n<div style=\"margin:6px 14px !important;border-top:1px solid rgba(255,255,255,0.05) !important;\"><\/div>\n<!-- Dismiss -->\n<button class=\"mlp-action-dd-item mlp-action-dd-cancel\" data-instance=\"mlp-15-1\" style=\"width:100% !important;background:transparent !important;border:none !important;border-radius:0 !important;color:#334155 !important;padding:8px 14px 12px !important;font-size:0.75rem !important;cursor:pointer !important;display:flex !important;align-items:center !important;gap:9px !important;text-align:left !important;font-family:'Consolas','Monaco','Courier New',monospace !important;transition:color 0.12s !important;box-sizing:border-box !important;\">\n  <i class=\"fas fa-times\" style=\"font-size:0.68rem !important;width:14px !important;text-align:center !important;\"><\/i>\n  Dismiss<\/button>\n<\/div>\n<\/div>\n<!-- Warning modal: Delete Code -->\n<div class=\"mlp-action-warn-modal\" id=\"mlp-action-warn-delete-mlp-15-1\" style=\"display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.82);z-index:100010;align-items:center;justify-content:center;backdrop-filter:blur(8px);\">\n<div style=\"background:#0c0c0c;border:1px solid #333;border-top:2px solid #f87171;border-radius:8px;max-width:420px;width:93%;overflow:hidden;animation:mlp-backup-modal-slide 0.22s ease-out;\">\n<div style=\"background:#1a1a1a;border-bottom:1px solid #2a2a2a;padding:10px 16px;display:flex;justify-content:space-between;align-items:center;\">\n<span style=\"color:#f87171;font-size:0.88rem;font-weight:700;display:flex;align-items:center;gap:8px;\"><i class=\"fas fa-exclamation-triangle\"><\/i> Delete Current Code<\/span>\n<button class=\"mlp-action-warn-close\" data-target=\"mlp-action-warn-delete-mlp-15-1\" style=\"background:none;border:none;color:#666;font-size:1.1rem;cursor:pointer;padding:2px 6px;border-radius:3px;line-height:1;\"><i class=\"fas fa-times\"><\/i><\/button>\n<\/div>\n<div style=\"padding:20px 18px;\">\n<div style=\"background:rgba(248,113,113,0.08);border:1px solid rgba(248,113,113,0.25);border-radius:6px;padding:12px 14px;margin-bottom:16px;\">\n<p style=\"margin:0 0 8px;color:#f87171;font-size:0.88rem;font-weight:700;display:flex;align-items:center;gap:7px;\"><i class=\"fas fa-exclamation-circle\"><\/i> Warning \u2014 this cannot be undone!<\/p>\n<p style=\"margin:0;color:#94a3b8;font-size:0.82rem;line-height:1.6;\">This will permanently clear all code in the current tab (HTML, CSS &amp; JS). Consider creating a backup first.<\/p>\n<\/div>\n<div style=\"display:flex;gap:10px;margin-top:4px;\">\n<button class=\"mlp-action-warn-close\" data-target=\"mlp-action-warn-delete-mlp-15-1\" style=\"flex:1;background:#1e1e1e;border:1px solid #333;color:#888;border-radius:5px;padding:9px 14px;font-size:0.85rem;font-weight:600;cursor:pointer;transition:all 0.2s;\">Cancel<\/button>\n<button class=\"mlp-action-confirm-delete\" data-instance=\"mlp-15-1\" style=\"flex:2;background:rgba(248,113,113,0.15);border:1px solid #f87171;color:#f87171;border-radius:5px;padding:9px 14px;font-size:0.85rem;font-weight:700;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:7px;\"><i class=\"fas fa-trash-alt\"><\/i> Yes, Delete Code<\/button>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<!-- Warning modal: Use Default -->\n<div class=\"mlp-action-warn-modal\" id=\"mlp-action-warn-default-mlp-15-1\" style=\"display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.82);z-index:100010;align-items:center;justify-content:center;backdrop-filter:blur(8px);\">\n<div style=\"background:#0c0c0c;border:1px solid #333;border-top:2px solid #fbbf24;border-radius:8px;max-width:420px;width:93%;overflow:hidden;animation:mlp-backup-modal-slide 0.22s ease-out;\">\n<div style=\"background:#1a1a1a;border-bottom:1px solid #2a2a2a;padding:10px 16px;display:flex;justify-content:space-between;align-items:center;\">\n<span style=\"color:#fbbf24;font-size:0.88rem;font-weight:700;display:flex;align-items:center;gap:8px;\"><i class=\"fas fa-undo-alt\"><\/i> Use Default Code<\/span>\n<button class=\"mlp-action-warn-close\" data-target=\"mlp-action-warn-default-mlp-15-1\" style=\"background:none;border:none;color:#666;font-size:1.1rem;cursor:pointer;padding:2px 6px;border-radius:3px;line-height:1;\"><i class=\"fas fa-times\"><\/i><\/button>\n<\/div>\n<div style=\"padding:20px 18px;\">\n<div style=\"background:rgba(251,191,36,0.07);border:1px solid rgba(251,191,36,0.25);border-radius:6px;padding:12px 14px;margin-bottom:16px;\">\n<p style=\"margin:0 0 8px;color:#fbbf24;font-size:0.88rem;font-weight:700;display:flex;align-items:center;gap:7px;\"><i class=\"fas fa-exclamation-circle\"><\/i> Warning \u2014 your code will be replaced!<\/p>\n<p style=\"margin:0;color:#94a3b8;font-size:0.82rem;line-height:1.6;\">This will replace all current code in this tab with the plugin defaults. Your existing code will be lost unless you have a backup.<\/p>\n<\/div>\n<div style=\"display:flex;gap:10px;margin-top:4px;\">\n<button class=\"mlp-action-warn-close\" data-target=\"mlp-action-warn-default-mlp-15-1\" style=\"flex:1;background:#1e1e1e;border:1px solid #333;color:#888;border-radius:5px;padding:9px 14px;font-size:0.85rem;font-weight:600;cursor:pointer;transition:all 0.2s;\">Cancel<\/button>\n<button class=\"mlp-action-confirm-default\" data-instance=\"mlp-15-1\" style=\"flex:2;background:rgba(251,191,36,0.12);border:1px solid #fbbf24;color:#fbbf24;border-radius:5px;padding:9px 14px;font-size:0.85rem;font-weight:700;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:7px;\"><i class=\"fas fa-undo-alt\"><\/i> Yes, Use Default<\/button>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<textarea id=\"mlp-copy-textarea-mlp-15-1\" style=\"position: absolute; left: -9999px; opacity: 0;\"><\/textarea>\n<\/div>\n<div class=\"mlp-preview-section\">\n<div class=\"mlp-preview-header\">\n<h2 style=\"margin:0;font-size:0.88rem;font-weight:600;color:#9ca3af;display:flex;align-items:center;gap:7px;flex:1;\"><i class=\"fa fa-cube\" style=\"color:#9ca3af;\"><\/i> Preview<\/h2>\n<div class=\"mlp-preview-indicator\" id=\"mlp-preview-indicator-main-mlp-15-1\" style=\"display:none;\">\n<span class=\"mlp-preview-emoji\">\ud83d\udd04<\/span>\n<\/div>\n<div class=\"mlp-control-buttons\">\n<button class=\"mlp-control-button mlp-refresh-button\" data-instance=\"mlp-15-1\" title=\"Reload preview\">\n<i class=\"fas fa-redo\"><\/i>\n<\/button>\n<button class=\"mlp-control-button mlp-fullscreen-preview-button\" data-instance=\"mlp-15-1\" title=\"Fullscreen preview\">\n<i class=\"fas fa-expand\"><\/i>\n<\/button>\n<!-- Create Read.Me Button (hidden original, preserved for JS) -->\n<button class=\"mlp-control-button mlp-create-readme-button\" data-instance=\"mlp-15-1\" style=\"display:none !important;\">\n<i class=\"fas fa-book-open\"><\/i> Create Read.Me<\/button>\n<!-- Console Button (hidden) -->\n<button class=\"mlp-control-button mlp-console-button\" data-instance=\"mlp-15-1\" style=\"display:none !important;\">\n<span class=\"mlp-console-emoji\"><\/span>\n<\/button>\n<button class=\"mlp-control-button mlp-fullscreen-exit-btn\" id=\"mlp-fullscreen-exit-main-mlp-15-1\" style=\"display: none;\">\n<i class=\"fas fa-compress\"><\/i>\n<\/button>\n<\/div>\n<\/div>\n<div class=\"mlp-preview-container\" style=\"height: 600px;\">\n<div class=\"mlp-loader\" id=\"mlp-preview-loader-main-mlp-15-1\"><\/div>\n<iframe id=\"mlp-preview-frame-main-mlp-15-1\" class=\"mlp-preview-frame\" sandbox=\"allow-scripts allow-same-origin\"><\/iframe>\n<div class=\"mlp-mobile-mockup\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"mlp-footer\">\n<p>\n  <a href=\"https:\/\/status.ptero.us.ci\/\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"color:inherit;text-decoration:underline;\">Status<\/a>\n  &nbsp;&#9679;&nbsp;\n  <a href=\"#\" class=\"mlp-tos-open-btn\" data-instance=\"mlp-15-1\" style=\"color:inherit;text-decoration:underline;cursor:pointer;\">Tos (terms)<\/a>\n  &nbsp;&#9679;&nbsp;\n  <a href=\"#\" class=\"mlp-pp-open-btn\" data-instance=\"mlp-15-1\" style=\"color:inherit;text-decoration:underline;cursor:pointer;\">Privacy Policy<\/a>\n  &nbsp;&#9679;&nbsp;\n  <span style=\"position:relative;display:inline-block;\" class=\"mlp-footer-support-wrap\">\n    <a href=\"#\" class=\"mlp-footer-support-btn\" style=\"color:inherit;text-decoration:underline;cursor:pointer;\">Support <i class=\"fas fa-caret-down\" style=\"font-size:0.8em;\"><\/i><\/a>\n    <span class=\"mlp-footer-support-dropdown\" style=\"display:none;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#0c0c0c;border:1px solid #444;border-radius:6px;min-width:220px;box-shadow:0 8px 24px rgba(0,0,0,0.7);z-index:9999999;overflow:hidden;font-family:\\'Consolas\\',\\'Monaco\\',\\'Courier New\\',monospace;\">\n      <a href=\"https:\/\/discord.gg\/4vZ4Vz2gyX\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"display:flex;align-items:center;gap:8px;padding:10px 14px;color:#a0c8ff;text-decoration:none;font-size:0.85rem;transition:background 0.15s;\" onmouseover=\"this.style.background=\\&#039;#1e1e1e\\&#039;\" onmouseout=\"this.style.background=\\&#039;transparent\\&#039;\"><i class=\"fab fa-discord\" style=\"color:#5865F2;width:16px;text-align:center;\"><\/i> Contact us at the Discord server<\/a>\n    <\/span>\n  <\/span>\n<\/p>\n<\/div>\n<script>\n(function(){\n  var wrap = document.querySelector('.mlp-footer-support-wrap');\n  if (!wrap) return;\n  var btn = wrap.querySelector('.mlp-footer-support-btn');\n  var dd = wrap.querySelector('.mlp-footer-support-dropdown');\n  btn.addEventListener('click', function(e){\n    e.preventDefault();\n    e.stopPropagation();\n    dd.style.display = dd.style.display === 'none' ? 'block' : 'none';\n  });\n  document.addEventListener('click', function(e){\n    if (!wrap.contains(e.target)) dd.style.display = 'none';\n  });\n})();\n<\/script>\n  <\/div><!-- \/.ptr-main -->\n<\/div><!-- \/.ptr-shell -->\n<script>\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   PTEROCOS sidebar wiring \u2014 link sidebar buttons to existing controls\n   and force Monaco to re-layout for the new 3-column CodePen layout.\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n(function(){\n  var iid = 'mlp-15-1';\n  var root = document.getElementById(iid);\n  if (!root) return;\n\n  \/\/ Sidebar toggle\n  var toggleBtn = root.querySelector('.ptr-sidebar-toggle');\n  if (toggleBtn) {\n    toggleBtn.addEventListener('click', function(){\n      root.classList.toggle('ptr-sidebar-collapsed');\n      \/\/ After layout shift, ask Monaco to relayout\n      setTimeout(relayoutMonaco, 220);\n    });\n  }\n\n  \/\/ Wire each sidebar action to the existing in-page button\n  function clickFirst(selectors){\n    for (var i = 0; i < selectors.length; i++) {\n      var el = root.querySelector(selectors[i]);\n      if (el) { el.click(); return true; }\n    }\n    return false;\n  }\n  var actions = {\n    'editor': function(){ \/* already on editor \u2014 scroll to top *\/\n      var sec = root.querySelector('.mlp-editor-section');\n      if (sec) sec.scrollIntoView({behavior:'smooth', block:'start'});\n    },\n    'preview': function(){\n      var sec = root.querySelector('.mlp-preview-section');\n      if (sec) sec.scrollIntoView({behavior:'smooth', block:'start'});\n    },\n    'insert-media': function(){\n      if (typeof window.mlpMediaOpen === 'function') {\n        window.mlpMediaOpen(iid);\n      } else {\n        clickFirst(['.mlp-manager-media-btn']);\n      }\n    },\n    'backups': function(){ clickFirst(['.mlp-backups-btn', '.mlp-manager-load-backups-btn']); },\n    'fullscreen-preview': function(){ clickFirst(['.mlp-fullscreen-preview-button']); },\n    'readme': function(){ clickFirst(['.mlp-create-readme-button']); },\n    'fullscreen-editor': function(){ clickFirst(['.mlp-fullscreen-editor-btn']); }\n  };\n  root.querySelectorAll('.ptr-sidebar-link').forEach(function(link){\n    link.addEventListener('click', function(e){\n      e.preventDefault();\n      var act = link.getAttribute('data-ptr-action');\n      \/\/ Visual active state \u2014 keep \"editor\" pinned active when its action runs\n      root.querySelectorAll('.ptr-sidebar-link').forEach(function(l){ l.classList.remove('active'); });\n      if (act === 'editor' || act === 'preview') {\n        link.classList.add('active');\n      } else {\n        \/\/ Tools just trigger \u2014 keep editor active visually\n        var ed = root.querySelector('.ptr-sidebar-link[data-ptr-action=\"editor\"]');\n        if (ed) ed.classList.add('active');\n      }\n      var fn = actions[act];\n      if (typeof fn === 'function') fn();\n    });\n  });\n\n  \/\/ \"Back to Projects\" button \u2014 reopens the full-page projects manager\n  \/\/ (mlp-projects.php exposes window.mlpProjectsOpen as the public API).\n  root.querySelectorAll('.ptr-back-to-projects').forEach(function(btn){\n    btn.addEventListener('click', function(e){\n      e.preventDefault();\n      try {\n        \/\/ Snapshot current tabs into the active project before leaving the editor.\n        if (typeof window.mlpSyncTabsToProject === 'function') {\n          window.mlpSyncTabsToProject();\n        }\n      } catch(err){}\n      if (typeof window.mlpProjectsOpen === 'function') {\n        window.mlpProjectsOpen();\n      } else {\n        \/\/ Fallback \u2014 directly toggle the overlay if the public API isn't loaded.\n        var overlay = document.getElementById('mlp-projects-overlay');\n        if (overlay) {\n          overlay.classList.remove('mlp-proj-hidden');\n          overlay.style.display = '';\n          document.body.style.overflow = 'hidden';\n        }\n      }\n    });\n  });\n\n  \/\/ Force Monaco to re-layout once all 3 editors are visible at once.\n  function relayoutMonaco(){\n    try {\n      if (window.monacoInstances) {\n        var keys = Object.keys(window.monacoInstances);\n        for (var k = 0; k < keys.length; k++) {\n          var inst = window.monacoInstances[keys[k]];\n          if (!inst) continue;\n          ['html','css','js'].forEach(function(t){\n            var ed = inst[t + 'Editor'] || (inst.editors && inst.editors[t]);\n            if (ed && typeof ed.layout === 'function') {\n              try { ed.layout(); } catch(e){}\n            }\n          });\n        }\n      }\n      \/\/ Fallback: dispatch a window resize so Monaco's resize observer fires\n      window.dispatchEvent(new Event('resize'));\n    } catch(e){}\n  }\n  \/\/ Run several times during initialization since Monaco loads async\n  setTimeout(relayoutMonaco, 400);\n  setTimeout(relayoutMonaco, 1200);\n  setTimeout(relayoutMonaco, 2500);\n  window.addEventListener('resize', relayoutMonaco);\n})();\n<\/script>\n<\/div>\n<script>\nif (typeof window.monacoLoaders === \"undefined\") {\nwindow.monacoLoaders = [];\n}\nwindow.monacoLoaders.push({\ninstanceId: \"mlp-15-1\",\nhtml: \"<!DOCTYPE html>\\n<html>\\n<title>HTML Tutorial<\\\/title>\\n<body>\\n<h1>This is a heading<\\\/h1>\\n<p>This is a paragraph.<\\\/p>\\n<\\\/body>\\n<\\\/html>\",\ncss: \"\",\njs: \"\",\neditorTheme: \"vs-dark\",\noriginalDefaults: {\"html\":\"<!DOCTYPE html>\\n<html>\\n<title>HTML Tutorial<\\\/title>\\n<body>\\n<h1>This is a heading<\\\/h1>\\n<p>This is a paragraph.<\\\/p>\\n<\\\/body>\\n<\\\/html>\",\"css\":\"\",\"js\":\"\"},\npreprocessors: { html: \"html\", css: \"css\", js: \"javascript\" }\n});\n\/\/ Hard-refresh (Ctrl+F5) safety net: scripts may load out-of-order when cache is bypassed.\n\/\/ After full page load, check each loader entry and re-trigger init if Monaco didn't mount.\nwindow.addEventListener('load', function() {\n  setTimeout(function() {\n    if (!window.monacoLoaders || !window.monacoLoaders.length) return;\n    window.monacoLoaders.forEach(function(loaderData) {\n      var inst = window.monacoInstances && window.monacoInstances[loaderData.instanceId];\n      var editorMissing = !inst || !inst.htmlEditor;\n      if (editorMissing && typeof initMonacoForInstance === 'function') {\n        console.log('[MLP] Hard-refresh recovery: re-initialising', loaderData.instanceId);\n        initMonacoForInstance(loaderData);\n      }\n    });\n  }, 600);\n});\n<\/script>\n<div class=\"mlp-notification\" id=\"mlp-notification-mlp-15-1\">\n<div class=\"mlp-notification-content\">\n<span class=\"mlp-notification-spinner\"><\/span>\n<span class=\"mlp-notification-text\"><\/span>\n<\/div>\n<\/div>\n<!-- COLLAB MODAL \u2014 outside all layout containers -->\n<!-- COLLAB INVITE MODAL -->\n<div class=\"mlp-collab-invite-modal\" id=\"mlp-collab-invite-modal-mlp-15-1\" style=\"display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);z-index:999999;align-items:center;justify-content:center;\">\n<div style=\"background:#1a1a2e;border:1px solid #a78bfa;border-radius:12px;padding:24px;max-width:360px;width:90%;position:relative;\">\n<button class=\"mlp-collab-invite-close\" data-instance=\"mlp-15-1\" style=\"position:absolute;top:12px;right:14px;background:none;border:none;color:#a78bfa;font-size:1.3rem;cursor:pointer;\">&times;<\/button>\n<h3 style=\"margin:0 0 14px;color:#e9d5ff;font-size:0.95rem;\"><i class=\"fas fa-user-plus\" style=\"color:#a78bfa;\"><\/i> Invite to Room<\/h3>\n<p style=\"color:#9ca3af;font-size:0.8rem;margin:0 0 10px;\">Share this Room ID with your collaborator:<\/p>\n<div style=\"display:flex;gap:8px;align-items:center;\">\n<input type=\"text\" id=\"mlp-collab-invite-id-mlp-15-1\" readonly style=\"flex:1;padding:9px 12px;background:#0f0f23;border:1.5px solid rgba(167,139,250,0.5);border-radius:8px;color:#e9d5ff;font-family:monospace;font-size:0.9rem;outline:none;min-width:0;\" \/>\n<button class=\"mlp-collab-invite-copy\" data-instance=\"mlp-15-1\" style=\"padding:9px 13px;background:rgba(167,139,250,0.2);border:1px solid #a78bfa;border-radius:8px;color:#a78bfa;cursor:pointer;white-space:nowrap;font-size:0.85rem;\">\n<i class=\"fas fa-copy\"><\/i> Copy\n<\/button>\n<\/div>\n<p style=\"color:#6b7280;font-size:0.72rem;margin:8px 0 0;\">They open the editor, click Collab, enter this Room ID and click Start \/ Join.<\/p>\n<\/div>\n<\/div>\n<!-- COLLAB LEAVE CONFIRM MODAL -->\n<div class=\"mlp-collab-leave-confirm-modal\" id=\"mlp-collab-leave-confirm-modal-mlp-15-1\" style=\"display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.65);z-index:999999;align-items:center;justify-content:center;\">\n<div style=\"background:#1a1a2e;border:1.5px solid rgba(239,68,68,0.5);border-radius:14px;padding:28px 26px;max-width:340px;width:90%;position:relative;box-shadow:0 12px 40px rgba(0,0,0,0.5);\">\n<div style=\"display:flex;align-items:center;gap:10px;margin-bottom:14px;\">\n<i class=\"fas fa-sign-out-alt\" style=\"color:#f87171;font-size:1.1rem;\"><\/i>\n<span style=\"color:#fca5a5;font-weight:700;font-size:0.95rem;\">Leave Session?<\/span>\n<\/div>\n<p style=\"color:#9ca3af;font-size:0.83rem;margin:0 0 20px;line-height:1.5;\">You will be removed from the online list and the session will end for you.<\/p>\n<div style=\"display:flex;gap:10px;justify-content:flex-end;\">\n<button class=\"mlp-leave-confirm-cancel\" data-instance=\"mlp-15-1\" style=\"padding:8px 18px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.15);border-radius:8px;color:#9ca3af;cursor:pointer;font-size:0.85rem;transition:all 0.15s;\">Cancel<\/button>\n<button class=\"mlp-leave-confirm-yes\" data-instance=\"mlp-15-1\" style=\"padding:8px 18px;background:rgba(239,68,68,0.18);border:1px solid #ef4444;border-radius:8px;color:#fca5a5;cursor:pointer;font-size:0.85rem;font-weight:600;transition:all 0.15s;\"><i class=\"fas fa-sign-out-alt\"><\/i> Yes, Leave<\/button>\n<\/div>\n<\/div>\n<\/div>\n        <div class=\"mlp-community-overlay\" id=\"mlp-community-overlay-mlp-15-1\" style=\"display:none;\">\n\n                <!-- \u2500\u2500 NEW BRANDED HEADER (full width, outside container) \u2500\u2500 -->\n                <div class=\"mlp-brand-header\">\n                    <div class=\"mlp-brand-header-left\">\n                        <img decoding=\"async\" src=\"http:\/\/pterocos.eu.org\/wp-content\/uploads\/2026\/04\/Logo_numerique_de_pterocos.eu_.org-removebg-preview.png\" alt=\"Pterocos Logo\" class=\"mlp-brand-logo\" \/>\n                    <\/div>\n                    <div class=\"mlp-brand-header-right\">\n                        <span class=\"mlp-brand-site\">pterocos.eu.org<\/span>\n                    <\/div>\n                <\/div>\n\n            <div class=\"mlp-community-container\">\n                <div class=\"mlp-community-topbar\">\n                    <button class=\"mlp-community-back-btn\" data-instance=\"mlp-15-1\">\n                        <i class=\"fas fa-arrow-left\"><\/i>\n                        <span>Back to Editor<\/span>\n                    <\/button>\n                    <div class=\"mlp-community-topbar-center\">\n                    <\/div>\n                    <div class=\"mlp-community-topbar-right\">\n                                                <!-- Author session buttons \u2014 state managed by JS -->\n                        <div id=\"mlp-author-session-btns\" style=\"display:flex;gap:8px;align-items:center;\">\n                            <button id=\"mlp-author-login-btn\" class=\"mlp-community-add-btn\" style=\"cursor:pointer;border:1px solid #d1d5db;display:flex;background:#fff;color:#374151;\">\n                                <i class=\"fas fa-sign-in-alt\"><\/i> Log In\n                            <\/button>\n                            <button id=\"mlp-add-template-btn\" class=\"mlp-community-add-btn\" style=\"cursor:pointer;border:1px solid #2563eb;background:#2563eb;color:#fff;display:flex;align-items:center;gap:6px;font-weight:700;\" onclick=\"document.getElementById('mlp-add-template-modal').style.display='flex'\">\n                                <i class=\"fas fa-plus\"><\/i> Add Template\n                            <\/button>\n                            <button id=\"mlp-author-manager-btn\" class=\"mlp-community-add-btn\" style=\"cursor:pointer;border:1px solid #7c3aed;display:none;background:rgba(124,58,237,0.08);color:#7c3aed;\">\n                                <i class=\"fas fa-layer-group\"><\/i> My Templates\n                            <\/button>\n                            <button id=\"mlp-author-logout-btn\" class=\"mlp-community-add-btn\" style=\"cursor:pointer;border:1px solid #dc2626;display:none;background:rgba(220,38,38,0.06);color:#dc2626;\">\n                                <i class=\"fas fa-sign-out-alt\"><\/i> Log Out\n                            <\/button>\n                        <\/div>\n                                            <\/div>\n                <\/div>\n\n                <div class=\"mlp-community-hero\">\n                    <h1 class=\"mlp-community-hero-title\">Explore Community Builds<\/h1>\n                    <p class=\"mlp-community-hero-desc\">Discover templates, projects, and creative builds shared by the community.<\/p>\n                    <div class=\"mlp-community-search-wrap\">\n                        <i class=\"fas fa-search mlp-community-search-icon\"><\/i>\n                        <input type=\"text\" class=\"mlp-community-search\" data-instance=\"mlp-15-1\" placeholder=\"Search builds...\" \/>\n                    <\/div>\n                    <div class=\"mlp-community-filters\" data-instance=\"mlp-15-1\">\n                        <button class=\"mlp-community-filter active\" data-filter=\"all\">All<\/button>\n                        <button class=\"mlp-community-filter\" data-filter=\"websites\">Websites<\/button>\n                        <button class=\"mlp-community-filter\" data-filter=\"games\">Games<\/button>\n                        <button class=\"mlp-community-filter\" data-filter=\"animations\">Animations<\/button>\n                        <button class=\"mlp-community-filter\" data-filter=\"ui-components\">UI Components<\/button>\n                        <button class=\"mlp-community-filter\" data-filter=\"utilities\">Utilities<\/button>\n                        <button class=\"mlp-community-filter\" data-filter=\"ai\">AI<\/button>\n                    <\/div>\n                <\/div>\n\n                \n                \n                <div class=\"mlp-section-header\" id=\"mlp-explore-section-mlp-15-1\">\n                    <div class=\"mlp-section-title-row\">\n                        <i class=\"fas fa-compass\" style=\"color:#2563eb;\"><\/i>\n                        <h2 class=\"mlp-section-title\">Explore Templates<\/h2>\n                        <span class=\"mlp-section-count\">0<\/span>\n                    <\/div>\n                <\/div>\n                <div class=\"mlp-community-grid mlp-grid-rows\" id=\"mlp-community-grid-mlp-15-1\">\n                                    <\/div>\n                \n                <div class=\"mlp-community-empty\" id=\"mlp-community-empty-mlp-15-1\" style=\"display:none;\">\n                    <i class=\"fas fa-box-open\"><\/i>\n                    <p>No builds found matching your search.<\/p>\n                <\/div>\n\n                <div class=\"mlp-community-footer\">\n                    <p>Want to share your build? Join our Discord server and submit under the rules channel.<\/p>\n                    <a href=\"https:\/\/discord.com\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"mlp-brand-discord-link\" style=\"display:inline-flex;margin-top:10px;\"><i class=\"fab fa-discord\"><\/i> Join Discord Server<\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Spigot-Style Fullscreen View Modal (outside overlay so it can be truly fullscreen) -->\n        <div id=\"mlp-view-modal\" style=\"display:none;\">\n            <div class=\"mlp-modal-overlay\">\n\n                <!-- \u2500\u2500 ORANGE BREADCRUMB HEADER \u2500\u2500 -->\n                <div class=\"mlp-modal-topbar\">\n                    <div class=\"mlp-topbar-breadcrumb\">\n                        <button class=\"mlp-modal-back-btn\" id=\"mlp-modal-back-btn\">\n                            <i class=\"fas fa-arrow-left\"><\/i> Back\n                        <\/button>\n                        <i class=\"fas fa-chevron-right mlp-bc-sep\"><\/i>\n                        <span class=\"mlp-bc-item mlp-bc-active\" id=\"modal-topbar-title\"><\/span>\n                    <\/div>\n                <\/div>\n\n                <!-- \u2500\u2500 PAGE BODY \u2500\u2500 -->\n                <div class=\"mlp-modal-body\">\n\n                    <!-- MAIN CONTENT -->\n                    <div class=\"mlp-modal-main\">\n\n                        <!-- Plugin title row -->\n                        <div class=\"mlp-plugin-header\">\n                            <div class=\"mlp-plugin-icon\" id=\"modal-plugin-icon\">\n                                <i class=\"fas fa-code\"><\/i>\n                            <\/div>\n                            <div class=\"mlp-plugin-title-col\">\n                                <h1 class=\"mlp-plugin-name\">\n                                    <span id=\"modal-title\"><\/span>\n                                <\/h1>\n                                <p class=\"mlp-plugin-tagline\" id=\"modal-description-short\"><\/p>\n                            <\/div>\n                            <button id=\"modal-load-btn\" class=\"mlp-load-now-btn\">\n                                <i class=\"fas fa-upload\"><\/i>\n                                Load Now\n                            <\/button>\n                        <\/div>\n\n                        <!-- Tabs -->\n                        <div class=\"mlp-page-tabs\">\n                            <button class=\"mlp-page-tab active\" data-tab=\"overview\">Overview<\/button>\n                            <button class=\"mlp-page-tab\" data-tab=\"code\">Code<\/button>\n                            <button class=\"mlp-page-tab\" data-tab=\"preview\">Preview<\/button>\n                        <\/div>\n\n                        <!-- Tab: Overview -->\n                        <div class=\"mlp-tab-pane active\" id=\"mlp-tab-overview\">\n                            <div class=\"mlp-overview-meta-rows\">\n                                <div class=\"mlp-overview-meta-row\">\n                                    <span class=\"mlp-ovm-label\">Author:<\/span>\n                                    <span class=\"mlp-ovm-value mlp-ovm-accent mlp-author-link\" id=\"modal-author-overview\" style=\"cursor:pointer;text-decoration:underline;\"><\/span>\n                                <\/div>\n                                <div class=\"mlp-overview-meta-row\">\n                                    <span class=\"mlp-ovm-label\">Category:<\/span>\n                                    <span class=\"mlp-ovm-value mlp-ovm-accent\" id=\"modal-category-overview\"><\/span>\n                                <\/div>\n                                <div class=\"mlp-overview-meta-row\">\n                                    <span class=\"mlp-ovm-label\">Released:<\/span>\n                                    <span class=\"mlp-ovm-value\" id=\"modal-date-overview\"><\/span>\n                                <\/div>\n                            <\/div>\n                            <div class=\"mlp-overview-banner\">\n                                <img decoding=\"async\" id=\"modal-preview-img\" src=\"\" alt=\"Preview\" style=\"display:none;\" \/>\n                                <div class=\"mlp-modal-preview-placeholder\" id=\"modal-preview-placeholder\">\n                                    <i class=\"fas fa-code\"><\/i>\n                                    <span>No preview image<\/span>\n                                <\/div>\n                            <\/div>\n                            <div class=\"mlp-overview-desc\">\n                                <h3>About this Build<\/h3>\n                                <p id=\"modal-description\"><\/p>\n                            <\/div>\n                            <div class=\"mlp-overview-actions-row\">\n                                <button id=\"modal-run-live\" class=\"mlp-live-btn\">\n                                    <i class=\"fas fa-play\"><\/i> Run Live Preview\n                                <\/button>\n                                <button id=\"modal-report-btn\" class=\"mlp-report-inline-btn\">\n                                    <i class=\"fas fa-flag\"><\/i> Report\n                                <\/button>\n                            <\/div>\n                        <\/div>\n\n                        <!-- Tab: Code -->\n                        <div class=\"mlp-tab-pane\" id=\"mlp-tab-code\" style=\"display:none;\">\n                            <div class=\"mlp-code-toolbar\">\n                                <div class=\"mlp-code-tabs\">\n                                    <button class=\"mlp-code-tab active\" data-code=\"html\"><i class=\"fab fa-html5\"><\/i> HTML<\/button>\n                                    <button class=\"mlp-code-tab\" data-code=\"css\"><i class=\"fab fa-css3-alt\"><\/i> CSS<\/button>\n                                    <button class=\"mlp-code-tab\" data-code=\"js\"><i class=\"fab fa-js-square\"><\/i> JS<\/button>\n                                <\/div>\n                            <\/div>\n                            <pre id=\"modal-code-display\" class=\"mlp-code-display\"><\/pre>\n                        <\/div>\n\n                        <!-- Tab: Preview -->\n                        <div class=\"mlp-tab-pane\" id=\"mlp-tab-preview\" style=\"display:none;\">\n                            <div class=\"mlp-preview-iframe-wrap\">\n                                <iframe id=\"modal-preview-frame\" class=\"mlp-preview-iframe\" sandbox=\"allow-scripts\"><\/iframe>\n                                <div class=\"mlp-preview-notice\"><i class=\"fas fa-info-circle\"><\/i> Live render of the build's HTML\/CSS\/JS<\/div>\n                            <\/div>\n                        <\/div>\n\n                    <\/div>\n\n                    <!-- SIDEBAR -->\n                    <div class=\"mlp-modal-sidebar\">\n\n                        <div class=\"mlp-sidebar-box\">\n                            <div class=\"mlp-sidebar-box-header\">\n                                <i class=\"fas fa-info-circle\"><\/i> INFORMATION\n                            <\/div>\n                            <div class=\"mlp-sidebar-box-body\">\n                                <div class=\"mlp-sb-row\"><span>Author<\/span><span id=\"sb-author\" class=\"mlp-author-link\" style=\"cursor:pointer;color:#e8821a;text-decoration:underline;\"><\/span><\/div>\n                                <div class=\"mlp-sb-row\"><span>Released<\/span><span id=\"sb-date\"><\/span><\/div>\n                                <div class=\"mlp-sb-row\"><span>Category<\/span><span id=\"sb-category\"><\/span><\/div>\n                            <\/div>\n                        <\/div>\n\n                    <\/div>\n\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Author Builds Fullscreen Popup -->\n        <div id=\"mlp-author-modal\" style=\"display:none;\">\n            <div class=\"mlp-modal-overlay\">\n                <div class=\"mlp-modal-topbar\">\n                    <div class=\"mlp-topbar-breadcrumb\">\n                        <button class=\"mlp-modal-back-btn\" id=\"mlp-author-back-btn\">\n                            <i class=\"fas fa-arrow-left\"><\/i> Back\n                        <\/button>\n                        <i class=\"fas fa-chevron-right mlp-bc-sep\"><\/i>\n                        <span class=\"mlp-bc-item mlp-bc-active\">Author: <span id=\"mlp-author-modal-name\"><\/span><\/span>\n                    <\/div>\n                <\/div>\n                <div class=\"mlp-author-modal-body\">\n                    <div class=\"mlp-author-modal-header\">\n                        <div class=\"mlp-author-avatar-wrap\" id=\"mlp-author-avatar-wrap\">\n                            <img decoding=\"async\" id=\"mlp-author-avatar-img\" src=\"\" alt=\"\" style=\"display:none;\" class=\"mlp-author-avatar-img\" \/>\n                            <div id=\"mlp-author-avatar-icon\" class=\"mlp-author-avatar\"><i class=\"fas fa-user-circle\"><\/i><\/div>\n                        <\/div>\n                        <div style=\"flex:1;min-width:0;\">\n                            <h2 id=\"mlp-author-modal-title\"><\/h2>\n                            <p id=\"mlp-author-modal-bio\" style=\"color:#555;font-size:0.82rem;margin:4px 0 6px;line-height:1.5;\"><\/p>\n                            <p id=\"mlp-author-modal-count\" style=\"color:#888;font-size:0.78rem;margin:0;\"><\/p>\n                            <div id=\"mlp-author-modal-socials\" class=\"mlp-author-socials-row\" style=\"margin-top:10px;display:none;\"><\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"mlp-author-grid\" id=\"mlp-author-grid\"><\/div>\n                <\/div>\n                                <script>\n                window.mlpAuthorsData = [];\n                <\/script>\n            <\/div>\n        <\/div>\n\n        <!-- Author Login Modal -->\n        <div id=\"mlp-author-login-modal\" style=\"display:none;\">\n            <div class=\"mlp-report-overlay\" style=\"z-index:1000002;\">\n                <div class=\"mlp-report-container\" style=\"max-width:380px;\">\n                    <div class=\"mlp-report-header\">\n                        <strong><i class=\"fas fa-user-circle\" style=\"color:#2563eb;margin-right:6px;\"><\/i> Author Login<\/strong>\n                        <button class=\"mlp-report-close\" id=\"mlp-login-modal-close\">&times;<\/button>\n                    <\/div>\n                    <div class=\"mlp-report-content\">\n                        <div id=\"mlp-login-error\" style=\"display:none;background:#fef2f2;border:1px solid #fecaca;color:#dc2626;padding:9px 14px;border-radius:8px;font-size:0.82rem;margin-bottom:14px;\"><\/div>\n                        <div class=\"mlp-cb-field-group\" style=\"margin-bottom:14px;\">\n                            <label style=\"font-size:0.75rem;font-weight:700;color:#374151;text-transform:uppercase;display:block;margin-bottom:6px;\">Author Name<\/label>\n                            <input type=\"text\" id=\"mlp-login-author-name\" placeholder=\"Type your author name\" style=\"width:100%;background:#f9fafb;border:1px solid #d1d5db;color:#111827;padding:10px 12px;border-radius:8px;font-size:0.85rem;box-sizing:border-box;\" autocomplete=\"off\" \/>\n                        <\/div>\n                        <div class=\"mlp-cb-field-group\" style=\"margin-bottom:20px;\">\n                            <label style=\"font-size:0.75rem;font-weight:700;color:#374151;text-transform:uppercase;display:block;margin-bottom:6px;\">Password<\/label>\n                            <input type=\"password\" id=\"mlp-login-password\" placeholder=\"Your password\" style=\"width:100%;background:#f9fafb;border:1px solid #d1d5db;color:#111827;padding:10px 12px;border-radius:8px;font-size:0.85rem;box-sizing:border-box;\" \/>\n                        <\/div>\n                        <div class=\"mlp-report-actions\">\n                            <button id=\"mlp-login-submit-btn\" class=\"mlp-login-submit-btn\" style=\"background:#2563eb;border:1px solid #1d4ed8;color:#fff;font-weight:700;padding:9px 20px;border-radius:8px;cursor:pointer;font-size:0.85rem;display:flex;align-items:center;gap:6px;\">\n                                <i class=\"fas fa-sign-in-alt\"><\/i> Log In\n                            <\/button>\n                            <button class=\"mlp-report-cancel\" id=\"mlp-login-cancel-btn\">Cancel<\/button>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Add Template Modal -->\n        <div id=\"mlp-add-template-modal\" style=\"display:none;position:fixed;inset:0;z-index:1000010;align-items:center;justify-content:center;background:rgba(0,0,0,0.4);backdrop-filter:blur(6px);\">\n            <div style=\"background:#ffffff;border:1px solid #e5e7eb;border-radius:16px;max-width:460px;width:90%;padding:0;overflow:hidden;box-shadow:0 25px 60px rgba(0,0,0,0.15),0 0 0 1px rgba(0,0,0,0.04);\">\n                <!-- Header -->\n                <div style=\"background:linear-gradient(135deg,#f8fafc,#eef2ff);border-bottom:1px solid #e5e7eb;padding:22px 26px 18px;display:flex;align-items:center;justify-content:space-between;\">\n                    <div style=\"display:flex;align-items:center;gap:12px;\">\n                        <div style=\"width:38px;height:38px;background:#2563eb;border-radius:10px;display:flex;align-items:center;justify-content:center;\">\n                            <i class=\"fas fa-plus\" style=\"color:#fff;font-size:0.9rem;\"><\/i>\n                        <\/div>\n                        <div>\n                            <div style=\"color:#111827;font-weight:800;font-size:1rem;letter-spacing:-0.01em;\">Add Your Template<\/div>\n                            <div style=\"color:#6b7280;font-size:0.72rem;margin-top:1px;\">Share your build with the community<\/div>\n                        <\/div>\n                    <\/div>\n                    <button onclick=\"document.getElementById('mlp-add-template-modal').style.display='none'\" style=\"background:#f3f4f6;border:1px solid #e5e7eb;color:#6b7280;width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:all .2s;\" onmouseover=\"this.style.background='#fee2e2';this.style.color='#dc2626'\" onmouseout=\"this.style.background='#f3f4f6';this.style.color='#6b7280'\">&times;<\/button>\n                <\/div>\n                <!-- Body -->\n                <div style=\"padding:26px 26px 10px;\">\n                    <!-- Step indicator -->\n                    <div style=\"display:flex;align-items:center;gap:10px;margin-bottom:22px;\">\n                        <div style=\"display:flex;align-items:center;gap:6px;background:#eef2ff;border:1px solid #c7d2fe;border-radius:20px;padding:5px 12px;\">\n                            <i class=\"fab fa-discord\" style=\"color:#5865f2;font-size:0.85rem;\"><\/i>\n                            <span style=\"color:#4338ca;font-size:0.75rem;font-weight:600;\">Via Discord<\/span>\n                        <\/div>\n                        <div style=\"flex:1;height:1px;background:linear-gradient(90deg,#c7d2fe,transparent);\"><\/div>\n                    <\/div>\n                    <!-- Instructions -->\n                    <p style=\"color:#4b5563;font-size:0.82rem;line-height:1.65;margin:0 0 20px;\">To submit your template to the Community Builds library, join our Discord server and contact a staff member in the <strong style=\"color:#111827;\">#support<\/strong> channel. Our team will review and add it for you.<\/p>\n                    <!-- Steps -->\n                    <div style=\"display:flex;flex-direction:column;gap:10px;margin-bottom:24px;\">\n                        <div style=\"display:flex;align-items:flex-start;gap:12px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;padding:12px 14px;\">\n                            <div style=\"min-width:24px;height:24px;background:#2563eb;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:800;color:#fff;\">1<\/div>\n                            <div>\n                                <div style=\"color:#111827;font-size:0.8rem;font-weight:700;margin-bottom:2px;\">Join our Discord<\/div>\n                                <div style=\"color:#6b7280;font-size:0.75rem;\">Click the button below to open the server invite.<\/div>\n                            <\/div>\n                        <\/div>\n                        <div style=\"display:flex;align-items:flex-start;gap:12px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;padding:12px 14px;\">\n                            <div style=\"min-width:24px;height:24px;background:#2563eb;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:800;color:#fff;\">2<\/div>\n                            <div>\n                                <div style=\"color:#111827;font-size:0.8rem;font-weight:700;margin-bottom:2px;\">Go to #support<\/div>\n                                <div style=\"color:#6b7280;font-size:0.75rem;\">Find the support channel and open a ticket or message staff.<\/div>\n                            <\/div>\n                        <\/div>\n                        <div style=\"display:flex;align-items:flex-start;gap:12px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;padding:12px 14px;\">\n                            <div style=\"min-width:24px;height:24px;background:#2563eb;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:800;color:#fff;\">3<\/div>\n                            <div>\n                                <div style=\"color:#111827;font-size:0.8rem;font-weight:700;margin-bottom:2px;\">Submit your template<\/div>\n                                <div style=\"color:#6b7280;font-size:0.75rem;\">Share your HTML\/CSS\/JS and a preview image. Staff will add it for you.<\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <!-- Footer -->\n                <div style=\"padding:0 26px 22px;display:flex;flex-direction:column;gap:10px;\">\n                    <a href=\"https:\/\/discord.gg\/4vZ4Vz2gyX\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"display:flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,#5865f2,#4752c4);color:#fff;text-decoration:none;font-weight:800;font-size:0.88rem;padding:13px 20px;border-radius:10px;transition:all .2s;letter-spacing:0.01em;box-shadow:0 4px 20px rgba(88,101,242,0.25);\" onmouseover=\"this.style.transform=&#039;translateY(-1px)&#039;;this.style.boxShadow=&#039;0 8px 28px rgba(88,101,242,0.4)&#039;\" onmouseout=\"this.style.transform=&#039;&#039;;this.style.boxShadow=&#039;0 4px 20px rgba(88,101,242,0.25)&#039;\">\n                        <i class=\"fab fa-discord\" style=\"font-size:1.05rem;\"><\/i>\n                        Join Discord &amp; Contact Support\n                        <i class=\"fas fa-external-link-alt\" style=\"font-size:0.7rem;opacity:0.7;\"><\/i>\n                    <\/a>\n                    <button onclick=\"document.getElementById('mlp-add-template-modal').style.display='none'\" style=\"background:transparent;border:1px solid #e5e7eb;color:#6b7280;font-size:0.8rem;padding:9px;border-radius:8px;cursor:pointer;transition:all .2s;\" onmouseover=\"this.style.borderColor='#d1d5db';this.style.color='#374151'\" onmouseout=\"this.style.borderColor='#e5e7eb';this.style.color='#6b7280'\">Maybe Later<\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Author My Templates Manager Modal -->\n        <div id=\"mlp-author-manager-modal\" style=\"display:none;\">\n            <div class=\"mlp-modal-overlay\">\n                <div class=\"mlp-modal-topbar\">\n                    <div class=\"mlp-topbar-breadcrumb\">\n                        <button class=\"mlp-modal-back-btn\" id=\"mlp-manager-back-btn\">\n                            <i class=\"fas fa-arrow-left\"><\/i> Back\n                        <\/button>\n                        <i class=\"fas fa-chevron-right mlp-bc-sep\"><\/i>\n                        <span class=\"mlp-bc-item mlp-bc-active\"><i class=\"fas fa-layer-group\"><\/i> My Templates<\/span>\n                    <\/div>\n                    <div style=\"margin-left:auto;display:flex;align-items:center;gap:10px;padding-right:4px;\">\n                        <span id=\"mlp-manager-logged-as\" style=\"font-size:0.78rem;color:rgba(255,255,255,0.7);\"><\/span>\n                    <\/div>\n                <\/div>\n                <div class=\"mlp-author-modal-body\">\n                    <div class=\"mlp-author-modal-header\" style=\"margin-bottom:20px;\">\n                        <div id=\"mlp-manager-avatar-wrap\">\n                            <img decoding=\"async\" id=\"mlp-manager-avatar-img\" src=\"\" alt=\"\" style=\"display:none;\" class=\"mlp-author-avatar-img\" \/>\n                            <div id=\"mlp-manager-avatar-icon\" class=\"mlp-author-avatar\"><i class=\"fas fa-user-circle\"><\/i><\/div>\n                        <\/div>\n                        <div>\n                            <h2 id=\"mlp-manager-author-name\" style=\"margin:0 0 4px;\"><\/h2>\n                            <p style=\"color:#888;font-size:0.82rem;margin:0;\" id=\"mlp-manager-template-count\"><\/p>\n                        <\/div>\n                    <\/div>\n                    <div id=\"mlp-manager-empty\" style=\"display:none;text-align:center;padding:60px 20px;color:#888;\">\n                        <i class=\"fas fa-inbox\" style=\"font-size:2rem;display:block;margin-bottom:12px;opacity:0.4;\"><\/i>\n                        <p>You haven't published any templates yet.<\/p>\n                    <\/div>\n                    <div class=\"mlp-author-grid\" id=\"mlp-manager-grid\"><\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Report Modal -->\n        <div id=\"mlp-report-modal\" style=\"display:none;\">\n            <div class=\"mlp-report-overlay\">\n                <div class=\"mlp-report-container\">\n                    <div class=\"mlp-report-header\">\n                        <strong>Report Build<\/strong>\n                        <button class=\"mlp-report-close\">&times;<\/button>\n                    <\/div>\n                    <div class=\"mlp-report-content\">\n                        <p>Reporting: <span id=\"report-title\"><\/span> by <span id=\"report-author\"><\/span><\/p>\n                        <textarea id=\"report-reason\" placeholder=\"Please describe why you're reporting this build...\" rows=\"5\"><\/textarea>\n                        <div class=\"mlp-report-actions\">\n                            <button class=\"mlp-report-submit\">Submit Report<\/button>\n                            <button class=\"mlp-report-cancel\">Cancel<\/button>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <style>\n        \/* Main Overlay *\/\n        .mlp-community-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#f8fafc;z-index:999999;overflow-y:auto;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;}\n        .mlp-community-container{max-width:1300px;margin:0 auto;padding:0 24px 40px;}\n        .mlp-community-topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid #e5e7eb;position:sticky;top:0;background:#f8fafc;z-index:100;}\n        \/* \u2500\u2500 NEW BRAND HEADER \u2500\u2500 *\/\n        .mlp-brand-header{display:flex;align-items:center;justify-content:space-between;padding:14px 30px;width:100%;box-sizing:border-box;background:linear-gradient(135deg,#f97316 0%,#ea580c 60%,#c2410c 100%);box-shadow:0 4px 20px rgba(249,115,22,0.45);position:relative;overflow:hidden;}\n        .mlp-brand-header::before{content:'';position:absolute;inset:0;background:url(\"data:image\/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'\/%3E%3C\/g%3E%3C\/g%3E%3C\/svg%3E\");pointer-events:none;}\n        .mlp-brand-header-left{display:flex;align-items:center;z-index:1;}\n        .mlp-brand-logo{height:140px;width:auto;max-width:380px;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.25));}\n        .mlp-brand-header-center{display:flex;align-items:center;z-index:1;}\n        .mlp-brand-tagline{color:rgba(255,255,255,0.9);font-size:0.82rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;}\n        .mlp-brand-header-right{display:flex;align-items:center;z-index:1;}\n        .mlp-brand-site{color:rgba(255,255,255,0.75);font-size:0.78rem;font-weight:500;letter-spacing:0.04em;border:1px solid rgba(255,255,255,0.3);padding:4px 12px;border-radius:20px;background:rgba(255,255,255,0.1);}\n        .mlp-brand-discord-link{display:flex;align-items:center;gap:6px;color:#fff;text-decoration:none;font-size:0.75rem;font-weight:700;background:#5865f2;border:1px solid rgba(255,255,255,0.2);padding:5px 13px;border-radius:20px;transition:background 0.15s,transform 0.15s;}\n        .mlp-brand-discord-link:hover{background:#4752c4;transform:translateY(-1px);}\n        .mlp-community-back-btn{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #d1d5db;color:#374151;padding:8px 16px;cursor:pointer;border-radius:8px;font-size:0.82rem;font-weight:600;transition:all 0.15s;}\n        .mlp-community-back-btn:hover{background:#f3f4f6;color:#111827;border-color:#9ca3af;}\n        .mlp-community-topbar-title{color:#111827;font-weight:700;}\n        .mlp-community-add-btn{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid #d1d5db;color:#374151;padding:8px 18px;border-radius:8px;text-decoration:none;font-size:0.82rem;font-weight:600;transition:all 0.15s;}\n        .mlp-community-add-btn:hover{background:#f3f4f6;border-color:#9ca3af;}\n        .mlp-community-hero{text-align:center;padding:40px 0 30px;}\n        .mlp-community-hero-title{font-size:2rem;color:#111827;margin:0 0 10px;font-weight:800;}\n        .mlp-community-hero-desc{color:#6b7280;font-size:0.85rem;margin-bottom:28px;}\n        .mlp-community-search-wrap{position:relative;max-width:420px;margin:0 auto 20px;}\n        .mlp-community-search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#9ca3af;pointer-events:none;z-index:2;line-height:1;}\n        .mlp-community-search{width:100% !important;padding:11px 16px 11px 40px !important;background:#fff !important;border:1px solid #d1d5db !important;color:#111827 !important;border-radius:10px !important;font-size:0.85rem !important;box-sizing:border-box !important;}\n        .mlp-community-search:focus{border-color:#2563eb;outline:none;box-shadow:0 0 0 3px rgba(37,99,235,0.1);}\n        .mlp-community-filters{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:20px;}\n        .mlp-community-filter{background:#fff;border:1px solid #e5e7eb;color:#6b7280;padding:6px 16px;cursor:pointer;border-radius:20px;font-size:0.75rem;font-weight:500;transition:all 0.15s;}\n        .mlp-community-filter:hover{border-color:#d1d5db;color:#374151;}\n        .mlp-community-filter.active{background:#2563eb;border-color:#2563eb;color:#fff;}\n        \n        \/* Section Headers *\/\n        .mlp-section-header{padding:20px 0 0;}\n        .mlp-section-title-row{display:flex;align-items:center;gap:10px;}\n        .mlp-section-title{font-size:1.3rem;font-weight:800;color:#111827;margin:0;}\n        .mlp-section-count{background:#e5e7eb;color:#374151;border-radius:20px;padding:2px 10px;font-size:0.72rem;font-weight:700;}\n        .mlp-new-badge{display:inline-block;background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;font-size:0.6rem;font-weight:800;padding:2px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:6px;}\n        .mlp-new-card{border:1px solid rgba(245,158,11,0.3);box-shadow:0 0 0 1px rgba(245,158,11,0.08);}\n        .mlp-more-wrap{text-align:center;padding:16px 0 24px;}\n        .mlp-more-btn{background:#fff;border:1px solid #d1d5db;color:#374151;padding:10px 28px;border-radius:10px;font-size:0.82rem;font-weight:600;cursor:pointer;transition:all 0.15s;display:inline-flex;align-items:center;gap:8px;}\n        .mlp-more-btn:hover{background:#f3f4f6;border-color:#9ca3af;color:#111827;}\n\n        \/* Cards Grid \u2014 row-based layout: 2 rows visible, scroll for more *\/\n        .mlp-community-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;padding:20px 0;}\n        .mlp-grid-rows{grid-auto-rows:auto;}\n        .mlp-community-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;transition:all 0.3s;cursor:pointer;}\n        .mlp-community-card:hover{transform:translateY(-4px);border-color:#d1d5db;box-shadow:0 12px 32px rgba(0,0,0,0.08);}\n        .mlp-community-card-preview{height:160px;overflow:hidden;background:#f3f4f6;}\n        .mlp-community-card-preview img{width:100%;height:100%;object-fit:cover;transition:transform 0.3s;}\n        .mlp-community-card:hover .mlp-community-card-preview img{transform:scale(1.05);}\n        .mlp-community-card-preview-placeholder{height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#eef2ff,#e0e7ff);color:#2563eb;font-size:2.5rem;}\n        .mlp-community-card-info{padding:16px;}\n        .mlp-community-card-title{font-size:1rem;font-weight:700;color:#111827;margin-bottom:6px;}\n        .mlp-community-card-author{font-size:0.7rem;color:#6b7280;display:flex;align-items:center;gap:6px;}\n        .mlp-community-card-footer{padding:12px 16px;border-top:1px solid #f3f4f6;display:flex;gap:10px;}\n        .mlp-community-view-btn{flex:1;background:#2563eb;border:1px solid #1d4ed8;color:#fff;padding:8px;cursor:pointer;border-radius:8px;font-size:0.75rem;font-weight:600;transition:all 0.15s;}\n        .mlp-community-view-btn:hover{background:#1d4ed8;}\n        \n        \/* \u2500\u2500 Spigot-Style Fullscreen View Modal \u2500\u2500 *\/\n        @keyframes mlpFsIn{from{opacity:0}to{opacity:1}}\n\n        #mlp-view-modal{position:fixed;inset:0;background:#f0f0f0;z-index:1000000;overflow-y:auto;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;animation:mlpFsIn 0.18s ease both;}\n        .mlp-modal-overlay{display:flex;flex-direction:column;min-height:100%;}\n\n        \/* Orange header *\/\n        .mlp-modal-topbar{background:linear-gradient(135deg,#e8821a,#f0a030);height:44px;display:flex;align-items:center;padding:0 20px;flex-shrink:0;box-shadow:0 2px 6px rgba(0,0,0,0.25);}\n        .mlp-topbar-breadcrumb{display:flex;align-items:center;gap:8px;font-size:0.82rem;font-weight:600;color:rgba(255,255,255,0.9);}\n        .mlp-modal-back-btn{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,0.18);border:none;color:#fff;padding:5px 14px;border-radius:4px;cursor:pointer;font-size:0.78rem;font-weight:700;transition:background 0.15s;}\n        .mlp-modal-back-btn:hover{background:rgba(0,0,0,0.32);}\n        .mlp-bc-sep{font-size:0.6rem;opacity:0.7;}\n        .mlp-bc-item{color:rgba(255,255,255,0.85);}\n        .mlp-bc-active{color:#fff;font-weight:700;}\n\n        \/* Page body *\/\n        .mlp-modal-body{display:flex;flex:1 0 auto;min-height:calc(100vh - 44px);max-width:1280px;width:100%;margin:0 auto;padding:24px 20px 40px;gap:22px;box-sizing:border-box;align-items:flex-start;}\n\n        \/* MAIN *\/\n        .mlp-modal-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:0;min-height:calc(100vh - 44px);}\n\n        \/* Plugin header row *\/\n        .mlp-plugin-header{background:#fff;border:1px solid #ddd;border-radius:4px 4px 0 0;padding:16px 20px;display:flex;align-items:center;gap:14px;border-bottom:none;}\n        .mlp-plugin-icon{width:52px;height:52px;background:linear-gradient(135deg,#2563eb,#1d4ed8);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.4rem;flex-shrink:0;}\n        .mlp-plugin-title-col{flex:1;min-width:0;}\n        .mlp-plugin-name{font-size:1.35rem;font-weight:700;color:#222;margin:0 0 4px;display:flex;align-items:baseline;gap:8px;}\n        .mlp-plugin-version{font-size:0.9rem;font-weight:400;color:#888;}\n        .mlp-plugin-tagline{font-size:0.82rem;color:#666;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n        .mlp-load-now-btn{background:linear-gradient(135deg,#4a90d9,#357abd);border:1px solid #2a6099;color:#fff;padding:10px 22px;border-radius:4px;cursor:pointer;font-weight:700;font-size:0.85rem;display:flex;align-items:center;gap:8px;white-space:nowrap;transition:all 0.15s;flex-shrink:0;}\n        .mlp-load-now-btn:hover{background:linear-gradient(135deg,#357abd,#2a6099);box-shadow:0 2px 8px rgba(74,144,217,0.4);}\n\n        \/* Page tabs (Spigot style) *\/\n        .mlp-page-tabs{display:flex;background:#fff;border:1px solid #ddd;border-top:none;border-bottom:none;padding:0 20px;}\n        .mlp-page-tab{background:none;border:none;border-bottom:3px solid transparent;padding:10px 18px;font-size:0.82rem;font-weight:600;color:#666;cursor:pointer;transition:all 0.15s;margin-bottom:-1px;}\n        .mlp-page-tab:hover{color:#333;background:#f7f7f7;}\n        .mlp-page-tab.active{color:#e8821a;border-bottom-color:#e8821a;}\n\n        \/* Tab panes *\/\n        .mlp-tab-pane{background:#fff;border:1px solid #ddd;border-top:1px solid #e0e0e0;padding:20px;border-radius:0 0 4px 4px;flex:1;}\n\n        \/* Overview meta rows *\/\n        .mlp-overview-meta-rows{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;padding-bottom:16px;border-bottom:1px solid #eee;margin-bottom:16px;}\n        .mlp-overview-meta-row{display:flex;align-items:center;gap:6px;font-size:0.82rem;}\n        .mlp-ovm-label{color:#666;font-weight:500;min-width:90px;}\n        .mlp-ovm-value{color:#333;font-weight:600;}\n        .mlp-ovm-accent{color:#e8821a;}\n\n        \/* Banner image *\/\n        .mlp-overview-banner{border-radius:4px;overflow:hidden;margin-bottom:16px;background:#1a1a2e;min-height:120px;display:flex;align-items:center;justify-content:center;}\n        .mlp-overview-banner img{width:100%;display:block;}\n        .mlp-modal-preview-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#4dccff;font-size:2rem;padding:40px;opacity:0.5;}\n        .mlp-modal-preview-placeholder span{font-size:0.75rem;color:#666;}\n\n        \/* Description *\/\n        .mlp-overview-desc h3{font-size:0.9rem;font-weight:700;color:#333;margin:0 0 8px;}\n        .mlp-overview-desc p{font-size:0.85rem;color:#555;line-height:1.65;margin:0 0 16px;}\n\n        \/* Action row *\/\n        .mlp-overview-actions-row{display:flex;gap:10px;padding-top:4px;}\n        .mlp-live-btn{background:linear-gradient(135deg,#4dccff,#3ab5e8);border:none;color:#fff;padding:9px 20px;border-radius:4px;cursor:pointer;font-weight:700;font-size:0.8rem;display:flex;align-items:center;gap:7px;transition:all 0.15s;}\n        .mlp-live-btn:hover{box-shadow:0 2px 10px rgba(77,204,255,0.4);transform:translateY(-1px);}\n        .mlp-report-inline-btn{background:#fff;border:1px solid #ddd;color:#999;padding:9px 16px;border-radius:4px;cursor:pointer;font-size:0.78rem;display:flex;align-items:center;gap:6px;transition:all 0.15s;}\n        .mlp-report-inline-btn:hover{border-color:#ef4444;color:#ef4444;}\n\n        \/* Code tab pane *\/\n        .mlp-code-toolbar{display:flex;justify-content:flex-start;padding-bottom:12px;border-bottom:1px solid #eee;margin-bottom:12px;}\n        .mlp-code-tabs{display:flex;gap:4px;}\n        .mlp-code-tab{background:#f5f5f5;border:1px solid #ddd;padding:5px 14px;border-radius:4px;color:#666;cursor:pointer;font-size:0.75rem;font-weight:600;display:flex;align-items:center;gap:5px;transition:all 0.12s;}\n        .mlp-code-tab.active{background:#e8821a;border-color:#c86a0f;color:#fff;}\n        .mlp-code-tab:hover:not(.active){background:#eee;color:#333;}\n        .mlp-code-display{background:#1e1e2e;padding:18px;border-radius:6px;font-family:'Monaco','Menlo','Courier New',monospace;font-size:0.72rem;color:#cdd6f4;overflow:auto;white-space:pre-wrap;word-break:break-all;line-height:1.75;margin:0;max-height:500px;}\n\n        \/* Preview iframe *\/\n        .mlp-preview-iframe-wrap{display:flex;flex-direction:column;gap:8px;}\n        .mlp-preview-iframe{width:100%;height:500px;min-height:300px;border:1px solid #ddd;border-radius:4px;background:#fff;}\n        .mlp-preview-notice{font-size:0.72rem;color:#888;display:flex;align-items:center;gap:5px;}\n\n        \/* SIDEBAR *\/\n        .mlp-modal-sidebar{width:240px;min-width:220px;flex-shrink:0;display:flex;flex-direction:column;gap:16px;}\n        .mlp-sidebar-box{background:#fff;border:1px solid #ddd;border-radius:4px;overflow:hidden;}\n        .mlp-sidebar-box-header{background:linear-gradient(135deg,#e8821a,#f0a030);color:#fff;font-size:0.72rem;font-weight:700;letter-spacing:0.06em;padding:8px 14px;display:flex;align-items:center;gap:6px;}\n        .mlp-sidebar-box-body{padding:0;}\n        .mlp-sb-row{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;font-size:0.78rem;border-bottom:1px solid #f0f0f0;gap:8px;}\n        .mlp-sb-row:last-child{border-bottom:none;}\n        .mlp-sb-row span:first-child{color:#666;}\n        .mlp-sb-row span:last-child{color:#333;font-weight:600;text-align:right;}\n\n        \/* Responsive *\/\n        @media(max-width:768px){\n            .mlp-modal-body{flex-direction:column;padding:16px;}\n            .mlp-modal-sidebar{width:100%;min-width:0;}\n            .mlp-plugin-header{flex-wrap:wrap;}\n            .mlp-overview-meta-rows{grid-template-columns:1fr;}\n        }\n        \n        \/* Report Modal *\/\n        .mlp-report-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.4);backdrop-filter:blur(4px);z-index:1000001;display:flex;align-items:center;justify-content:center;}\n        .mlp-report-container{background:#fff;border:1px solid #e5e7eb;border-radius:12px;width:90%;max-width:450px;box-shadow:0 20px 50px rgba(0,0,0,0.12);}\n        .mlp-report-header{display:flex;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e5e7eb;font-weight:700;color:#111827;}\n        .mlp-report-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:#9ca3af;}\n        .mlp-report-close:hover{color:#374151;}\n        .mlp-report-content{padding:20px;}\n        .mlp-report-content p{color:#6b7280;font-size:0.85rem;margin-bottom:16px;}\n        #report-reason{width:100%;background:#f9fafb;border:1px solid #d1d5db;color:#111827;padding:12px;border-radius:8px;margin-bottom:20px;resize:vertical;font-family:inherit;box-sizing:border-box;}\n        #report-reason:focus{border-color:#2563eb;outline:none;box-shadow:0 0 0 3px rgba(37,99,235,0.1);}\n        .mlp-report-actions{display:flex;gap:12px;justify-content:flex-end;}\n        .mlp-report-submit{background:#dc2626;border:1px solid #b91c1c;color:#fff;padding:8px 20px;border-radius:8px;cursor:pointer;font-weight:600;transition:all 0.15s;}\n        .mlp-report-submit:hover{background:#b91c1c;}\n        .mlp-report-cancel{background:#fff;border:1px solid #d1d5db;color:#6b7280;padding:8px 20px;border-radius:8px;cursor:pointer;font-weight:500;transition:all 0.15s;}\n        .mlp-report-cancel:hover{background:#f3f4f6;color:#374151;}\n        \n        \/* Author Modal *\/\n        #mlp-author-modal{position:fixed;inset:0;background:#f8fafc;z-index:1000001;overflow-y:auto;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;animation:mlpFsIn 0.18s ease both;}\n        #mlp-author-manager-modal{position:fixed;inset:0;background:#f8fafc;z-index:1000001;overflow-y:auto;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;animation:mlpFsIn 0.18s ease both;}\n        .mlp-author-modal-body{max-width:1280px;margin:0 auto;padding:28px 20px 60px;}\n        .mlp-author-modal-header{display:flex;align-items:center;gap:22px;background:#fff;border:1px solid #ddd;border-radius:8px;padding:24px 28px;margin-bottom:28px;}\n        .mlp-author-avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#e8821a,#f0a030);display:flex;align-items:center;justify-content:center;color:#fff;font-size:2rem;flex-shrink:0;}\n        .mlp-author-avatar-img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex-shrink:0;}\n        .mlp-author-modal-header h2{font-size:1.4rem;font-weight:700;color:#222;margin:0 0 2px;}\n        .mlp-author-socials-row{display:flex;flex-wrap:wrap;gap:8px;}\n        .mlp-author-social-btn{display:inline-flex;align-items:center;gap:6px;color:#fff;text-decoration:none;font-size:0.72rem;font-weight:700;padding:5px 12px;border-radius:20px;}\n        .mlp-author-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;}\n        \/* Card author name clickable *\/\n        .mlp-community-card-author-link{cursor:pointer;color:#2563eb;text-decoration:underline;transition:color 0.15s;}\n        .mlp-community-card-author-link:hover{color:#1d4ed8;}\n        \n        .mlp-community-empty{text-align:center;padding:60px;color:#6b7280;}\n        .mlp-community-footer{text-align:center;padding:40px 0 20px;border-top:1px solid #e5e7eb;color:#6b7280;font-size:0.75rem;}\n        \n        <\/style>\n\n        <script>\n        var mlp_ajax = {\n            ajax_url: \"https:\\\/\\\/pterocos.eu.org\\\/wp-admin\\\/admin-ajax.php\",\n            nonce: \"52daddf8d8\"        };\n        (function() {\n            let currentBuildData = null;\n            \/\/ Track all build cards data for author lookup\n            let allBuildsData = [];\n\n            function buildFullDoc(html, css, js) {\n                return '<!DOCTYPE html><html><head><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width,initial-scale=1\"><style>*{margin:0;padding:0;box-sizing:border-box;}body{background:#fff;font-family:system-ui;}<\/style><style>' + css + '<\/style><\/head><body>' + html + '<script>' + js + '<\\\/script><\/body><\/html>';\n            }\n\n            \/\/ \u2500\u2500 MORE BUTTONS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n            document.querySelectorAll('.mlp-more-btn').forEach(function(btn) {\n                btn.addEventListener('click', function() {\n                    var section = this.dataset.section;\n                    var instanceId = this.dataset.instance;\n                    var gridId = section === 'new' ? 'mlp-new-grid-' + instanceId : 'mlp-community-grid-' + instanceId;\n                    var grid = document.getElementById(gridId);\n                    if (grid) {\n                        grid.querySelectorAll('.mlp-community-card[style*=\"display:none\"], .mlp-community-card[style*=\"display: none\"]').forEach(function(card) {\n                            card.style.display = '';\n                        });\n                    }\n                    this.closest('.mlp-more-wrap').style.display = 'none';\n                });\n            });\n\n            \/\/ \u2500\u2500 AUTHOR POPUP \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n            function openAuthorModal(authorName) {\n                const authorBuilds = allBuildsData.filter(b => b.author === authorName);\n                const modal = document.getElementById('mlp-author-modal');\n                if (!modal) return;\n\n                \/\/ Look up registered author profile\n                const authorProfile = (window.mlpAuthorsData || []).find(a => a.name === authorName);\n\n                document.getElementById('mlp-author-modal-name').textContent = authorName;\n                document.getElementById('mlp-author-modal-title').textContent = authorName;\n                document.getElementById('mlp-author-modal-count').textContent =\n                    authorBuilds.length + ' build' + (authorBuilds.length !== 1 ? 's' : '') + ' by this author';\n\n                \/\/ Avatar\n                const avatarImg = document.getElementById('mlp-author-avatar-img');\n                const avatarIcon = document.getElementById('mlp-author-avatar-icon');\n                if (authorProfile && authorProfile.avatar) {\n                    avatarImg.src = authorProfile.avatar;\n                    avatarImg.style.display = 'block';\n                    if (avatarIcon) avatarIcon.style.display = 'none';\n                } else {\n                    if (avatarImg) avatarImg.style.display = 'none';\n                    if (avatarIcon) avatarIcon.style.display = 'flex';\n                }\n\n                \/\/ Bio\n                const bioEl = document.getElementById('mlp-author-modal-bio');\n                if (bioEl) bioEl.textContent = (authorProfile && authorProfile.bio) ? authorProfile.bio : '';\n\n                \/\/ Socials\n                const socialsRow = document.getElementById('mlp-author-modal-socials');\n                if (socialsRow) {\n                    socialsRow.innerHTML = '';\n                    socialsRow.style.display = 'none';\n                    if (authorProfile) {\n                        const socials = [\n                            { key: 'discord',  label: 'Discord', icon: 'fab fa-discord',  color: '#5865f2', isText: true },\n                            { key: 'youtube',  label: 'YouTube', icon: 'fab fa-youtube',  color: '#ff0000', isUrl: true },\n                            { key: 'twitter',  label: 'Twitter', icon: 'fab fa-twitter',  color: '#1da1f2', isUrl: true },\n                            { key: 'github',   label: 'GitHub',  icon: 'fab fa-github',   color: '#24292e', isUrl: true },\n                            { key: 'website',  label: 'Website', icon: 'fas fa-globe',    color: '#4dccff', isUrl: true },\n                        ];\n                        let hasSocial = false;\n                        socials.forEach(s => {\n                            const val = authorProfile[s.key];\n                            if (!val) return;\n                            hasSocial = true;\n                            if (s.isUrl) {\n                                const a = document.createElement('a');\n                                a.href = val; a.target = '_blank'; a.rel = 'noopener';\n                                a.className = 'mlp-author-social-btn';\n                                a.style.background = s.color;\n                                a.innerHTML = '<i class=\"' + s.icon + '\"><\/i> ' + s.label;\n                                socialsRow.appendChild(a);\n                            } else {\n                                const sp = document.createElement('span');\n                                sp.className = 'mlp-author-social-btn';\n                                sp.style.background = s.color;\n                                sp.title = s.key.charAt(0).toUpperCase() + s.key.slice(1) + ': ' + val;\n                                sp.innerHTML = '<i class=\"' + s.icon + '\"><\/i> ' + escHtml(val);\n                                socialsRow.appendChild(sp);\n                            }\n                        });\n                        if (hasSocial) socialsRow.style.display = 'flex';\n                    }\n                }\n\n                const grid = document.getElementById('mlp-author-grid');\n                grid.innerHTML = '';\n                if (authorBuilds.length === 0) {\n                    grid.innerHTML = '<p style=\"color:#888;grid-column:1\/-1;\">No builds found for this author.<\/p>';\n                } else {\n                    authorBuilds.forEach(build => {\n                        const card = document.createElement('div');\n                        card.className = 'mlp-community-card';\n                        card.innerHTML =\n                            '<div class=\"mlp-community-card-preview\">' +\n                                (build.image_url\n                                    ? '<img decoding=\"async\" src=\"' + build.image_url + '\" alt=\"' + escHtml(build.title) + '\" \/>'\n                                    : '<div class=\"mlp-community-card-preview-placeholder\"><i class=\"fas fa-code\"><\/i><\/div>') +\n                            '<\/div>' +\n                            '<div class=\"mlp-community-card-info\">' +\n                                '<div class=\"mlp-community-card-title\">' + escHtml(build.title) + '<\/div>' +\n                                '<div class=\"mlp-community-card-author\"><i class=\"fas fa-user-circle\"><\/i> ' + escHtml(build.author) + '<\/div>' +\n                            '<\/div>' +\n                            '<div class=\"mlp-community-card-footer\">' +\n                                '<button class=\"mlp-community-view-btn\"><i class=\"fas fa-eye\"><\/i> View<\/button>' +\n                            '<\/div>';\n                        card.querySelector('.mlp-community-view-btn').addEventListener('click', function(e) {\n                            e.stopPropagation();\n                            modal.style.display = 'none';\n                            showViewModal(build);\n                        });\n                        grid.appendChild(card);\n                    });\n                }\n\n                modal.style.display = 'block';\n                modal.scrollTop = 0;\n                document.documentElement.style.overflow = 'hidden';\n                document.body.style.overflow = 'hidden';\n            }\n\n            function escHtml(str) {\n                return String(str || '').replace(\/&\/g,'&amp;').replace(\/<\/g,'&lt;').replace(\/>\/g,'&gt;').replace(\/\"\/g,'&quot;');\n            }\n\n            \/\/ \u2500\u2500 VIEW MODAL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n            function showViewModal(build) {\n                currentBuildData = build;\n                const cat = build.category ? (build.category.charAt(0).toUpperCase() + build.category.slice(1).replace(\/-\/g,' ')) : '';\n                const desc = build.description || 'No description provided.';\n\n                document.getElementById('modal-title').textContent = build.title;\n                document.getElementById('modal-topbar-title').textContent = build.title;\n\n                const authorOverview = document.getElementById('modal-author-overview');\n                const sbAuthor = document.getElementById('sb-author');\n                if (authorOverview) authorOverview.textContent = build.author;\n                if (sbAuthor) sbAuthor.textContent = build.author;\n\n                document.getElementById('modal-category-overview').textContent = cat;\n                document.getElementById('modal-date-overview').textContent = build.date;\n                document.getElementById('modal-description').textContent = desc;\n                document.getElementById('sb-date').textContent = build.date;\n                document.getElementById('sb-category').textContent = cat;\n\n                const taglineEl = document.getElementById('modal-description-short');\n                if (taglineEl) taglineEl.textContent = desc;\n\n                const previewImg = document.getElementById('modal-preview-img');\n                const placeholder = document.getElementById('modal-preview-placeholder');\n                if (build.image_url) {\n                    previewImg.src = build.image_url;\n                    previewImg.style.display = 'block';\n                    if (placeholder) placeholder.style.display = 'none';\n                } else {\n                    previewImg.style.display = 'none';\n                    if (placeholder) placeholder.style.display = 'flex';\n                }\n\n                document.getElementById('modal-code-display').textContent = build.html || '<!-- No HTML provided -->';\n\n                document.querySelectorAll('.mlp-page-tab').forEach(t => t.classList.remove('active'));\n                document.querySelectorAll('.mlp-tab-pane').forEach(p => p.style.display = 'none');\n                const overviewTab = document.querySelector('.mlp-page-tab[data-tab=\"overview\"]');\n                const overviewPane = document.getElementById('mlp-tab-overview');\n                if (overviewTab) overviewTab.classList.add('active');\n                if (overviewPane) overviewPane.style.display = 'block';\n\n                document.querySelectorAll('.mlp-code-tab').forEach(t => t.classList.remove('active'));\n                const htmlTab = document.querySelector('.mlp-code-tab[data-code=\"html\"]');\n                if (htmlTab) htmlTab.classList.add('active');\n\n                \/\/ Clear preview iframe\n                const frame = document.getElementById('modal-preview-frame');\n                if (frame) frame.srcdoc = '';\n\n                const modal = document.getElementById('mlp-view-modal');\n                modal.style.display = 'block';\n                modal.scrollTop = 0;\n                document.documentElement.style.overflow = 'hidden';\n                document.body.style.overflow = 'hidden';\n                ['wpwrap','wpcontent','wpbody','wpbody-content'].forEach(id => {\n                    const el = document.getElementById(id);\n                    if (el) { el.dataset.mlpOverflow = el.style.overflow; el.style.overflow = 'hidden'; }\n                });\n            }\n\n            function closeViewModal() {\n                const modal = document.getElementById('mlp-view-modal');\n                if (modal) modal.style.display = 'none';\n                document.documentElement.style.overflow = '';\n                document.body.style.overflow = '';\n                ['wpwrap','wpcontent','wpbody','wpbody-content'].forEach(id => {\n                    const el = document.getElementById(id);\n                    if (el) { el.style.overflow = el.dataset.mlpOverflow || ''; }\n                });\n            }\n\n            \/\/ \u2500\u2500 COLLECT ALL BUILD DATA FROM DOM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n            function collectBuildsData() {\n                allBuildsData = [];\n                var seen = {};\n                document.querySelectorAll('.mlp-community-card').forEach(card => {\n                    var id = card.dataset.id;\n                    if (seen[id]) return;\n                    seen[id] = true;\n                    allBuildsData.push({\n                        id: id,\n                        title: card.dataset.title,\n                        author: card.dataset.author,\n                        description: card.dataset.description,\n                        category: card.dataset.category,\n                        date: card.dataset.date,\n                        image_url: card.dataset.imageUrl,\n                        html: card.dataset.html,\n                        css: card.dataset.css,\n                        js: card.dataset.js\n                    });\n                });\n            }\n\n            \/\/ \u2500\u2500 INIT PER INSTANCE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n            function initCommunityBuilds(instanceId) {\n                const $overlay = document.getElementById('mlp-community-overlay-' + instanceId);\n                if (!$overlay) return;\n\n                const $openBtn = document.querySelector('.mlp-community-open-btn[data-instance=\"' + instanceId + '\"]');\n                const $backBtn = $overlay.querySelector('.mlp-community-back-btn');\n                const $searchInput = $overlay.querySelector('.mlp-community-search');\n                const $filterBtns = $overlay.querySelectorAll('.mlp-community-filter');\n                const $grid = document.getElementById('mlp-community-grid-' + instanceId);\n                const $empty = document.getElementById('mlp-community-empty-' + instanceId);\n                let activeFilter = 'all';\n\n                if ($openBtn) {\n                    $openBtn.addEventListener('click', function(e) {\n                        e.preventDefault();\n                        $overlay.style.display = 'block';\n                        document.body.style.overflow = 'hidden';\n                    });\n                }\n\n                if ($backBtn) {\n                    $backBtn.addEventListener('click', function() {\n                        $overlay.style.display = 'none';\n                        document.body.style.overflow = '';\n                    });\n                }\n\n                function filterCards() {\n                    const query = $searchInput?.value.toLowerCase().trim() || '';\n                    let visibleCount = 0;\n                    var allGrids = $overlay.querySelectorAll('.mlp-community-grid');\n                    allGrids.forEach(function(grid) {\n                        var cards = grid.querySelectorAll('.mlp-community-card');\n                        var gridVisible = 0;\n                        cards.forEach(card => {\n                            const category = card.dataset.category;\n                            const title = card.dataset.title || '';\n                            const author = card.dataset.author || '';\n                            const text = (title + ' ' + author).toLowerCase();\n                            const categoryMatch = activeFilter === 'all' || category === activeFilter;\n                            const searchMatch = !query || text.indexOf(query) !== -1;\n                            if (categoryMatch && searchMatch) { card.style.display = ''; visibleCount++; gridVisible++; }\n                            else { card.style.display = 'none'; }\n                        });\n                        grid.style.display = gridVisible > 0 ? 'grid' : 'none';\n                    });\n                    var allSections = $overlay.querySelectorAll('.mlp-section-header');\n                    allSections.forEach(function(sec) {\n                        var nextGrid = sec.nextElementSibling;\n                        while (nextGrid && !nextGrid.classList.contains('mlp-community-grid')) nextGrid = nextGrid.nextElementSibling;\n                        if (nextGrid) sec.style.display = nextGrid.style.display === 'none' ? 'none' : '';\n                    });\n                    var allMores = $overlay.querySelectorAll('.mlp-more-wrap');\n                    allMores.forEach(function(mw) { if (query || activeFilter !== 'all') mw.style.display = 'none'; });\n                    if ($empty) {\n                        if (visibleCount === 0) { $empty.style.display = 'block'; }\n                        else { $empty.style.display = 'none'; }\n                    }\n                }\n\n                if ($filterBtns) {\n                    $filterBtns.forEach(btn => {\n                        btn.addEventListener('click', function() {\n                            $filterBtns.forEach(b => b.classList.remove('active'));\n                            this.classList.add('active');\n                            activeFilter = this.dataset.filter;\n                            filterCards();\n                        });\n                    });\n                }\n\n                if ($searchInput) $searchInput.addEventListener('input', filterCards);\n\n                \/\/ View buttons (all grids including new + explore)\n                $overlay.querySelectorAll('.mlp-community-view-btn').forEach(btn => {\n                    btn.addEventListener('click', function(e) {\n                        e.stopPropagation();\n                        const card = this.closest('.mlp-community-card');\n                        if (card) {\n                            const build = {\n                                id: card.dataset.id, title: card.dataset.title,\n                                author: card.dataset.author, description: card.dataset.description,\n                                category: card.dataset.category, date: card.dataset.date,\n                                image_url: card.dataset.imageUrl,\n                                html: card.dataset.html, css: card.dataset.css, js: card.dataset.js\n                            };\n                            showViewModal(build);\n                        }\n                    });\n                });\n\n                \/\/ Author name click in cards (grid)\n                $overlay.querySelectorAll('.mlp-community-card-author-link').forEach(link => {\n                    link.addEventListener('click', function(e) {\n                        e.stopPropagation();\n                        openAuthorModal(this.dataset.author);\n                    });\n                });\n\n                filterCards();\n            }\n\n            \/\/ \u2500\u2500 MODAL EVENT HANDLERS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n            const viewModal = document.getElementById('mlp-view-modal');\n            const backBtn = document.getElementById('mlp-modal-back-btn');\n            const loadBtn = document.getElementById('modal-load-btn');\n            const reportBtn = document.getElementById('modal-report-btn');\n            const runLiveBtn = document.getElementById('modal-run-live');\n            const codeTabs = document.querySelectorAll('.mlp-code-tab');\n            const codeDisplay = document.getElementById('modal-code-display');\n\n            if (backBtn) backBtn.addEventListener('click', closeViewModal);\n\n            if (loadBtn) {\n                loadBtn.addEventListener('click', () => {\n                    if (!currentBuildData) return;\n\n                    \/\/ ALWAYS close all community popups first\n                    closeViewModal();\n                    ['mlp-author-modal','mlp-author-manager-modal','mlp-report-modal',\n                     'mlp-author-login-modal','mlp-add-template-modal'].forEach(function(id) {\n                        var el = document.getElementById(id);\n                        if (el) el.style.display = 'none';\n                    });\n                    document.querySelectorAll('[id^=\"mlp-community-overlay-\"]').forEach(function(el) {\n                        el.style.display = 'none';\n                    });\n                    document.body.style.overflow = '';\n                    document.documentElement.style.overflow = '';\n\n                    \/\/ Try to load into the editor as a new tab\n                    var openBtn = document.querySelector('.mlp-community-open-btn');\n                    var instanceId = openBtn ? openBtn.dataset.instance : null;\n\n                    if (\n                        instanceId &&\n                        window.monacoInstances &&\n                        window.monacoInstances[instanceId] &&\n                        typeof window.mlpCreateTabElement === 'function' &&\n                        typeof window.mlpSwitchTab === 'function'\n                    ) {\n                        var tabId = 'readme-community-' + Date.now();\n                        var instances = window.monacoInstances[instanceId];\n                        var tabData = {\n                            id: tabId,\n                            title: currentBuildData.title || 'Community Build',\n                            emoji: '\ud83c\udf10',\n                            html: currentBuildData.html || '',\n                            css: currentBuildData.css || '',\n                            js: currentBuildData.js || '',\n                            preprocessors: { html: 'none', css: 'none', js: 'none' },\n                            isReadOnly: true,\n                            isForked: false,\n                            active: false\n                        };\n                        instances.tabs[tabId] = tabData;\n                        window.mlpCreateTabElement(instanceId, tabId, tabData.title, tabData.emoji, false, true);\n                        window.mlpSwitchTab(instanceId, tabId);\n                    } else {\n                        \/\/ Fallback: open as standalone page in new browser tab\n                        var doc = buildFullDoc(currentBuildData.html || '', currentBuildData.css || '', currentBuildData.js || '');\n                        var newWin = window.open('', '_blank');\n                        if (newWin) { newWin.document.write(doc); newWin.document.close(); }\n                    }\n\n                });\n            }\n\n            if (runLiveBtn) {\n                runLiveBtn.addEventListener('click', () => {\n                    document.querySelectorAll('.mlp-page-tab').forEach(t => t.classList.remove('active'));\n                    document.querySelectorAll('.mlp-tab-pane').forEach(p => p.style.display = 'none');\n                    const previewTab = document.querySelector('.mlp-page-tab[data-tab=\"preview\"]');\n                    const previewPane = document.getElementById('mlp-tab-preview');\n                    if (previewTab) previewTab.classList.add('active');\n                    if (previewPane) previewPane.style.display = 'block';\n                    if (currentBuildData) {\n                        const frame = document.getElementById('modal-preview-frame');\n                        if (frame) frame.srcdoc = buildFullDoc(currentBuildData.html || '', currentBuildData.css || '', currentBuildData.js || '');\n                    }\n                });\n            }\n\n            document.querySelectorAll('.mlp-page-tab').forEach(tab => {\n                tab.addEventListener('click', () => {\n                    document.querySelectorAll('.mlp-page-tab').forEach(t => t.classList.remove('active'));\n                    document.querySelectorAll('.mlp-tab-pane').forEach(p => p.style.display = 'none');\n                    tab.classList.add('active');\n                    const pane = document.getElementById('mlp-tab-' + tab.dataset.tab);\n                    if (pane) pane.style.display = 'block';\n                    if (tab.dataset.tab === 'preview' && currentBuildData) {\n                        const frame = document.getElementById('modal-preview-frame');\n                        if (frame && !frame.srcdoc) {\n                            frame.srcdoc = buildFullDoc(currentBuildData.html || '', currentBuildData.css || '', currentBuildData.js || '');\n                        }\n                    }\n                });\n            });\n\n            if (codeTabs) {\n                codeTabs.forEach(tab => {\n                    tab.addEventListener('click', () => {\n                        codeTabs.forEach(t => t.classList.remove('active'));\n                        tab.classList.add('active');\n                        const codeType = tab.dataset.code;\n                        if (currentBuildData) {\n                            if (codeType === 'html') codeDisplay.textContent = currentBuildData.html || '<!-- No HTML provided -->';\n                            else if (codeType === 'css') codeDisplay.textContent = currentBuildData.css || '\/* No CSS provided *\/';\n                            else if (codeType === 'js') codeDisplay.textContent = currentBuildData.js || '\/\/ No JavaScript provided';\n                        }\n                    });\n                });\n            }\n\n            \/\/ Author links inside view modal (overview + sidebar)\n            document.querySelectorAll('.mlp-author-link').forEach(el => {\n                el.addEventListener('click', () => {\n                    if (currentBuildData) openAuthorModal(currentBuildData.author);\n                });\n            });\n\n            \/\/ Author modal back button\n            const authorBackBtn = document.getElementById('mlp-author-back-btn');\n            if (authorBackBtn) {\n                authorBackBtn.addEventListener('click', () => {\n                    document.getElementById('mlp-author-modal').style.display = 'none';\n                    document.documentElement.style.overflow = 'hidden';\n                    document.body.style.overflow = 'hidden';\n                });\n            }\n\n            \/\/ Report modal\n            const reportModal = document.getElementById('mlp-report-modal');\n            const reportClose = document.querySelector('.mlp-report-close');\n            const reportCancel = document.querySelector('.mlp-report-cancel');\n            const reportSubmit = document.querySelector('.mlp-report-submit');\n\n            if (reportBtn) {\n                reportBtn.addEventListener('click', () => {\n                    if (currentBuildData) {\n                        document.getElementById('report-title').textContent = currentBuildData.title;\n                        document.getElementById('report-author').textContent = currentBuildData.author;\n                        document.getElementById('report-reason').value = '';\n                        reportModal.style.display = 'flex';\n                    }\n                });\n            }\n\n            if (reportClose) reportClose.addEventListener('click', () => { reportModal.style.display = 'none'; });\n            if (reportCancel) reportCancel.addEventListener('click', () => { reportModal.style.display = 'none'; });\n            if (reportSubmit) {\n                reportSubmit.addEventListener('click', () => {\n                    const reason = document.getElementById('report-reason').value.trim();\n                    if (!reason) { alert('Please provide a reason.'); return; }\n                    alert('Thank you for your report. Our team will review this build.');\n                    reportModal.style.display = 'none';\n                });\n            }\n\n            document.addEventListener('keydown', (e) => {\n                if (e.key === 'Escape') {\n                    const loginModal   = document.getElementById('mlp-author-login-modal');\n                    const managerModal = document.getElementById('mlp-author-manager-modal');\n                    const authorModal  = document.getElementById('mlp-author-modal');\n                    if (loginModal?.style.display === 'block')   { loginModal.style.display = 'none'; return; }\n                    if (managerModal?.style.display === 'block')  { managerModal.style.display = 'none'; document.documentElement.style.overflow=''; document.body.style.overflow=''; return; }\n                    if (authorModal?.style.display === 'block')  { authorModal.style.display = 'none'; return; }\n                    if (viewModal?.style.display === 'block')    { closeViewModal(); return; }\n                    if (reportModal?.style.display === 'flex')   { reportModal.style.display = 'none'; return; }\n                    const overlay = document.querySelector('.mlp-community-overlay[style*=\"display: block\"]');\n                    if (overlay) { overlay.style.display = 'none'; document.body.style.overflow = ''; }\n                }\n            });\n\n            function mlpInit() {\n                collectBuildsData();\n                document.querySelectorAll('[id^=\"mlp-community-overlay-\"]').forEach(el => {\n                    const id = el.id.replace('mlp-community-overlay-', '');\n                    initCommunityBuilds(id);\n                });\n                initAuthorSession();\n            }\n            if (document.readyState === 'loading') {\n                document.addEventListener('DOMContentLoaded', mlpInit);\n            } else {\n                mlpInit();\n            }\n\n            \/\/ \u2500\u2500 AUTHOR SESSION \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n            let authorSession = null; \/\/ { id, name, avatar, password_plain, ... }\n\n            function initAuthorSession() {\n                \/\/ Restore from sessionStorage\n                try {\n                    const stored = sessionStorage.getItem('mlp_author_session');\n                    if (stored) { authorSession = JSON.parse(stored); }\n                } catch(e) {}\n                applySessionUI();\n\n                \/\/ Login button\n                const loginBtn = document.getElementById('mlp-author-login-btn');\n                if (loginBtn) loginBtn.addEventListener('click', openLoginModal);\n\n                \/\/ Logout button\n                const logoutBtn = document.getElementById('mlp-author-logout-btn');\n                if (logoutBtn) logoutBtn.addEventListener('click', () => {\n                    authorSession = null;\n                    try { sessionStorage.removeItem('mlp_author_session'); } catch(e) {}\n                    applySessionUI();\n                });\n\n                \/\/ Manager button\n                const managerBtn = document.getElementById('mlp-author-manager-btn');\n                if (managerBtn) managerBtn.addEventListener('click', openManagerModal);\n\n                \/\/ Login modal wiring\n                const loginModal = document.getElementById('mlp-author-login-modal');\n                document.getElementById('mlp-login-modal-close')?.addEventListener('click', () => { loginModal.style.display = 'none'; });\n                document.getElementById('mlp-login-cancel-btn')?.addEventListener('click', () => { loginModal.style.display = 'none'; });\n                document.getElementById('mlp-login-submit-btn')?.addEventListener('click', doAuthorLogin);\n                document.getElementById('mlp-login-password')?.addEventListener('keydown', e => { if (e.key === 'Enter') doAuthorLogin(); });\n                document.getElementById('mlp-login-author-name')?.addEventListener('keydown', e => { if (e.key === 'Enter') doAuthorLogin(); });\n\n                \/\/ Manager modal back\n                document.getElementById('mlp-manager-back-btn')?.addEventListener('click', () => {\n                    document.getElementById('mlp-author-manager-modal').style.display = 'none';\n                    document.documentElement.style.overflow = '';\n                    document.body.style.overflow = '';\n                });\n            }\n\n            function applySessionUI() {\n                const loginBtn   = document.getElementById('mlp-author-login-btn');\n                const managerBtn = document.getElementById('mlp-author-manager-btn');\n                const logoutBtn  = document.getElementById('mlp-author-logout-btn');\n                if (!loginBtn) return;\n                if (authorSession) {\n                    loginBtn.style.display   = 'none';\n                    managerBtn.style.display = '';\n                    logoutBtn.style.display  = '';\n                } else {\n                    loginBtn.style.display   = '';\n                    managerBtn.style.display = 'none';\n                    logoutBtn.style.display  = 'none';\n                }\n            }\n\n            function openLoginModal() {\n                const modal = document.getElementById('mlp-author-login-modal');\n                const err = document.getElementById('mlp-login-error');\n                if (err) { err.style.display = 'none'; err.textContent = ''; }\n                document.getElementById('mlp-login-password').value = '';\n                document.getElementById('mlp-login-author-name').value = '';\n                modal.style.display = 'block';\n            }\n\n            function doAuthorLogin() {\n                const nameEl   = document.getElementById('mlp-login-author-name');\n                const pwEl     = document.getElementById('mlp-login-password');\n                const errEl    = document.getElementById('mlp-login-error');\n                const btn      = document.getElementById('mlp-login-submit-btn');\n                const authorName = nameEl?.value.trim();\n                const password = pwEl?.value;\n                if (!authorName) { showLoginError('Please enter your author name.'); return; }\n                if (!password) { showLoginError('Please enter your password.'); return; }\n                \/\/ Look up author id by name from the pre-loaded authors data\n                const authorData = (window.mlpAuthorsData || []).find(\n                    a => a.name.toLowerCase() === authorName.toLowerCase()\n                );\n                if (!authorData) { showLoginError('Author not found. Check your name and try again.'); return; }\n                const authorId = authorData.id;\n                btn.disabled = true;\n                btn.innerHTML = '<i class=\"fas fa-spinner fa-spin\"><\/i> Logging in...';\n                fetch(mlp_ajax.ajax_url + '?_t=' + Date.now(), {\n                    method: 'POST',\n                    headers: { 'Content-Type': 'application\/x-www-form-urlencoded' },\n                    body: new URLSearchParams({ action: 'mlp_author_login', author_id: authorId, password, nonce: mlp_ajax.nonce })\n                })\n                .then(r => r.json())\n                .then(data => {\n                    btn.disabled = false;\n                    btn.innerHTML = '<i class=\"fas fa-sign-in-alt\"><\/i> Log In';\n                    if (data.success) {\n                        authorSession = { ...data.data.author, password_plain: password };\n                        try { sessionStorage.setItem('mlp_author_session', JSON.stringify(authorSession)); } catch(e) {}\n                        document.getElementById('mlp-author-login-modal').style.display = 'none';\n                        applySessionUI();\n                        openManagerModal();\n                    } else {\n                        showLoginError(data.data || 'Login failed.');\n                    }\n                })\n                .catch(() => {\n                    btn.disabled = false;\n                    btn.innerHTML = '<i class=\"fas fa-sign-in-alt\"><\/i> Log In';\n                    showLoginError('Network error. Please try again.');\n                });\n            }\n\n            function showLoginError(msg) {\n                const el = document.getElementById('mlp-login-error');\n                if (!el) return;\n                el.textContent = msg;\n                el.style.display = 'block';\n            }\n\n            function openManagerModal() {\n                if (!authorSession) { openLoginModal(); return; }\n                const modal = document.getElementById('mlp-author-manager-modal');\n                const myBuilds = allBuildsData.filter(b => b.author === authorSession.name);\n\n                \/\/ Avatar + name\n                const avatarImg  = document.getElementById('mlp-manager-avatar-img');\n                const avatarIcon = document.getElementById('mlp-manager-avatar-icon');\n                if (authorSession.avatar) {\n                    avatarImg.src = authorSession.avatar; avatarImg.style.display = 'block';\n                    if (avatarIcon) avatarIcon.style.display = 'none';\n                } else {\n                    if (avatarImg) avatarImg.style.display = 'none';\n                    if (avatarIcon) avatarIcon.style.display = 'flex';\n                }\n                document.getElementById('mlp-manager-author-name').textContent = authorSession.name;\n                document.getElementById('mlp-manager-logged-as').textContent = 'Logged in as: ' + authorSession.name;\n                document.getElementById('mlp-manager-template-count').textContent =\n                    myBuilds.length + ' template' + (myBuilds.length !== 1 ? 's' : '');\n\n                const grid = document.getElementById('mlp-manager-grid');\n                const emptyEl = document.getElementById('mlp-manager-empty');\n                grid.innerHTML = '';\n\n                if (myBuilds.length === 0) {\n                    emptyEl.style.display = 'block';\n                } else {\n                    emptyEl.style.display = 'none';\n                    myBuilds.forEach(build => {\n                        const card = document.createElement('div');\n                        card.className = 'mlp-community-card';\n                        card.dataset.id = build.id;\n                        card.innerHTML =\n                            '<div class=\"mlp-community-card-preview\">' +\n                                (build.image_url\n                                    ? '<img decoding=\"async\" src=\"' + build.image_url + '\" alt=\"' + escHtml(build.title) + '\" \/>'\n                                    : '<div class=\"mlp-community-card-preview-placeholder\"><i class=\"fas fa-code\"><\/i><\/div>') +\n                            '<\/div>' +\n                            '<div class=\"mlp-community-card-info\">' +\n                                '<div class=\"mlp-community-card-title\">' + escHtml(build.title) + '<\/div>' +\n                                '<div class=\"mlp-community-card-author\" style=\"font-size:0.72rem;color:#94a3b8;margin-top:4px;\">' +\n                                    '<i class=\"fas fa-user-circle\"><\/i> ' + escHtml(build.author) +\n                                '<\/div>' +\n                            '<\/div>' +\n                            '<div class=\"mlp-community-card-footer\">' +\n                                '<button class=\"mlp-community-view-btn\" data-id=\"' + build.id + '\"><i class=\"fas fa-eye\"><\/i> View<\/button>' +\n                                '<button class=\"mlp-manager-delete-btn\" data-id=\"' + build.id + '\" data-title=\"' + escHtml(build.title) + '\" style=\"flex:1;background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.25);color:#ef4444;padding:8px;cursor:pointer;border-radius:8px;font-size:0.75rem;font-weight:600;\"><i class=\"fas fa-trash\"><\/i> Remove<\/button>' +\n                            '<\/div>';\n\n                        \/\/ View button\n                        card.querySelector('.mlp-community-view-btn').addEventListener('click', () => {\n                            modal.style.display = 'none';\n                            showViewModal(build);\n                            \/\/ When view modal closes, re-open manager\n                            const origClose = closeViewModal;\n                            const managerRestoreHandler = function() {\n                                document.getElementById('mlp-modal-back-btn').removeEventListener('click', managerRestoreHandler);\n                                openManagerModal();\n                            };\n                            document.getElementById('mlp-modal-back-btn').addEventListener('click', managerRestoreHandler);\n                        });\n\n                        \/\/ Delete button\n                        card.querySelector('.mlp-manager-delete-btn').addEventListener('click', function() {\n                            const buildId    = this.dataset.id;\n                            const buildTitle = this.dataset.title;\n                            if (!confirm('Are you sure you want to permanently delete \"' + buildTitle + '\"?\\nThis cannot be undone.')) return;\n                            const delBtn = this;\n                            delBtn.disabled = true;\n                            delBtn.innerHTML = '<i class=\"fas fa-spinner fa-spin\"><\/i> Removing...';\n                            fetch(mlp_ajax.ajax_url + '?_t=' + Date.now(), {\n                                method: 'POST',\n                                headers: { 'Content-Type': 'application\/x-www-form-urlencoded' },\n                                body: new URLSearchParams({\n                                    action: 'mlp_author_delete_build',\n                                    author_id: authorSession.id,\n                                    build_id: buildId,\n                                    password: authorSession.password_plain,\n                                    nonce: mlp_ajax.nonce\n                                })\n                            })\n                            .then(r => r.json())\n                            .then(data => {\n                                if (data.success) {\n                                    \/\/ Remove from DOM\n                                    card.style.transition = 'opacity 0.3s,transform 0.3s';\n                                    card.style.opacity = '0'; card.style.transform = 'scale(0.9)';\n                                    setTimeout(() => {\n                                        card.remove();\n                                        \/\/ Remove from allBuildsData\n                                        allBuildsData = allBuildsData.filter(b => b.id !== buildId);\n                                        \/\/ Update count\n                                        const remaining = allBuildsData.filter(b => b.author === authorSession.name);\n                                        document.getElementById('mlp-manager-template-count').textContent =\n                                            remaining.length + ' template' + (remaining.length !== 1 ? 's' : '');\n                                        if (remaining.length === 0) {\n                                            document.getElementById('mlp-manager-empty').style.display = 'block';\n                                        }\n                                        \/\/ Remove from ALL main community grids (not manager grid)\n                                        document.querySelectorAll('[id^=\"mlp-community-grid-\"] .mlp-community-card[data-id=\"' + buildId + '\"]').forEach(c => c.remove());\n                                    }, 300);\n                                } else {\n                                    delBtn.disabled = false;\n                                    delBtn.innerHTML = '<i class=\"fas fa-trash\"><\/i> Remove';\n                                    alert('Error: ' + (data.data || 'Could not delete.'));\n                                }\n                            })\n                            .catch(() => {\n                                delBtn.disabled = false;\n                                delBtn.innerHTML = '<i class=\"fas fa-trash\"><\/i> Remove';\n                                alert('Network error.');\n                            });\n                        });\n\n                        grid.appendChild(card);\n                    });\n                }\n\n                modal.style.display = 'block';\n                modal.scrollTop = 0;\n                document.documentElement.style.overflow = 'hidden';\n                document.body.style.overflow = 'hidden';\n            }\n        })();\n        <\/script>\n        <\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-15","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pterocos.eu.org\/index.php?rest_route=\/wp\/v2\/pages\/15","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pterocos.eu.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pterocos.eu.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pterocos.eu.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pterocos.eu.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=15"}],"version-history":[{"count":1,"href":"https:\/\/pterocos.eu.org\/index.php?rest_route=\/wp\/v2\/pages\/15\/revisions"}],"predecessor-version":[{"id":17,"href":"https:\/\/pterocos.eu.org\/index.php?rest_route=\/wp\/v2\/pages\/15\/revisions\/17"}],"wp:attachment":[{"href":"https:\/\/pterocos.eu.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}