☰

MES(Mobile Element Selector)

Material M3의 진보한 디자인, 아름다운 애니메이션, 완벽한 기능을 가진 모바일 요소 선택기

目前为 2025-05-08 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         MES(Mobile Element Selector)
  3. // @author       삼플 with Gemini
  4. // @version      1.2.4
  5. // @description  Material M3의 진보한 디자인, 아름다운 애니메이션, 완벽한 기능을 가진 모바일 요소 선택기
  6. // @match        *://*/*
  7. // @license      MIT
  8. // @grant        GM_setClipboard
  9. // @grant        GM_setValue
  10. // @grant        GM_getValue
  11. // @namespace https://adguard.com
  12. // ==/UserScript==
  13.  
  14. (async function() {
  15.     'use strict';
  16.     const SCRIPT_ID = "[MES v1.2.4 M3]";
  17.     const ADGUARD_LOGO_URL = 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/AdGuard.svg/500px-AdGuard.svg.png';
  18.  
  19.     const STRINGS = {
  20.         panelTitle: '요소 차단',
  21.         settingsTitle: 'MES by 삼플',
  22.         listTitle: '저장된 차단 규칙',
  23.         selectedElementLabel: '선택된 요소 (CSS 선택자)',
  24.         parentLevelLabel: '상위 요소 선택 레벨:',
  25.         copy: '복사',
  26.         preview: '미리보기',
  27.         restorePreview: '되돌리기',
  28.         saveRule: '규칙 저장',
  29.         list: '목록',
  30.         settings: '설정',
  31.         cancel: '취소',
  32.         close: '닫기',
  33.         includeSiteNameLabel: '규칙에 사이트명 포함',
  34.         useAdguardLogoLabel: '토글 버튼 AdGuard 로고',
  35.         panelOpacityLabel: '패널 투명도',
  36.         toggleSizeLabel: '토글 버튼 크기',
  37.         toggleOpacityLabel: '토글 버튼 투명도',
  38.         tempDisableLabel: '모든 규칙 임시 비활성화',
  39.         backupLabel: '규칙 백업 (JSON)',
  40.         restoreLabel: '규칙 복원 (JSON)',
  41.         togglePositionLabel: '토글 버튼 위치',
  42.         posTopLeft: '좌상',
  43.         posTopRight: '우상',
  44.         posBottomLeft: '좌하',
  45.         posBottomRight: '우하',
  46.         on: 'ON',
  47.         off: 'OFF',
  48.         noRules: '저장된 규칙이 없습니다.',
  49.         noElementSelected: '⚠️ 선택된 요소가 없습니다.',
  50.         cannotGenerateSelector: '❌ 유효한 선택자를 생성할 수 없습니다.',
  51.         selectorCopied: '✅ 선택자가 복사되었습니다!',
  52.         clipboardError: '❌ 클립보드 복사 실패',
  53.         promptCopy: '선택자를 직접 복사하세요:',
  54.         alreadyHidden: 'ℹ️ 이미 숨겨진 요소입니다.',
  55.         previewDifferentElement: '⚠️ 다른 요소가 미리보기 중입니다.',
  56.         ruleSavedReloading: '✅ 규칙 저장됨! 적용 중...',
  57.         ruleSavedApplyFailed: '⚠️ 규칙은 저장했으나 즉시 적용 실패.',
  58.         ruleAddError: '❌ 규칙 추가 중 오류:',
  59.         ruleExists: 'ℹ️ 이미 저장된 규칙입니다.',
  60.         listShowError: '❌ 목록 표시 중 오류 발생',
  61.         ruleCopied: '✅ 규칙 복사됨',
  62.         ruleDeleted: '🗑️ 규칙 삭제됨',
  63.         ruleDeleteError: '❌ 규칙 삭제 실패',
  64.         settingsSaved: '✅ 설정 저장됨',
  65.         settingsSaveError: '❌ 설정 저장 실패',
  66.         backupStarting: '💾 규칙 백업 파일 다운로드를 시작합니다.',
  67.         backupError: '❌ 규칙 백업 실패',
  68.         restorePrompt: '📁 복원할 JSON 파일을 선택하세요.',
  69.         restoreSuccess: '✅ 규칙 복원 완료! 적용 중...',
  70.         restoreErrorInvalidFile: '❌ 잘못된 파일 형식 또는 내용입니다.',
  71.         restoreErrorGeneral: '❌ 규칙 복원 실패',
  72.         blockingApplied: (count) => `✅ ${count}개의 규칙 적용됨`,
  73.         blockingApplyError: '❌ 규칙 적용 중 오류 발생',
  74.         tempBlockingOn: '🚫 모든 규칙 임시 비활성화됨',
  75.         tempBlockingOff: '✅ 규칙 다시 활성화됨'
  76.     };
  77.  
  78.     const DEFAULT_SETTINGS = {
  79.         includeSiteName: true,
  80.         panelOpacity: 0.65,
  81.         toggleSizeScale: 1.0,
  82.         toggleOpacity: 1.0,
  83.         showAdguardLogo: false,
  84.         tempBlockingDisabled: false,
  85.         toggleBtnCorner: 'bottom-right'
  86.     };
  87.  
  88.     let settings = {};
  89.     const SETTINGS_KEY = 'mobileElementSelectorSettings_v1_2';
  90.     const BLOCKED_SELECTORS_KEY = 'mobileBlockedSelectors_v2';
  91.  
  92.     async function loadSettings() {
  93.         let storedSettings = {};
  94.         try {
  95.             const storedValue = await GM_getValue(SETTINGS_KEY, JSON.stringify(DEFAULT_SETTINGS));
  96.             storedSettings = JSON.parse(storedValue || '{}');
  97.         } catch (e) {
  98.             console.error(SCRIPT_ID, `Error loading settings from GM_getValue('${SETTINGS_KEY}'), using defaults.`, e);
  99.             storedSettings = { ...DEFAULT_SETTINGS };
  100.         }
  101.  
  102.         settings = { ...DEFAULT_SETTINGS, ...storedSettings };
  103.  
  104.         settings.panelOpacity = parseFloat(settings.panelOpacity);
  105.         if (isNaN(settings.panelOpacity) || settings.panelOpacity < 0.1 || settings.panelOpacity > 1.0) {
  106.             settings.panelOpacity = DEFAULT_SETTINGS.panelOpacity;
  107.         }
  108.         settings.toggleSizeScale = parseFloat(settings.toggleSizeScale);
  109.         if (isNaN(settings.toggleSizeScale) || settings.toggleSizeScale < 0.5 || settings.toggleSizeScale > 2.0) {
  110.             settings.toggleSizeScale = DEFAULT_SETTINGS.toggleSizeScale;
  111.         }
  112.         settings.toggleOpacity = parseFloat(settings.toggleOpacity);
  113.         if (isNaN(settings.toggleOpacity) || settings.toggleOpacity < 0.1 || settings.toggleOpacity > 1.0) {
  114.             settings.toggleOpacity = DEFAULT_SETTINGS.toggleOpacity;
  115.         }
  116.         settings.includeSiteName = typeof settings.includeSiteName === 'boolean' ? settings.includeSiteName : DEFAULT_SETTINGS.includeSiteName;
  117.         settings.showAdguardLogo = typeof settings.showAdguardLogo === 'boolean' ? settings.showAdguardLogo : DEFAULT_SETTINGS.showAdguardLogo;
  118.         settings.tempBlockingDisabled = typeof settings.tempBlockingDisabled === 'boolean' ? settings.tempBlockingDisabled : DEFAULT_SETTINGS.tempBlockingDisabled;
  119.  
  120.         const validCorners = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
  121.         if (!validCorners.includes(settings.toggleBtnCorner)) {
  122.             settings.toggleBtnCorner = DEFAULT_SETTINGS.toggleBtnCorner;
  123.         }
  124.  
  125.         console.log(SCRIPT_ID, "Settings loaded:", settings);
  126.     }
  127.  
  128.     async function saveSettings() {
  129.         try {
  130.             await GM_setValue(SETTINGS_KEY, JSON.stringify(settings));
  131.             console.log(SCRIPT_ID, "Settings saved:", settings);
  132.         } catch (e) {
  133.             console.error(SCRIPT_ID, `Error saving settings to GM_setValue('${SETTINGS_KEY}')`, e);
  134.             showToast(STRINGS.settingsSaveError, 'error');
  135.         }
  136.     }
  137.  
  138.     const style = document.createElement('style');
  139.  
  140.     function updateCSSVariables() {
  141.         document.documentElement.style.setProperty('--panel-opacity', settings.panelOpacity);
  142.         document.documentElement.style.setProperty('--toggle-size', `${56 * settings.toggleSizeScale}px`);
  143.         document.documentElement.style.setProperty('--toggle-opacity', settings.toggleOpacity);
  144.  
  145.         document.querySelectorAll('#mobile-block-panel, #mobile-settings-panel, #mobile-blocklist-panel').forEach(p => {
  146.             p.style.setProperty('background-color', `rgba(40, 43, 48, ${settings.panelOpacity})`, 'important');
  147.         });
  148.         if (toggleBtn) {
  149.             toggleBtn.style.setProperty('width', `var(--toggle-size)`, 'important');
  150.             toggleBtn.style.setProperty('height', `var(--toggle-size)`, 'important');
  151.             toggleBtn.style.setProperty('opacity', `var(--toggle-opacity)`, 'important');
  152.         }
  153.     }
  154.  
  155.     function applyToggleBtnPosition() {
  156.         if (!toggleBtn) return;
  157.  
  158.         toggleBtn.style.top = 'auto';
  159.         toggleBtn.style.left = 'auto';
  160.         toggleBtn.style.bottom = 'auto';
  161.         toggleBtn.style.right = 'auto';
  162.         toggleBtn.style.transform = '';
  163.  
  164.         const margin = '20px';
  165.  
  166.         switch (settings.toggleBtnCorner) {
  167.             case 'top-left':
  168.                 toggleBtn.style.top = margin;
  169.                 toggleBtn.style.left = margin;
  170.                 break;
  171.             case 'top-right':
  172.                 toggleBtn.style.top = margin;
  173.                 toggleBtn.style.right = margin;
  174.                 break;
  175.             case 'bottom-left':
  176.                 toggleBtn.style.bottom = margin;
  177.                 toggleBtn.style.left = margin;
  178.                 break;
  179.             case 'bottom-right':
  180.             default:
  181.                 toggleBtn.style.bottom = margin;
  182.                 toggleBtn.style.right = margin;
  183.                 break;
  184.         }
  185.         console.log(SCRIPT_ID, "Applied toggle button corner:", settings.toggleBtnCorner);
  186.     }
  187.  
  188.     style.textContent = `
  189. :root {
  190.     --md-sys-color-primary: #a0c9ff; --md-sys-color-on-primary: #00325a;
  191.     --md-sys-color-primary-container: #004880; --md-sys-color-on-primary-container: #d1e4ff;
  192.     --md-sys-color-secondary: #bdc7dc; --md-sys-color-on-secondary: #283141;
  193.     --md-sys-color-secondary-container: #3e4758; --md-sys-color-on-secondary-container: #dae2f9;
  194.     --md-sys-color-tertiary: #e0bddd; --md-sys-color-on-tertiary: #402843;
  195.     --md-sys-color-tertiary-container: #583e5a; --md-sys-color-on-tertiary-container: #fdd9fa;
  196.     --md-sys-color-error: #ffb4ab; --md-sys-color-on-error: #690005;
  197.     --md-sys-color-error-container: #93000a; --md-sys-color-on-error-container: #ffdad6;
  198.     --md-sys-color-background: #1a1c1e; --md-sys-color-on-background: #e3e2e6;
  199.     --md-sys-color-surface: #1a1c1e; --md-sys-color-on-surface: #e3e2e6;
  200.     --md-sys-color-surface-variant: #43474e; --md-sys-color-on-surface-variant: #c3c6cf;
  201.     --md-sys-color-outline: #8d9199; --md-sys-color-shadow: #000000;
  202.     --md-sys-color-inverse-surface: #e3e2e6; --md-sys-color-inverse-on-surface: #2f3033;
  203.     --md-sys-color-surface-container-high: rgba(227, 226, 230, 0.16);
  204.     --md-sys-color-success: #90ee90; --md-sys-color-success-container: rgba(144, 238, 144, 0.1);
  205.     --md-sys-color-warning: #ffcc80;
  206.     --panel-opacity: ${DEFAULT_SETTINGS.panelOpacity};
  207.     --toggle-size: ${56 * DEFAULT_SETTINGS.toggleSizeScale}px;
  208.     --toggle-opacity: ${DEFAULT_SETTINGS.toggleOpacity};
  209.     --md-ref-typeface-plain: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  210.     --md-sys-typescale-body-large-font-family: var(--md-ref-typeface-plain);
  211.     --md-sys-typescale-body-large-font-size: 16px;
  212.     --md-sys-typescale-label-large-font-size: 14px;
  213.     --md-sys-typescale-label-medium-font-size: 12px;
  214.     --md-sys-typescale-label-small-font-size: 11px;
  215.     --md-sys-typescale-title-medium-font-size: 18px;
  216. }
  217.  
  218. .mobile-block-ui { z-index: 2147483646 !important; touch-action: manipulation !important; font-family: var(--md-sys-typescale-body-large-font-family); box-sizing: border-box; position: fixed !important; visibility: visible !important; color: var(--md-sys-color-on-surface); -webkit-tap-highlight-color: transparent !important; }
  219.  
  220. #mobile-block-panel, #mobile-settings-panel, #mobile-blocklist-panel {
  221.     background-color: rgba(40, 43, 48, var(--panel-opacity)) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  222.     color: var(--md-sys-color-on-surface); border-radius: 20px !important;
  223.     box-shadow: 0 12px 17px 2px rgba(0,0,0,0.14), 0 5px 22px 4px rgba(0,0,0,0.12), 0 7px 8px -4px rgba(0,0,0,0.20) !important;
  224.     border: 1px solid rgba(255, 255, 255, 0.12); padding: 18px 20px; width: calc(100% - 40px); max-width: 380px;
  225.     display: none;
  226.     opacity: 0;
  227.     backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden;
  228.     transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease-out;
  229.     will-change: transform, opacity;
  230.     cursor: grab;
  231. }
  232.  
  233. #mobile-block-panel { bottom: 20px; left: 50%; transform: translateX(-50%) translateY(100px) scale(0.95); z-index: 2147483645 !important; }
  234. #mobile-settings-panel, #mobile-blocklist-panel { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); z-index: 2147483647 !important; max-width: 340px; }
  235.  
  236. #mobile-block-panel.visible {
  237.     opacity: 1;
  238.     transform: translateX(-50%) translateY(0) scale(1);
  239. }
  240. #mobile-settings-panel.visible, #mobile-blocklist-panel.visible {
  241.     opacity: 1;
  242.     transform: translate(-50%, -50%) scale(1);
  243. }
  244.  
  245. /* Overrides for dragged panels: transform should only handle scale */
  246. #mobile-block-panel[data-was-dragged="true"] {
  247.     transform: scale(0.95); /* Closed state */
  248. }
  249. #mobile-block-panel[data-was-dragged="true"].visible {
  250.     transform: scale(1); /* Open state */
  251. }
  252. #mobile-settings-panel[data-was-dragged="true"],
  253. #mobile-blocklist-panel[data-was-dragged="true"] {
  254.     transform: scale(0.9); /* Closed state */
  255. }
  256. #mobile-settings-panel[data-was-dragged="true"].visible,
  257. #mobile-blocklist-panel[data-was-dragged="true"].visible {
  258.     transform: scale(1); /* Open state */
  259. }
  260.  
  261. .mb-panel-title { font-size: var(--md-sys-typescale-title-medium-font-size); font-weight: 500; color: var(--md-sys-color-on-surface); text-align: center; margin: 0 0 24px 0; }
  262.  
  263. .mb-slider { width: 100%; margin: 15px 0; -webkit-appearance: none; appearance: none; background: var(--md-sys-color-surface-variant); height: 5px; border-radius: 3px; outline: none; cursor: pointer; transition: background 0.3s ease; }
  264. .mb-slider:hover { background: var(--md-sys-color-outline); }
  265. .mb-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; background: var(--md-sys-color-primary); border-radius: 50%; cursor: pointer; border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.4); transition: background 0.3s ease, box-shadow 0.3s ease; }
  266. .mb-slider::-moz-range-thumb { width: 22px; height: 22px; background: var(--md-sys-color-primary); border-radius: 50%; cursor: pointer; border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.4); transition: background 0.3s ease, box-shadow 0.3s ease; }
  267. .mb-slider:active::-webkit-slider-thumb { box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-rgb, 160, 201, 255), 0.25); }
  268. .mb-slider:active::-moz-range-thumb { box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-rgb, 160, 201, 255), 0.25); }
  269.  
  270. .selected-element {
  271.     outline: 3px solid var(--md-sys-color-error) !important;
  272.     outline-offset: 2px;
  273.     box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45) !important;
  274.     background-color: rgba(255, 82, 82, 0.15) !important;
  275.     z-index: 2147483644 !important;
  276.     transition: background-color 0.1s ease, outline 0.1s ease, box-shadow 0.1s ease;
  277.     pointer-events: none;
  278. }
  279.  
  280. #mobile-block-toggleBtn {
  281.     z-index: 2147483646 !important; background-color: var(--md-sys-color-primary-container) !important; color: var(--md-sys-color-on-primary-container) !important;
  282.     opacity: var(--toggle-opacity) !important; width: var(--toggle-size) !important; height: var(--toggle-size) !important; border-radius: 18px !important; border: none !important; cursor: pointer !important;
  283.     box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12), 0 3px 5px -1px rgba(0,0,0,0.20) !important;
  284.     transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease, opacity 0.3s ease, border 0.2s ease, top 0.3s ease, left 0.3s ease, bottom 0.3s ease, right 0.3s ease;
  285.     display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; backface-visibility: hidden; -webkit-backface-visibility: hidden; position: fixed !important; -webkit-tap-highlight-color: transparent !important;
  286. }
  287. #mobile-block-toggleBtn:active { transform: scale(0.95); box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12) !important; }
  288. #mobile-block-toggleBtn.selecting {
  289.     background-color: var(--md-sys-color-primary) !important;
  290.     color: var(--md-sys-color-on-primary) !important;
  291.     box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.20) !important;
  292. }
  293. #mobile-block-toggleBtn .toggle-icon { width: 55%; height: 55%; display: block; margin: auto; background-color: currentColor; mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; }
  294. #mobile-block-toggleBtn .toggle-icon-plus { mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>'); -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>'); }
  295. #mobile-block-toggleBtn.selecting .toggle-icon-plus { mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>'); -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>'); }
  296. #mobile-block-toggleBtn .toggle-icon-adguard { background-image: url('${ADGUARD_LOGO_URL}'); background-size: contain; background-repeat: no-repeat; background-position: center; background-color: transparent !important; mask-image: none; -webkit-mask-image: none; width: 60%; height: 60%; }
  297.  
  298. .mb-btn { padding: 10px 24px; border: none; border-radius: 20px !important; font-size: var(--md-sys-typescale-label-large-font-size); font-weight: 500; cursor: pointer; transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease; text-align: center; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15); min-width: 64px; min-height: 40px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; opacity: 1 !important; -webkit-tap-highlight-color: transparent !important; line-height: 1.5; display: inline-flex; align-items: center; justify-content: center; }
  299. .mb-btn:hover { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15); }
  300. .mb-btn:active { transform: scale(0.97); box-shadow: none; }
  301. .mb-btn.primary { background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
  302. .mb-btn.primary:hover { background-color: #b0d3ff; } .mb-btn.primary:active { background-color: #c0daff; }
  303. .mb-btn.secondary { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
  304. .mb-btn.secondary:hover { background-color: #545d6e; } .mb-btn.secondary:active { background-color: #6a7385; }
  305. .mb-btn.tertiary { background-color: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
  306. .mb-btn.tertiary:hover { background-color: #6f5471; } .mb-btn.tertiary:active { background-color: #866a89; }
  307. .mb-btn.error { background-color: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
  308. .mb-btn.error:hover { background-color: #b12025; } .mb-btn.error:active { background-color: #c83c40; }
  309. .mb-btn.surface { background-color: var(--md-sys-color-surface-variant); color: var(--md-sys-color-on-surface-variant); }
  310. .mb-btn.surface:hover { background-color: #53575e; } .mb-btn.surface:active { background-color: #63676e; }
  311. .mb-btn.outline { background-color: transparent; color: var(--md-sys-color-primary); border: 1px solid var(--md-sys-color-outline); box-shadow: none; }
  312. .mb-btn.outline:hover { background-color: rgba(var(--md-sys-color-primary-rgb, 160, 201, 255), 0.08); }
  313. .mb-btn.outline:active { background-color: rgba(var(--md-sys-color-primary-rgb, 160, 201, 255), 0.12); }
  314.  
  315. .button-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 12px; margin-top: 24px; }
  316. #blocker-info-wrapper { margin-bottom: 15px; padding: 10px 14px; background-color: var(--md-sys-color-surface-variant); border-radius: 12px; border: 1px solid var(--md-sys-color-outline); }
  317. #blocker-info-label { display: block; font-size: var(--md-sys-typescale-label-medium-font-size); color: var(--md-sys-color-on-surface-variant); margin-bottom: 6px; font-weight: 500; }
  318. #blocker-info { display: block; color: var(--md-sys-color-on-surface); font-size: var(--md-sys-typescale-label-large-font-size); line-height: 1.45; word-break: break-all; min-height: 1.45em; font-family: 'Consolas', 'Monaco', monospace; max-height: 6em; overflow-y: auto; }
  319. #blocker-info:empty::after { content: '없음'; color: var(--md-sys-color-on-surface-variant); font-style: italic; }
  320. label[for="blocker-slider"] { display: block; font-size: var(--md-sys-typescale-label-medium-font-size); color: var(--md-sys-color-on-surface-variant); margin-bottom: 5px; margin-top: 10px; }
  321.  
  322. .settings-item { margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px; }
  323. .settings-item label { display: flex; justify-content: space-between; align-items: center; font-size: var(--md-sys-typescale-label-large-font-size); color: var(--md-sys-color-on-surface-variant); }
  324. .settings-item label .settings-label-text { flex-grow: 1; margin-right: 10px; }
  325. .settings-value { color: var(--md-sys-color-on-surface); font-weight: 500; font-size: var(--md-sys-typescale-label-medium-font-size); padding-left: 10px; }
  326. #settings-toggle-site, #settings-adguard-logo, #settings-temp-disable { min-width: 70px; padding: 8px 14px; font-size: var(--md-sys-typescale-label-medium-font-size); flex-shrink: 0; }
  327. #settings-toggle-site.active, #settings-adguard-logo.active, #settings-temp-disable.active { background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
  328. #settings-toggle-site:not(.active), #settings-adguard-logo:not(.active), #settings-temp-disable:not(.active) { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
  329. #settings-close, #settings-backup, #settings-restore { width: 100%; margin-top: 10px; }
  330. #settings-restore-input { display: none; }
  331.  
  332. .corner-selector-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 5px; }
  333. .corner-btn { padding: 8px 12px; min-width: 60px; font-size: var(--md-sys-typescale-label-medium-font-size); }
  334. .corner-btn.active { background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
  335. .corner-btn:not(.active) { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
  336.  
  337. #blocklist-container { max-height: calc(70vh - 150px); overflow-y: auto; margin: 20px 0; padding-right: 8px; display: flex; flex-direction: column; gap: 10px; }
  338. .blocklist-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background-color: rgba(var(--md-sys-color-surface-variant-rgb, 67, 71, 78), 0.5); border-radius: 12px; border: 1px solid transparent; transition: background-color 0.2s, border-color 0.2s, opacity 0.3s ease, transform 0.3s ease; }
  339. .blocklist-item:hover { background-color: rgba(var(--md-sys-color-surface-variant-rgb, 67, 71, 78), 0.7); border-color: var(--md-sys-color-outline); }
  340. .blocklist-item span { flex: 1; word-break: break-all; margin-right: 12px; font-size: var(--md-sys-typescale-label-medium-font-size); color: var(--md-sys-color-on-surface-variant); font-family: 'Consolas', 'Monaco', monospace; }
  341. .blocklist-controls { display: flex; gap: 6px; flex-shrink: 0; }
  342. .blocklist-btn { padding: 6px 10px; min-width: auto; min-height: 32px; font-size: var(--md-sys-typescale-label-small-font-size); border-radius: 16px !important; }
  343. .blocklist-btn-delete { background-color: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
  344. .blocklist-btn-copy { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
  345. #blocklist-empty { text-align:center; color: var(--md-sys-color-on-surface-variant); padding: 20px 0; }
  346.  
  347. #mes-toast-container { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); z-index: 2147483647 !important; display: flex; flex-direction: column-reverse; align-items: center; gap: 10px; pointer-events: none; width: max-content; max-width: 90%; }
  348. .mes-toast { background-color: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); padding: 14px 20px; border-radius: 8px; box-shadow: 0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12); font-size: var(--md-sys-typescale-label-large-font-size); opacity: 0; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease; pointer-events: all; max-width: 100%; text-align: center; }
  349. .mes-toast.show { opacity: 1; transform: translateY(0); }
  350. .mes-toast.info { background-color: #333; color: white; }
  351. .mes-toast.success { background-color: var(--md-sys-color-success-container); color: var(--md-sys-color-success); }
  352. .mes-toast.error { background-color: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
  353. .mes-toast.warning { background-color: #4d3a00; color: var(--md-sys-color-warning); }
  354.     `;
  355.     document.head.appendChild(style);
  356.  
  357.     let panel, settingsPanel, toggleBtn, listPanel, toastContainer;
  358.     function createUIElements() {
  359.         toastContainer = document.createElement('div');
  360.         toastContainer.id = 'mes-toast-container';
  361.         toastContainer.className = 'mobile-block-ui';
  362.         document.body.appendChild(toastContainer);
  363.  
  364.         panel = document.createElement('div');
  365.         panel.id = 'mobile-block-panel';
  366.         panel.className = 'mobile-block-ui';
  367.         panel.innerHTML = `
  368.             <div id="blocker-info-wrapper">
  369.                 <span id="blocker-info-label">${STRINGS.selectedElementLabel}</span>
  370.                 <div id="blocker-info"></div>
  371.             </div>
  372.             <label for="blocker-slider" style="display: block; font-size: var(--md-sys-typescale-label-medium-font-size); color: var(--md-sys-color-on-surface-variant); margin-bottom: 5px;">${STRINGS.parentLevelLabel}</label>
  373.             <input type="range" id="blocker-slider" class="mb-slider" min="0" max="10" value="0" aria-label="Parent Level Selector">
  374.             <div class="button-grid">
  375.                 <button id="blocker-copy" class="mb-btn secondary">${STRINGS.copy}</button>
  376.                 <button id="blocker-preview" class="mb-btn secondary">${STRINGS.preview}</button>
  377.                 <button id="blocker-add-block" class="mb-btn primary">${STRINGS.saveRule}</button>
  378.                 <button id="blocker-list" class="mb-btn tertiary">${STRINGS.list}</button>
  379.                 <button id="blocker-settings" class="mb-btn tertiary">${STRINGS.settings}</button>
  380.                 <button id="blocker-cancel" class="mb-btn surface">${STRINGS.cancel}</button>
  381.             </div>`;
  382.         document.body.appendChild(panel);
  383.  
  384.         listPanel = document.createElement('div');
  385.         listPanel.id = 'mobile-blocklist-panel';
  386.         listPanel.className = 'mobile-block-ui';
  387.         listPanel.innerHTML = `
  388.             <h3 class="mb-panel-title">${STRINGS.listTitle}</h3>
  389.             <div id="blocklist-container"></div>
  390.             <button id="blocklist-close" class="mb-btn surface" style="width: 100%; margin-top: 15px;">${STRINGS.close}</button>`;
  391.         document.body.appendChild(listPanel);
  392.  
  393.         settingsPanel = document.createElement('div');
  394.         settingsPanel.id = 'mobile-settings-panel';
  395.         settingsPanel.className = 'mobile-block-ui';
  396.         settingsPanel.innerHTML = `
  397.             <h3 class="mb-panel-title">${STRINGS.settingsTitle}</h3>
  398.             <div class="settings-item">
  399.                 <label><span class="settings-label-text">${STRINGS.includeSiteNameLabel}</span>
  400.                     <button id="settings-toggle-site" class="mb-btn ${settings.includeSiteName ? 'active' : ''}">${settings.includeSiteName ? STRINGS.on : STRINGS.off}</button>
  401.                 </label>
  402.             </div>
  403.             <div class="settings-item">
  404.                 <label><span class="settings-label-text">${STRINGS.useAdguardLogoLabel}</span>
  405.                     <button id="settings-adguard-logo" class="mb-btn ${settings.showAdguardLogo ? 'active' : ''}">${settings.showAdguardLogo ? STRINGS.on : STRINGS.off}</button>
  406.                 </label>
  407.             </div>
  408.              <div class="settings-item">
  409.                 <label><span class="settings-label-text">${STRINGS.tempDisableLabel}</span>
  410.                     <button id="settings-temp-disable" class="mb-btn ${settings.tempBlockingDisabled ? 'active error' : 'secondary'}">${settings.tempBlockingDisabled ? STRINGS.on : STRINGS.off}</button>
  411.                 </label>
  412.             </div>
  413.             <div class="settings-item">
  414.                 <label for="settings-panel-opacity">
  415.                     <span class="settings-label-text">${STRINGS.panelOpacityLabel}</span>
  416.                     <span id="opacity-value" class="settings-value">${settings.panelOpacity.toFixed(2)}</span>
  417.                 </label>
  418.                 <input id="settings-panel-opacity" type="range" class="mb-slider" min="0.1" max="1.0" step="0.05" value="${settings.panelOpacity}" aria-label="Panel Opacity">
  419.             </div>
  420.             <div class="settings-item">
  421.                 <label for="settings-toggle-size">
  422.                     <span class="settings-label-text">${STRINGS.toggleSizeLabel}</span>
  423.                     <span id="toggle-size-value" class="settings-value">${settings.toggleSizeScale.toFixed(1)}x</span>
  424.                 </label>
  425.                 <input id="settings-toggle-size" type="range" class="mb-slider" min="0.5" max="2.0" step="0.1" value="${settings.toggleSizeScale}" aria-label="Toggle Button Size">
  426.             </div>
  427.             <div class="settings-item">
  428.                 <label for="settings-toggle-opacity">
  429.                     <span class="settings-label-text">${STRINGS.toggleOpacityLabel}</span>
  430.                     <span id="toggle-opacity-value" class="settings-value">${settings.toggleOpacity.toFixed(2)}</span>
  431.                 </label>
  432.                 <input id="settings-toggle-opacity" type="range" class="mb-slider" min="0.1" max="1.0" step="0.05" value="${settings.toggleOpacity}" aria-label="Toggle Button Opacity">
  433.             </div>
  434.             <div class="settings-item">
  435.                  <label><span class="settings-label-text">${STRINGS.togglePositionLabel}</span></label>
  436.                  <div class="corner-selector-grid">
  437.                      <button id="corner-tl" data-corner="top-left" class="mb-btn corner-btn">${STRINGS.posTopLeft}</button>
  438.                      <button id="corner-tr" data-corner="top-right" class="mb-btn corner-btn">${STRINGS.posTopRight}</button>
  439.                      <button id="corner-bl" data-corner="bottom-left" class="mb-btn corner-btn">${STRINGS.posBottomLeft}</button>
  440.                      <button id="corner-br" data-corner="bottom-right" class="mb-btn corner-btn">${STRINGS.posBottomRight}</button>
  441.                  </div>
  442.             </div>
  443.             <div class="button-grid" style="margin-top: 20px; grid-template-columns: 1fr 1fr;">
  444.                  <button id="settings-backup" class="mb-btn outline">${STRINGS.backupLabel}</button>
  445.                  <button id="settings-restore" class="mb-btn outline">${STRINGS.restoreLabel}</button>
  446.                  <input type="file" id="settings-restore-input" accept=".json">
  447.             </div>
  448.             <button id="settings-close" class="mb-btn surface" style="width: 100%; margin-top: 20px;">${STRINGS.close}</button>`;
  449.         document.body.appendChild(settingsPanel);
  450.  
  451.         toggleBtn = document.createElement('button');
  452.         toggleBtn.id = 'mobile-block-toggleBtn';
  453.         toggleBtn.className = 'mobile-block-ui';
  454.         toggleBtn.setAttribute('aria-label', 'Toggle Element Selector');
  455.         document.body.appendChild(toggleBtn);
  456.  
  457.         updateCSSVariables();
  458.         updateToggleIcon();
  459.         applyToggleBtnPosition();
  460.  
  461.         initRefsAndEvents();
  462.         applyBlocking();
  463.     }
  464.  
  465.     function showToast(message, type = 'info', duration = 3000) {
  466.         if (!toastContainer) {
  467.             console.warn(SCRIPT_ID, "Toast container not ready for message:", message);
  468.             return;
  469.         }
  470.         const toast = document.createElement('div');
  471.         toast.className = `mes-toast ${type}`;
  472.         toast.textContent = message;
  473.         toastContainer.appendChild(toast);
  474.  
  475.         void toast.offsetWidth;
  476.  
  477.         requestAnimationFrame(() => {
  478.             toast.classList.add('show');
  479.         });
  480.  
  481.         setTimeout(() => {
  482.             toast.classList.remove('show');
  483.             toast.addEventListener('transitionend', () => {
  484.                 try { toast.remove(); } catch (e) { }
  485.             }, { once: true });
  486.             setTimeout(() => {
  487.                 try { toast.remove(); } catch (e) { }
  488.             }, 500);
  489.         }, duration);
  490.     }
  491.  
  492.     let selecting = false;
  493.     let selectedEl = null;
  494.     let initialTouchedElement = null;
  495.     let touchStartX = 0, touchStartY = 0, touchMoved = false;
  496.     const moveThreshold = 15;
  497.     let blockedSelectorsCache = [];
  498.  
  499.     async function loadBlockedSelectors() {
  500.         let stored = '[]';
  501.         try {
  502.             stored = await GM_getValue(BLOCKED_SELECTORS_KEY, '[]');
  503.             const parsed = JSON.parse(stored);
  504.             blockedSelectorsCache = Array.isArray(parsed) ? parsed : [];
  505.             console.log(SCRIPT_ID, `Loaded ${blockedSelectorsCache.length} rules from storage.`);
  506.             return blockedSelectorsCache;
  507.         } catch (e) {
  508.             console.error(SCRIPT_ID, `Error parsing blocked selectors from key '${BLOCKED_SELECTORS_KEY}', resetting. Stored value:`, stored, e);
  509.             try {
  510.                 await GM_setValue(BLOCKED_SELECTORS_KEY, '[]');
  511.             } catch (resetError) {
  512.                  console.error(SCRIPT_ID, "Failed to reset storage after parse error", resetError);
  513.             }
  514.             blockedSelectorsCache = [];
  515.             return [];
  516.         }
  517.     }
  518.  
  519.     async function saveBlockedSelectors(list) {
  520.         const selectorsToSave = Array.isArray(list) ? list : [];
  521.         try {
  522.             await GM_setValue(BLOCKED_SELECTORS_KEY, JSON.stringify(selectorsToSave));
  523.             blockedSelectorsCache = [...selectorsToSave];
  524.             console.log(SCRIPT_ID, `Saved ${selectorsToSave.length} rules.`);
  525.         } catch (e) {
  526.             console.error(SCRIPT_ID, "Error saving blocked selectors to GM:", e);
  527.             showToast(STRINGS.settingsSaveError, 'error');
  528.         }
  529.     }
  530.  
  531.     const originalDisplayMap = new Map();
  532.  
  533.     async function applyBlocking(showToastNotification = false) {
  534.         if (settings.tempBlockingDisabled) {
  535.             console.log(SCRIPT_ID, "Blocking temporarily disabled. Skipping application.");
  536.             disableAllBlocking(false);
  537.             return 0;
  538.         }
  539.  
  540.         console.log(SCRIPT_ID, "Applying block rules...");
  541.         if (blockedSelectorsCache.length === 0) {
  542.             await loadBlockedSelectors();
  543.         }
  544.  
  545.         let count = 0;
  546.         let appliedCount = 0;
  547.         const currentHostname = location.hostname;
  548.  
  549.         blockedSelectorsCache.forEach(rule => {
  550.             if (typeof rule !== 'string' || !rule.includes('##')) {
  551.                  console.warn(SCRIPT_ID, "Skipping invalid block rule format:", rule);
  552.                  return;
  553.             }
  554.  
  555.             const parts = rule.split('##');
  556.             const domain = parts[0];
  557.             const cssSelector = parts[1];
  558.  
  559.             if (!cssSelector) {
  560.                  console.warn(SCRIPT_ID, "Skipping rule with empty selector:", rule);
  561.                  return;
  562.             }
  563.             if (domain && domain !== '*' && currentHostname !== domain) {
  564.                 return;
  565.             }
  566.  
  567.             try {
  568.                 const elements = document.querySelectorAll(cssSelector);
  569.                 elements.forEach(el => {
  570.                      const isHiddenByScript = el.style.display === 'none' && el.hasAttribute('data-mes-hidden');
  571.                      const isNaturallyHidden = window.getComputedStyle(el).display === 'none';
  572.  
  573.                      if (!isHiddenByScript && !isNaturallyHidden) {
  574.                          if (!originalDisplayMap.has(el)) {
  575.                              originalDisplayMap.set(el, el.style.display || 'unset');
  576.                          }
  577.                          el.style.setProperty('display', 'none', 'important');
  578.                          el.setAttribute('data-mes-hidden', 'true');
  579.                          count++;
  580.                      } else if (isHiddenByScript) {
  581.                         if (!originalDisplayMap.has(el)) {
  582.                            originalDisplayMap.set(el, 'unset');
  583.                         }
  584.                      }
  585.                 });
  586.                 if(elements.length > 0) appliedCount++;
  587.  
  588.             } catch (e) {
  589.                  // Ignore errors
  590.             }
  591.         });
  592.  
  593.         if (count > 0) console.log(SCRIPT_ID, `Applied ${appliedCount} rules, hid ${count} new elements.`);
  594.         else console.log(SCRIPT_ID, `Applied ${appliedCount} rules, no new elements needed hiding.`);
  595.  
  596.         if (showToastNotification && appliedCount > 0 && !settings.tempBlockingDisabled) {
  597.             showToast(STRINGS.blockingApplied(appliedCount), 'success', 2000);
  598.         }
  599.         return appliedCount;
  600.     }
  601.  
  602.     function disableAllBlocking(showToastNotification = true) {
  603.         console.log(SCRIPT_ID, "Disabling all blocking rules temporarily...");
  604.         let restoredCount = 0;
  605.         document.querySelectorAll('[data-mes-hidden="true"]').forEach(el => {
  606.             const originalDisplay = originalDisplayMap.get(el);
  607.             if (originalDisplay === 'unset') {
  608.                 el.style.removeProperty('display');
  609.             } else if (originalDisplay !== undefined) {
  610.                 el.style.setProperty('display', originalDisplay, '');
  611.             } else {
  612.                  el.style.removeProperty('display');
  613.             }
  614.             el.removeAttribute('data-mes-hidden');
  615.             restoredCount++;
  616.         });
  617.         console.log(SCRIPT_ID, `Restored display for ${restoredCount} elements.`);
  618.         if (showToastNotification) {
  619.             showToast(STRINGS.tempBlockingOn, 'warning', 2500);
  620.         }
  621.     }
  622.  
  623.     async function enableAllBlocking(showToastNotification = true) {
  624.         console.log(SCRIPT_ID, "Re-enabling blocking rules...");
  625.         const appliedCount = await applyBlocking(false);
  626.         if (showToastNotification && appliedCount > 0) {
  627.             showToast(STRINGS.tempBlockingOff, 'success', 2000);
  628.         } else if (showToastNotification) {
  629.             showToast(STRINGS.tempBlockingOff, 'info', 1500);
  630.         }
  631.     }
  632.  
  633.     function updateToggleIcon() {
  634.         if (!toggleBtn) return;
  635.         if (settings.showAdguardLogo) {
  636.             toggleBtn.innerHTML = `<span class="toggle-icon toggle-icon-adguard" aria-hidden="true"></span>`;
  637.         } else {
  638.             toggleBtn.innerHTML = `<span class="toggle-icon toggle-icon-plus" aria-hidden="true"></span>`;
  639.         }
  640.         toggleBtn.classList.toggle('selecting', selecting);
  641.     }
  642.  
  643.     function generateSelector(el, maxDepth = 7, requireUnique = true) {
  644.         if (!el || el.nodeType !== 1 || el.closest('.mobile-block-ui')) return '';
  645.  
  646.         if (el.id) {
  647.             const id = el.id;
  648.             const escapedId = CSS.escape(id);
  649.             if (!/^\d+$/.test(id) && id.length > 2 && !id.startsWith('ember') && !id.startsWith('react') && !id.includes(':')) {
  650.                 try {
  651.                     if (document.querySelectorAll(`#${escapedId}`).length === 1) {
  652.                         return `#${escapedId}`;
  653.                     }
  654.                 } catch (e) { }
  655.             }
  656.         }
  657.  
  658.         const parts = [];
  659.         let current = el;
  660.         let depth = 0;
  661.  
  662.         while (current && current.tagName && depth < maxDepth) {
  663.             const tagName = current.tagName.toLowerCase();
  664.             if (tagName === 'body' || tagName === 'html') break;
  665.             if (current.closest('.mobile-block-ui')) {
  666.                 current = current.parentElement;
  667.                 continue;
  668.             }
  669.  
  670.             let part = tagName;
  671.             let addedSpecificity = false;
  672.  
  673.             const stableClasses = Array.from(current.classList)
  674.                 .filter(c => c && c.length > 2 &&
  675.                               !/^[a-z]{1,2}$/i.test(c) &&
  676.                               !/\d/.test(c) &&
  677.                               !/active|select|focus|hover|disabled|open|closed|visible|hidden|js-|ui-/i.test(c) &&
  678.                               !/^[A-Z0-9]{4,}$/.test(c) &&
  679.                               !c.includes('--') && !c.includes('__') &&
  680.                               !['selected-element', 'mobile-block-ui'].some(uiClass => c.includes(uiClass)))
  681.                 .slice(0, 2);
  682.  
  683.             if (stableClasses.length > 0) {
  684.                 part += '.' + stableClasses.map(c => CSS.escape(c)).join('.');
  685.                 addedSpecificity = true;
  686.             }
  687.  
  688.             if (!addedSpecificity || (current.parentElement && !current.parentElement.closest('.mobile-block-ui'))) {
  689.                 const siblings = current.parentElement ? Array.from(current.parentElement.children) : [];
  690.                 const sameTagSiblings = siblings.filter(sib => sib.tagName === current.tagName && !sib.closest('.mobile-block-ui'));
  691.  
  692.                 if (sameTagSiblings.length > 1) {
  693.                     const index = sameTagSiblings.indexOf(current) + 1;
  694.                     if (index > 0) {
  695.                         part += `:nth-of-type(${index})`;
  696.                         addedSpecificity = true;
  697.                     }
  698.                 }
  699.             }
  700.  
  701.             parts.unshift(part);
  702.  
  703.              if (requireUnique && parts.length > 0 && depth > 0) {
  704.                  const tempSelector = parts.join(' > ');
  705.                  try {
  706.                      if (document.querySelectorAll(tempSelector).length === 1) {
  707.                           console.log(SCRIPT_ID, `Unique selector found early: ${tempSelector}`);
  708.                          return tempSelector;
  709.                      }
  710.                  } catch (e) { }
  711.              }
  712.  
  713.             current = current.parentElement;
  714.             depth++;
  715.         }
  716.  
  717.         let finalSelector = parts.join(' > ');
  718.  
  719.         if (requireUnique && finalSelector) {
  720.             try {
  721.                 const matches = document.querySelectorAll(finalSelector);
  722.                 if (matches.length !== 1) {
  723.                     console.warn(SCRIPT_ID, `Generated selector "${finalSelector}" matches ${matches.length} elements. Trying parent recursively.`);
  724.                     if (el.parentElement && !el.parentElement.closest('.mobile-block-ui') && maxDepth > 0) {
  725.                        const parentSelector = generateSelector(el.parentElement, maxDepth -1, false);
  726.                        if (parentSelector) {
  727.                            const combinedSelector = parentSelector + " > " + finalSelector;
  728.                            try {
  729.                                if (document.querySelectorAll(combinedSelector).length === 1) {
  730.                                    console.log(SCRIPT_ID, `Using combined unique selector: ${combinedSelector}`);
  731.                                    return combinedSelector;
  732.                                } else {
  733.                                     console.warn(SCRIPT_ID, `Combined selector "${combinedSelector}" still not unique.`);
  734.                                }
  735.                            } catch(e) { }
  736.                        }
  737.                     }
  738.                      console.warn(SCRIPT_ID, `Could not guarantee uniqueness for: ${finalSelector}`);
  739.                     return finalSelector;
  740.                 }
  741.             } catch (e) {
  742.                  console.error(SCRIPT_ID, `Error validating selector "${finalSelector}":`, e);
  743.                  return '';
  744.             }
  745.         }
  746.  
  747.         if (!finalSelector || finalSelector === 'body' || finalSelector === 'html') {
  748.              return '';
  749.         }
  750.  
  751.         return finalSelector;
  752.     }
  753.  
  754.     function initRefsAndEvents() {
  755.         const infoLabel = panel.querySelector('#blocker-info-label');
  756.         const info = panel.querySelector('#blocker-info');
  757.         const slider = panel.querySelector('#blocker-slider');
  758.         const copyBtn = panel.querySelector('#blocker-copy');
  759.         const previewBtn = panel.querySelector('#blocker-preview');
  760.         const addBtn = panel.querySelector('#blocker-add-block');
  761.         const listBtn = panel.querySelector('#blocker-list');
  762.         const settingsBtn = panel.querySelector('#blocker-settings');
  763.         const cancelBtn = panel.querySelector('#blocker-cancel');
  764.  
  765.         const listContainer = listPanel.querySelector('#blocklist-container');
  766.         const listClose = listPanel.querySelector('#blocklist-close');
  767.  
  768.         const settingsClose = settingsPanel.querySelector('#settings-close');
  769.         const toggleSiteBtn = settingsPanel.querySelector('#settings-toggle-site');
  770.         const adguardLogoToggleBtn = settingsPanel.querySelector('#settings-adguard-logo');
  771.         const tempDisableBtn = settingsPanel.querySelector('#settings-temp-disable');
  772.         const panelOpacitySlider = settingsPanel.querySelector('#settings-panel-opacity');
  773.         const panelOpacityValue = settingsPanel.querySelector('#opacity-value');
  774.         const toggleSizeSlider = settingsPanel.querySelector('#settings-toggle-size');
  775.         const toggleSizeValue = settingsPanel.querySelector('#toggle-size-value');
  776.         const toggleOpacitySlider = settingsPanel.querySelector('#settings-toggle-opacity');
  777.         const toggleOpacityValue = settingsPanel.querySelector('#toggle-opacity-value');
  778.         const cornerButtons = settingsPanel.querySelectorAll('.corner-btn');
  779.         const backupBtn = settingsPanel.querySelector('#settings-backup');
  780.         const restoreBtn = settingsPanel.querySelector('#settings-restore');
  781.         const restoreInput = settingsPanel.querySelector('#settings-restore-input');
  782.  
  783.         let isPreviewHidden = false;
  784.         let previewedElement = null;
  785.  
  786.         function removeSelectionHighlight() {
  787.             if (selectedEl) {
  788.                 selectedEl.classList.remove('selected-element');
  789.             }
  790.             selectedEl = null;
  791.             if (slider) slider.value = 0;
  792.             if (info) info.textContent = '';
  793.         }
  794.  
  795.         function resetPreview() {
  796.             if (isPreviewHidden && previewedElement) {
  797.                 try {
  798.                     const originalDisplay = previewedElement.dataset._original_display;
  799.                     if (originalDisplay === 'unset') {
  800.                         previewedElement.style.removeProperty('display');
  801.                     } else if (originalDisplay !== undefined) {
  802.                         previewedElement.style.setProperty('display', originalDisplay, '');
  803.                     }
  804.                     delete previewedElement.dataset._original_display;
  805.                     if(previewedElement === selectedEl) {
  806.                         previewedElement.classList.add('selected-element');
  807.                     }
  808.                 } catch (e) {
  809.                      console.warn(SCRIPT_ID, "Error resetting preview style:", e)
  810.                 }
  811.             }
  812.             if (previewBtn) {
  813.                 previewBtn.textContent = STRINGS.preview;
  814.                 previewBtn.classList.remove('tertiary');
  815.                 previewBtn.classList.add('secondary');
  816.             }
  817.             isPreviewHidden = false;
  818.             previewedElement = null;
  819.         }
  820.  
  821.         function updateInfo() {
  822.             if (!info) return;
  823.             const selectorText = selectedEl ? generateSelector(selectedEl, 7, false) : '';
  824.             info.textContent = selectorText;
  825.             infoLabel.style.display = 'block';
  826.         }
  827.  
  828.         let activePanel = null;
  829.         function setPanelVisibility(panelElement, visible) {
  830.             if (!panelElement) return;
  831.  
  832.             if (visible) {
  833.                 [panel, settingsPanel, listPanel].forEach(p => {
  834.                     if (p && p !== panelElement && p.classList.contains('visible')) {
  835.                         p.classList.remove('visible');
  836.                         const transitionEndHandler = () => {
  837.                             if (!p.classList.contains('visible')) p.style.display = 'none';
  838.                             p.removeEventListener('transitionend', transitionEndHandler);
  839.                         };
  840.                         p.addEventListener('transitionend', transitionEndHandler);
  841.                         setTimeout(() => {
  842.                              if (!p.classList.contains('visible')) p.style.display = 'none';
  843.                              p.removeEventListener('transitionend', transitionEndHandler);
  844.                         }, 350);
  845.                     }
  846.                 });
  847.  
  848.                 activePanel = panelElement;
  849.                 panelElement.style.display = 'block';
  850.                 requestAnimationFrame(() => {
  851.                     requestAnimationFrame(() => {
  852.                         panelElement.classList.add('visible');
  853.                     });
  854.                 });
  855.             } else {
  856.                  if (activePanel === panelElement) activePanel = null;
  857.                  panelElement.classList.remove('visible');
  858.                  const transitionEndHandler = () => {
  859.                      if (!panelElement.classList.contains('visible')) panelElement.style.display = 'none';
  860.                      panelElement.removeEventListener('transitionend', transitionEndHandler);
  861.                  };
  862.                  panelElement.addEventListener('transitionend', transitionEndHandler);
  863.                  setTimeout(() => {
  864.                       if (!panelElement.classList.contains('visible')) panelElement.style.display = 'none';
  865.                       panelElement.removeEventListener('transitionend', transitionEndHandler);
  866.                  }, 350);
  867.             }
  868.         }
  869.  
  870.         async function addBlockRule(selector) {
  871.             console.log('[addBlockRule] Attempting for selector:', selector);
  872.             if (!selector) {
  873.                 return { success: false, message: STRINGS.cannotGenerateSelector };
  874.             }
  875.  
  876.             let fullSelector = "##" + selector;
  877.             if (settings.includeSiteName) {
  878.                 const hostname = location.hostname;
  879.                 if (!hostname) {
  880.                     console.error(SCRIPT_ID, "Could not get location.hostname");
  881.                     return { success: false, message: '호스트 이름을 가져올 수 없습니다.' };
  882.                 }
  883.                 fullSelector = hostname + fullSelector;
  884.             }
  885.  
  886.             if (blockedSelectorsCache.includes(fullSelector)) {
  887.                 console.log(SCRIPT_ID, "Rule already exists:", fullSelector);
  888.                 return { success: false, message: STRINGS.ruleExists };
  889.             }
  890.  
  891.             const updatedList = [...blockedSelectorsCache, fullSelector];
  892.             await saveBlockedSelectors(updatedList);
  893.  
  894.             console.log(SCRIPT_ID, "Rule added:", fullSelector);
  895.             return { success: true, rule: fullSelector };
  896.         }
  897.  
  898.         async function showList() {
  899.             console.log('[showList] Function called');
  900.             try {
  901.                 const arr = await loadBlockedSelectors();
  902.                 console.log(`[showList] Rendering ${arr.length} rules.`);
  903.                 listContainer.innerHTML = '';
  904.  
  905.                 if (arr.length === 0) {
  906.                     listContainer.innerHTML = `<p id="blocklist-empty">${STRINGS.noRules}</p>`;
  907.                 } else {
  908.                     arr.forEach((rule, index) => {
  909.                         const item = document.createElement('div');
  910.                         item.className = 'blocklist-item';
  911.  
  912.                         const span = document.createElement('span');
  913.                         span.textContent = rule;
  914.                         span.title = rule;
  915.  
  916.                         const controlsDiv = document.createElement('div');
  917.                         controlsDiv.className = 'blocklist-controls';
  918.  
  919.                         const copyButton = document.createElement('button');
  920.                         copyButton.className = 'mb-btn blocklist-btn blocklist-btn-copy';
  921.                         copyButton.textContent = STRINGS.copy;
  922.                         copyButton.title = '규칙 복사';
  923.                         copyButton.addEventListener('click', () => {
  924.                             try {
  925.                                 GM_setClipboard(rule);
  926.                                 showToast(STRINGS.ruleCopied, 'success', 2000);
  927.                             } catch (copyError) {
  928.                                 console.error(SCRIPT_ID, "Error copying rule to clipboard:", copyError);
  929.                                 showToast(STRINGS.clipboardError, 'error');
  930.                             }
  931.                         });
  932.  
  933.                         const deleteButton = document.createElement('button');
  934.                         deleteButton.className = 'mb-btn blocklist-btn blocklist-btn-delete';
  935.                         deleteButton.textContent = '삭제';
  936.                         deleteButton.title = '규칙 삭제';
  937.                         deleteButton.addEventListener('click', async () => {
  938.                             console.log('[showList] Delete button clicked for rule:', rule);
  939.                             try {
  940.                                 const currentIndex = blockedSelectorsCache.indexOf(rule);
  941.                                 if (currentIndex > -1) {
  942.                                     blockedSelectorsCache.splice(currentIndex, 1);
  943.                                     await saveBlockedSelectors(blockedSelectorsCache);
  944.  
  945.                                     item.style.opacity = '0';
  946.                                     item.style.transform = 'translateX(20px) scale(0.95)';
  947.                                     setTimeout(async () => {
  948.                                         item.remove();
  949.                                         if (listContainer.childElementCount === 0) {
  950.                                              listContainer.innerHTML = `<p id="blocklist-empty">${STRINGS.noRules}</p>`;
  951.                                         }
  952.                                         await applyBlocking(false);
  953.                                         showToast(STRINGS.ruleDeleted, 'info', 2000);
  954.                                     }, 300);
  955.  
  956.                                 } else {
  957.                                      console.warn("Rule not found in cache for deletion:", rule);
  958.                                      showToast(STRINGS.ruleDeleteError, 'error');
  959.                                      await showList();
  960.                                 }
  961.                             } catch (deleteError) {
  962.                                 console.error(SCRIPT_ID, "Error deleting rule:", deleteError);
  963.                                 showToast(STRINGS.ruleDeleteError, 'error');
  964.                             }
  965.                         });
  966.  
  967.                         controlsDiv.append(copyButton, deleteButton);
  968.                         item.append(span, controlsDiv);
  969.                         listContainer.append(item);
  970.                     });
  971.                 }
  972.                  console.log('[showList] Rendering list panel.');
  973.                  setPanelVisibility(listPanel, true);
  974.  
  975.             } catch (error) {
  976.                 console.error(SCRIPT_ID, "Error in showList:", error);
  977.                 showToast(STRINGS.listShowError, 'error');
  978.                 setPanelVisibility(listPanel, false);
  979.             }
  980.         }
  981.  
  982.         function setBlockMode(enabled) {
  983.             if (!toggleBtn || !panel) return;
  984.  
  985.             selecting = enabled;
  986.             toggleBtn.classList.toggle('selecting', enabled);
  987.             updateToggleIcon();
  988.  
  989.             if (enabled) {
  990.                 setPanelVisibility(panel, true);
  991.                 if (selectedEl) {
  992.                     selectedEl.classList.add('selected-element');
  993.                 }
  994.                 updateInfo();
  995.             } else {
  996.                 setPanelVisibility(panel, false);
  997.                 if (activePanel === listPanel) setPanelVisibility(listPanel, false);
  998.                 if (activePanel === settingsPanel) setPanelVisibility(settingsPanel, false);
  999.  
  1000.                 removeSelectionHighlight();
  1001.                 resetPreview();
  1002.                 initialTouchedElement = null;
  1003.             }
  1004.             console.log(SCRIPT_ID, "Selection mode:", enabled ? "ON" : "OFF");
  1005.         }
  1006.  
  1007.  
  1008.         console.log(SCRIPT_ID, 'Attaching event listeners...');
  1009.  
  1010.         toggleBtn.addEventListener('click', () => {
  1011.             setBlockMode(!selecting);
  1012.         });
  1013.  
  1014.         copyBtn.addEventListener('click', () => {
  1015.             if (!selectedEl) { showToast(STRINGS.noElementSelected, 'warning'); return; }
  1016.             const selector = generateSelector(selectedEl, 7, true);
  1017.             if (!selector) { showToast(STRINGS.cannotGenerateSelector, 'error'); return; }
  1018.  
  1019.             let finalSelector = "##" + selector;
  1020.             if (settings.includeSiteName) {
  1021.                  finalSelector = location.hostname + finalSelector;
  1022.             }
  1023.             try {
  1024.                 GM_setClipboard(finalSelector);
  1025.                 showToast(STRINGS.selectorCopied, 'success');
  1026.             } catch (err) {
  1027.                 console.error(SCRIPT_ID, "Error copying to clipboard:", err);
  1028.                 showToast(STRINGS.clipboardError, 'error');
  1029.                 try { prompt(STRINGS.promptCopy, finalSelector); } catch (e) { }
  1030.             }
  1031.         });
  1032.  
  1033.         previewBtn.addEventListener('click', () => {
  1034.             if (!selectedEl) { showToast(STRINGS.noElementSelected, 'warning'); return; }
  1035.  
  1036.             if (!isPreviewHidden) {
  1037.                 if (window.getComputedStyle(selectedEl).display === 'none') {
  1038.                     showToast(STRINGS.alreadyHidden, 'info');
  1039.                     return;
  1040.                 }
  1041.                 const currentDisplay = selectedEl.style.display;
  1042.                 selectedEl.dataset._original_display = currentDisplay === '' ? 'unset' : currentDisplay;
  1043.                 selectedEl.style.setProperty('display', 'none', 'important');
  1044.  
  1045.                 previewBtn.textContent = STRINGS.restorePreview;
  1046.                 previewBtn.classList.remove('secondary');
  1047.                 previewBtn.classList.add('tertiary');
  1048.                 isPreviewHidden = true;
  1049.                 previewedElement = selectedEl;
  1050.                 selectedEl.classList.remove('selected-element');
  1051.                 console.log(SCRIPT_ID, "Previewing hide for:", selectedEl);
  1052.  
  1053.             } else {
  1054.                  if (previewedElement && previewedElement !== selectedEl) {
  1055.                      showToast(STRINGS.previewDifferentElement, 'warning');
  1056.                      return;
  1057.                  }
  1058.                  resetPreview();
  1059.                  console.log(SCRIPT_ID, "Restored preview for:", previewedElement);
  1060.             }
  1061.         });
  1062.  
  1063.         addBtn.addEventListener('click', async () => {
  1064.             console.log('[addBtn] Clicked');
  1065.             if (!selectedEl) { showToast(STRINGS.noElementSelected, 'warning'); return; }
  1066.  
  1067.             try {
  1068.                 const selector = generateSelector(selectedEl, 7, true);
  1069.                 console.log('[addBtn] Generated selector for saving:', selector);
  1070.                 if (!selector) { showToast(STRINGS.cannotGenerateSelector, 'error'); return; }
  1071.  
  1072.                 const result = await addBlockRule(selector);
  1073.                 console.log('[addBtn] addBlockRule result:', result);
  1074.  
  1075.                 if (result.success) {
  1076.                      showToast(STRINGS.ruleSavedReloading, 'success', 2000);
  1077.                      try {
  1078.                          const ruleSelector = result.rule.split('##')[1];
  1079.                          document.querySelectorAll(ruleSelector).forEach(el => {
  1080.                              if (!originalDisplayMap.has(el)) {
  1081.                                  originalDisplayMap.set(el, el.style.display || 'unset');
  1082.                              }
  1083.                              el.style.setProperty('display', 'none', 'important');
  1084.                              el.setAttribute('data-mes-hidden', 'true');
  1085.                          });
  1086.                      } catch (applyError) {
  1087.                          console.error(SCRIPT_ID, "Error applying rule immediately after save:", applyError);
  1088.                          showToast(STRINGS.ruleSavedApplyFailed, 'warning', 3000);
  1089.                      }
  1090.                      setBlockMode(false);
  1091.  
  1092.                 } else {
  1093.                     showToast(result.message || STRINGS.ruleAddError, result.success ? 'success' : 'info');
  1094.                 }
  1095.             } catch (error) {
  1096.                 console.error(SCRIPT_ID, "Error during Save Rule click:", error);
  1097.                 showToast(`${STRINGS.ruleAddError} ${error.message}`, 'error');
  1098.             }
  1099.         });
  1100.  
  1101.         listBtn.addEventListener('click', () => {
  1102.             console.log('[listBtn] Clicked');
  1103.              setPanelVisibility(panel, false);
  1104.              showList();
  1105.         });
  1106.  
  1107.         settingsBtn.addEventListener('click', () => {
  1108.              console.log('[settingsBtn] Clicked');
  1109.              setPanelVisibility(panel, false);
  1110.              setPanelVisibility(settingsPanel, true);
  1111.         });
  1112.  
  1113.         cancelBtn.addEventListener('click', () => {
  1114.             setBlockMode(false);
  1115.         });
  1116.  
  1117.         listClose.addEventListener('click', () => {
  1118.             console.log('[listClose] Clicked');
  1119.             setPanelVisibility(listPanel, false);
  1120.             if (selecting) {
  1121.                 console.log('[listClose] Restoring main panel');
  1122.                 setPanelVisibility(panel, true);
  1123.             }
  1124.         });
  1125.  
  1126.         settingsClose.addEventListener('click', () => {
  1127.              console.log('[settingsClose] Clicked');
  1128.              setPanelVisibility(settingsPanel, false);
  1129.              if (selecting) {
  1130.                  console.log('[settingsClose] Restoring main panel');
  1131.                  setPanelVisibility(panel, true);
  1132.              }
  1133.         });
  1134.  
  1135.         toggleSiteBtn.addEventListener('click', async () => {
  1136.             settings.includeSiteName = !settings.includeSiteName;
  1137.             toggleSiteBtn.textContent = settings.includeSiteName ? STRINGS.on : STRINGS.off;
  1138.             toggleSiteBtn.classList.toggle('active', settings.includeSiteName);
  1139.             await saveSettings();
  1140.             showToast(STRINGS.settingsSaved, 'info', 1500);
  1141.         });
  1142.  
  1143.         adguardLogoToggleBtn.addEventListener('click', async () => {
  1144.             settings.showAdguardLogo = !settings.showAdguardLogo;
  1145.             adguardLogoToggleBtn.textContent = settings.showAdguardLogo ? STRINGS.on : STRINGS.off;
  1146.             adguardLogoToggleBtn.classList.toggle('active', settings.showAdguardLogo);
  1147.             updateToggleIcon();
  1148.             await saveSettings();
  1149.             showToast(STRINGS.settingsSaved, 'info', 1500);
  1150.         });
  1151.  
  1152.         tempDisableBtn.addEventListener('click', async () => {
  1153.             settings.tempBlockingDisabled = !settings.tempBlockingDisabled;
  1154.             tempDisableBtn.textContent = settings.tempBlockingDisabled ? STRINGS.on : STRINGS.off;
  1155.             tempDisableBtn.classList.toggle('active', settings.tempBlockingDisabled);
  1156.             tempDisableBtn.classList.toggle('error', settings.tempBlockingDisabled);
  1157.             tempDisableBtn.classList.toggle('secondary', !settings.tempBlockingDisabled);
  1158.  
  1159.             if (settings.tempBlockingDisabled) {
  1160.                 disableAllBlocking();
  1161.             } else {
  1162.                 await enableAllBlocking();
  1163.             }
  1164.             await saveSettings();
  1165.         });
  1166.  
  1167.         const updateCornerButtons = (activeCorner) => {
  1168.             cornerButtons.forEach(btn => {
  1169.                 btn.classList.toggle('active', btn.dataset.corner === activeCorner);
  1170.             });
  1171.         };
  1172.  
  1173.         cornerButtons.forEach(button => {
  1174.             button.addEventListener('click', async () => {
  1175.                 const selectedCorner = button.dataset.corner;
  1176.                 if (settings.toggleBtnCorner !== selectedCorner) {
  1177.                     settings.toggleBtnCorner = selectedCorner;
  1178.                     updateCornerButtons(selectedCorner);
  1179.                     applyToggleBtnPosition();
  1180.                     await saveSettings();
  1181.                     showToast(STRINGS.settingsSaved, 'info', 1500);
  1182.                 }
  1183.             });
  1184.         });
  1185.  
  1186.         updateCornerButtons(settings.toggleBtnCorner);
  1187.  
  1188.  
  1189.         let saveTimeout;
  1190.         const debounceSaveSettings = () => {
  1191.             clearTimeout(saveTimeout);
  1192.             saveTimeout = setTimeout(async () => {
  1193.                 await saveSettings();
  1194.                 console.log(SCRIPT_ID, "Settings saved via debounce");
  1195.             }, 500);
  1196.         };
  1197.  
  1198.         panelOpacitySlider.addEventListener('input', e => {
  1199.             const newValue = parseFloat(e.target.value);
  1200.             settings.panelOpacity = newValue;
  1201.             panelOpacityValue.textContent = newValue.toFixed(2);
  1202.             document.documentElement.style.setProperty('--panel-opacity', newValue);
  1203.              document.querySelectorAll('#mobile-block-panel, #mobile-settings-panel, #mobile-blocklist-panel').forEach(p => {
  1204.                   p.style.setProperty('background-color', `rgba(40, 43, 48, ${newValue})`, 'important');
  1205.              });
  1206.             debounceSaveSettings();
  1207.         });
  1208.  
  1209.         toggleSizeSlider.addEventListener('input', e => {
  1210.             const newValue = parseFloat(e.target.value);
  1211.             settings.toggleSizeScale = newValue;
  1212.             toggleSizeValue.textContent = newValue.toFixed(1) + 'x';
  1213.             document.documentElement.style.setProperty('--toggle-size', `${56 * newValue}px`);
  1214.             if (toggleBtn) {
  1215.                  toggleBtn.style.setProperty('width', `var(--toggle-size)`, 'important');
  1216.                  toggleBtn.style.setProperty('height', `var(--toggle-size)`, 'important');
  1217.             }
  1218.             debounceSaveSettings();
  1219.         });
  1220.  
  1221.         toggleOpacitySlider.addEventListener('input', e => {
  1222.             const newValue = parseFloat(e.target.value);
  1223.             settings.toggleOpacity = newValue;
  1224.             toggleOpacityValue.textContent = newValue.toFixed(2);
  1225.             document.documentElement.style.setProperty('--toggle-opacity', newValue);
  1226.             if (toggleBtn) {
  1227.                  toggleBtn.style.setProperty('opacity', newValue, 'important');
  1228.             }
  1229.             debounceSaveSettings();
  1230.         });
  1231.  
  1232.         backupBtn.addEventListener('click', async () => {
  1233.             try {
  1234.                 const rules = await loadBlockedSelectors();
  1235.                 if (rules.length === 0) {
  1236.                     showToast('ℹ️ 백업할 규칙이 없습니다.', 'info');
  1237.                     return;
  1238.                 }
  1239.                 const jsonString = JSON.stringify(rules, null, 2);
  1240.                 const blob = new Blob([jsonString], { type: 'application/json' });
  1241.                 const url = URL.createObjectURL(blob);
  1242.                 const a = document.createElement('a');
  1243.                 const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
  1244.                 a.href = url;
  1245.                 a.download = `mobile_element_selector_backup_${timestamp}.json`;
  1246.                 document.body.appendChild(a);
  1247.                 a.click();
  1248.                 document.body.removeChild(a);
  1249.                 URL.revokeObjectURL(url);
  1250.                 showToast(STRINGS.backupStarting, 'success');
  1251.             } catch (err) {
  1252.                 console.error(SCRIPT_ID, "Backup failed:", err);
  1253.                 showToast(STRINGS.backupError, 'error');
  1254.             }
  1255.         });
  1256.  
  1257.         restoreBtn.addEventListener('click', () => {
  1258.              restoreInput.click();
  1259.         });
  1260.  
  1261.         restoreInput.addEventListener('change', async (event) => {
  1262.             const file = event.target.files[0];
  1263.             if (!file) return;
  1264.  
  1265.             const reader = new FileReader();
  1266.             reader.onload = async (e) => {
  1267.                 try {
  1268.                     const content = e.target.result;
  1269.                     const parsedRules = JSON.parse(content);
  1270.  
  1271.                     if (!Array.isArray(parsedRules) || !parsedRules.every(item => typeof item === 'string')) {
  1272.                          throw new Error("Invalid file content - expected an array of strings.");
  1273.                     }
  1274.                     if (!parsedRules.every(item => item.includes('##') || parsedRules.length === 0)) {
  1275.                          console.warn(SCRIPT_ID, "Restored rules contain items without '##'. Proceeding anyway.");
  1276.                     }
  1277.  
  1278.                     await saveBlockedSelectors(parsedRules);
  1279.                     await applyBlocking(true);
  1280.                     showToast(STRINGS.restoreSuccess, 'success', 2500);
  1281.  
  1282.                     if (listPanel.classList.contains('visible')) {
  1283.                         await showList();
  1284.                     }
  1285.                     if (settingsPanel.classList.contains('visible')) {
  1286.                        tempDisableBtn.classList.toggle('active', settings.tempBlockingDisabled);
  1287.                        tempDisableBtn.classList.toggle('error', settings.tempBlockingDisabled);
  1288.                        tempDisableBtn.classList.toggle('secondary', !settings.tempBlockingDisabled);
  1289.                        tempDisableBtn.textContent = settings.tempBlockingDisabled ? STRINGS.on : STRINGS.off;
  1290.                     }
  1291.  
  1292.                 } catch (err) {
  1293.                     console.error(SCRIPT_ID, "Restore failed:", err);
  1294.                      if (err instanceof SyntaxError || err.message.includes("Invalid file content")) {
  1295.                          showToast(STRINGS.restoreErrorInvalidFile, 'error');
  1296.                      } else {
  1297.                          showToast(STRINGS.restoreErrorGeneral, 'error');
  1298.                      }
  1299.                 } finally {
  1300.                      restoreInput.value = '';
  1301.                 }
  1302.             };
  1303.             reader.onerror = (e) => {
  1304.                  console.error(SCRIPT_ID, "File reading error:", e);
  1305.                  showToast(STRINGS.restoreErrorGeneral, 'error');
  1306.                  restoreInput.value = '';
  1307.             };
  1308.             reader.readAsText(file);
  1309.         });
  1310.  
  1311.          document.addEventListener('touchstart', e => {
  1312.              if (!selecting) return;
  1313.  
  1314.              if (e.target.closest('.mobile-block-ui')) {
  1315.                  initialTouchedElement = null;
  1316.                  return;
  1317.              }
  1318.  
  1319.              const touch = e.touches[0];
  1320.              touchStartX = touch.clientX;
  1321.              touchStartY = touch.clientY;
  1322.              touchMoved = false;
  1323.  
  1324.              const potentialTarget = document.elementFromPoint(touchStartX, touchStartY);
  1325.              if (potentialTarget && !potentialTarget.closest('.mobile-block-ui') && potentialTarget.tagName !== 'BODY' && potentialTarget.tagName !== 'HTML') {
  1326.                  initialTouchedElement = potentialTarget;
  1327.              } else {
  1328.                  initialTouchedElement = null;
  1329.              }
  1330.          }, { passive: true });
  1331.  
  1332.          document.addEventListener('touchmove', e => {
  1333.              if (!selecting || touchMoved || !e.touches[0]) return;
  1334.  
  1335.               if (e.target.closest('.mobile-block-ui')) return;
  1336.  
  1337.  
  1338.              const touch = e.touches[0];
  1339.              const dx = touch.clientX - touchStartX;
  1340.              const dy = touch.clientY - touchStartY;
  1341.              if (Math.sqrt(dx * dx + dy * dy) > moveThreshold) {
  1342.                  touchMoved = true;
  1343.                  if (selectedEl) {
  1344.                      selectedEl.classList.remove('selected-element');
  1345.                  }
  1346.                  initialTouchedElement = null;
  1347.              }
  1348.          }, { passive: true });
  1349.  
  1350.          document.addEventListener('touchend', e => {
  1351.              if (!selecting) return;
  1352.  
  1353.              const touchEndTarget = e.target;
  1354.  
  1355.              if (touchEndTarget.closest('.mobile-block-ui .mb-btn') || touchEndTarget === toggleBtn || toggleBtn.contains(touchEndTarget)) {
  1356.                  touchMoved = false;
  1357.                  return;
  1358.              }
  1359.              if (touchEndTarget.closest('.mobile-block-ui')) {
  1360.                  touchMoved = false;
  1361.                  return;
  1362.              }
  1363.  
  1364.  
  1365.              if (!touchMoved) {
  1366.                  try {
  1367.                      e.preventDefault();
  1368.                      e.stopImmediatePropagation();
  1369.                  } catch (err) {
  1370.                       console.warn(SCRIPT_ID, "Could not preventDefault/stopImmediatePropagation on touchend:", err);
  1371.                  }
  1372.              } else {
  1373.                  touchMoved = false;
  1374.                  return;
  1375.              }
  1376.  
  1377.              const touch = e.changedTouches[0];
  1378.              if (!touch) return;
  1379.  
  1380.              let targetEl = initialTouchedElement;
  1381.              if (!targetEl || targetEl.closest('.mobile-block-ui')) {
  1382.                   targetEl = document.elementFromPoint(touch.clientX, touch.clientY);
  1383.              }
  1384.              while (targetEl && (targetEl.nodeType !== 1 || targetEl.closest('.mobile-block-ui'))) {
  1385.                  targetEl = targetEl.parentElement;
  1386.              }
  1387.  
  1388.              if (targetEl && targetEl.tagName !== 'BODY' && targetEl.tagName !== 'HTML') {
  1389.                  removeSelectionHighlight();
  1390.                  resetPreview();
  1391.                  selectedEl = targetEl;
  1392.                  initialTouchedElement = selectedEl;
  1393.                  selectedEl.classList.add('selected-element');
  1394.                  if (slider) slider.value = 0;
  1395.                  updateInfo();
  1396.              } else {
  1397.                  removeSelectionHighlight();
  1398.                  resetPreview();
  1399.                  updateInfo();
  1400.                  initialTouchedElement = null;
  1401.              }
  1402.          }, { capture: true, passive: false });
  1403.  
  1404.         slider.addEventListener('input', (e) => {
  1405.             if (!initialTouchedElement) {
  1406.                 if (selectedEl) {
  1407.                     initialTouchedElement = selectedEl;
  1408.                 } else {
  1409.                     return;
  1410.                 }
  1411.             }
  1412.             resetPreview();
  1413.             const level = parseInt(e.target.value, 10);
  1414.             let current = initialTouchedElement;
  1415.             for (let i = 0; i < level && current.parentElement; i++) {
  1416.                 if (['body', 'html'].includes(current.parentElement.tagName.toLowerCase()) || current.parentElement.closest('.mobile-block-ui')) {
  1417.                     break;
  1418.                 }
  1419.                 current = current.parentElement;
  1420.             }
  1421.             if (selectedEl !== current) {
  1422.                 if (selectedEl) {
  1423.                     selectedEl.classList.remove('selected-element');
  1424.                 }
  1425.                 selectedEl = current;
  1426.                 selectedEl.classList.add('selected-element');
  1427.                 updateInfo();
  1428.             }
  1429.         });
  1430.  
  1431.         function makePanelDraggable(el) {
  1432.             if (!el) return;
  1433.             let startX, startY, elementStartX, elementStartY;
  1434.             let dragging = false;
  1435.             let movedSinceStart = false;
  1436.             const dragThreshold = 5;
  1437.  
  1438.             const handleTouchStart = (e) => {
  1439.                 let interactiveTarget = e.target.closest('button, input[type="range"], input[type="file"], select, textarea, .blocklist-item, #blocklist-container, #blocker-info');
  1440.                 if (interactiveTarget && el.contains(interactiveTarget)) {
  1441.                     if (interactiveTarget.id === 'blocklist-container' || interactiveTarget.id === 'blocker-info') {
  1442.                         if (interactiveTarget.scrollHeight > interactiveTarget.clientHeight) {
  1443.                             dragging = false; return;
  1444.                         }
  1445.                     } else {
  1446.                         dragging = false; return;
  1447.                     }
  1448.                 }
  1449.  
  1450.                 if (e.touches.length > 1) { dragging = false; return; }
  1451.  
  1452.                 dragging = true;
  1453.                 movedSinceStart = false;
  1454.  
  1455.                 const touch = e.touches[0];
  1456.                 startX = touch.clientX;
  1457.                 startY = touch.clientY;
  1458.                 const rect = el.getBoundingClientRect();
  1459.                 elementStartX = rect.left;
  1460.                 elementStartY = rect.top;
  1461.  
  1462.                 el.style.transition = 'none';
  1463.                 el.style.cursor = 'grabbing';
  1464.             };
  1465.  
  1466.             const handleTouchMove = (e) => {
  1467.                 if (!dragging || e.touches.length > 1) return;
  1468.  
  1469.                 const touch = e.touches[0];
  1470.                 const dx = touch.clientX - startX;
  1471.                 const dy = touch.clientY - startY;
  1472.  
  1473.                 if (!movedSinceStart) {
  1474.                     if (Math.sqrt(dx * dx + dy * dy) > dragThreshold) {
  1475.                         movedSinceStart = true;
  1476.                         try { e.preventDefault(); } catch {}
  1477.                     } else { return; }
  1478.                 } else { try { e.preventDefault(); } catch {} }
  1479.  
  1480.                 let newX = elementStartX + dx;
  1481.                 let newY = elementStartY + dy;
  1482.                 const elWidth = el.offsetWidth;
  1483.                 const elHeight = el.offsetHeight;
  1484.                 const parentWidth = window.innerWidth;
  1485.                 const parentHeight = window.innerHeight;
  1486.                 newX = Math.max(0, Math.min(newX, parentWidth - elWidth));
  1487.                 newY = Math.max(0, Math.min(newY, parentHeight - elHeight));
  1488.  
  1489.                 el.style.left = `${newX}px`;
  1490.                 el.style.top = `${newY}px`;
  1491.                 el.style.right = 'auto';
  1492.                 el.style.bottom = 'auto';
  1493.                 el.style.transform = '';
  1494.             };
  1495.  
  1496.             const handleTouchEnd = async (e) => {
  1497.                 if (!dragging) return;
  1498.                 dragging = false;
  1499.                 el.style.transition = '';
  1500.                 el.style.cursor = 'grab';
  1501.  
  1502.                 if (movedSinceStart) {
  1503.                     el.dataset.wasDragged = 'true';
  1504.                 }
  1505.                 movedSinceStart = false;
  1506.             };
  1507.  
  1508.             el.addEventListener('touchstart', handleTouchStart, { passive: true });
  1509.             el.addEventListener('touchmove', handleTouchMove, { passive: false });
  1510.             el.addEventListener('touchend', handleTouchEnd, { passive: false });
  1511.             el.addEventListener('touchcancel', handleTouchEnd, { passive: false });
  1512.         }
  1513.  
  1514.         makePanelDraggable(panel);
  1515.         makePanelDraggable(settingsPanel);
  1516.         makePanelDraggable(listPanel);
  1517.  
  1518.         console.log(SCRIPT_ID, 'Initialization complete.');
  1519.     }
  1520.  
  1521.     async function run() {
  1522.         await loadSettings();
  1523.         if (document.readyState === 'loading') {
  1524.             document.addEventListener('DOMContentLoaded', createUIElements);
  1525.         } else {
  1526.             createUIElements();
  1527.         }
  1528.     }
  1529.  
  1530.     run().catch(error => {
  1531.         console.error(SCRIPT_ID, "Unhandled error during script initialization:", error);
  1532.     });
  1533.  
  1534. })();