{% extends "base.html" %}

{% block title %}浏览器多开 - AI创作工作台{% endblock %}

{% block content %}
<style>
    .bm-page { color: #374151; }
    .bm-shell { display: grid; grid-template-columns: 286px minmax(0, 1fr); min-height: calc(100vh - 150px); gap: 16px; }
    .bm-sidebar, .bm-workspace { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; box-shadow: 0 4px 16px rgba(15, 23, 42, .05); }
    .bm-sidebar { overflow: hidden; display: flex; flex-direction: column; }
    .bm-sidebar-head { padding: 18px; background: linear-gradient(145deg, #fff7ed, #fffbeb); border-bottom: 1px solid #fed7aa; }
    .bm-account-list { flex: 1; overflow-y: auto; padding: 10px; min-height: 180px; }
    .bm-account-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px; border: 1px solid transparent; border-radius: 11px; text-align: left; transition: .18s ease; }
    .bm-account-row:hover { background: #fff7ed; border-color: #fed7aa; }
    .bm-account-row.active { background: #fff7ed; border-color: #fb923c; box-shadow: inset 0 0 0 1px rgba(251, 146, 60, .12); }
    .bm-account-row.selected { background: #fff1e6; border-color: #fdba74; }
    .bm-avatar { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: #ffedd5; color: #c2410c; font-weight: 700; flex: none; }
    .bm-platform-pill { font-size: 11px; color: #c2410c; background: #ffedd5; border-radius: 999px; padding: 2px 6px; }
    .bm-status { width: 8px; height: 8px; border-radius: 50%; background: #d1d5db; flex: none; }
    .bm-status.online { background: #22c55e; box-shadow: 0 0 0 3px #dcfce7; }
    .bm-status.logged-out { background: #f87171; }
    .bm-tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; border-top: 1px solid #f3f4f6; background: #fffbeb; }
    .bm-tool { padding: 9px 7px; border: 1px solid #fdba74; color: #9a3412; background: #fff; border-radius: 9px; font-size: 12px; }
    .bm-tool:hover { background: #fff7ed; }
    .bm-workspace { padding: 16px; min-width: 0; }
    .bm-workspace-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
    .bm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 14px; }
    .bm-primary { background: #2563eb; color: #fff; border-radius: 9px; padding: 9px 13px; font-size: 13px; font-weight: 600; }
    .bm-secondary { background: #fff; color: #4b5563; border: 1px solid #d1d5db; border-radius: 9px; padding: 9px 13px; font-size: 13px; }
    .bm-danger { background: #fff1f2; color: #be123c; border: 1px solid #fecdd3; border-radius: 9px; padding: 9px 13px; font-size: 13px; }
    .bm-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
    .bm-tab { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 7px 11px; border: 1px solid #d1d5db; border-radius: 999px; background: #fff; color: #4b5563; font-size: 12px; }
    .bm-tab.active { border-color: #fb923c; background: #fff7ed; color: #9a3412; }
    .bm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
    .bm-grid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bm-browser-card { overflow: hidden; border: 1px solid #e5e7eb; border-radius: 13px; background: #f8fafc; box-shadow: 0 2px 10px rgba(15, 23, 42, .05); }
    .bm-browser-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; background: #fff; border-bottom: 1px solid #e5e7eb; }
    .bm-browser-shot { position: relative; aspect-ratio: 16 / 10; background: #eef2f7; overflow: hidden; }
    .bm-browser-shot img { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; }
    .bm-shot-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: #9ca3af; font-size: 12px; }
    .bm-browser-foot { display: flex; gap: 6px; padding: 9px; background: #fff; border-top: 1px solid #e5e7eb; }
    .bm-browser-foot input { min-width: 0; flex: 1; padding: 7px 9px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 12px; }
    .bm-icon-btn { width: 30px; height: 30px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; color: #6b7280; }
    .bm-icon-btn:hover { background: #f3f4f6; color: #2563eb; }
    @media (max-width: 900px) { .bm-shell { grid-template-columns: 1fr; } .bm-sidebar { min-height: auto; } .bm-account-list { max-height: 280px; } }
    @media (max-width: 640px) { .bm-grid, .bm-grid.compact { grid-template-columns: 1fr; } .bm-workspace-head { flex-direction: column; } }
</style>

<div class="bm-page space-y-4">
    <div class="flex flex-wrap items-end justify-between gap-3">
        <div>
            <div class="text-xs font-semibold uppercase tracking-wider text-orange-600 mb-1">AI 武器库 · Browser Multi</div>
            <h1 class="text-2xl font-bold text-gray-900">浏览器多开工作台</h1>
            <p class="text-sm text-gray-500 mt-1">选择平台和账号，在右侧切换对应账号的独立登录会话。</p>
        </div>
        <div id="browser-status" class="text-sm text-gray-500">检测浏览器中...</div>
    </div>

    <div class="bm-shell">
        <aside class="bm-sidebar">
            <div class="bm-sidebar-head">
                <div class="flex items-center justify-between mb-3">
                    <div class="font-bold text-gray-900">账号管理</div>
                    <button onclick="openAppWindow()" class="bm-icon-btn" title="打开独立窗口">↗</button>
                </div>
                <input id="account-search" type="search" placeholder="搜索账号..." oninput="window.__bmSearchAccounts(this.value)" class="w-full px-3 py-2 border border-orange-200 rounded-lg text-sm bg-white">
                <div class="flex items-center gap-3 mt-3 text-xs text-gray-500">
                    <span><i class="inline-block w-2 h-2 rounded-full bg-emerald-500 mr-1"></i>运行中</span>
                    <span><i class="inline-block w-2 h-2 rounded-full bg-gray-300 mr-1"></i>未启动</span>
                </div>
            </div>
            <div class="px-3 pt-3">
                <label class="block text-xs font-medium text-gray-500 mb-1.5">选择登录平台</label>
                <select id="platform-select" onchange="window.__bmSelectPlatform(this.value ? Number(this.value) : null)" class="w-full px-3 py-2.5 border border-orange-200 rounded-lg text-sm bg-white"></select>
            </div>
            <div class="flex items-center justify-between px-3 pt-4 pb-1">
                <span class="text-xs font-semibold text-gray-500">账号列表</span>
                <button onclick="window.__bmSelectAllVisible()" class="text-xs text-blue-600 hover:text-blue-700">全选当前列表</button>
            </div>
            <div id="account-list" class="bm-account-list"></div>
            <div id="accounts-empty" class="hidden px-5 py-10 text-center text-gray-500 text-sm">当前平台暂无账号</div>
            <div class="bm-tool-grid">
                <button onclick="openAddAccount()" class="bm-tool">＋ 新增账号</button>
                <button onclick="openImport()" class="bm-tool">⇩ 批量导入</button>
                <button onclick="openAddPlatform()" class="bm-tool">＋ 新增平台</button>
                <button onclick="window.__bmBatchDelete()" class="bm-tool text-rose-600 border-rose-200">删除账号</button>
            </div>
        </aside>

        <main class="bm-workspace">
            <div class="bm-workspace-head">
                <div>
                    <h2 class="text-lg font-semibold text-gray-900">多窗口工作区</h2>
                    <p id="workspace-subtitle" class="text-xs text-gray-500 mt-1">尚未打开浏览器窗口</p>
                </div>
                <div class="flex gap-2">
                    <button onclick="window.__bmSetDensity('normal')" class="bm-icon-btn" title="两列视图">▦</button>
                    <button onclick="window.__bmSetDensity('compact')" class="bm-icon-btn" title="三列视图">▤</button>
                </div>
            </div>
            <div class="bm-toolbar">
                <span id="selected-count" class="text-sm font-medium text-gray-700 mr-auto">已勾选 0 个账号</span>
                <button onclick="window.__bmLaunchSelected()" class="bm-primary">▶ 打开选中账号</button>
                <button onclick="window.__bmStopAll()" class="bm-secondary">■ 关闭全部窗口</button>
                <button onclick="window.__bmRefreshAll()" class="bm-secondary">↻ 刷新画面</button>
            </div>
            <div id="browser-tabs" class="bm-tabs"></div>
            <div id="browser-grid" class="bm-grid"></div>
            <div id="workspace-empty" class="flex min-h-[420px] flex-col items-center justify-center rounded-xl border border-dashed border-gray-300 bg-gray-50 text-center">
                <div class="text-5xl mb-3">🖥️</div>
                <div class="font-medium text-gray-700">选择账号后在右侧切换会话</div>
                <div class="text-sm text-gray-500 mt-1">豆包、Dola 等账号会在独立 Profile 中运行，登录态互不干扰。</div>
            </div>
        </main>
    </div>
</div>

<!-- 新增账号弹窗 -->
<div id="account-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-2xl shadow-xl p-6 w-full max-w-md mx-4">
        <div class="flex justify-between items-center mb-5">
            <h2 class="text-lg font-bold text-gray-800">新增账号</h2>
            <button onclick="closeModal('account-modal')" class="text-gray-400 hover:text-gray-600 text-xl leading-none">✕</button>
        </div>
        <input type="hidden" id="acct-platform-id">
        <div class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1.5">账号名称</label>
                <input id="acct-name" type="text" placeholder="如：主号 / 小号1 / 工作号" class="w-full px-4 py-2.5 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1.5">备注（选填）</label>
                <input id="acct-remark" type="text" placeholder="备注信息" class="w-full px-4 py-2.5 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1.5">浏览器</label>
                <select id="acct-browser" class="w-full px-4 py-2.5 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="chrome">Chrome</option>
                    <option value="edge">Edge</option>
                </select>
            </div>
        </div>
        <div class="mt-6 flex gap-3">
            <button onclick="closeModal('account-modal')" class="flex-1 border border-gray-300 text-gray-600 py-2.5 rounded-xl hover:bg-gray-50 transition">取消</button>
            <button onclick="saveAccount()" class="flex-1 bg-blue-600 text-white py-2.5 rounded-xl hover:bg-blue-700 transition">保存</button>
        </div>
    </div>
</div>

<!-- 编辑账号弹窗 -->
<div id="edit-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-2xl shadow-xl p-6 w-full max-w-md mx-4">
        <div class="flex justify-between items-center mb-5">
            <h2 class="text-lg font-bold text-gray-800">编辑账号</h2>
            <button onclick="closeModal('edit-modal')" class="text-gray-400 hover:text-gray-600 text-xl leading-none">✕</button>
        </div>
        <input type="hidden" id="edit-id">
        <div class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1.5">账号名称</label>
                <input id="edit-name" type="text" class="w-full px-4 py-2.5 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1.5">备注</label>
                <input id="edit-remark" type="text" class="w-full px-4 py-2.5 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1.5">浏览器</label>
                <select id="edit-browser" class="w-full px-4 py-2.5 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="chrome">Chrome</option>
                    <option value="edge">Edge</option>
                </select>
            </div>
        </div>
        <div class="mt-6 flex gap-3">
            <button onclick="closeModal('edit-modal')" class="flex-1 border border-gray-300 text-gray-600 py-2.5 rounded-xl hover:bg-gray-50 transition">取消</button>
            <button onclick="saveEdit()" class="flex-1 bg-blue-600 text-white py-2.5 rounded-xl hover:bg-blue-700 transition">保存</button>
        </div>
    </div>
</div>

<!-- 新增平台弹窗 -->
<div id="platform-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-2xl shadow-xl p-6 w-full max-w-md mx-4">
        <div class="flex justify-between items-center mb-5">
            <h2 class="text-lg font-bold text-gray-800">新增平台</h2>
            <button onclick="closeModal('platform-modal')" class="text-gray-400 hover:text-gray-600 text-xl leading-none">✕</button>
        </div>
        <div class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1.5">平台名称</label>
                <input id="plat-name" type="text" placeholder="如：通义千问" class="w-full px-4 py-2.5 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1.5">平台代码（英文，唯一）</label>
                <input id="plat-code" type="text" placeholder="如：tongyi" class="w-full px-4 py-2.5 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1.5">登录 / 主页 URL</label>
                <input id="plat-url" type="url" placeholder="https://..." class="w-full px-4 py-2.5 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1.5">图标 emoji</label>
                <input id="plat-icon" type="text" maxlength="4" placeholder="🌐" class="w-28 px-4 py-2.5 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
        </div>
        <div class="mt-6 flex gap-3">
            <button onclick="closeModal('platform-modal')" class="flex-1 border border-gray-300 text-gray-600 py-2.5 rounded-xl hover:bg-gray-50 transition">取消</button>
            <button onclick="savePlatform()" class="flex-1 bg-blue-600 text-white py-2.5 rounded-xl hover:bg-blue-700 transition">保存</button>
        </div>
    </div>
</div>

<!-- 批量导入弹窗 -->
<div id="import-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-2xl shadow-xl p-6 w-full max-w-lg mx-4">
        <div class="flex justify-between items-center mb-5">
            <h2 class="text-lg font-bold text-gray-800">批量导入账号</h2>
            <button onclick="closeModal('import-modal')" class="text-gray-400 hover:text-gray-600 text-xl leading-none">✕</button>
        </div>
        <div class="text-sm text-gray-500 mb-2">每行一个账号，支持格式：</div>
        <ul class="text-xs text-gray-500 mb-3 space-y-1 list-disc pl-5">
            <li><code class="bg-gray-100 px-1 py-0.5 rounded">名称</code> 或 <code class="bg-gray-100 px-1 py-0.5 rounded">名称,备注</code> —— 普通账号</li>
            <li><code class="bg-gray-100 px-1 py-0.5 rounded">名称 邮箱 密码</code> —— 密码登录（如 Dola，空格分隔）</li>
            <li><code class="bg-gray-100 px-1 py-0.5 rounded">名称 cookie1=xxx; cookie2=yyy</code> —— Cookie 登录</li>
        </ul>
        <textarea id="import-lines" rows="8" placeholder="例如：
主号
dola号1 dola1@mail.com 密码123
豆包号 cookie_a=abc; cookie_b=xyz" class="w-full px-4 py-3 border border-gray-300 rounded-xl font-mono text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
        <div class="mt-6 flex gap-3">
            <button onclick="closeModal('import-modal')" class="flex-1 border border-gray-300 text-gray-600 py-2.5 rounded-xl hover:bg-gray-50 transition">取消</button>
            <button onclick="saveImport()" class="flex-1 bg-blue-600 text-white py-2.5 rounded-xl hover:bg-blue-700 transition">导入</button>
        </div>
    </div>
</div>

<!-- 登录凭据弹窗 -->
<div id="cred-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-2xl shadow-xl p-6 w-full max-w-lg mx-4">
        <div class="flex justify-between items-center mb-5">
            <h2 class="text-lg font-bold text-gray-800">🔑 登录凭据</h2>
            <button onclick="closeModal('cred-modal')" class="text-gray-400 hover:text-gray-600 text-xl leading-none">✕</button>
        </div>
        <div id="cred-title" class="text-sm text-gray-500 mb-4">配置账号的自动登录凭据</div>
        <div id="saved-login-bar" class="hidden mb-4 flex items-center justify-between p-3 bg-emerald-50 border border-emerald-200 rounded-xl">
            <div class="flex items-center gap-2 text-sm text-emerald-700">
                <span>✓</span>
                <span id="saved-login-text">已保存登录态（N 个 Cookie）</span>
            </div>
            <button onclick="clearSavedLogin()" class="text-xs text-red-500 hover:text-red-700 px-2 py-1 rounded hover:bg-red-50">清除</button>
        </div>
        <div class="space-y-4">
            <div class="flex gap-3">
                <label class="flex-1 flex items-center gap-2 p-3 border-2 border-blue-600 bg-blue-50 rounded-xl cursor-pointer">
                    <input type="radio" name="cred-type" value="password" class="accent-blue-600">
                    <span class="text-sm text-gray-700 font-medium">邮箱 + 密码</span>
                </label>
                <label class="flex-1 flex items-center gap-2 p-3 border-2 border-gray-200 rounded-xl cursor-pointer">
                    <input type="radio" name="cred-type" value="cookie" class="accent-blue-600">
                    <span class="text-sm text-gray-700 font-medium">Cookie 登录</span>
                </label>
            </div>
            <div id="cred-pwd-row">
                <div class="mb-3">
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">邮箱 / 用户名</label>
                    <input id="cred-user" type="text" placeholder="登录邮箱或用户名" class="w-full px-3 py-2 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">密码</label>
                    <input id="cred-pass" type="password" placeholder="登录密码" class="w-full px-3 py-2 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
            </div>
            <div id="cred-cookie-row" class="hidden">
                <label class="block text-sm font-medium text-gray-700 mb-1.5">Cookie 文本</label>
                <textarea id="cred-cookie" rows="4" placeholder="粘贴 Cookie，如：name1=value1; name2=value2&#10;或浏览器导出的 JSON 数组" class="w-full px-3 py-2 border border-gray-300 rounded-xl text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
            </div>
            <div class="text-xs text-gray-400 leading-relaxed">
                提示：密码凭据用于批量导入；Cookie 凭据会在启动浏览器后自动注入实现直接登录。也可以先启动浏览器手动登录，再点面板上的「保存此账号」自动抓取并保存登录态。
            </div>
        </div>
        <div class="mt-6 flex gap-3">
            <button onclick="closeModal('cred-modal')" class="flex-1 border border-gray-300 text-gray-600 py-2.5 rounded-xl hover:bg-gray-50 transition">取消</button>
            <button onclick="saveCredentials()" class="flex-1 bg-blue-600 text-white py-2.5 rounded-xl hover:bg-blue-700 transition">保存</button>
        </div>
    </div>
</div>

<!-- 指纹 / IP 配置弹窗 -->
<div id="fp-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-2xl shadow-xl p-6 w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto">
        <div class="flex justify-between items-center mb-5">
            <h2 class="text-lg font-bold text-gray-800">🪪 指纹 / IP 配置</h2>
            <button onclick="closeModal('fp-modal')" class="text-gray-400 hover:text-gray-600 text-xl leading-none">✕</button>
        </div>
        <div id="fp-title" class="text-sm text-gray-500 mb-5">配置账号的浏览器指纹与网络环境</div>
        <div class="space-y-5">
            <label class="flex items-center justify-between p-4 bg-indigo-50/60 border border-indigo-200 rounded-xl cursor-pointer">
                <div>
                    <div class="font-medium text-gray-800">启用指纹隔离</div>
                    <div class="text-xs text-gray-500 mt-0.5">为账号应用独立指纹（UA / 语言 / 时区 / 屏幕 / DPR / 代理），避免登录环境冲突</div>
                </div>
                <input id="fp-enabled" type="checkbox" class="w-5 h-5 accent-indigo-600">
            </label>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">User-Agent</label>
                    <input id="fp-ua" type="text" placeholder="留空使用默认" class="w-full px-3 py-2 border border-gray-300 rounded-xl text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">语言</label>
                    <input id="fp-lang" type="text" placeholder="zh-CN" class="w-full px-3 py-2 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">时区</label>
                    <input id="fp-tz" type="text" placeholder="Asia/Shanghai" class="w-full px-3 py-2 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">屏幕宽度</label>
                    <input id="fp-w" type="number" placeholder="1920" class="w-full px-3 py-2 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">屏幕高度</label>
                    <input id="fp-h" type="number" placeholder="1080" class="w-full px-3 py-2 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">DPR（设备像素比）</label>
                    <input id="fp-dpr" type="text" placeholder="1" class="w-full px-3 py-2 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">显卡标识（WebGL 指纹，CDP 注入）</label>
                    <input id="fp-gpu" type="text" placeholder="如：Google Inc. (NVIDIA) / ANGLE (NVIDIA...)" class="w-full px-3 py-2 border border-gray-300 rounded-xl text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
            </div>
            <div class="border-t border-gray-100 pt-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">网络连接方式</label>
                <div class="flex gap-3">
                    <label class="flex-1 flex items-center gap-2 p-3 border-2 border-gray-200 rounded-xl cursor-pointer">
                        <input type="radio" name="fp-net" value="system" class="accent-blue-600">
                        <span class="text-sm text-gray-700">跟随系统</span>
                    </label>
                    <label class="flex-1 flex items-center gap-2 p-3 border-2 border-gray-200 rounded-xl cursor-pointer">
                        <input type="radio" name="fp-net" value="force_direct" class="accent-blue-600">
                        <span class="text-sm text-gray-700">强制直连</span>
                    </label>
                    <label class="flex-1 flex items-center gap-2 p-3 border-2 border-gray-200 rounded-xl cursor-pointer">
                        <input type="radio" name="fp-net" value="proxy" class="accent-blue-600">
                        <span class="text-sm text-gray-700">账号独立代理</span>
                    </label>
                </div>
                <div id="proxy-row" class="hidden mt-3">
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">代理地址</label>
                    <input id="fp-proxy" type="text" placeholder="http://用户名:密码@代理IP:端口" class="w-full px-3 py-2 border border-gray-300 rounded-xl text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
            </div>
            <div class="text-xs text-gray-400">提示：修改指纹后，需重新启动浏览器生效。登录一次后 Cookie 保存在该账号独立 Profile 中，之后打开即自动登录。</div>
        </div>
        <div class="mt-6 flex gap-3">
            <button onclick="closeModal('fp-modal')" class="flex-1 border border-gray-300 text-gray-600 py-2.5 rounded-xl hover:bg-gray-50 transition">取消</button>
            <button onclick="saveFingerprint()" class="flex-1 bg-indigo-600 text-white py-2.5 rounded-xl hover:bg-indigo-700 transition">保存并应用</button>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="/static/js/browser_multi.js?v=3"></script>
{% endblock %}