Upload 3 files

管理界面/app.js

@@ -0,0 +1,741 @@
+/* ===================================================================
+ * RanKing 插件管理控制台 · 应用脚本（原生 JS）
+ * 视图切换：登录 → 列表 → 创建/编辑/Key 展示/确认对话框
+ * =================================================================== */
+
+(function () {
+    'use strict';
+
+    // -------------------- 配置 --------------------
+    // 默认调用同源后端；如需指定接口域名可在 window.RANKING_API_BASE 设置
+    const API_BASE = (typeof window !== 'undefined' && window.RANKING_API_BASE) || '';
+    const TOKEN_KEY = 'ranking_admin_token';
+    const USER_KEY = 'ranking_admin_user';
+    const ALL_PERMS = ['verify', 'balance', 'deduct', 'refund'];
+
+    // -------------------- 状态 --------------------
+    const state = {
+        token: sessionStorage.getItem(TOKEN_KEY) || '',
+        user: safeParse(sessionStorage.getItem(USER_KEY)),
+        plugins: [],
+        filtered: [],
+        searchKeyword: '',
+        confirmHandler: null,
+    };
+
+    // -------------------- 工具 --------------------
+    function $(selector, root) { return (root || document).querySelector(selector); }
+    function $$(selector, root) { return Array.from((root || document).querySelectorAll(selector)); }
+
+    function safeParse(str) {
+        if (!str) return null;
+        try { return JSON.parse(str); } catch (e) { return null; }
+    }
+
+    function escapeHtml(value) {
+        if (value == null) return '';
+        return String(value)
+            .replace(/&/g, '&')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#39;');
+    }
+
+    function formatDate(value) {
+        if (!value) return '—';
+        const date = (typeof value === 'number') ? new Date(value * (value < 1e12 ? 1000 : 1)) : new Date(value);
+        if (isNaN(date.getTime())) return String(value);
+        const pad = (n) => String(n).padStart(2, '0');
+        return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
+    }
+
+    function formatNumber(value, fallback) {
+        if (value === null || value === undefined || value === '') return fallback || '—';
+        const num = Number(value);
+        if (isNaN(num)) return String(value);
+        return num.toLocaleString('zh-CN');
+    }
+
+    function maskKey(key) {
+        if (!key) return '—';
+        const str = String(key);
+        if (str.includes('*')) return str; // 后端已脱敏
+        if (str.length <= 12) return str.slice(0, 4) + '***';
+        return str.slice(0, 12) + '***';
+    }
+
+    function setBusy(btn, busy) {
+        if (!btn) return;
+        if (busy) {
+            btn.setAttribute('aria-busy', 'true');
+            btn.disabled = true;
+        } else {
+            btn.removeAttribute('aria-busy');
+            btn.disabled = false;
+        }
+    }
+
+    function showError(node, msg) {
+        if (!node) return;
+        if (!msg) { node.hidden = true; node.textContent = ''; return; }
+        node.hidden = false;
+        node.textContent = msg;
+    }
+
+    // -------------------- API 客户端 --------------------
+    async function apiRequest(method, path, body) {
+        const headers = { 'Accept': 'application/json' };
+        if (state.token) headers['Authorization'] = 'Bearer ' + state.token;
+        const init = { method, headers };
+        if (body !== undefined && body !== null) {
+            headers['Content-Type'] = 'application/json';
+            init.body = JSON.stringify(body);
+        }
+        let response;
+        try {
+            response = await fetch(API_BASE + path, init);
+        } catch (err) {
+            throw new ApiError('网络异常，请检查连接后重试', 0, err);
+        }
+
+        // 401 处理：自动跳回登录
+        if (response.status === 401) {
+            handleUnauthorized();
+            throw new ApiError('登录已失效，请重新登录', 401);
+        }
+
+        let payload = null;
+        const text = await response.text();
+        if (text) {
+            try { payload = JSON.parse(text); } catch (e) { payload = { message: text }; }
+        }
+
+        if (!response.ok) {
+            const msg = (payload && (payload.message || payload.error || payload.detail)) || `请求失败（${response.status}）`;
+            throw new ApiError(msg, response.status, payload);
+        }
+        return payload;
+    }
+
+    class ApiError extends Error {
+        constructor(message, status, raw) {
+            super(message);
+            this.status = status || 0;
+            this.raw = raw;
+        }
+    }
+
+    // -------------------- 视图切换 --------------------
+    function showView(name) {
+        ['view-login', 'view-main', 'view-forbidden'].forEach((id) => {
+            const el = document.getElementById(id);
+            if (el) el.hidden = (id !== name);
+        });
+        window.scrollTo({ top: 0 });
+    }
+
+    function handleUnauthorized() {
+        clearSession();
+        showView('view-login');
+        toast('登录状态已过期，请重新登录', 'warning');
+    }
+
+    function clearSession() {
+        state.token = '';
+        state.user = null;
+        sessionStorage.removeItem(TOKEN_KEY);
+        sessionStorage.removeItem(USER_KEY);
+    }
+
+    function persistSession(token, user) {
+        state.token = token || '';
+        state.user = user || null;
+        if (token) sessionStorage.setItem(TOKEN_KEY, token);
+        if (user) sessionStorage.setItem(USER_KEY, JSON.stringify(user));
+    }
+
+    // -------------------- 登录 --------------------
+    function bindLogin() {
+        const form = $('#login-form');
+        const errBox = $('#login-error');
+        if (!form) return;
+
+        form.addEventListener('submit', async (event) => {
+            event.preventDefault();
+            showError(errBox, '');
+
+            const account = $('#login-account').value.trim();
+            const password = $('#login-password').value;
+            if (!account || !password) {
+                showError(errBox, '请输入账号和密码');
+                return;
+            }
+
+            const submit = $('#login-submit');
+            setBusy(submit, true);
+            try {
+                const data = await apiRequest('POST', '/api/users/login', { account, password });
+                if (!data || !data.token) {
+                    throw new ApiError('登录响应缺少 token', 0, data);
+                }
+                persistSession(data.token, data.user || null);
+
+                // 校验是否为管理员：尝试访问插件列表（403 → 非管理员）
+                try {
+                    await loadPlugins();
+                    syncUserChip();
+                    showView('view-main');
+                    toast('登录成功', 'success');
+                } catch (err) {
+                    if (err instanceof ApiError && (err.status === 403 || err.status === 401)) {
+                        clearSession();
+                        showView('view-forbidden');
+                    } else {
+                        // 其它错误：保留登录态但提示
+                        syncUserChip();
+                        showView('view-main');
+                        toast(err.message || '加载插件列表失败', 'error');
+                    }
+                }
+            } catch (err) {
+                showError(errBox, err.message || '登录失败');
+            } finally {
+                setBusy(submit, false);
+            }
+        });
+    }
+
+    function syncUserChip() {
+        const user = state.user || {};
+        const name = user.nickname || user.username || user.account || user.name || 'admin';
+        const nameEl = $('#user-name');
+        const avatarEl = $('#user-avatar');
+        if (nameEl) nameEl.textContent = name;
+        if (avatarEl) avatarEl.textContent = (name[0] || 'A').toUpperCase();
+    }
+
+    // -------------------- 插件列表 --------------------
+    function setListState(stateName, message) {
+        $('#list-loading').hidden = stateName !== 'loading';
+        $('#list-empty').hidden = stateName !== 'empty';
+        $('#list-error').hidden = stateName !== 'error';
+        $('#plugin-grid').hidden = stateName !== 'data';
+        if (stateName === 'error' && message) {
+            $('#list-error-msg').textContent = message;
+        }
+    }
+
+    async function loadPlugins() {
+        setListState('loading');
+        const data = await apiRequest('GET', '/api/admin/plugins');
+        const list = Array.isArray(data) ? data
+            : Array.isArray(data && data.plugins) ? data.plugins
+            : Array.isArray(data && data.items) ? data.items
+            : Array.isArray(data && data.data) ? data.data
+            : [];
+        state.plugins = list;
+        applyFilter();
+    }
+
+    function applyFilter() {
+        const kw = state.searchKeyword.trim().toLowerCase();
+        state.filtered = !kw ? state.plugins.slice() : state.plugins.filter((p) => {
+            const id = String(p.plugin_id || p.id || '').toLowerCase();
+            const name = String(p.name || '').toLowerCase();
+            return id.includes(kw) || name.includes(kw);
+        });
+        renderList();
+        renderStats();
+    }
+
+    function renderStats() {
+        const total = state.plugins.length;
+        const enabled = state.plugins.filter((p) => !!p.enabled).length;
+        $('#stat-total').textContent = total;
+        $('#stat-enabled').textContent = enabled;
+        $('#stat-disabled').textContent = total - enabled;
+    }
+
+    function renderList() {
+        const grid = $('#plugin-grid');
+        const tpl = $('#tpl-plugin-card');
+        if (!grid || !tpl) return;
+
+        if (!state.plugins.length) {
+            setListState('empty');
+            return;
+        }
+        setListState('data');
+        grid.innerHTML = '';
+
+        if (!state.filtered.length) {
+            grid.innerHTML = '<div class="state-block" style="grid-column: 1/-1;">' +
+                '<div class="empty-mark">∅</div><h3>未匹配到插件</h3><p>尝试调整搜索关键字。</p></div>';
+            return;
+        }
+
+        const frag = document.createDocumentFragment();
+        state.filtered.forEach((plugin) => {
+            const node = tpl.content.firstElementChild.cloneNode(true);
+            const id = plugin.plugin_id || plugin.id || '';
+            const name = plugin.name || id;
+
+            $('.js-name', node).textContent = name;
+            $('.js-id', node).textContent = id;
+            $('.js-desc', node).textContent = plugin.description || '';
+            $('.js-key', node).textContent = plugin.plugin_key || plugin.key || maskKey(id);
+
+            const badge = $('.js-status', node);
+            if (plugin.enabled) {
+                badge.textContent = '启用中';
+                badge.classList.add('is-on');
+            } else {
+                badge.textContent = '已禁用';
+                badge.classList.add('is-off');
+            }
+
+            $('.js-rate', node).textContent = formatNumber(plugin.rate_limit, '—');
+            $('.js-tx', node).textContent = formatNumber(plugin.max_deduct_per_tx, '—');
+            $('.js-day', node).textContent = formatNumber(plugin.max_deduct_per_day, '—');
+            $('.js-created', node).textContent = formatDate(plugin.created_at || plugin.create_time || plugin.createdAt);
+
+            const permsEl = $('.js-perms', node);
+            const perms = Array.isArray(plugin.permissions) ? plugin.permissions : [];
+            if (perms.length) {
+                permsEl.innerHTML = perms.map((p) => `<span class="perm-chip">${escapeHtml(p)}</span>`).join('');
+            } else {
+                permsEl.textContent = '—';
+            }
+
+            const toggleBtn = $('.js-toggle', node);
+            toggleBtn.textContent = plugin.enabled ? '禁用' : '启用';
+
+            // 操作绑定
+            $$('button[data-act]', node).forEach((btn) => {
+                btn.addEventListener('click', () => onCardAction(btn.dataset.act, plugin, btn));
+            });
+
+            frag.appendChild(node);
+        });
+        grid.appendChild(frag);
+    }
+
+    function onCardAction(act, plugin, btn) {
+        const id = plugin.plugin_id || plugin.id;
+        if (act === 'edit') return openEditModal(plugin);
+        if (act === 'rotate') return rotateKey(plugin, btn);
+        if (act === 'toggle') return togglePlugin(plugin, btn);
+        if (act === 'delete') return deletePlugin(plugin, btn);
+    }
+
+    // -------------------- 模态框 --------------------
+    function openModal(id) {
+        const el = document.getElementById(id);
+        if (!el) return;
+        el.hidden = false;
+        document.body.style.overflow = 'hidden';
+    }
+    function closeModal(id) {
+        const el = document.getElementById(id);
+        if (!el) return;
+        el.hidden = true;
+        if (!$$('.modal-mask').some((m) => !m.hidden)) {
+            document.body.style.overflow = '';
+        }
+    }
+
+    function bindModalCommon() {
+        // data-close 关闭、点击遮罩关闭、Esc 关闭
+        document.addEventListener('click', (e) => {
+            const closer = e.target.closest('[data-close]');
+            if (closer) {
+                closeModal(closer.dataset.close);
+                return;
+            }
+            if (e.target.classList && e.target.classList.contains('modal-mask')) {
+                closeModal(e.target.id);
+            }
+        });
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                const open = $$('.modal-mask').filter((m) => !m.hidden).pop();
+                if (open) closeModal(open.id);
+            }
+        });
+    }
+
+    // -------------------- 创建插件 --------------------
+    function openCreateModal() {
+        const form = $('#form-create');
+        form.reset();
+        // 重置默认权限
+        $$('#form-create input[name="permissions"]').forEach((cb) => {
+            cb.checked = (cb.value !== 'refund');
+        });
+        showError($('#form-create-error'), '');
+        openModal('modal-create');
+        setTimeout(() => { const el = form.querySelector('[name="plugin_id"]'); if (el) el.focus(); }, 50);
+    }
+
+    function bindCreate() {
+        $('#btn-create').addEventListener('click', openCreateModal);
+
+        const form = $('#form-create');
+        form.addEventListener('submit', async (event) => {
+            event.preventDefault();
+            const errBox = $('#form-create-error');
+            showError(errBox, '');
+
+            const fd = new FormData(form);
+            const pluginId = String(fd.get('plugin_id') || '').trim();
+            const name = String(fd.get('name') || '').trim();
+            if (!/^[A-Za-z0-9_]{3,50}$/.test(pluginId)) {
+                showError(errBox, 'plugin_id 仅允许英文/数字/下划线，长度 3-50。');
+                return;
+            }
+            if (!name) {
+                showError(errBox, '请填写插件名称。');
+                return;
+            }
+
+            const payload = {
+                plugin_id: pluginId,
+                name: name,
+                description: String(fd.get('description') || '').trim(),
+                rate_limit: toIntOr(fd.get('rate_limit'), 100),
+                max_deduct_per_tx: toIntOr(fd.get('max_deduct_per_tx'), 100),
+                max_deduct_per_day: toIntOr(fd.get('max_deduct_per_day'), 1000),
+                permissions: fd.getAll('permissions'),
+            };
+
+            const submit = $('#btn-create-submit');
+            setBusy(submit, true);
+            try {
+                const data = await apiRequest('POST', '/api/admin/plugins', payload);
+                closeModal('modal-create');
+                const fullKey = data && (data.plugin_key || data.key);
+                if (fullKey) {
+                    showKeyModal(fullKey, '请妥善保存此 Key，关闭后将无法再次查看。');
+                } else {
+                    toast('插件已创建', 'success');
+                }
+                await loadPlugins();
+            } catch (err) {
+                showError(errBox, err.message || '创建失败');
+            } finally {
+                setBusy(submit, false);
+            }
+        });
+    }
+
+    function toIntOr(value, fallback) {
+        const num = parseInt(value, 10);
+        return isNaN(num) ? fallback : num;
+    }
+
+    // -------------------- 编辑插件 --------------------
+    function openEditModal(plugin) {
+        const form = $('#form-edit');
+        form.reset();
+        showError($('#form-edit-error'), '');
+
+        const id = plugin.plugin_id || plugin.id;
+        form.dataset.pluginId = id;
+
+        form.querySelector('[name="plugin_id"]').value = id;
+        form.querySelector('[name="name"]').value = plugin.name || '';
+        form.querySelector('[name="description"]').value = plugin.description || '';
+        form.querySelector('[name="rate_limit"]').value = plugin.rate_limit ?? 100;
+        form.querySelector('[name="max_deduct_per_tx"]').value = plugin.max_deduct_per_tx ?? 100;
+        form.querySelector('[name="max_deduct_per_day"]').value = plugin.max_deduct_per_day ?? 1000;
+
+        const perms = Array.isArray(plugin.permissions) ? plugin.permissions : [];
+        $$('#form-edit input[name="permissions"]').forEach((cb) => {
+            cb.checked = perms.includes(cb.value);
+        });
+
+        $('#edit-key-display').textContent = plugin.plugin_key || maskKey(id);
+
+        openModal('modal-edit');
+    }
+
+    function bindEdit() {
+        const form = $('#form-edit');
+        form.addEventListener('submit', async (event) => {
+            event.preventDefault();
+            const errBox = $('#form-edit-error');
+            showError(errBox, '');
+
+            const id = form.dataset.pluginId;
+            if (!id) { showError(errBox, '插件标识缺失'); return; }
+
+            const fd = new FormData(form);
+            const name = String(fd.get('name') || '').trim();
+            if (!name) { showError(errBox, '请填写插件名称。'); return; }
+
+            const payload = {
+                name: name,
+                description: String(fd.get('description') || '').trim(),
+                rate_limit: toIntOr(fd.get('rate_limit'), 100),
+                max_deduct_per_tx: toIntOr(fd.get('max_deduct_per_tx'), 100),
+                max_deduct_per_day: toIntOr(fd.get('max_deduct_per_day'), 1000),
+                permissions: fd.getAll('permissions'),
+            };
+
+            const submit = $('#btn-edit-submit');
+            setBusy(submit, true);
+            try {
+                await apiRequest('PUT', '/api/admin/plugins/' + encodeURIComponent(id), payload);
+                closeModal('modal-edit');
+                toast('修改已保存', 'success');
+                await loadPlugins();
+            } catch (err) {
+                showError(errBox, err.message || '保存失败');
+            } finally {
+                setBusy(submit, false);
+            }
+        });
+    }
+
+    // -------------------- 轮换 / 切换 / 删除 --------------------
+    function rotateKey(plugin, btn) {
+        const id = plugin.plugin_id || plugin.id;
+        confirmAction({
+            title: '轮换 Key',
+            message: `轮换后旧 Key 立即失效，确定继续？\n插件：${plugin.name || id}`,
+            okText: '确认轮换',
+            danger: false,
+            onConfirm: async () => {
+                const data = await apiRequest('POST', '/api/admin/plugins/' + encodeURIComponent(id) + '/rotate-key');
+                const fullKey = data && (data.plugin_key || data.key);
+                if (fullKey) {
+                    showKeyModal(fullKey, '新 Key 已生成，请妥善保存。旧 Key 已失效。');
+                } else {
+                    toast('Key 已轮换', 'success');
+                }
+                await loadPlugins();
+            },
+        });
+    }
+
+    function togglePlugin(plugin, btn) {
+        const id = plugin.plugin_id || plugin.id;
+        setBusy(btn, true);
+        apiRequest('POST', '/api/admin/plugins/' + encodeURIComponent(id) + '/toggle')
+            .then(async () => {
+                toast(plugin.enabled ? '插件已禁用' : '插件已启用', 'success');
+                await loadPlugins();
+            })
+            .catch((err) => {
+                toast(err.message || '切换状态失败', 'error');
+            })
+            .finally(() => setBusy(btn, false));
+    }
+
+    function deletePlugin(plugin, btn) {
+        const id = plugin.plugin_id || plugin.id;
+        confirmAction({
+            title: '删除插件',
+            message: `确定删除插件「${plugin.name || id}」？此操作不可逆。`,
+            okText: '确认删除',
+            danger: true,
+            onConfirm: async () => {
+                await apiRequest('DELETE', '/api/admin/plugins/' + encodeURIComponent(id));
+                toast('插件已删除', 'success');
+                await loadPlugins();
+            },
+        });
+    }
+
+    // -------------------- 通用确认对话框 --------------------
+    function confirmAction({ title, message, okText, danger, onConfirm }) {
+        $('#modal-confirm-title').textContent = title || '请确认';
+        $('#modal-confirm-msg').textContent = message || '确认执行此操作？';
+        const okBtn = $('#btn-confirm-ok');
+        $('.btn-label', okBtn).textContent = okText || '确定';
+        okBtn.classList.toggle('btn-danger', !!danger);
+        okBtn.classList.toggle('btn-primary', !danger);
+        state.confirmHandler = onConfirm;
+        openModal('modal-confirm');
+    }
+
+    function bindConfirm() {
+        const okBtn = $('#btn-confirm-ok');
+        okBtn.addEventListener('click', async () => {
+            const handler = state.confirmHandler;
+            if (!handler) { closeModal('modal-confirm'); return; }
+            setBusy(okBtn, true);
+            try {
+                await handler();
+                closeModal('modal-confirm');
+            } catch (err) {
+                toast(err.message || '操作失败', 'error');
+            } finally {
+                setBusy(okBtn, false);
+                state.confirmHandler = null;
+            }
+        });
+    }
+
+    // -------------------- Key 展示模态框 --------------------
+    function showKeyModal(key, hint) {
+        $('#key-display').textContent = key;
+        // 重置复制按钮状态
+        const copyBtn = $('#btn-copy-key');
+        copyBtn.classList.remove('is-copied');
+        $('.btn-label', copyBtn).textContent = '复制 Key';
+        // 自定义提示文案
+        const warn = $('.key-warn span');
+        if (warn && hint) warn.textContent = hint;
+        openModal('modal-key');
+    }
+
+    function bindKeyModal() {
+        $('#btn-copy-key').addEventListener('click', async () => {
+            const key = $('#key-display').textContent;
+            const ok = await copyToClipboard(key);
+            const btn = $('#btn-copy-key');
+            const label = $('.btn-label', btn);
+            if (ok) {
+                btn.classList.add('is-copied');
+                label.textContent = '已复制';
+                toast('Key 已复制到剪贴板', 'success');
+                setTimeout(() => {
+                    btn.classList.remove('is-copied');
+                    label.textContent = '复制 Key';
+                }, 2000);
+            } else {
+                toast('复制失败，请手动选择文本复制', 'error');
+            }
+        });
+    }
+
+    async function copyToClipboard(text) {
+        try {
+            if (navigator.clipboard && window.isSecureContext) {
+                await navigator.clipboard.writeText(text);
+                return true;
+            }
+        } catch (e) { /* fallthrough */ }
+        // 兼容回退
+        try {
+            const ta = document.createElement('textarea');
+            ta.value = text;
+            ta.style.position = 'fixed';
+            ta.style.opacity = '0';
+            document.body.appendChild(ta);
+            ta.select();
+            const ok = document.execCommand('copy');
+            document.body.removeChild(ta);
+            return ok;
+        } catch (e) {
+            return false;
+        }
+    }
+
+    // -------------------- Toast --------------------
+    function toast(message, type) {
+        const container = $('#toast-container');
+        if (!container) return;
+        const node = document.createElement('div');
+        node.className = 'toast toast-' + (type || 'info');
+        const icon = type === 'success' ? '✓' : type === 'error' ? '!' : type === 'warning' ? '!' : 'i';
+        node.innerHTML = `<span class="toast-icon">${icon}</span><span class="toast-msg"></span>`;
+        node.querySelector('.toast-msg').textContent = message;
+        container.appendChild(node);
+        setTimeout(() => {
+            node.classList.add('is-leaving');
+            setTimeout(() => { if (node.parentNode) node.parentNode.removeChild(node); }, 220);
+        }, type === 'error' ? 4200 : 2800);
+    }
+
+    // -------------------- 主视图绑定 --------------------
+    function bindMain() {
+        $('#btn-logout').addEventListener('click', () => {
+            confirmAction({
+                title: '退出登录',
+                message: '确定要退出当前登录吗？',
+                okText: '退出',
+                danger: false,
+                onConfirm: async () => {
+                    clearSession();
+                    showView('view-login');
+                    toast('已退出登录', 'success');
+                },
+            });
+        });
+
+        $('#btn-refresh').addEventListener('click', async () => {
+            const btn = $('#btn-refresh');
+            setBusy(btn, true);
+            try {
+                await loadPlugins();
+                toast('已刷新', 'success');
+            } catch (err) {
+                if (!(err instanceof ApiError && err.status === 401)) {
+                    setListState('error', err.message || '加载失败');
+                    toast(err.message || '加载失败', 'error');
+                }
+            } finally {
+                setBusy(btn, false);
+            }
+        });
+
+        $('#btn-retry').addEventListener('click', async () => {
+            try { await loadPlugins(); }
+            catch (err) {
+                if (!(err instanceof ApiError && err.status === 401)) {
+                    setListState('error', err.message || '加载失败');
+                }
+            }
+        });
+
+        const search = $('#search-input');
+        let timer = null;
+        search.addEventListener('input', () => {
+            state.searchKeyword = search.value;
+            clearTimeout(timer);
+            timer = setTimeout(applyFilter, 120);
+        });
+
+        $('#btn-relogin').addEventListener('click', () => {
+            clearSession();
+            showView('view-login');
+        });
+    }
+
+    // -------------------- 启动 --------------------
+    function bootstrap() {
+        bindLogin();
+        bindMain();
+        bindCreate();
+        bindEdit();
+        bindConfirm();
+        bindKeyModal();
+        bindModalCommon();
+
+        if (state.token) {
+            // 已有 token，尝试直接进入主界面
+            syncUserChip();
+            showView('view-main');
+            loadPlugins().catch((err) => {
+                if (err instanceof ApiError && (err.status === 401)) return; // 已自动跳转
+                if (err instanceof ApiError && err.status === 403) {
+                    clearSession();
+                    showView('view-forbidden');
+                    return;
+                }
+                setListState('error', err.message || '加载失败');
+            });
+        } else {
+            showView('view-login');
+        }
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', bootstrap);
+    } else {
+        bootstrap();
+    }
+})();

管理界面/index.html

@@ -0,0 +1,378 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+    <meta name="theme-color" content="#4F46E5">
+    <title>RanKing · 插件管理控制台</title>
+    <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+    <!-- ============ 登录视图 ============ -->
+    <section id="view-login" class="view view-login" hidden>
+        <div class="login-shell">
+            <div class="login-aside">
+                <div class="brand">
+                    <div class="brand-mark" aria-hidden="true">
+                        <span class="brand-mark-dot"></span>
+                        <span class="brand-mark-bar"></span>
+                    </div>
+                    <div class="brand-text">
+                        <div class="brand-title">RanKing</div>
+                        <div class="brand-sub">Plugin Admin Console</div>
+                    </div>
+                </div>
+                <div class="login-headline">
+                    <h1>第三方插件 <br><em>统一管理控制台</em></h1>
+                    <p>使用 RanKing 管理员账号登录，集中管理所有第三方插件的访问凭证、权限与配额。</p>
+                </div>
+                <ul class="login-meta">
+                    <li><span class="dot dot-success"></span>Plugin Key 动态轮换</li>
+                    <li><span class="dot dot-warning"></span>限额与权限精细化控制</li>
+                    <li><span class="dot dot-primary"></span>双主题 · 响应式 · 原生实现</li>
+                </ul>
+            </div>
+
+            <form id="login-form" class="login-card" novalidate>
+                <header class="login-card-header">
+                    <h2>管理员登录</h2>
+                    <p>请使用具备管理员权限的 RanKing 账号</p>
+                </header>
+
+                <label class="field">
+                    <span class="field-label">账号</span>
+                    <input type="text" id="login-account" name="account"
+                           autocomplete="username" required
+                           placeholder="用户名 / 邮箱 / 手机号">
+                </label>
+
+                <label class="field">
+                    <span class="field-label">密码</span>
+                    <input type="password" id="login-password" name="password"
+                           autocomplete="current-password" required
+                           placeholder="请输入密码">
+                </label>
+
+                <div id="login-error" class="form-error" hidden></div>
+
+                <button type="submit" id="login-submit" class="btn btn-primary btn-block">
+                    <span class="btn-label">登 录</span>
+                    <span class="btn-spinner" aria-hidden="true"></span>
+                </button>
+
+                <footer class="login-card-footer">
+                    <span>仅管理员可访问 · Token 仅保存于当前会话</span>
+                </footer>
+            </form>
+        </div>
+    </section>
+
+    <!-- ============ 主视图（插件列表） ============ -->
+    <section id="view-main" class="view view-main" hidden>
+        <header class="topbar">
+            <div class="topbar-left">
+                <div class="brand brand-compact">
+                    <div class="brand-mark" aria-hidden="true">
+                        <span class="brand-mark-dot"></span>
+                        <span class="brand-mark-bar"></span>
+                    </div>
+                    <div class="brand-text">
+                        <div class="brand-title">RanKing</div>
+                        <div class="brand-sub">Plugin Admin</div>
+                    </div>
+                </div>
+                <nav class="crumbs" aria-label="位置">
+                    <span>控制台</span>
+                    <span class="crumbs-sep">/</span>
+                    <span class="crumbs-current">第三方插件</span>
+                </nav>
+            </div>
+            <div class="topbar-right">
+                <div class="user-chip" id="user-chip">
+                    <span class="user-avatar" id="user-avatar">A</span>
+                    <span class="user-name" id="user-name">admin</span>
+                </div>
+                <button type="button" id="btn-logout" class="btn btn-ghost">退出登录</button>
+            </div>
+        </header>
+
+        <main class="main-shell">
+            <section class="page-head">
+                <div class="page-head-text">
+                    <h1>第三方插件</h1>
+                    <p class="page-sub">管理 plugin_key、限流配额、权限与启用状态。</p>
+                </div>
+                <div class="page-head-actions">
+                    <div class="search-wrap">
+                        <input type="search" id="search-input" placeholder="搜索 plugin_id 或 名称…">
+                    </div>
+                    <button type="button" id="btn-refresh" class="btn btn-secondary" title="刷新">
+                        <span class="btn-label">刷新</span>
+                    </button>
+                    <button type="button" id="btn-create" class="btn btn-primary">
+                        <span class="btn-icon" aria-hidden="true">+</span>
+                        <span class="btn-label">创建新插件</span>
+                    </button>
+                </div>
+            </section>
+
+            <section class="stat-row" id="stat-row">
+                <div class="stat-card">
+                    <div class="stat-label">插件总数</div>
+                    <div class="stat-value" id="stat-total">—</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-label">已启用</div>
+                    <div class="stat-value text-success" id="stat-enabled">—</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-label">已禁用</div>
+                    <div class="stat-value text-warning" id="stat-disabled">—</div>
+                </div>
+            </section>
+
+            <section class="list-shell">
+                <div id="list-loading" class="state-block" hidden>
+                    <div class="spinner-lg" aria-hidden="true"></div>
+                    <p>正在加载插件列表…</p>
+                </div>
+                <div id="list-empty" class="state-block" hidden>
+                    <div class="empty-mark">∅</div>
+                    <h3>暂无插件</h3>
+                    <p>点击右上角「创建新插件」开始接入第三方应用。</p>
+                </div>
+                <div id="list-error" class="state-block state-error" hidden>
+                    <div class="empty-mark">!</div>
+                    <h3>加载失败</h3>
+                    <p id="list-error-msg">请稍后重试。</p>
+                    <button type="button" class="btn btn-secondary" id="btn-retry">重新加载</button>
+                </div>
+                <div id="plugin-grid" class="plugin-grid"></div>
+            </section>
+        </main>
+    </section>
+
+    <!-- ============ 拒绝访问视图 ============ -->
+    <section id="view-forbidden" class="view view-forbidden" hidden>
+        <div class="forbidden-card">
+            <div class="forbidden-mark">⛔</div>
+            <h2>您不是管理员，无权访问</h2>
+            <p>当前登录账号没有插件管理权限。请使用具备管理员权限的账号重新登录。</p>
+            <button type="button" id="btn-relogin" class="btn btn-primary">返回登录</button>
+        </div>
+    </section>
+
+    <!-- ============ 创建插件 模态框 ============ -->
+    <div id="modal-create" class="modal-mask" hidden>
+        <div class="modal modal-lg" role="dialog" aria-modal="true" aria-labelledby="modal-create-title">
+            <header class="modal-header">
+                <h3 id="modal-create-title">创建新插件</h3>
+                <button type="button" class="modal-close" data-close="modal-create" aria-label="关闭">×</button>
+            </header>
+            <form id="form-create" class="modal-body" novalidate>
+                <div class="grid-2">
+                    <label class="field">
+                        <span class="field-label">plugin_id <span class="required">*</span></span>
+                        <input type="text" name="plugin_id" required pattern="^[A-Za-z0-9_]{3,50}$"
+                               placeholder="英文/数字/下划线，3-50 字符">
+                        <span class="field-hint">用于标识插件，创建后不可修改。</span>
+                    </label>
+                    <label class="field">
+                        <span class="field-label">名称 <span class="required">*</span></span>
+                        <input type="text" name="name" required placeholder="例如：示例插件">
+                    </label>
+                </div>
+
+                <label class="field">
+                    <span class="field-label">描述</span>
+                    <textarea name="description" rows="2" placeholder="对该插件的简要说明（可选）"></textarea>
+                </label>
+
+                <div class="grid-3">
+                    <label class="field">
+                        <span class="field-label">每分钟限流</span>
+                        <input type="number" name="rate_limit" min="1" value="100">
+                    </label>
+                    <label class="field">
+                        <span class="field-label">单笔扣款上限</span>
+                        <input type="number" name="max_deduct_per_tx" min="0" value="100">
+                    </label>
+                    <label class="field">
+                        <span class="field-label">日扣款上限</span>
+                        <input type="number" name="max_deduct_per_day" min="0" value="1000">
+                    </label>
+                </div>
+
+                <fieldset class="field perm-field">
+                    <legend class="field-label">权限</legend>
+                    <div class="perm-grid">
+                        <label class="perm-item"><input type="checkbox" name="permissions" value="verify" checked><span>verify</span></label>
+                        <label class="perm-item"><input type="checkbox" name="permissions" value="balance" checked><span>balance</span></label>
+                        <label class="perm-item"><input type="checkbox" name="permissions" value="deduct" checked><span>deduct</span></label>
+                        <label class="perm-item"><input type="checkbox" name="permissions" value="refund"><span>refund</span></label>
+                    </div>
+                </fieldset>
+
+                <div class="form-error" id="form-create-error" hidden></div>
+            </form>
+            <footer class="modal-footer">
+                <button type="button" class="btn btn-ghost" data-close="modal-create">取消</button>
+                <button type="submit" form="form-create" id="btn-create-submit" class="btn btn-primary">
+                    <span class="btn-label">创建插件</span>
+                    <span class="btn-spinner" aria-hidden="true"></span>
+                </button>
+            </footer>
+        </div>
+    </div>
+
+    <!-- ============ 编辑插件 模态框 ============ -->
+    <div id="modal-edit" class="modal-mask" hidden>
+        <div class="modal modal-lg" role="dialog" aria-modal="true" aria-labelledby="modal-edit-title">
+            <header class="modal-header">
+                <h3 id="modal-edit-title">编辑插件</h3>
+                <button type="button" class="modal-close" data-close="modal-edit" aria-label="关闭">×</button>
+            </header>
+            <form id="form-edit" class="modal-body" novalidate>
+                <div class="grid-2">
+                    <label class="field">
+                        <span class="field-label">plugin_id</span>
+                        <input type="text" name="plugin_id" disabled>
+                        <span class="field-hint">不可修改。</span>
+                    </label>
+                    <label class="field">
+                        <span class="field-label">名称 <span class="required">*</span></span>
+                        <input type="text" name="name" required>
+                    </label>
+                </div>
+
+                <label class="field">
+                    <span class="field-label">描述</span>
+                    <textarea name="description" rows="2"></textarea>
+                </label>
+
+                <div class="grid-3">
+                    <label class="field">
+                        <span class="field-label">每分钟限流</span>
+                        <input type="number" name="rate_limit" min="1">
+                    </label>
+                    <label class="field">
+                        <span class="field-label">单笔扣款上限</span>
+                        <input type="number" name="max_deduct_per_tx" min="0">
+                    </label>
+                    <label class="field">
+                        <span class="field-label">日扣款上限</span>
+                        <input type="number" name="max_deduct_per_day" min="0">
+                    </label>
+                </div>
+
+                <fieldset class="field perm-field">
+                    <legend class="field-label">权限</legend>
+                    <div class="perm-grid">
+                        <label class="perm-item"><input type="checkbox" name="permissions" value="verify"><span>verify</span></label>
+                        <label class="perm-item"><input type="checkbox" name="permissions" value="balance"><span>balance</span></label>
+                        <label class="perm-item"><input type="checkbox" name="permissions" value="deduct"><span>deduct</span></label>
+                        <label class="perm-item"><input type="checkbox" name="permissions" value="refund"><span>refund</span></label>
+                    </div>
+                </fieldset>
+
+                <div class="field">
+                    <span class="field-label">plugin_key</span>
+                    <div class="static-key" id="edit-key-display">—</div>
+                    <span class="field-hint">出于安全考虑，完整 Key 已隐藏。如需更换请使用「轮换 Key」。</span>
+                </div>
+
+                <div class="form-error" id="form-edit-error" hidden></div>
+            </form>
+            <footer class="modal-footer">
+                <button type="button" class="btn btn-ghost" data-close="modal-edit">取消</button>
+                <button type="submit" form="form-edit" id="btn-edit-submit" class="btn btn-primary">
+                    <span class="btn-label">保存修改</span>
+                    <span class="btn-spinner" aria-hidden="true"></span>
+                </button>
+            </footer>
+        </div>
+    </div>
+
+    <!-- ============ 显示 plugin_key 模态框（创建/轮换共用） ============ -->
+    <div id="modal-key" class="modal-mask" hidden>
+        <div class="modal modal-md" role="dialog" aria-modal="true" aria-labelledby="modal-key-title">
+            <header class="modal-header">
+                <h3 id="modal-key-title">插件 Key 已生成</h3>
+                <button type="button" class="modal-close" data-close="modal-key" aria-label="关闭">×</button>
+            </header>
+            <div class="modal-body">
+                <div class="key-callout">
+                    <div class="key-callout-label">PLUGIN KEY</div>
+                    <div class="key-callout-value" id="key-display">—</div>
+                    <button type="button" id="btn-copy-key" class="btn btn-secondary btn-copy">
+                        <span class="btn-label">复制 Key</span>
+                    </button>
+                </div>
+                <div class="key-warn">
+                    <strong>请妥善保存此 Key</strong>
+                    <span>关闭此对话框后将无法再次查看。如不慎遗失请使用「轮换 Key」生成新凭证。</span>
+                </div>
+            </div>
+            <footer class="modal-footer">
+                <button type="button" class="btn btn-primary" data-close="modal-key">我已保存</button>
+            </footer>
+        </div>
+    </div>
+
+    <!-- ============ 通用确认对话框 ============ -->
+    <div id="modal-confirm" class="modal-mask" hidden>
+        <div class="modal modal-sm" role="alertdialog" aria-modal="true" aria-labelledby="modal-confirm-title">
+            <header class="modal-header">
+                <h3 id="modal-confirm-title">请确认</h3>
+                <button type="button" class="modal-close" data-close="modal-confirm" aria-label="关闭">×</button>
+            </header>
+            <div class="modal-body">
+                <p id="modal-confirm-msg" class="confirm-msg">确认执行此操作？</p>
+            </div>
+            <footer class="modal-footer">
+                <button type="button" class="btn btn-ghost" data-close="modal-confirm">取消</button>
+                <button type="button" id="btn-confirm-ok" class="btn btn-danger">
+                    <span class="btn-label">确定</span>
+                    <span class="btn-spinner" aria-hidden="true"></span>
+                </button>
+            </footer>
+        </div>
+    </div>
+
+    <!-- ============ Toast 容器 ============ -->
+    <div id="toast-container" class="toast-container" aria-live="polite" aria-atomic="true"></div>
+
+    <!-- ============ 插件卡片模板 ============ -->
+    <template id="tpl-plugin-card">
+        <article class="plugin-card">
+            <header class="plugin-card-head">
+                <div class="plugin-card-title">
+                    <h3 class="js-name">—</h3>
+                    <code class="js-id">—</code>
+                </div>
+                <span class="badge js-status">—</span>
+            </header>
+            <p class="plugin-desc js-desc"></p>
+            <div class="plugin-key-row">
+                <span class="key-label">KEY</span>
+                <code class="js-key">—</code>
+            </div>
+            <dl class="plugin-meta">
+                <div><dt>限流</dt><dd><span class="js-rate">—</span> <em>次/分钟</em></dd></div>
+                <div><dt>单笔限额</dt><dd class="js-tx">—</dd></div>
+                <div><dt>日限额</dt><dd class="js-day">—</dd></div>
+                <div><dt>权限</dt><dd class="js-perms">—</dd></div>
+                <div class="plugin-meta-full"><dt>创建时间</dt><dd class="js-created">—</dd></div>
+            </dl>
+            <footer class="plugin-card-foot">
+                <button type="button" class="btn btn-ghost btn-sm" data-act="edit">编辑</button>
+                <button type="button" class="btn btn-ghost btn-sm" data-act="rotate">轮换 Key</button>
+                <button type="button" class="btn btn-ghost btn-sm js-toggle" data-act="toggle">启用</button>
+                <button type="button" class="btn btn-ghost btn-sm btn-danger-text" data-act="delete">删除</button>
+            </footer>
+        </article>
+    </template>
+
+    <script src="./app.js"></script>
+</body>
+</html>

管理界面/style.css

@@ -0,0 +1,983 @@
+/* ===================================================================
+ * RanKing 插件管理控制台 · 样式表
+ * 双主题（深色/浅色，跟随 prefers-color-scheme）· 响应式 · 原生实现
+ * =================================================================== */
+
+/* ---------- 设计令牌（默认 = 浅色） ---------- */
+:root {
+    color-scheme: light dark;
+
+    /* 品牌主色 */
+    --primary: #4F46E5;
+    --primary-600: #4338CA;
+    --primary-700: #3730A3;
+    --primary-soft: rgba(79, 70, 229, 0.08);
+    --primary-soft-2: rgba(79, 70, 229, 0.16);
+
+    --success: #10B981;
+    --success-soft: rgba(16, 185, 129, 0.12);
+    --warning: #F59E0B;
+    --warning-soft: rgba(245, 158, 11, 0.12);
+    --danger: #EF4444;
+    --danger-soft: rgba(239, 68, 68, 0.12);
+
+    /* 浅色色板 */
+    --bg: #F6F7FB;
+    --bg-elev: #FFFFFF;
+    --bg-elev-2: #FAFBFE;
+    --bg-tint: #F1F2F8;
+    --border: #E5E7EB;
+    --border-strong: #D1D5DB;
+
+    --text: #1F2937;
+    --text-soft: #4B5563;
+    --text-mute: #6B7280;
+    --text-dim: #9CA3AF;
+
+    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
+    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
+    --shadow-lg: 0 24px 48px -12px rgba(15, 23, 42, 0.18), 0 8px 16px -8px rgba(15, 23, 42, 0.08);
+
+    --radius-sm: 6px;
+    --radius: 10px;
+    --radius-lg: 14px;
+    --radius-xl: 20px;
+
+    --font-sans: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Cascadia Code", monospace;
+
+    --ease: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ---------- 深色模式 ---------- */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --primary-soft: rgba(99, 102, 241, 0.16);
+        --primary-soft-2: rgba(99, 102, 241, 0.28);
+
+        --success-soft: rgba(16, 185, 129, 0.18);
+        --warning-soft: rgba(245, 158, 11, 0.18);
+        --danger-soft: rgba(239, 68, 68, 0.18);
+
+        --bg: #0B0D14;
+        --bg-elev: #14161F;
+        --bg-elev-2: #1A1D28;
+        --bg-tint: #1E2230;
+        --border: #262A38;
+        --border-strong: #353A4C;
+
+        --text: #E6E9F0;
+        --text-soft: #BFC4D1;
+        --text-mute: #8C93A4;
+        --text-dim: #5E6478;
+
+        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
+        --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
+        --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
+    }
+}
+
+/* ---------- 基础重置 ---------- */
+*,
+*::before,
+*::after { box-sizing: border-box; }
+
+html, body { height: 100%; }
+
+body {
+    margin: 0;
+    font-family: var(--font-sans);
+    font-size: 14px;
+    line-height: 1.55;
+    color: var(--text);
+    background: var(--bg);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    background-image:
+        radial-gradient(1200px 600px at 100% -10%, var(--primary-soft), transparent 60%),
+        radial-gradient(900px 500px at -10% 110%, var(--primary-soft), transparent 60%);
+    background-attachment: fixed;
+}
+
+h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
+p { margin: 0; }
+button { font-family: inherit; }
+code, pre { font-family: var(--font-mono); }
+
+[hidden] { display: none !important; }
+
+::selection { background: var(--primary-soft-2); color: var(--text); }
+
+/* ---------- 按钮 ---------- */
+.btn {
+    --_bg: var(--bg-elev);
+    --_color: var(--text);
+    --_border: var(--border-strong);
+
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    padding: 9px 14px;
+    min-height: 36px;
+    font-size: 13.5px;
+    font-weight: 500;
+    color: var(--_color);
+    background: var(--_bg);
+    border: 1px solid var(--_border);
+    border-radius: var(--radius);
+    cursor: pointer;
+    transition: transform 120ms var(--ease), background 160ms var(--ease),
+                border-color 160ms var(--ease), color 160ms var(--ease),
+                box-shadow 160ms var(--ease);
+    user-select: none;
+    white-space: nowrap;
+}
+.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
+.btn:active { transform: translateY(0); }
+.btn:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+}
+.btn:disabled,
+.btn[aria-busy="true"] { cursor: not-allowed; opacity: 0.7; transform: none; }
+
+.btn-primary {
+    --_bg: var(--primary);
+    --_color: #fff;
+    --_border: var(--primary);
+    box-shadow: 0 4px 12px -4px rgba(79, 70, 229, 0.5);
+}
+.btn-primary:hover { --_bg: var(--primary-600); --_border: var(--primary-600); }
+.btn-primary:active { --_bg: var(--primary-700); }
+
+.btn-secondary {
+    --_bg: var(--bg-elev);
+    --_color: var(--text);
+    --_border: var(--border-strong);
+}
+.btn-secondary:hover { --_bg: var(--bg-tint); }
+
+.btn-ghost {
+    --_bg: transparent;
+    --_color: var(--text-soft);
+    --_border: transparent;
+    padding: 8px 12px;
+}
+.btn-ghost:hover { --_bg: var(--bg-tint); --_color: var(--text); }
+
+.btn-danger {
+    --_bg: var(--danger);
+    --_color: #fff;
+    --_border: var(--danger);
+}
+.btn-danger:hover { --_bg: #DC2626; --_border: #DC2626; }
+
+.btn-danger-text { --_color: var(--danger); }
+.btn-danger-text:hover { --_bg: var(--danger-soft); --_color: var(--danger); }
+
+.btn-block { width: 100%; }
+.btn-sm { padding: 6px 10px; min-height: 30px; font-size: 12.5px; }
+
+.btn-icon { font-size: 16px; line-height: 1; }
+
+/* 按钮 loading */
+.btn .btn-spinner {
+    width: 14px;
+    height: 14px;
+    border: 2px solid currentColor;
+    border-top-color: transparent;
+    border-radius: 50%;
+    display: none;
+    animation: spin 720ms linear infinite;
+}
+.btn[aria-busy="true"] .btn-spinner { display: inline-block; }
+.btn[aria-busy="true"] .btn-label { opacity: 0.7; }
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* ---------- 视图容器 ---------- */
+.view { min-height: 100vh; }
+
+/* ---------- 登录视图 ---------- */
+.view-login {
+    display: grid;
+    place-items: center;
+    padding: 32px 20px;
+}
+.login-shell {
+    width: 100%;
+    max-width: 980px;
+    display: grid;
+    grid-template-columns: 1.05fr 1fr;
+    gap: 0;
+    background: var(--bg-elev);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-xl);
+    overflow: hidden;
+    box-shadow: var(--shadow-lg);
+    animation: rise 480ms var(--ease) both;
+}
+@keyframes rise {
+    from { opacity: 0; transform: translateY(12px) scale(0.985); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+.login-aside {
+    position: relative;
+    padding: 36px 36px 32px;
+    background:
+        radial-gradient(circle at 0% 0%, var(--primary-soft-2), transparent 55%),
+        linear-gradient(160deg, var(--primary) 0%, var(--primary-700) 100%);
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    gap: 36px;
+    overflow: hidden;
+}
+.login-aside::after {
+    content: "";
+    position: absolute;
+    inset: auto -40% -50% auto;
+    width: 360px; height: 360px;
+    background: radial-gradient(closest-side, rgba(255,255,255,0.18), transparent 70%);
+    pointer-events: none;
+}
+
+.login-headline h1 {
+    font-size: 30px;
+    line-height: 1.2;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+}
+.login-headline h1 em {
+    font-style: normal;
+    background: linear-gradient(90deg, #fff, rgba(255,255,255,0.6));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+.login-headline p {
+    margin-top: 12px;
+    color: rgba(255, 255, 255, 0.82);
+    font-size: 13.5px;
+    max-width: 30ch;
+}
+.login-meta {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    color: rgba(255, 255, 255, 0.88);
+    font-size: 13px;
+}
+.login-meta li { display: flex; align-items: center; gap: 8px; }
+.dot {
+    width: 8px; height: 8px; border-radius: 50%;
+    box-shadow: 0 0 0 3px rgba(255,255,255,0.12);
+}
+.dot-success { background: var(--success); }
+.dot-warning { background: var(--warning); }
+.dot-primary { background: #fff; }
+
+/* 登录卡片 */
+.login-card {
+    padding: 40px 36px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    background: var(--bg-elev);
+}
+.login-card-header { margin-bottom: 4px; }
+.login-card-header h2 { font-size: 20px; }
+.login-card-header p { font-size: 13px; color: var(--text-mute); margin-top: 4px; }
+.login-card-footer {
+    margin-top: 4px;
+    text-align: center;
+    color: var(--text-dim);
+    font-size: 12px;
+}
+
+/* ---------- 品牌 ---------- */
+.brand { display: flex; align-items: center; gap: 12px; }
+.brand-mark {
+    position: relative;
+    width: 36px; height: 36px;
+    background: rgba(255, 255, 255, 0.12);
+    border: 1px solid rgba(255, 255, 255, 0.24);
+    border-radius: 10px;
+    display: grid; place-items: center;
+    flex: none;
+}
+.brand-mark-dot {
+    width: 8px; height: 8px; border-radius: 50%;
+    background: #fff;
+    box-shadow: 0 0 12px rgba(255,255,255,0.7);
+}
+.brand-mark-bar {
+    position: absolute;
+    bottom: 7px; left: 50%;
+    width: 16px; height: 2px;
+    background: #fff;
+    transform: translateX(-50%);
+    border-radius: 2px;
+    opacity: 0.65;
+}
+.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
+.brand-title {
+    font-weight: 700;
+    font-size: 15px;
+    letter-spacing: 0.02em;
+}
+.brand-sub {
+    font-size: 11px;
+    color: rgba(255, 255, 255, 0.7);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    margin-top: 2px;
+}
+.brand-compact .brand-mark {
+    background: var(--primary-soft);
+    border-color: var(--primary-soft-2);
+}
+.brand-compact .brand-mark-dot { background: var(--primary); box-shadow: 0 0 10px var(--primary-soft-2); }
+.brand-compact .brand-mark-bar { background: var(--primary); opacity: 0.7; }
+.brand-compact .brand-title { color: var(--text); }
+.brand-compact .brand-sub { color: var(--text-mute); }
+
+/* ---------- 表单字段 ---------- */
+.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
+.field-label {
+    font-size: 12.5px;
+    font-weight: 500;
+    color: var(--text-soft);
+    letter-spacing: 0.01em;
+}
+.required { color: var(--danger); margin-left: 2px; }
+.field-hint { font-size: 12px; color: var(--text-dim); }
+
+.field input[type="text"],
+.field input[type="password"],
+.field input[type="search"],
+.field input[type="number"],
+.field textarea {
+    width: 100%;
+    padding: 10px 12px;
+    font: inherit;
+    font-size: 13.5px;
+    color: var(--text);
+    background: var(--bg-elev-2);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    transition: border-color 160ms var(--ease), background 160ms var(--ease),
+                box-shadow 160ms var(--ease);
+}
+.field textarea { resize: vertical; min-height: 64px; }
+.field input:hover,
+.field textarea:hover { border-color: var(--border-strong); }
+.field input:focus,
+.field textarea:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 4px var(--primary-soft);
+    background: var(--bg-elev);
+}
+.field input:disabled {
+    color: var(--text-mute);
+    background: var(--bg-tint);
+    cursor: not-allowed;
+}
+
+/* 权限多选 */
+.perm-field { border: none; padding: 0; margin: 0; }
+.perm-field .field-label { padding: 0; }
+.perm-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    gap: 8px;
+}
+.perm-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 10px;
+    background: var(--bg-elev-2);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    cursor: pointer;
+    font-size: 13px;
+    transition: border-color 160ms var(--ease), background 160ms var(--ease);
+}
+.perm-item:hover { border-color: var(--border-strong); }
+.perm-item input { accent-color: var(--primary); }
+.perm-item input:checked + span { color: var(--primary); font-weight: 500; }
+
+/* 表单错误 */
+.form-error {
+    padding: 10px 12px;
+    background: var(--danger-soft);
+    color: var(--danger);
+    border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
+    border-radius: var(--radius);
+    font-size: 13px;
+}
+
+/* 静态展示 key */
+.static-key {
+    padding: 10px 12px;
+    background: var(--bg-tint);
+    border: 1px dashed var(--border-strong);
+    border-radius: var(--radius);
+    font-family: var(--font-mono);
+    font-size: 13px;
+    color: var(--text-soft);
+    word-break: break-all;
+}
+
+/* ---------- 顶部栏 ---------- */
+.topbar {
+    position: sticky;
+    top: 0;
+    z-index: 50;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 14px 28px;
+    background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
+    backdrop-filter: saturate(160%) blur(12px);
+    -webkit-backdrop-filter: saturate(160%) blur(12px);
+    border-bottom: 1px solid var(--border);
+}
+.topbar-left,
+.topbar-right { display: flex; align-items: center; gap: 16px; }
+.crumbs {
+    display: flex; align-items: center; gap: 6px;
+    font-size: 13px;
+    color: var(--text-mute);
+    padding-left: 16px;
+    margin-left: 4px;
+    border-left: 1px solid var(--border);
+    height: 24px;
+}
+.crumbs-sep { color: var(--text-dim); }
+.crumbs-current { color: var(--text); font-weight: 500; }
+
+.user-chip {
+    display: flex; align-items: center; gap: 8px;
+    padding: 4px 12px 4px 4px;
+    background: var(--bg-tint);
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    font-size: 13px;
+}
+.user-avatar {
+    width: 28px; height: 28px;
+    border-radius: 50%;
+    display: grid; place-items: center;
+    background: var(--primary);
+    color: #fff;
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+.user-name { color: var(--text); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* ---------- 主体 ---------- */
+.main-shell {
+    max-width: 1240px;
+    margin: 0 auto;
+    padding: 28px 28px 64px;
+    display: flex;
+    flex-direction: column;
+    gap: 22px;
+}
+
+.page-head {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 16px;
+    flex-wrap: wrap;
+}
+.page-head h1 { font-size: 26px; letter-spacing: -0.02em; }
+.page-sub { color: var(--text-mute); margin-top: 4px; font-size: 13.5px; }
+
+.page-head-actions {
+    display: flex; align-items: center; gap: 10px;
+    flex-wrap: wrap;
+}
+.search-wrap input[type="search"] {
+    width: 260px;
+    padding: 9px 12px 9px 36px;
+    background:
+        var(--bg-elev) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") no-repeat 12px center / 16px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    font-size: 13px;
+    color: var(--text);
+    transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
+}
+.search-wrap input[type="search"]:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 4px var(--primary-soft);
+}
+
+/* ---------- 统计行 ---------- */
+.stat-row {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 14px;
+}
+.stat-card {
+    padding: 16px 18px;
+    background: var(--bg-elev);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-sm);
+}
+.stat-label { font-size: 12.5px; color: var(--text-mute); letter-spacing: 0.02em; }
+.stat-value {
+    font-size: 26px;
+    font-weight: 700;
+    margin-top: 4px;
+    letter-spacing: -0.02em;
+    font-variant-numeric: tabular-nums;
+}
+.text-success { color: var(--success); }
+.text-warning { color: var(--warning); }
+
+/* ---------- 列表区 ---------- */
+.list-shell { position: relative; min-height: 200px; }
+
+.state-block {
+    padding: 56px 24px;
+    text-align: center;
+    background: var(--bg-elev);
+    border: 1px dashed var(--border-strong);
+    border-radius: var(--radius-lg);
+    color: var(--text-mute);
+}
+.state-block h3 { font-size: 16px; color: var(--text); margin-bottom: 6px; }
+.state-block p { font-size: 13.5px; }
+.state-block .empty-mark {
+    font-size: 28px;
+    color: var(--text-dim);
+    margin-bottom: 8px;
+}
+.state-error .empty-mark { color: var(--danger); }
+.state-error h3 { color: var(--danger); }
+.state-block .btn { margin-top: 16px; }
+
+.spinner-lg {
+    width: 28px; height: 28px;
+    margin: 0 auto 12px;
+    border: 3px solid var(--border-strong);
+    border-top-color: var(--primary);
+    border-radius: 50%;
+    animation: spin 720ms linear infinite;
+}
+
+/* 插件卡片网格 */
+.plugin-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 14px;
+}
+
+.plugin-card {
+    position: relative;
+    padding: 18px 18px 14px;
+    background: var(--bg-elev);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-sm);
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms var(--ease);
+    animation: fade-in 280ms var(--ease) both;
+}
+.plugin-card:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+    border-color: var(--border-strong);
+}
+@keyframes fade-in {
+    from { opacity: 0; transform: translateY(6px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.plugin-card-head {
+    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
+}
+.plugin-card-title { min-width: 0; flex: 1; }
+.plugin-card-title h3 { font-size: 15.5px; line-height: 1.3; word-break: break-word; }
+.plugin-card-title code {
+    display: inline-block;
+    margin-top: 4px;
+    font-size: 12px;
+    color: var(--text-mute);
+}
+
+.badge {
+    flex: none;
+    padding: 3px 10px;
+    border-radius: 999px;
+    font-size: 11.5px;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    line-height: 1.6;
+}
+.badge.is-on { background: var(--success-soft); color: var(--success); }
+.badge.is-off { background: var(--warning-soft); color: var(--warning); }
+
+.plugin-desc {
+    font-size: 13px;
+    color: var(--text-mute);
+    line-height: 1.55;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    min-height: 1.55em;
+}
+.plugin-desc:empty::before {
+    content: "暂无描述";
+    color: var(--text-dim);
+    font-style: italic;
+}
+
+.plugin-key-row {
+    display: flex; align-items: center; gap: 8px;
+    padding: 8px 10px;
+    background: var(--bg-tint);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    font-size: 12.5px;
+    overflow: hidden;
+}
+.key-label {
+    font-size: 10.5px;
+    font-weight: 700;
+    color: var(--text-mute);
+    letter-spacing: 0.12em;
+    background: var(--bg-elev);
+    padding: 2px 6px;
+    border-radius: 4px;
+    border: 1px solid var(--border);
+    flex: none;
+}
+.plugin-key-row code {
+    color: var(--text-soft);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.plugin-meta {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px 14px;
+    margin: 0;
+    padding: 12px 0 4px;
+    border-top: 1px dashed var(--border);
+}
+.plugin-meta > div { min-width: 0; }
+.plugin-meta-full { grid-column: 1 / -1; }
+.plugin-meta dt {
+    font-size: 11px;
+    color: var(--text-dim);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    margin-bottom: 2px;
+}
+.plugin-meta dd {
+    margin: 0;
+    font-size: 13px;
+    color: var(--text);
+    font-variant-numeric: tabular-nums;
+    word-break: break-word;
+}
+.plugin-meta dd em { font-style: normal; color: var(--text-mute); font-size: 11.5px; }
+.js-perms { display: flex; flex-wrap: wrap; gap: 4px; }
+.perm-chip {
+    display: inline-block;
+    padding: 1px 8px;
+    background: var(--primary-soft);
+    color: var(--primary);
+    border-radius: 999px;
+    font-size: 11px;
+    font-weight: 500;
+}
+
+.plugin-card-foot {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    padding-top: 8px;
+    border-top: 1px dashed var(--border);
+}
+
+/* ---------- 模态框 ---------- */
+.modal-mask {
+    position: fixed;
+    inset: 0;
+    z-index: 100;
+    background: color-mix(in srgb, #0B0D14 60%, transparent);
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    display: grid;
+    place-items: center;
+    padding: 20px;
+    animation: mask-in 180ms var(--ease) both;
+}
+@keyframes mask-in { from { opacity: 0; } to { opacity: 1; } }
+
+.modal {
+    width: 100%;
+    background: var(--bg-elev);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-lg);
+    display: flex;
+    flex-direction: column;
+    max-height: calc(100vh - 40px);
+    overflow: hidden;
+    animation: modal-in 220ms var(--ease) both;
+}
+@keyframes modal-in {
+    from { opacity: 0; transform: translateY(8px) scale(0.98); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+}
+.modal-sm { max-width: 420px; }
+.modal-md { max-width: 540px; }
+.modal-lg { max-width: 680px; }
+
+.modal-header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 18px 22px;
+    border-bottom: 1px solid var(--border);
+}
+.modal-header h3 { font-size: 16px; }
+.modal-close {
+    width: 32px; height: 32px;
+    border: none;
+    background: transparent;
+    border-radius: 8px;
+    color: var(--text-mute);
+    font-size: 20px;
+    line-height: 1;
+    cursor: pointer;
+    transition: background 160ms var(--ease), color 160ms var(--ease);
+}
+.modal-close:hover { background: var(--bg-tint); color: var(--text); }
+
+.modal-body {
+    padding: 20px 22px;
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    overflow-y: auto;
+}
+.modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 14px 22px;
+    border-top: 1px solid var(--border);
+    background: var(--bg-elev-2);
+}
+
+.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
+.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
+
+.confirm-msg {
+    font-size: 14px;
+    color: var(--text-soft);
+    line-height: 1.6;
+}
+
+/* ---------- Key 高亮展示 ---------- */
+.key-callout {
+    position: relative;
+    padding: 18px;
+    background: linear-gradient(135deg, var(--primary-soft) 0%, var(--primary-soft-2) 100%);
+    border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
+    border-radius: var(--radius-lg);
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    overflow: hidden;
+}
+.key-callout::after {
+    content: "";
+    position: absolute;
+    inset: -1px;
+    border-radius: inherit;
+    border: 1px solid var(--primary);
+    pointer-events: none;
+    opacity: 0.25;
+    animation: glow 2.4s ease-in-out infinite;
+}
+@keyframes glow {
+    0%, 100% { opacity: 0.2; }
+    50% { opacity: 0.55; }
+}
+.key-callout-label {
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.16em;
+    color: var(--primary);
+}
+.key-callout-value {
+    font-family: var(--font-mono);
+    font-size: 15px;
+    color: var(--text);
+    background: var(--bg-elev);
+    padding: 12px 14px;
+    border-radius: var(--radius);
+    border: 1px solid var(--border);
+    word-break: break-all;
+    user-select: all;
+}
+.btn-copy { align-self: flex-start; }
+.btn-copy.is-copied {
+    --_bg: var(--success-soft);
+    --_color: var(--success);
+    --_border: color-mix(in srgb, var(--success) 35%, transparent);
+}
+
+.key-warn {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 12px 14px;
+    background: var(--warning-soft);
+    border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
+    border-radius: var(--radius);
+    font-size: 13px;
+}
+.key-warn strong { color: var(--warning); font-weight: 600; }
+.key-warn span { color: var(--text-soft); }
+
+/* ---------- 拒绝访问 ---------- */
+.view-forbidden {
+    display: grid;
+    place-items: center;
+    padding: 32px 20px;
+}
+.forbidden-card {
+    max-width: 460px;
+    text-align: center;
+    padding: 40px 32px;
+    background: var(--bg-elev);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-lg);
+    animation: rise 320ms var(--ease) both;
+}
+.forbidden-mark {
+    font-size: 40px;
+    margin-bottom: 8px;
+    filter: grayscale(0.2);
+}
+.forbidden-card h2 { font-size: 18px; margin-bottom: 8px; }
+.forbidden-card p { color: var(--text-mute); margin-bottom: 20px; }
+
+/* ---------- Toast ---------- */
+.toast-container {
+    position: fixed;
+    bottom: 20px; right: 20px;
+    z-index: 200;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    pointer-events: none;
+    max-width: calc(100vw - 40px);
+}
+.toast {
+    pointer-events: auto;
+    min-width: 240px;
+    max-width: 360px;
+    padding: 12px 14px;
+    background: var(--bg-elev);
+    border: 1px solid var(--border);
+    border-left: 3px solid var(--primary);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-md);
+    color: var(--text);
+    font-size: 13.5px;
+    line-height: 1.5;
+    display: flex; align-items: flex-start; gap: 10px;
+    animation: toast-in 240ms var(--ease) both;
+}
+.toast.is-leaving { animation: toast-out 200ms var(--ease) forwards; }
+.toast.toast-success { border-left-color: var(--success); }
+.toast.toast-error { border-left-color: var(--danger); }
+.toast.toast-warning { border-left-color: var(--warning); }
+.toast-icon {
+    flex: none;
+    width: 18px; height: 18px;
+    border-radius: 50%;
+    display: grid; place-items: center;
+    font-size: 11px; font-weight: 700;
+    color: #fff;
+    background: var(--primary);
+    margin-top: 1px;
+}
+.toast-success .toast-icon { background: var(--success); }
+.toast-error .toast-icon { background: var(--danger); }
+.toast-warning .toast-icon { background: var(--warning); }
+
+@keyframes toast-in {
+    from { opacity: 0; transform: translateX(20px); }
+    to { opacity: 1; transform: translateX(0); }
+}
+@keyframes toast-out {
+    to { opacity: 0; transform: translateX(20px); }
+}
+
+/* ---------- 响应式 ---------- */
+@media (max-width: 880px) {
+    .login-shell { grid-template-columns: 1fr; max-width: 480px; }
+    .login-aside { padding: 28px 28px 24px; gap: 24px; }
+    .login-headline h1 { font-size: 24px; }
+    .login-card { padding: 28px 24px; }
+
+    .topbar { padding: 12px 16px; }
+    .crumbs { display: none; }
+    .main-shell { padding: 20px 16px 48px; }
+
+    .stat-row { grid-template-columns: 1fr; }
+    .grid-2, .grid-3 { grid-template-columns: 1fr; }
+    .modal-header, .modal-body, .modal-footer { padding-left: 18px; padding-right: 18px; }
+
+    .search-wrap input[type="search"] { width: 100%; }
+    .page-head-actions { width: 100%; }
+}
+@media (max-width: 480px) {
+    .topbar-left .brand-text .brand-sub { display: none; }
+    .user-name { display: none; }
+    .plugin-card-foot .btn { flex: 1 1 calc(50% - 4px); justify-content: center; }
+}
+
+/* ---------- 滚动条 ---------- */
+.modal-body::-webkit-scrollbar { width: 8px; height: 8px; }
+.modal-body::-webkit-scrollbar-track { background: transparent; }
+.modal-body::-webkit-scrollbar-thumb {
+    background: var(--border-strong);
+    border-radius: 4px;
+}
+.modal-body::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }
+
+@media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+        animation-duration: 0.01ms !important;
+        transition-duration: 0.01ms !important;
+    }
+}