// ==UserScript==
// @name         Via风格自定义规则拦截器
// @namespace    http://tampermonkey.net/
// @version      4.9.1
// @description  类似Via浏览器的自定义规则功能，预加载样式避免闪烁，规则管理界面两行显示，支持复制和删除确认，悬浮窗无边框黑线，支持域名级规则临时关闭，域名长文本截断+点击显示完整
// @author       Custom Rules Manager
// @match        *://*/*
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_addStyle
// @grant        GM_registerMenuCommand
// @grant        GM_xmlhttpRequest
// @grant        unsafeWindow
// @run-at       document-start
// @license      MIT
// @icon         data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMzIiIGN5PSIzMiIgcj0iMzIiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcl8xXzY1XzApIi8+CjxwYXRoIGQ9Ik0xNyAyNEMxNyAyMC4xMzQgMjAuMTM0IDE3IDI0IDE3SDQwQzQzLjg2NiAxNyA0NyAyMC4xMzQgNDcgMjRWNDBDNDcgNDMuODY2IDQzLjg2NiA0NyA0MCA0N0gyNEMyMC4xMzQgNDcgMTcgNDMuODY2IDE3IDQwVjI0WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTIzIDI3QzIzIDI0Ljc5MDkgMjQuNzkwOSAyMyAyNyAyM0gzN0MzOS4yMDkxIDIzIDQxIDI0Ljc5MDkgNDEgMjdWMzdDNDEgMzkuMjA5MSAzOS4yMDkxIDQxIDM3IDQxSDI3QzI0Ljc5MDkgNDEgMjMgMzkuMjA5MSAyMyAzN1YyN1oiIGZpbGw9InVybCgjcGFpbnQxX2xpbmVhcl8xXzY1XzApIi8+CjxwYXRoIGQ9Ik0yNSAyOUMyNSAyNy44OTU0IDI1Ljg5NTQgMjcgMjcgMjdIMzdDMzguMTA0NiAyNyAzOSAyNy44OTU0IDM5IDI5VjM1QzM5IDM2LjEwNDYgMzguMTA0NiAzNyAzNyAzN0gyN0MyNS44OTU0IDM3IDI1IDM2LjEwNDYgMjUgMzVWMjlaIiBmaWxsPSJ1cmwoI3BhaW50Ml9saW5lYXJfMV82NV8wKSIvPgo8cGF0aCBkPSJNMjcgMzJMMzIgMjdMMzcgMzJIMzJWMzdIMjdWMzJaIiBmaWxsPSJ3aGl0ZSIvPgo8ZGVmcz4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyXzFfNjVfMCIgeDE9IjAiIHkxPSIwIiB4Mj0iNjQiIHkyPSI2NCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjNjY3ZWVhIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzc2NGJhMiIvPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MV9saW5lYXJfMV82NV8wIiB4MT0iMjMiIHkxPSIyMyIgeDI9IjQxIiB5Mj0iNDEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzY2N2VlYSIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM3NjRiYTIiLz4KPC9saW5lYXJHcmFkaWVudD4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDJfbGluZWFyXzFfNjVfMCIgeDE9IjI1IiB5MT0iMjciIHgyPSIzOSIgeTI9IjM3IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiM2NjdlZGEiLz4KPHN0b9Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNzY0YmEyIi8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg==
// ==/UserScript==

(function() {
    'use strict';

    // ========== 数据结构与迁移（修复旧数据导入） ==========
    const NEW_STORAGE_KEY = 'custom_rules_v6';
    const OLD_STORAGE_KEY = 'custom_rules_v5';
    const STORAGE_VERSION = 2;

    function getDefaultData() {
        return {
            version: STORAGE_VERSION,
            rules: [],          // 规则字符串数组
            domainStatus: {}    // { domain: true/false }
        };
    }

    // 迁移旧版纯数组数据
    function migrateFromArray(oldRules) {
        if (!Array.isArray(oldRules)) return getDefaultData();
        const rules = [...oldRules];
        const domainStatus = {};
        rules.forEach(ruleStr => {
            const parsed = parseRule(ruleStr);
            if (parsed) {
                if (domainStatus[parsed.domain] === undefined) {
                    domainStatus[parsed.domain] = true;
                }
            }
        });
        return { version: STORAGE_VERSION, rules, domainStatus };
    }

    // 加载数据（自动迁移）
    function loadFullData() {
        // 先尝试读取新版存储
        let saved = GM_getValue(NEW_STORAGE_KEY, null);
        if (saved !== null) {
            try {
                const data = JSON.parse(saved);
                if (data.version === STORAGE_VERSION) {
                    // 确保 domainStatus 与 rules 同步
                    const validDomains = new Set();
                    data.rules.forEach(ruleStr => {
                        const p = parseRule(ruleStr);
                        if (p) validDomains.add(p.domain);
                    });
                    validDomains.forEach(domain => {
                        if (data.domainStatus[domain] === undefined) data.domainStatus[domain] = true;
                    });
                    Object.keys(data.domainStatus).forEach(domain => {
                        if (!validDomains.has(domain)) delete data.domainStatus[domain];
                    });
                    return data;
                } else {
                    // 版本不匹配，尝试迁移
                    return migrateFromArray(data.rules || []);
                }
            } catch (e) {
                // 解析失败，尝试旧版
            }
        }

        // 尝试读取旧版存储（v5）
        const oldSaved = GM_getValue(OLD_STORAGE_KEY, null);
        if (oldSaved !== null) {
            try {
                const oldData = JSON.parse(oldSaved);
                if (Array.isArray(oldData)) {
                    const migrated = migrateFromArray(oldData);
                    // 保存迁移后的数据
                    GM_setValue(NEW_STORAGE_KEY, JSON.stringify(migrated));
                    return migrated;
                } else if (oldData && typeof oldData === 'object') {
                    // 可能已经是对象但版本不对
                    const migrated = migrateFromArray(oldData.rules || []);
                    GM_setValue(NEW_STORAGE_KEY, JSON.stringify(migrated));
                    return migrated;
                }
            } catch (e) {}
        }

        // 尝试直接读取旧版字符串（兼容更早版本）
        const legacyRules = GM_getValue('custom_rules_v4', null);
        if (legacyRules && typeof legacyRules === 'string') {
            try {
                const parsed = JSON.parse(legacyRules);
                if (Array.isArray(parsed)) {
                    const migrated = migrateFromArray(parsed);
                    GM_setValue(NEW_STORAGE_KEY, JSON.stringify(migrated));
                    return migrated;
                }
            } catch (e) {}
        }

        return getDefaultData();
    }

    function saveFullData(data) {
        GM_setValue(NEW_STORAGE_KEY, JSON.stringify(data));
    }

    // 对外兼容接口：获取规则数组
    function getAllRules() {
        const full = loadFullData();
        return [...full.rules];
    }

    // 保存规则数组（保持域名状态同步）
    function saveRules(rulesArray) {
        const full = loadFullData();
        full.rules = [...rulesArray];
        // 同步域名状态
        const validDomains = new Set();
        rulesArray.forEach(ruleStr => {
            const parsed = parseRule(ruleStr);
            if (parsed) validDomains.add(parsed.domain);
        });
        validDomains.forEach(domain => {
            if (full.domainStatus[domain] === undefined) {
                full.domainStatus[domain] = true;
            }
        });
        Object.keys(full.domainStatus).forEach(domain => {
            if (!validDomains.has(domain)) delete full.domainStatus[domain];
        });
        saveFullData(full);
        applyRules();
        // 如果UI打开，仅刷新管理面板（轻量刷新）
        refreshManageTabIfOpen();
    }

    // 获取域名启用状态
    function isDomainEnabled(domain) {
        const full = loadFullData();
        return full.domainStatus[domain] !== false;
    }

    // 切换域名启用状态（优化版：不整体重绘，只更新UI和样式）
    function toggleDomainEnabled(domain, enabled) {
        const full = loadFullData();
        if (full.domainStatus[domain] === enabled) return;
        full.domainStatus[domain] = enabled;
        saveFullData(full);
        applyRules(); // 立即更新页面样式

        // 仅更新当前打开的UI中的对应域名组，避免整体重绘
        const host = document.getElementById('custom-rules-host');
        if (host && host.shadowRoot) {
            const activeTab = host.shadowRoot.querySelector('.tab-btn.active');
            if (activeTab && activeTab.getAttribute('data-tab') === 'manage') {
                const domainGroup = host.shadowRoot.querySelector(`.domain-group[data-domain="${CSS.escape(domain)}"]`);
                if (domainGroup) {
                    // 更新样式类
                    const isCurrent = domainMatches(domain, currentDomain);
                    const newStatusClass = (isCurrent && enabled) ? 'status-active' : 'status-inactive';
                    const statusIndicator = domainGroup.querySelector('.status-indicator');
                    if (statusIndicator) {
                        statusIndicator.className = `status-indicator ${newStatusClass}`;
                    }
                    if (enabled) {
                        domainGroup.classList.remove('disabled');
                    } else {
                        domainGroup.classList.add('disabled');
                    }
                    const toggleBtn = domainGroup.querySelector('.domain-toggle-btn');
                    if (toggleBtn) {
                        toggleBtn.textContent = enabled ? '✓ 启用' : '✗ 禁用';
                        if (enabled) {
                            toggleBtn.classList.remove('disabled');
                        } else {
                            toggleBtn.classList.add('disabled');
                        }
                    }
                    // 更新统计信息中的生效规则数（顶部）
                    updateStatsBar(host.shadowRoot);
                } else {
                    // 如果找不到对应分组，则整体刷新（兜底）
                    const container = host.shadowRoot.querySelector('.ui-container');
                    if (container) {
                        const content = container.querySelector('#tab-content');
                        const fullData = loadFullData();
                        const groups = buildDomainGroups(fullData);
                        content.innerHTML = renderManageTab(groups, fullData);
                        bindManageEvents(host.shadowRoot, container);
                    }
                }
            }
        }
    }

    // 更新顶部状态栏
    function updateStatsBar(shadowRoot) {
        const fullData = loadFullData();
        const groups = buildDomainGroups(fullData);
        const totalRules = fullData.rules.length;
        const totalDomains = Object.keys(groups).length;
        const activeRules = fullData.rules.filter(ruleStr => {
            const rule = parseRule(ruleStr);
            return rule && isDomainEnabled(rule.domain) && domainMatches(rule.domain, currentDomain);
        }).length;
        const statsDiv = shadowRoot.querySelector('.stats');
        if (statsDiv) {
            statsDiv.innerHTML = `
                共 ${totalRules} 条规则，${totalDomains} 个域名
                <br>
                当前域名: <strong>${currentDomain}</strong> (${activeRules}条生效)
            `;
        }
    }

    // 刷新管理面板（如果打开且处于管理标签）
    function refreshManageTabIfOpen() {
        const host = document.getElementById('custom-rules-host');
        if (host && host.shadowRoot) {
            const activeTab = host.shadowRoot.querySelector('.tab-btn.active');
            if (activeTab && activeTab.getAttribute('data-tab') === 'manage') {
                const container = host.shadowRoot.querySelector('.ui-container');
                if (container) {
                    const content = container.querySelector('#tab-content');
                    const fullData = loadFullData();
                    const groups = buildDomainGroups(fullData);
                    content.innerHTML = renderManageTab(groups, fullData);
                    bindManageEvents(host.shadowRoot, container);
                }
            }
        }
    }

    // 解析规则
    function parseRule(ruleString) {
        const rule = ruleString.trim();
        if (!rule || rule.startsWith('!') || rule.startsWith('#')) return null;
        const match = rule.match(/^([^#]+)##(.+)$/);
        if (match) {
            return { domain: match[1].trim(), selector: match[2].trim(), raw: rule };
        }
        return null;
    }

    function domainMatches(ruleDomain, currentDomain) {
        if (ruleDomain === '*') return true;
        if (ruleDomain.startsWith('*.')) {
            const baseDomain = ruleDomain.substring(2);
            return currentDomain === baseDomain || currentDomain.endsWith('.' + baseDomain);
        }
        return currentDomain === ruleDomain;
    }

    // 应用CSS规则（只对启用的域名生效）
    function applyRules() {
        const currentDomainName = window.location.hostname;
        const full = loadFullData();
        let css = '';
        full.rules.forEach(ruleStr => {
            const rule = parseRule(ruleStr);
            if (rule) {
                const domainEnabled = isDomainEnabled(rule.domain);
                if (domainEnabled && domainMatches(rule.domain, currentDomainName)) {
                    css += `${rule.selector} { display: none !important; }\n`;
                }
            }
        });
        if (css) {
            const oldStyle = document.getElementById('custom-rules-style');
            if (oldStyle && oldStyle.textContent === css) return;
            if (oldStyle) oldStyle.remove();
            const style = document.createElement('style');
            style.id = 'custom-rules-style';
            style.textContent = css;
            if (document.head) {
                document.head.appendChild(style);
            } else {
                const observer = new MutationObserver(() => {
                    if (document.head) {
                        observer.disconnect();
                        document.head.appendChild(style);
                    }
                });
                observer.observe(document.documentElement, { childList: true, subtree: true });
            }
        } else {
            const oldStyle = document.getElementById('custom-rules-style');
            if (oldStyle) oldStyle.remove();
        }
    }

    // ========== 通用工具 ==========
    function copyToClipboard(text) {
        return new Promise((resolve) => {
            const textArea = document.createElement('textarea');
            textArea.value = text;
            textArea.style.position = 'fixed';
            textArea.style.left = '-9999px';
            textArea.style.top = '-9999px';
            document.body.appendChild(textArea);
            try {
                textArea.select();
                textArea.setSelectionRange(0, textArea.value.length);
                const success = document.execCommand('copy');
                document.body.removeChild(textArea);
                if (success) {
                    resolve(true);
                } else if (navigator.clipboard && navigator.clipboard.writeText) {
                    navigator.clipboard.writeText(text).then(() => resolve(true)).catch(() => resolve(false));
                } else {
                    resolve(false);
                }
            } catch (err) {
                document.body.removeChild(textArea);
                resolve(false);
            }
        });
    }

    function downloadTextFile(text, filename = 'custom-rules.txt') {
        try {
            const blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = filename;
            link.style.display = 'none';
            document.body.appendChild(link);
            link.click();
            setTimeout(() => {
                document.body.removeChild(link);
                URL.revokeObjectURL(url);
            }, 100);
            return true;
        } catch (err) {
            console.error('下载失败:', err);
            return false;
        }
    }

    function showMessage(message, type = 'success') {
        const host = document.getElementById('custom-rules-host');
        if (host && host.shadowRoot) {
            const status = host.shadowRoot.querySelector('#status-message');
            if (status) {
                status.textContent = message;
                status.style.color = type === 'error' ? '#f44336' : '#4CAF50';
                setTimeout(() => {
                    if (status.textContent === message) status.textContent = '';
                }, 3000);
            }
        }
    }

    // ========== UI 构建 ==========
    let uiVisible = false;
    let currentDomain = window.location.hostname;

    function buildDomainGroups(fullData) {
        const groups = {};
        fullData.rules.forEach(ruleStr => {
            const rule = parseRule(ruleStr);
            if (rule) {
                if (!groups[rule.domain]) groups[rule.domain] = [];
                groups[rule.domain].push(rule);
            }
        });
        return groups;
    }

    function createRuleUI() {
        if (uiVisible) return;
        if (!document.body) {
            window.addEventListener('DOMContentLoaded', () => createRuleUI(), { once: true });
            return;
        }
        const oldHost = document.getElementById('custom-rules-host');
        if (oldHost) oldHost.remove();

        const host = document.createElement('div');
        host.id = 'custom-rules-host';
        const shadowRoot = host.attachShadow({ mode: 'open' });

        const style = document.createElement('style');
        style.textContent = `
            :host {
                all: initial;
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            }
            * {
                box-sizing: border-box;
                margin: 0;
                padding: 0;
            }
            .overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
                z-index: 2147483647;
                opacity: 0;
                transition: opacity 0.3s;
            }
            .ui-container {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) scale(0.9);
                width: 90%;
                max-width: 700px;
                height: 500px;
                max-height: 85vh;
                background: white;
                border-radius: 12px;
                box-shadow: 0 20px 60px rgba(0,0,0,0.3);
                border: none !important;
                outline: none !important;
                z-index: 2147483647;
                opacity: 0;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                overflow: hidden;
                display: flex;
                flex-direction: column;
            }
            .header {
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                color: white;
                padding: 16px 20px;
                position: relative;
                flex-shrink: 0;
            }
            .title {
                margin: 0;
                font-size: 16px;
                font-weight: 600;
            }
            .close-btn {
                position: absolute;
                top: 12px;
                right: 12px;
                background: rgba(255,255,255,0.2);
                border: none;
                color: white;
                width: 28px;
                height: 28px;
                border-radius: 50%;
                cursor: pointer;
                font-size: 18px;
                line-height: 1;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .stats {
                margin-top: 8px;
                font-size: 12px;
                opacity: 0.9;
                line-height: 1.4;
            }
            .tabs {
                display: flex;
                background: #f8f9fa;
                border-bottom: 1px solid #e0e0e0;
                flex-shrink: 0;
            }
            .tab-btn {
                flex: 1;
                padding: 12px;
                border: none;
                background: none;
                cursor: pointer;
                font-size: 13px;
                font-weight: 500;
                color: #666;
                transition: all 0.2s;
            }
            .tab-btn.active {
                color: #667eea;
                border-bottom: 2px solid #667eea;
            }
            .main-content {
                flex: 1;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                min-height: 0;
            }
            .content-area {
                flex: 1;
                overflow-y: auto;
                padding: 16px;
                position: relative;
            }
            .footer {
                padding: 12px 20px;
                border-top: 1px solid #f0f0f0;
                background: #fafafa;
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-shrink: 0;
            }
            .help-btn {
                background: none;
                border: none;
                color: #666;
                font-size: 12px;
                cursor: pointer;
                padding: 6px 12px;
                border-radius: 4px;
                transition: background-color 0.2s;
            }
            .help-btn:hover {
                background-color: #f0f0f0;
            }
            .status-message {
                font-size: 12px;
                color: #666;
                max-width: 200px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .domain-group {
                margin-bottom: 12px;
                border: 1px solid #e0e0e0;
                border-radius: 8px;
                overflow: hidden;
                background: white;
                transition: transform 0.2s, box-shadow 0.2s;
            }
            .domain-group.current-domain {
                border-color: #667eea;
                box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
            }
            .domain-group.current-domain .domain-header {
                background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
            }
            .domain-group.disabled {
                opacity: 0.7;
                background: #f9f9f9;
            }
            .domain-group.disabled .rules-container .rule-item {
                filter: grayscale(0.2);
                opacity: 0.7;
            }
            .domain-header {
                background: #f5f5f5;
                padding: 12px 16px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                cursor: pointer;
                user-select: none;
                position: relative;
                z-index: 1;
            }
            .domain-info {
                display: flex;
                align-items: center;
                gap: 8px;
                flex: 1;
                min-width: 0;
            }
            .status-indicator {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                display: inline-block;
                flex-shrink: 0;
            }
            .status-active {
                background-color: #4CAF50;
                box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
            }
            .status-inactive {
                background-color: #ccc;
            }
            .domain-content {
                flex: 1;
                display: flex;
                flex-direction: column;
                min-width: 0;
            }
            .domain-name-row {
                display: flex;
                align-items: center;
                gap: 8px;
                margin-bottom: 2px;
                min-width: 0;
            }
            .domain-name {
                font-weight: 500;
                color: #333;
                font-size: 14px;
                max-width: 150px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                cursor: pointer;
                transition: color 0.2s;
            }
            .domain-name:hover {
                color: #667eea;
                text-decoration: underline;
            }
            .current-domain-tag {
                background: #667eea;
                color: white;
                font-size: 10px;
                padding: 1px 6px;
                border-radius: 10px;
                font-weight: bold;
                margin-left: 4px;
                flex-shrink: 0;
            }
            .rule-count-row {
                display: flex;
                align-items: center;
            }
            .rule-count {
                font-size: 12px;
                color: #666;
                font-weight: normal;
                padding-left: 16px;
            }
            .domain-actions {
                display: flex;
                gap: 8px;
                align-items: center;
                flex-shrink: 0;
            }
            .domain-toggle-btn {
                background: #667eea;
                color: white;
                border: none;
                padding: 4px 10px;
                border-radius: 16px;
                cursor: pointer;
                font-size: 11px;
                font-weight: 500;
                transition: 0.2s;
                min-width: 48px;
            }
            .domain-toggle-btn.disabled {
                background: #9e9e9e;
            }
            .delete-domain {
                background: #ff4444;
                color: white;
                border: none;
                padding: 4px 10px;
                border-radius: 4px;
                cursor: pointer;
                font-size: 11px;
                font-weight: 500;
            }
            .rules-container {
                background: white;
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.3s ease;
                position: relative;
                z-index: 0;
            }
            .rules-container.expanded {
                max-height: none;
            }
            .rule-item {
                padding: 12px 16px;
                border-bottom: 1px solid #f5f5f5;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background: #fafafa;
                transition: background 0.2s;
            }
            .rule-item:nth-child(odd) {
                background: #fff;
            }
            .rule-item:hover {
                background: #e6f0ff !important;
            }
            .rule-info {
                flex: 1;
            }
            .rule-domain {
                font-size: 12px;
                color: #666;
                margin-bottom: 4px;
            }
            .rule-selector {
                font-family: 'Consolas', 'Monaco', monospace;
                font-size: 12px;
                color: #333;
                word-break: break-all;
                background: rgba(0, 0, 0, 0.02);
                padding: 4px 8px;
                border-radius: 4px;
                border-left: 2px solid #667eea;
            }
            .rule-actions {
                display: flex;
                gap: 8px;
                flex-shrink: 0;
            }
            .copy-rule {
                background: #2196F3;
                color: white;
                border: none;
                padding: 4px 8px;
                border-radius: 4px;
                cursor: pointer;
                font-size: 12px;
                font-weight: 500;
            }
            .delete-rule {
                background: #ff9800;
                color: white;
                border: none;
                padding: 4px 8px;
                border-radius: 4px;
                cursor: pointer;
                font-size: 12px;
                font-weight: 500;
            }
            .copy-rule:hover, .delete-rule:hover {
                opacity: 0.85;
            }
            .action-btn {
                flex: 1;
                padding: 12px;
                color: white;
                border: none;
                border-radius: 6px;
                font-size: 14px;
                font-weight: 500;
                cursor: pointer;
            }
            .batch-textarea {
                width: 100%;
                height: 200px;
                padding: 10px;
                border: 1px solid #ddd;
                border-radius: 6px;
                font-family: 'Consolas', 'Monaco', monospace;
                font-size: 12px;
                box-sizing: border-box;
                margin-bottom: 10px;
                resize: vertical;
            }
            .empty-state {
                text-align: center;
                padding: 30px 16px;
            }
            .empty-icon {
                font-size: 36px;
                color: #ddd;
                margin-bottom: 12px;
            }
            .empty-text {
                color: #999;
                margin-bottom: 6px;
                font-size: 13px;
            }
            .empty-hint {
                color: #aaa;
                font-size: 12px;
            }
            .chevron {
                display: inline-block;
                transition: transform 0.3s;
                font-size: 10px;
                color: #666;
                flex-shrink: 0;
                margin-right: 8px;
            }
            .chevron.down {
                transform: rotate(90deg);
            }
            .content-area::-webkit-scrollbar {
                width: 8px;
            }
            .content-area::-webkit-scrollbar-track {
                background: #f1f1f1;
                border-radius: 4px;
            }
            .content-area::-webkit-scrollbar-thumb {
                background: #c1c1c1;
                border-radius: 4px;
            }
            .content-area::-webkit-scrollbar-thumb:hover {
                background: #a8a8a8;
            }
            .sort-options {
                display: flex;
                align-items: center;
                gap: 12px;
                margin-bottom: 16px;
                padding-bottom: 12px;
                border-bottom: 1px solid #f0f0f0;
            }
            .sort-label {
                font-size: 13px;
                color: #666;
                font-weight: 500;
            }
            .sort-toggle {
                display: flex;
                align-items: center;
                gap: 6px;
                cursor: pointer;
                user-select: none;
                padding: 4px 8px;
                border-radius: 4px;
                transition: background-color 0.2s;
            }
            .sort-toggle:hover {
                background-color: #f0f0f0;
            }
            .toggle-switch {
                position: relative;
                display: inline-block;
                width: 44px;
                height: 24px;
            }
            .toggle-slider {
                position: absolute;
                cursor: pointer;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: #ccc;
                transition: .4s;
                border-radius: 34px;
            }
            .toggle-slider:before {
                position: absolute;
                content: "";
                height: 18px;
                width: 18px;
                left: 3px;
                bottom: 3px;
                background-color: white;
                transition: .4s;
                border-radius: 50%;
                box-shadow: 0 1px 3px rgba(0,0,0,0.2);
            }
            .toggle-switch input:checked + .toggle-slider {
                background-color: #667eea;
            }
            .toggle-switch input:checked + .toggle-slider:before {
                transform: translateX(20px);
            }
            .toggle-switch input {
                display: none;
            }
            .toggle-text {
                font-size: 13px;
                color: #333;
                font-weight: 500;
            }
            .tools-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 12px;
                margin-bottom: 20px;
            }
            .tool-card {
                background: white;
                border: 1px solid #e0e0e0;
                border-radius: 8px;
                padding: 16px;
                cursor: pointer;
                transition: all 0.2s;
                text-align: center;
            }
            .tool-card:hover {
                border-color: #667eea;
                box-shadow: 0 4px 12px rgba(0,0,0,0.1);
                transform: translateY(-2px);
            }
            .tool-card.export {
                border-color: #2196F3;
            }
            .tool-card.import {
                border-color: #4CAF50;
            }
            .tool-icon {
                font-size: 32px;
                margin-bottom: 8px;
            }
            .tool-title {
                font-size: 14px;
                font-weight: 600;
                margin-bottom: 4px;
                color: #333;
            }
            .tool-desc {
                font-size: 12px;
                color: #666;
                line-height: 1.4;
            }
            .export-options, .import-options, .import-mode-options {
                display: flex;
                flex-direction: column;
                gap: 12px;
                margin: 20px 0;
            }
            .export-option, .import-option, .import-mode-option {
                display: flex;
                align-items: center;
                padding: 12px;
                background: #f8f9fa;
                border: 1px solid #e0e0e0;
                border-radius: 8px;
                cursor: pointer;
                transition: all 0.2s;
            }
            .export-option:hover, .import-option:hover, .import-mode-option:hover {
                background: #e3f2fd;
                border-color: #2196F3;
            }
            .export-option-icon, .import-option-icon, .import-mode-option-icon {
                font-size: 24px;
                margin-right: 12px;
                width: 40px;
                text-align: center;
            }
            .export-option-content, .import-option-content, .import-mode-option-content {
                flex: 1;
            }
            .export-option-title, .import-option-title, .import-mode-option-title {
                font-size: 14px;
                font-weight: 600;
                color: #333;
                margin-bottom: 4px;
            }
            .export-option-desc, .import-option-desc, .import-mode-option-desc {
                font-size: 12px;
                color: #666;
            }
            .export-cancel-btn, .import-cancel-btn {
                width: 100%;
                padding: 12px;
                background: #f5f5f5;
                color: #666;
                border: none;
                border-radius: 8px;
                font-size: 14px;
                font-weight: 500;
                cursor: pointer;
                margin-top: 10px;
            }
            .export-cancel-btn:hover, .import-cancel-btn:hover {
                background: #e0e0e0;
            }
            .dialog-overlay {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.5);
                z-index: 2147483648;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 20px;
                opacity: 0;
                transition: opacity 0.3s;
                pointer-events: none;
            }
            .dialog-overlay.active {
                opacity: 1;
                pointer-events: all;
            }
            .dialog-container {
                background: white;
                border-radius: 12px;
                width: 100%;
                max-width: 500px;
                max-height: 90vh;
                overflow-y: auto;
                box-shadow: 0 20px 60px rgba(0,0,0,0.3);
                transform: translateY(20px);
                transition: transform 0.3s;
            }
            .dialog-overlay.active .dialog-container {
                transform: translateY(0);
            }
            .dialog-header {
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                color: white;
                padding: 16px 20px;
                position: relative;
                border-radius: 12px 12px 0 0;
            }
            .dialog-header.export {
                background: #2196F3;
            }
            .dialog-header.import {
                background: #4CAF50;
            }
            .dialog-title {
                margin: 0;
                font-size: 16px;
                font-weight: 600;
            }
            .dialog-close {
                position: absolute;
                top: 12px;
                right: 12px;
                background: rgba(255,255,255,0.2);
                border: none;
                color: white;
                width: 28px;
                height: 28px;
                border-radius: 50%;
                cursor: pointer;
                font-size: 18px;
                line-height: 1;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .dialog-body {
                padding: 20px;
            }
            .dialog-info {
                margin-bottom: 16px;
                font-size: 14px;
                color: #333;
                text-align: center;
            }
            .text-import-area {
                margin: 20px 0;
            }
            .text-import-textarea {
                width: 100%;
                height: 200px;
                padding: 12px;
                border: 1px solid #ddd;
                border-radius: 8px;
                font-family: 'Consolas', 'Monaco', monospace;
                font-size: 12px;
                line-height: 1.5;
                resize: vertical;
                box-sizing: border-box;
                margin-bottom: 16px;
            }
            .text-import-textarea:focus {
                outline: none;
                border-color: #4CAF50;
                box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
            }
            .dialog-buttons {
                display: flex;
                gap: 10px;
                margin-top: 20px;
            }
            .dialog-button {
                flex: 1;
                padding: 12px;
                border: none;
                border-radius: 8px;
                font-size: 14px;
                font-weight: 500;
                cursor: pointer;
                transition: background-color 0.2s;
            }
            .dialog-button.primary {
                background: #4CAF50;
                color: white;
            }
            .dialog-button.primary:hover {
                background: #388E3C;
            }
            .dialog-button.secondary {
                background: #2196F3;
                color: white;
            }
            .dialog-button.secondary:hover {
                background: #0b7dda;
            }
            .dialog-button.cancel {
                background: #f5f5f5;
                color: #666;
            }
            .dialog-button.cancel:hover {
                background: #e0e0e0;
            }
            .import-mode-option.selected {
                background: #e3f2fd;
                border-color: #2196F3;
            }
        `;
        shadowRoot.appendChild(style);

        const overlay = document.createElement('div');
        overlay.className = 'overlay';
        const ui = document.createElement('div');
        ui.className = 'ui-container';
        ui.id = 'custom-rules-ui';
        shadowRoot.appendChild(overlay);
        shadowRoot.appendChild(ui);
        document.body.appendChild(host);

        setTimeout(() => {
            overlay.style.opacity = '1';
            ui.style.opacity = '1';
            ui.style.transform = 'translate(-50%, -50%) scale(1)';
        }, 10);

        overlay.addEventListener('click', (e) => {
            if (e.target === overlay) closeUI();
        });

        let closeUI = () => {
            overlay.style.opacity = '0';
            ui.style.opacity = '0';
            ui.style.transform = 'translate(-50%, -50%) scale(0.9)';
            setTimeout(() => {
                if (host.parentNode) host.parentNode.removeChild(host);
                uiVisible = false;
            }, 300);
        };

        uiVisible = true;
        renderUI(shadowRoot, ui);
        const closeBtn = shadowRoot.querySelector('#close-ui');
        if (closeBtn) closeBtn.addEventListener('click', closeUI);
    }

    function renderUI(shadowRoot, container) {
        const fullData = loadFullData();
        const groups = buildDomainGroups(fullData);
        const totalRules = fullData.rules.length;
        const totalDomains = Object.keys(groups).length;
        const activeRules = fullData.rules.filter(ruleStr => {
            const rule = parseRule(ruleStr);
            return rule && isDomainEnabled(rule.domain) && domainMatches(rule.domain, currentDomain);
        }).length;

        container.innerHTML = `
            <div class="header">
                <h2 class="title">自定义规则管理器</h2>
                <button class="close-btn" id="close-ui">×</button>
                <div class="stats">
                    共 ${totalRules} 条规则，${totalDomains} 个域名
                    <br>
                    当前域名: <strong>${currentDomain}</strong> (${activeRules}条生效)
                </div>
            </div>
            <div class="tabs" id="ui-tabs">
                <button class="tab-btn active" data-tab="manage">规则管理</button>
                <button class="tab-btn" data-tab="add">添加规则</button>
                <button class="tab-btn" data-tab="tools">工具</button>
            </div>
            <div class="main-content">
                <div class="content-area" id="tab-content">
                    ${renderManageTab(groups, fullData)}
                </div>
            </div>
            <div class="footer">
                <button class="help-btn" id="help-btn">📖 帮助</button>
                <div class="status-message" id="status-message"></div>
            </div>
        `;
        bindEvents(shadowRoot, container);
    }

    function renderManageTab(groups, fullData) {
        const sortByCurrentDomain = GM_getValue('sort_by_current_domain', true);
        let domains = Object.keys(groups);
        if (sortByCurrentDomain) {
            domains.sort((a, b) => {
                const aIsCurrent = domainMatches(a, currentDomain);
                const bIsCurrent = domainMatches(b, currentDomain);
                if (aIsCurrent && !bIsCurrent) return -1;
                if (!aIsCurrent && bIsCurrent) return 1;
                return a.localeCompare(b);
            });
        } else {
            domains.sort((a, b) => a.localeCompare(b));
        }
        if (domains.length === 0) {
            return `<div class="empty-state"><div class="empty-icon">📝</div><div class="empty-text">暂无规则</div><div class="empty-hint">点击"添加规则"标签创建第一条规则，或导入现有规则</div></div>`;
        }
        let html = `<div class="sort-options"><span class="sort-label">排序选项:</span><label class="sort-toggle" for="sort-switch"><div class="toggle-switch"><input type="checkbox" id="sort-switch" ${sortByCurrentDomain ? 'checked' : ''}><span class="toggle-slider"></span></div><span class="toggle-text">当前域名规则置顶</span></label></div>`;
        domains.forEach(domain => {
            const rules = groups[domain];
            const isCurrentDomain = domainMatches(domain, currentDomain);
            const domainEnabled = isDomainEnabled(domain);
            const statusClass = (isCurrentDomain && domainEnabled) ? 'status-active' : 'status-inactive';
            const domainGroupClass = `domain-group ${isCurrentDomain ? 'current-domain' : ''} ${!domainEnabled ? 'disabled' : ''}`;
            const toggleBtnText = domainEnabled ? '✓ 启用' : '✗ 禁用';
            const toggleBtnClass = `domain-toggle-btn ${!domainEnabled ? 'disabled' : ''}`;
            html += `<div class="${domainGroupClass}" data-domain="${escapeHtml(domain)}">
                <div class="domain-header">
                    <span class="chevron">▶</span>
                    <span class="status-indicator ${statusClass}"></span>
                    <div class="domain-content">
                        <div class="domain-name-row">
                            <span class="domain-name" title="${escapeHtml(domain)}" data-full-domain="${escapeHtml(domain)}">${escapeHtml(domain)}</span>
                            ${isCurrentDomain ? '<span class="current-domain-tag">当前</span>' : ''}
                        </div>
                        <div class="rule-count-row">
                            <span class="rule-count">${rules.length} 条规则</span>
                        </div>
                    </div>
                    <div class="domain-actions">
                        <button class="${toggleBtnClass}" data-domain-toggle="${escapeHtml(domain)}">${toggleBtnText}</button>
                        <button class="delete-domain" data-domain="${escapeHtml(domain)}">删除全部</button>
                    </div>
                </div>
                <div class="rules-container">`;
            rules.forEach(rule => {
                html += `<div class="rule-item">
                    <div class="rule-info">
                        <div class="rule-domain">${escapeHtml(rule.domain)}##</div>
                        <div class="rule-selector">${escapeHtml(rule.selector)}</div>
                    </div>
                    <div class="rule-actions">
                        <button class="copy-rule" data-rule="${encodeURIComponent(rule.raw)}">复制</button>
                        <button class="delete-rule" data-rule="${encodeURIComponent(rule.raw)}">删除</button>
                    </div>
                </div>`;
            });
            html += `</div></div>`;
        });
        return html;
    }

    function renderAddTab() {
        return `<div style="max-width: 500px; margin: 0 auto;">
            <div class="batch-section">
                <textarea class="batch-textarea" id="batch-input" placeholder="每行一条规则，格式：域名##选择器

示例：
www.123pan.com##.ad-banner
youtube.com##.video-ads
*.baidu.com##.advertisement"></textarea>
                <div style="display: flex; gap: 10px;">
                    <button class="action-btn" id="batch-add-btn" style="background: #4CAF50; font-size: 13px; padding: 10px; flex: 2;">确认添加</button>
                    <button class="action-btn" id="batch-clear-btn" style="background: #9e9e9e; font-size: 13px; padding: 10px; flex: 1;">清空</button>
                </div>
            </div>
        </div>`;
    }

    function renderToolsTab() {
        const rules = getAllRules();
        return `<div style="max-width: 500px; margin: 0 auto;">
            <h3 style="margin: 0 0 16px 0; color: #333; font-size: 15px;">工具</h3>
            <div class="tools-grid">
                <div class="tool-card export" id="export-card">
                    <div class="tool-icon">📤</div>
                    <div class="tool-title">导出规则</div>
                    <div class="tool-desc">将所有规则导出为文本或文件</div>
                </div>
                <div class="tool-card import" id="import-card">
                    <div class="tool-icon">📥</div>
                    <div class="tool-title">导入规则</div>
                    <div class="tool-desc">通过文本或文件导入规则</div>
                </div>
            </div>
            <div style="background: #f8f9fa; padding: 16px; border-radius: 8px; margin-bottom: 16px;">
                <h4 style="margin: 0 0 8px 0; color: #333; font-size: 14px;">统计信息</h4>
                <div style="font-size: 13px; color: #666; line-height: 1.5;">
                    <div>总规则数: ${rules.length}</div>
                    <div>当前域名: ${currentDomain}</div>
                    <div>生效规则: ${rules.filter(ruleStr => { const r = parseRule(ruleStr); return r && isDomainEnabled(r.domain) && domainMatches(r.domain, currentDomain); }).length} 条</div>
                </div>
            </div>
            <div style="background: #fff3cd; padding: 12px; border-radius: 6px; border: 1px solid #ffeaa7; margin-top: 20px;">
                <h4 style="margin: 0 0 8px 0; color: #856404; font-size: 13px;">⚠️ 注意事项</h4>
                <div style="font-size: 12px; color: #856404; line-height: 1.5;">
                    <div>• 导入模式：合并导入（保留现有规则）</div>
                    <div>• 导出规则可以选择复制或下载</div>
                    <div>• 建议先导出备份再进行操作</div>
                    <div>• 域名开关：可临时关闭某个域名的所有规则</div>
                </div>
            </div>
        </div>`;
    }

    function escapeHtml(str) {
        return str.replace(/[&<>]/g, function(m) {
            if (m === '&') return '&amp;';
            if (m === '<') return '&lt;';
            if (m === '>') return '&gt;';
            return m;
        });
    }

    function bindEvents(shadowRoot, container) {
        container.querySelectorAll('.tab-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                container.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
                this.classList.add('active');
                const tab = this.getAttribute('data-tab');
                const content = container.querySelector('#tab-content');
                if (tab === 'manage') {
                    const full = loadFullData();
                    const groups = buildDomainGroups(full);
                    content.innerHTML = renderManageTab(groups, full);
                    bindManageEvents(shadowRoot, container);
                } else if (tab === 'add') {
                    content.innerHTML = renderAddTab();
                    bindAddEvents(shadowRoot, container);
                } else if (tab === 'tools') {
                    content.innerHTML = renderToolsTab();
                    bindToolsEvents(shadowRoot, container);
                }
            });
        });

        const sortSwitch = container.querySelector('#sort-switch');
        if (sortSwitch) {
            sortSwitch.addEventListener('change', function() {
                GM_setValue('sort_by_current_domain', this.checked);
                const manageTab = container.querySelector('.tab-btn[data-tab="manage"]');
                if (manageTab && manageTab.classList.contains('active')) manageTab.click();
            });
        }

        bindManageEvents(shadowRoot, container);
        const helpBtn = container.querySelector('#help-btn');
        if (helpBtn) helpBtn.addEventListener('click', showHelp);
    }

    function bindManageEvents(shadowRoot, container) {
        // 折叠/展开
        container.querySelectorAll('.domain-header').forEach(header => {
            header.addEventListener('click', function(e) {
                if (e.target.classList.contains('delete-domain') || e.target.classList.contains('domain-toggle-btn') || e.target.classList.contains('domain-name')) return;
                const group = this.closest('.domain-group');
                const rulesContainer = group.querySelector('.rules-container');
                const chevron = this.querySelector('.chevron');
                if (rulesContainer.classList.contains('expanded')) {
                    rulesContainer.style.maxHeight = '0px';
                    rulesContainer.classList.remove('expanded');
                    chevron.classList.remove('down');
                } else {
                    rulesContainer.style.maxHeight = rulesContainer.scrollHeight + 'px';
                    rulesContainer.classList.add('expanded');
                    chevron.classList.add('down');
                    const onEnd = () => {
                        if (rulesContainer.classList.contains('expanded')) rulesContainer.style.maxHeight = 'none';
                        rulesContainer.removeEventListener('transitionend', onEnd);
                    };
                    rulesContainer.addEventListener('transitionend', onEnd);
                }
            });
        });

        // 域名点击显示完整域名（弹窗）
        container.querySelectorAll('.domain-name').forEach(domainSpan => {
            domainSpan.addEventListener('click', (e) => {
                e.stopPropagation();
                const fullDomain = domainSpan.getAttribute('data-full-domain') || domainSpan.textContent;
                alert(`完整域名：${fullDomain}`);
            });
        });

        // 域名开关
        container.querySelectorAll('.domain-toggle-btn').forEach(btn => {
            btn.addEventListener('click', (e) => {
                e.stopPropagation();
                const domain = btn.getAttribute('data-domain-toggle');
                const currentState = isDomainEnabled(domain);
                toggleDomainEnabled(domain, !currentState);
            });
        });

        // 复制规则
        container.querySelectorAll('.copy-rule').forEach(btn => {
            btn.addEventListener('click', async (e) => {
                e.stopPropagation();
                const rule = decodeURIComponent(btn.getAttribute('data-rule'));
                const success = await copyToClipboard(rule);
                showMessage(success ? `已复制：${rule}` : '复制失败', success ? 'success' : 'error');
            });
        });

        // 删除单个规则
        container.querySelectorAll('.delete-rule').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                const rule = decodeURIComponent(this.getAttribute('data-rule'));
                if (!confirm(`确定要删除规则吗？\n\n${rule}`)) return;
                const newRules = getAllRules().filter(r => r !== rule);
                saveRules(newRules);
                showMessage('规则已删除');
                // 刷新管理界面
                const manageTab = container.querySelector('.tab-btn[data-tab="manage"]');
                if (manageTab && manageTab.classList.contains('active')) manageTab.click();
            });
        });

        // 删除整个域名组
        container.querySelectorAll('.delete-domain').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                const domain = this.getAttribute('data-domain');
                if (!confirm(`确定要删除域名“${domain}”下的所有规则吗？\n此操作不可撤销。`)) return;
                const newRules = getAllRules().filter(ruleStr => {
                    const p = parseRule(ruleStr);
                    return !p || p.domain !== domain;
                });
                saveRules(newRules);
                showMessage(`已删除域名 ${domain} 的所有规则`);
                const manageTab = container.querySelector('.tab-btn[data-tab="manage"]');
                if (manageTab && manageTab.classList.contains('active')) manageTab.click();
            });
        });
    }

    function bindAddEvents(shadowRoot, container) {
        const batchAddBtn = container.querySelector('#batch-add-btn');
        if (batchAddBtn) {
            batchAddBtn.addEventListener('click', function() {
                const batchInput = container.querySelector('#batch-input');
                const inputValue = batchInput ? batchInput.value : '';
                const newRules = inputValue.split('\n')
                    .map(line => line.trim())
                    .filter(line => line && !line.startsWith('#') && !line.startsWith('!') && line.includes('##'));
                if (newRules.length === 0) {
                    showMessage('没有找到有效的规则', 'error');
                    return;
                }
                const existingRules = getAllRules();
                const uniqueNewRules = newRules.filter(rule => !existingRules.includes(rule));
                if (uniqueNewRules.length === 0) {
                    showMessage('所有规则都已存在', 'error');
                    return;
                }
                saveRules([...existingRules, ...uniqueNewRules]);
                if (batchInput) batchInput.value = '';
                showMessage(`成功添加 ${uniqueNewRules.length} 条新规则`);
                const manageTab = container.querySelector('.tab-btn[data-tab="manage"]');
                if (manageTab) manageTab.click();
            });
        }
        const batchClearBtn = container.querySelector('#batch-clear-btn');
        if (batchClearBtn) {
            batchClearBtn.addEventListener('click', function() {
                const batchInput = container.querySelector('#batch-input');
                if (batchInput) batchInput.value = '';
                showMessage('已清空输入框');
            });
        }
    }

    function bindToolsEvents(shadowRoot, container) {
        const exportCard = container.querySelector('#export-card');
        if (exportCard) exportCard.addEventListener('click', () => showExportDialog(shadowRoot));
        const importCard = container.querySelector('#import-card');
        if (importCard) importCard.addEventListener('click', () => showImportDialog(shadowRoot));
    }

    // 导出对话框
    function showExportDialog(shadowRoot) {
        const dialog = document.createElement('div');
        dialog.className = 'dialog-overlay';
        dialog.innerHTML = `
            <div class="dialog-container">
                <div class="dialog-header export">
                    <h3 class="dialog-title">导出规则</h3>
                    <button class="dialog-close" id="export-dialog-close">×</button>
                </div>
                <div class="dialog-body">
                    <div class="dialog-info">共有 ${getAllRules().length} 条规则</div>
                    <div class="export-options">
                        <div class="export-option" id="export-copy-option">
                            <div class="export-option-icon">📋</div>
                            <div class="export-option-content">
                                <div class="export-option-title">复制到剪贴板</div>
                                <div class="export-option-desc">将规则复制到剪贴板，然后可以粘贴到其他地方</div>
                            </div>
                        </div>
                        <div class="export-option" id="export-download-option">
                            <div class="export-option-icon">💾</div>
                            <div class="export-option-content">
                                <div class="export-option-title">下载为文件</div>
                                <div class="export-option-desc">将规则下载为文本文件，方便备份和分享</div>
                            </div>
                        </div>
                    </div>
                    <button class="export-cancel-btn" id="export-cancel-btn">取消导出</button>
                </div>
            </div>
        `;
        shadowRoot.appendChild(dialog);
        setTimeout(() => dialog.classList.add('active'), 10);
        const closeDialog = () => {
            dialog.classList.remove('active');
            setTimeout(() => dialog.remove(), 300);
        };
        dialog.querySelector('#export-dialog-close')?.addEventListener('click', closeDialog);
        dialog.querySelector('#export-cancel-btn')?.addEventListener('click', closeDialog);
        dialog.querySelector('#export-copy-option')?.addEventListener('click', async () => {
            const rules = getAllRules();
            if (rules.length === 0) {
                showMessage('没有规则可以导出', 'error');
                closeDialog();
                return;
            }
            const success = await copyToClipboard(rules.join('\n'));
            showMessage(success ? `成功复制 ${rules.length} 条规则` : '复制失败', success ? 'success' : 'error');
            closeDialog();
        });
        dialog.querySelector('#export-download-option')?.addEventListener('click', () => {
            const rules = getAllRules();
            if (rules.length === 0) {
                showMessage('没有规则可以导出', 'error');
                closeDialog();
                return;
            }
            const filename = `custom-rules-${new Date().toISOString().slice(0,10)}.txt`;
            downloadTextFile(rules.join('\n'), filename);
            showMessage(`已下载 ${rules.length} 条规则`);
            closeDialog();
        });
        dialog.addEventListener('click', (e) => { if (e.target === dialog) closeDialog(); });
    }

    function showImportDialog(shadowRoot) {
        const dialog = document.createElement('div');
        dialog.className = 'dialog-overlay';
        dialog.innerHTML = `
            <div class="dialog-container">
                <div class="dialog-header import">
                    <h3 class="dialog-title">导入规则</h3>
                    <button class="dialog-close" id="import-dialog-close">×</button>
                </div>
                <div class="dialog-body">
                    <div class="dialog-info">选择导入方式：</div>
                    <div class="import-options">
                        <div class="import-option" id="import-file-option">
                            <div class="import-option-icon">📁</div>
                            <div class="import-option-content">
                                <div class="import-option-title">从文件导入</div>
                                <div class="import-option-desc">选择规则文件进行导入</div>
                            </div>
                        </div>
                        <div class="import-option" id="import-text-option">
                            <div class="import-option-icon">📝</div>
                            <div class="import-option-content">
                                <div class="import-option-title">从文本导入</div>
                                <div class="import-option-desc">粘贴规则文本进行导入</div>
                            </div>
                        </div>
                    </div>
                    <button class="import-cancel-btn" id="import-cancel-btn">取消导入</button>
                </div>
            </div>
        `;
        shadowRoot.appendChild(dialog);
        setTimeout(() => dialog.classList.add('active'), 10);
        const closeDialog = () => {
            dialog.classList.remove('active');
            setTimeout(() => dialog.remove(), 300);
        };
        dialog.querySelector('#import-dialog-close')?.addEventListener('click', closeDialog);
        dialog.querySelector('#import-cancel-btn')?.addEventListener('click', closeDialog);
        dialog.querySelector('#import-file-option')?.addEventListener('click', () => {
            closeDialog();
            const fileInput = document.createElement('input');
            fileInput.type = 'file';
            fileInput.accept = '.txt,.text';
            fileInput.style.display = 'none';
            fileInput.onchange = (e) => {
                const file = e.target.files[0];
                if (!file) return;
                const reader = new FileReader();
                reader.onload = (ev) => showImportModeDialog(shadowRoot, ev.target.result, 'file');
                reader.readAsText(file);
                document.body.removeChild(fileInput);
            };
            document.body.appendChild(fileInput);
            fileInput.click();
        });
        dialog.querySelector('#import-text-option')?.addEventListener('click', () => {
            closeDialog();
            const textDialog = document.createElement('div');
            textDialog.className = 'dialog-overlay';
            textDialog.innerHTML = `
                <div class="dialog-container" style="max-width: 600px;">
                    <div class="dialog-header import">
                        <h3 class="dialog-title">从文本导入规则</h3>
                        <button class="dialog-close" id="text-import-dialog-close">×</button>
                    </div>
                    <div class="dialog-body">
                        <div class="dialog-info">在下方文本框中粘贴规则，每行一条规则</div>
                        <div class="text-import-area">
                            <textarea class="text-import-textarea" id="text-import-textarea" placeholder="每行一条规则，格式：域名##选择器

示例：
www.example.com##.ad-banner
*.google.com###ads
youtube.com##.video-ads"></textarea>
                        </div>
                        <div class="dialog-buttons">
                            <button class="dialog-button primary" id="text-import-next-btn">下一步</button>
                            <button class="dialog-button cancel" id="text-import-cancel-btn">取消</button>
                        </div>
                    </div>
                </div>
            `;
            shadowRoot.appendChild(textDialog);
            setTimeout(() => textDialog.classList.add('active'), 10);
            const closeTextDialog = () => {
                textDialog.classList.remove('active');
                setTimeout(() => textDialog.remove(), 300);
            };
            textDialog.querySelector('#text-import-dialog-close')?.addEventListener('click', closeTextDialog);
            textDialog.querySelector('#text-import-cancel-btn')?.addEventListener('click', closeTextDialog);
            textDialog.querySelector('#text-import-next-btn')?.addEventListener('click', () => {
                const content = textDialog.querySelector('#text-import-textarea').value;
                if (!content.trim()) {
                    showMessage('请输入规则文本', 'error');
                    return;
                }
                closeTextDialog();
                showImportModeDialog(shadowRoot, content, 'text');
            });
            textDialog.addEventListener('click', (e) => { if (e.target === textDialog) closeTextDialog(); });
        });
        dialog.addEventListener('click', (e) => { if (e.target === dialog) closeDialog(); });
    }

    function showImportModeDialog(shadowRoot, content, sourceType) {
        const dialog = document.createElement('div');
        dialog.className = 'dialog-overlay';
        dialog.innerHTML = `
            <div class="dialog-container">
                <div class="dialog-header import">
                    <h3 class="dialog-title">选择导入模式</h3>
                    <button class="dialog-close" id="import-mode-dialog-close">×</button>
                </div>
                <div class="dialog-body">
                    <div class="dialog-info">从${sourceType === 'file' ? '文件' : '文本'}中检测到规则</div>
                    <div class="import-mode-options">
                        <div class="import-mode-option" id="merge-import-option">
                            <div class="import-mode-option-icon">➕</div>
                            <div class="import-mode-option-content">
                                <div class="import-mode-option-title">合并导入</div>
                                <div class="import-mode-option-desc">保留现有规则，只添加新规则</div>
                            </div>
                        </div>
                        <div class="import-mode-option" id="replace-import-option">
                            <div class="import-mode-option-icon">🔄</div>
                            <div class="import-mode-option-content">
                                <div class="import-mode-option-title">替换导入</div>
                                <div class="import-mode-option-desc">清空现有规则，导入新规则</div>
                            </div>
                        </div>
                    </div>
                    <div class="dialog-buttons">
                        <button class="dialog-button primary" id="import-mode-confirm-btn">确认导入</button>
                        <button class="dialog-button cancel" id="import-mode-cancel-btn">取消</button>
                    </div>
                </div>
            </div>
        `;
        shadowRoot.appendChild(dialog);
        setTimeout(() => dialog.classList.add('active'), 10);
        let selectedMode = 'merge';
        const mergeOpt = dialog.querySelector('#merge-import-option');
        const replaceOpt = dialog.querySelector('#replace-import-option');
        mergeOpt.classList.add('selected');
        mergeOpt.addEventListener('click', () => {
            mergeOpt.classList.add('selected');
            replaceOpt.classList.remove('selected');
            selectedMode = 'merge';
        });
        replaceOpt.addEventListener('click', () => {
            replaceOpt.classList.add('selected');
            mergeOpt.classList.remove('selected');
            selectedMode = 'replace';
        });
        const closeDialog = () => {
            dialog.classList.remove('active');
            setTimeout(() => dialog.remove(), 300);
        };
        dialog.querySelector('#import-mode-dialog-close')?.addEventListener('click', closeDialog);
        dialog.querySelector('#import-mode-cancel-btn')?.addEventListener('click', closeDialog);
        dialog.querySelector('#import-mode-confirm-btn')?.addEventListener('click', () => {
            const newRules = content.split('\n')
                .map(line => line.trim())
                .filter(line => line && !line.startsWith('#') && !line.startsWith('!') && line.includes('##'));
            if (newRules.length === 0) {
                showMessage('没有找到有效的规则', 'error');
                closeDialog();
                return;
            }
            let finalRules;
            if (selectedMode === 'merge') {
                const existing = getAllRules();
                const unique = newRules.filter(r => !existing.includes(r));
                finalRules = [...existing, ...unique];
                showMessage(`合并导入 ${unique.length} 条新规则，共 ${finalRules.length} 条`);
            } else {
                finalRules = newRules;
                showMessage(`替换导入 ${finalRules.length} 条规则`);
            }
            saveRules(finalRules);
            closeDialog();
            const host = document.getElementById('custom-rules-host');
            if (host && host.shadowRoot) {
                const manageTab = host.shadowRoot.querySelector('.tab-btn[data-tab="manage"]');
                if (manageTab) manageTab.click();
            }
        });
        dialog.addEventListener('click', (e) => { if (e.target === dialog) closeDialog(); });
    }

    function showHelp() {
        alert(`自定义规则管理器使用说明：

规则格式：
域名##CSS选择器

示例：
1. 隐藏特定元素：
   www.123pan.com##div.ant-modal-root:has(.tuia-modal-wrap)

2. 使用通配符：
   *.baidu.com##.advertisement
   匹配所有 baidu.com 的子域名

3. 常用选择器：
   .class-name          # 按类名
   #element-id          # 按ID
   div[class*='ad']     # 按属性包含
   div:has(.ad)         # 按子元素

4. 管理规则：
   - 按域名分组显示，每条规则显示为两行（域名行 + 选择器行）
   - 点击域名分组头可展开/折叠规则列表
   - 绿色圆点表示规则在当前页面生效（且域名开关开启）
   - 当前域名分组高亮显示，并带有"当前"标签
   - 支持复制单条规则、删除单条规则（删除前确认）、删除整个域名组（删除前确认）
   - 🆕 域名开关：每个域名右侧有“启用/禁用”按钮，可临时关闭该域名下所有规则
   - 禁用后规则不会生效，分组会变灰显示
   - 🆕 域名过长会自动截断显示省略号，鼠标悬停显示完整域名，点击可弹出完整域名
   - 排序选项可让当前域名规则置顶
   - 规则项交替背景色，鼠标悬停显示浅蓝色反馈

5. 批量添加：
   - 每行一条规则，格式：域名##选择器

6. 导入导出（在"工具"标签页）：
   - 导出规则：复制到剪贴板或下载为文件
   - 导入规则：从文件或文本粘贴，支持合并/替换模式

规则立即生效，无需刷新页面。`);
    }

    // ========== 初始化 ==========
    applyRules();

    function registerMenu() {
        GM_registerMenuCommand('📋 自定义规则', () => {
            createRuleUI();
        });
    }

    let lastUrl = location.href;
    const observer = new MutationObserver(() => {
        if (location.href !== lastUrl) {
            lastUrl = location.href;
            currentDomain = window.location.hostname;
            applyRules();
            if (uiVisible) {
                const host = document.getElementById('custom-rules-host');
                if (host && host.shadowRoot) {
                    const ui = host.shadowRoot.querySelector('.ui-container');
                    if (ui) renderUI(host.shadowRoot, ui);
                }
            }
        }
    });
    observer.observe(document, { subtree: true, childList: true });

    unsafeWindow.customRulesManager = {
        getAllRules,
        saveRules,
        applyRules,
        showUI: createRuleUI,
        isDomainEnabled,
        toggleDomainEnabled
    };

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', registerMenu);
    } else {
        registerMenu();
    }

    console.log('自定义规则管理器已启动（数据迁移修复｜开关响应优化｜域名长文本截断+点击显示完整）');
})();