chore: initialize standalone business plugin repository

plugins/subscription-admin/ui/app.js

@@ -0,0 +1,170 @@
+(() => {
+  'use strict'
+
+  const state = {
+    csrf: '',
+    plans: [],
+    subscriptions: null,
+    subscriptionPage: 1,
+    subscriptionPageSize: 50,
+    captcha: { enabled: false, provider: '' }
+  }
+  const $ = (selector) => document.querySelector(selector)
+  const loginView = $('#login-view')
+  const appView = $('#app-view')
+  const loginForm = $('#login-form')
+  const basePath = (document.body.dataset.basePath || '').replace(/\/$/, '')
+  const route = (path) => `${basePath}${path}`
+
+  function showError(message, target = $('#app-error')) {
+    target.textContent = message || '请求失败'
+    target.hidden = !message
+  }
+  function clearError(target = $('#app-error')) { target.textContent = ''; target.hidden = true }
+
+  async function request(path, options = {}) {
+    const headers = new Headers(options.headers || {})
+    headers.set('Accept', 'application/json')
+    if (options.body && !headers.has('Content-Type')) headers.set('Content-Type', 'application/json')
+    if (state.csrf && options.method && options.method !== 'GET') headers.set('X-CSRF-Token', state.csrf)
+    const response = await fetch(route(path), { ...options, headers, credentials: 'same-origin' })
+    const payload = await response.json().catch(() => ({}))
+    if (!response.ok) {
+      if (response.status === 401) { state.csrf = ''; loginView.hidden = false; appView.hidden = true }
+      throw new Error(payload.error || '请求失败')
+    }
+    return payload
+  }
+
+  function unwrap(payload) { return payload && payload.code === 0 && Object.prototype.hasOwnProperty.call(payload, 'data') ? payload.data : payload }
+  function formatNumber(value) {
+    if (value === null || value === undefined || value === '') return '-'
+    const number = Number(value)
+    return Number.isFinite(number) ? number.toLocaleString('zh-CN', { maximumFractionDigits: 6 }) : String(value)
+  }
+  function formatDate(value) {
+    if (!value) return '-'
+    const date = new Date(value)
+    return Number.isNaN(date.getTime()) ? String(value) : date.toLocaleString('zh-CN', { dateStyle: 'medium', timeStyle: 'short' })
+  }
+  function escapeHTML(value) { return String(value ?? '').replace(/[&<>'"]/g, (character) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', "'": '&#39;', '"': '&quot;' }[character])) }
+  function statusLabel(value) { const safe = String(value || 'unknown'); return `<span class="pill pill-${safe.toLowerCase()}">${escapeHTML(safe)}</span>` }
+  function setView(name) {
+    document.querySelectorAll('.tab').forEach((button) => button.classList.toggle('active', button.dataset.view === name))
+    document.querySelectorAll('.view').forEach((view) => { view.hidden = view.id !== `view-${name}` })
+    if (name === 'plans' && !state.plans.length) loadPlans()
+    if (name === 'subscriptions' && !state.subscriptions) loadSubscriptions()
+    if (name === 'audit') loadAudit()
+  }
+
+  async function login(event) {
+    event.preventDefault(); clearError($('#login-error'))
+    const form = new FormData(loginForm); const button = loginForm.querySelector('button[type="submit"]'); button.disabled = true
+    try {
+      const captchaToken = String(form.get('captcha_token') || '').trim()
+      if (state.captcha.enabled && !captchaToken) throw new Error('请先完成安全验证并填写验证结果')
+      let payload = await request('/login', { method: 'POST', body: JSON.stringify({
+        email: form.get('email'),
+        password: form.get('password'),
+        turnstile_token: captchaToken || undefined,
+        tencent_captcha_ticket: state.captcha.provider === 'tencent' ? captchaToken || undefined : undefined,
+        tencent_captcha_randstr: state.captcha.provider === 'tencent' ? String(form.get('captcha_randstr') || '').trim() || undefined : undefined
+      }) })
+      if (payload.requires_2fa) {
+        const code = window.prompt('请输入管理员 2FA 验证码')
+        if (!code) throw new Error('需要 2FA 验证码')
+        payload = await request('/login/2fa', { method: 'POST', body: JSON.stringify({ pending_token: payload.pending_token, totp_code: code }) })
+      }
+      if (!payload.ok || !payload.csrf_token) throw new Error('登录响应无效')
+      state.csrf = payload.csrf_token; loginView.hidden = true; appView.hidden = false
+      const user = payload.user || {}; $('#operator').textContent = user.email || user.username || `管理员 #${user.id || '-'}`
+      await Promise.all([loadStatus(), loadOverview()])
+    } catch (error) { showError(error.message, $('#login-error')) } finally { button.disabled = false }
+  }
+
+  async function loadPlans() {
+    try { const payload = unwrap(await request('/api/plans')); state.plans = Array.isArray(payload) ? payload : []; $('#plan-count').textContent = formatNumber(state.plans.length); renderPlans(); return true }
+    catch (error) { showError(error.message); return false }
+  }
+  async function loadSubscriptions() {
+    try {
+      const params = new URLSearchParams(); const form = new FormData($('#subscription-filter'))
+      const userID = String(form.get('user_id') || '').trim(); const status = String(form.get('status') || '')
+      if (userID && !/^[1-9][0-9]*$/.test(userID)) throw new Error('用户 ID 必须是正整数')
+      let endpoint = '/api/subscriptions'
+      if (userID && !status) endpoint = `/api/users/${encodeURIComponent(userID)}/subscriptions`
+      if (endpoint === '/api/subscriptions') { if (userID) params.set('user_id', userID); if (status) params.set('status', status); params.set('page', String(state.subscriptionPage)); params.set('page_size', String(state.subscriptionPageSize)) }
+      const payload = unwrap(await request(`${endpoint}${params.toString() ? `?${params.toString()}` : ''}`)) || {}; state.subscriptions = payload
+      $('#subscription-count').textContent = formatNumber(Array.isArray(payload) ? payload.length : (payload.total ?? payload.items?.length ?? 0)); renderSubscriptions(payload); return true
+    } catch (error) { showError(error.message); return false }
+  }
+  async function loadHealth() { try { const response = await fetch(route('/healthz'), { credentials: 'same-origin', headers: { Accept: 'application/json' } }); return response.ok } catch { return false } }
+  async function loadOverview() {
+    clearError(); $('#sync-time').textContent = '同步中'
+    const results = await Promise.all([loadHealth(), loadPlans(), loadSubscriptions()])
+    const healthy = results.every(Boolean); const degraded = results.some(Boolean)
+    setCoreStatus(healthy ? 'ok' : degraded ? 'degraded' : 'bad')
+    $('#sync-time').textContent = degraded ? `最近同步：${formatDate(new Date().toISOString())}` : '同步失败'
+  }
+  async function loadAudit() { try { const payload = await request('/api/audit'); renderAudit(payload.items || []) } catch (error) { showError(error.message) } }
+  async function loadStatus() {
+    try { const payload = await request('/api/status'); $('#credential-status').textContent = payload.credential_state === 'server_managed' ? '服务端托管（不回显）' : '不可用' }
+    catch { $('#credential-status').textContent = '不可用' }
+  }
+  async function loadCaptchaConfig() {
+    try {
+      const payload = await request('/api/captcha-config'); state.captcha = payload
+      const panel = $('#captcha-panel')
+      if (!payload.enabled) { panel.hidden = true; return }
+      panel.hidden = false; $('#captcha-label').textContent = `${payload.provider || '安全'}验证`
+      const descriptions = { geetest: 'Core 已启用 GeeTest。请在官方验证组件完成挑战后，将返回的 JSON 验证结果粘贴到此处。', turnstile: 'Core 已启用 Cloudflare Turnstile。请完成挑战后填写返回的验证结果。', tencent: 'Core 已启用腾讯验证码。请填写 ticket，并在下方填写 randstr。', aliyun: 'Core 已启用阿里云验证码。请填写 captchaVerifyParam。' }
+      $('#captcha-help').textContent = descriptions[payload.provider] || '请完成 Core 配置的验证码后填写验证结果。'
+      $('#captcha-randstr-row').hidden = payload.provider !== 'tencent'
+    } catch { $('#captcha-panel').hidden = true }
+  }
+  async function loadBalance(userID) {
+    if (!/^[1-9][0-9]*$/.test(userID)) throw new Error('用户 ID 必须是正整数')
+    const payload = unwrap(await request(`/api/users/${encodeURIComponent(userID)}`)) || {}; $('#user-balance').textContent = formatNumber(payload.balance)
+  }
+  async function bootstrap() {
+    try {
+      const payload = await request('/api/me'); state.csrf = payload.csrf_token || ''
+      if (!state.csrf || !payload.user) throw new Error('session unavailable')
+      loginView.hidden = true; appView.hidden = false
+      const user = payload.user; $('#operator').textContent = user.email || user.username || `管理员 #${user.id || '-'}`
+      await Promise.all([loadCaptchaConfig(), loadStatus(), loadOverview()])
+    } catch { loginView.hidden = false; appView.hidden = true; await loadCaptchaConfig() }
+  }
+  function setCoreStatus(stateName) { const element = $('#core-status'); const labels = { ok: '已连接', degraded: '部分可用', bad: '不可用' }; element.textContent = labels[stateName] || '检查中'; element.className = `status ${stateName === 'ok' ? 'ok' : stateName === 'bad' ? 'bad' : ''}` }
+  function parseFeatures(features) { if (!features) return []; if (Array.isArray(features)) return features; if (typeof features !== 'string') return []; try { const parsed = JSON.parse(features); return Array.isArray(parsed) ? parsed : [] } catch { return features.split(/[,\n]/).map((item) => item.trim()).filter(Boolean) } }
+  function renderPlans() {
+    const container = $('#plans-list'); if (!state.plans.length) { container.innerHTML = '<p class="empty">暂无套餐数据</p>'; return }
+    container.innerHTML = state.plans.map((plan) => {
+      const groups = (plan.included_groups || []).map((group) => `<span class="tag">${escapeHTML(group.name || group.id)}</span>`).join('') || '<span class="muted">未返回分组</span>'
+      const features = parseFeatures(plan.features)
+      return `<article class="plan-card"><div class="card-heading"><div><h3>${escapeHTML(plan.name || plan.product_name || `套餐 #${plan.id}`)}</h3><p class="muted">${escapeHTML(plan.description || '')}</p></div>${plan.for_sale ? '<span class="pill pill-active">可售</span>' : '<span class="pill">下架</span>'}</div><div class="plan-price">${formatNumber(plan.price)} <small>${escapeHTML(plan.currency || '')}</small></div><dl class="facts"><div><dt>有效期</dt><dd>${formatNumber(plan.validity_days)} ${escapeHTML(plan.validity_unit || '天')}</dd></div><div><dt>周期额度</dt><dd>${formatNumber(plan.cycle_quota_usd)}</dd></div><div><dt>总额度</dt><dd>${formatNumber(plan.total_quota_usd)}</dd></div><div><dt>实例上限</dt><dd>${formatNumber(plan.max_subscriptions_per_user)}</dd></div></dl><div class="tags">${groups}</div>${features.length ? `<ul class="feature-list">${features.map((feature) => `<li>${escapeHTML(feature)}</li>`).join('')}</ul>` : ''}</article>`
+    }).join('')
+  }
+  function renderSubscriptions(payload) {
+    const container = $('#subscriptions-list'); const items = Array.isArray(payload) ? payload : (payload.items || []); const pagination = $('#subscription-pagination')
+    if (Array.isArray(payload) || !payload.pages) pagination.hidden = true
+    else { pagination.hidden = false; $('#subscription-page-info').textContent = `第 ${payload.page || state.subscriptionPage} / ${payload.pages} 页，共 ${formatNumber(payload.total)} 条`; $('#subscription-prev').disabled = (payload.page || state.subscriptionPage) <= 1; $('#subscription-next').disabled = (payload.page || state.subscriptionPage) >= payload.pages }
+    if (!items.length) { container.innerHTML = '<p class="empty">暂无订阅数据</p>'; return }
+    container.innerHTML = `<table><thead><tr><th>订阅实例</th><th>用户</th><th>套餐</th><th>状态</th><th>有效期</th><th>周期用量</th><th></th></tr></thead><tbody>${items.map((item) => `<tr><td><code>#${escapeHTML(item.id)}</code></td><td>${escapeHTML(item.user?.username || item.user?.email || item.user_id || '-')}</td><td>${escapeHTML(item.plan_name || item.plan_id || '-')}</td><td>${statusLabel(item.status)}</td><td>${formatDate(item.starts_at)}<br><span class="muted">至 ${formatDate(item.expires_at)}</span></td><td>${formatNumber(item.cycle_usage_usd)} / ${formatNumber(item.cycle_quota_usd)}</td><td><button class="link-button detail-button" data-id="${escapeHTML(item.id)}" type="button">详情</button></td></tr>`).join('')}</tbody></table>`
+    container.querySelectorAll('.detail-button').forEach((button) => button.addEventListener('click', () => showDetail(button.dataset.id)))
+  }
+  async function showDetail(id) { try { const payload = unwrap(await request(`/api/subscriptions/${encodeURIComponent(id)}`)); $('#detail-content').textContent = JSON.stringify(payload, null, 2); $('#detail-dialog').showModal() } catch (error) { showError(error.message) } }
+  function renderAudit(items) { const container = $('#audit-list'); if (!items.length) { container.innerHTML = '<p class="empty">暂无操作记录</p>'; return }; container.innerHTML = `<table><thead><tr><th>时间</th><th>动作</th><th>结果</th><th>用户 ID</th><th>请求 ID</th></tr></thead><tbody>${items.slice().reverse().map((item) => `<tr><td>${formatDate(item.time)}</td><td><code>${escapeHTML(item.action)}</code></td><td>${statusLabel(item.result)}</td><td>${escapeHTML(item.user_id ?? '-')}</td><td><code>${escapeHTML(item.request_id || '-')}</code></td></tr>`).join('')}</tbody></table>` }
+
+  loginForm.addEventListener('submit', login)
+  $('#logout').addEventListener('click', async () => { try { await request('/logout', { method: 'POST' }) } catch { /* session is cleared locally */ } state.csrf = ''; loginView.hidden = false; appView.hidden = true; loginForm.reset() })
+  $('#refresh-all').addEventListener('click', loadOverview)
+  $('#subscription-filter').addEventListener('submit', (event) => { event.preventDefault(); state.subscriptionPage = 1; state.subscriptions = null; loadSubscriptions() })
+  $('#subscription-prev').addEventListener('click', () => { if (state.subscriptionPage > 1) { state.subscriptionPage -= 1; loadSubscriptions() } })
+  $('#subscription-next').addEventListener('click', () => { const pages = Number(state.subscriptions?.pages || 0); if (state.subscriptionPage < pages) { state.subscriptionPage += 1; loadSubscriptions() } })
+  $('#balance-form').addEventListener('submit', async (event) => { event.preventDefault(); clearError(); const userID = String(new FormData(event.currentTarget).get('user_id') || '').trim(); try { await loadBalance(userID) } catch (error) { showError(error.message) } })
+  $('#close-detail').addEventListener('click', () => $('#detail-dialog').close())
+  document.querySelectorAll('.tab').forEach((button) => button.addEventListener('click', () => setView(button.dataset.view)))
+  document.querySelectorAll('.reload').forEach((button) => button.addEventListener('click', () => { if (button.dataset.target === 'plans') loadPlans(); if (button.dataset.target === 'subscriptions') { state.subscriptions = null; loadSubscriptions() }; if (button.dataset.target === 'audit') loadAudit() }))
+  void bootstrap()
+})()

plugins/subscription-admin/ui/embed.go

@@ -0,0 +1,9 @@
+package ui
+
+import "embed"
+
+// FS contains the static administrator UI shipped with the business plugin.
+// It is embedded so the service does not depend on a writable host directory.
+//
+//go:embed index.html app.js styles.css
+var FS embed.FS

plugins/subscription-admin/ui/index.html

@@ -0,0 +1,122 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="color-scheme" content="light dark">
+    <title>订阅管理插件</title>
+    <link rel="stylesheet" href="__PLUGIN_BASE_PATH__/styles.css">
+  </head>
+  <body data-base-path="__PLUGIN_BASE_PATH__">
+    <main class="shell">
+      <section id="login-view" class="auth-panel" aria-labelledby="login-title">
+        <div class="eyebrow">SUB2API EXTENSION</div>
+        <h1 id="login-title">订阅管理</h1>
+        <p class="muted">使用 Sub2API 管理员账号登录。普通用户没有访问权限。</p>
+        <form id="login-form" class="stack" autocomplete="on">
+          <label>
+            <span>管理员邮箱</span>
+            <input name="email" type="email" autocomplete="username" required maxlength="254">
+          </label>
+          <label>
+            <span>密码</span>
+            <input name="password" type="password" autocomplete="current-password" required maxlength="200">
+          </label>
+          <fieldset id="captcha-panel" class="captcha-panel" hidden>
+            <legend id="captcha-label">安全验证</legend>
+            <p id="captcha-help" class="muted"></p>
+            <label>
+              <span>验证结果</span>
+              <textarea name="captcha_token" rows="3" maxlength="8192" spellcheck="false" autocomplete="off"></textarea>
+            </label>
+            <label id="captcha-randstr-row" hidden>
+              <span>验证随机串</span>
+              <input name="captcha_randstr" maxlength="512" autocomplete="off">
+            </label>
+          </fieldset>
+          <button class="primary" type="submit">登录</button>
+          <p id="login-error" class="error" role="alert" hidden></p>
+        </form>
+      </section>
+
+      <section id="app-view" hidden>
+        <header class="topbar">
+          <div>
+            <div class="eyebrow">SUB2API EXTENSION</div>
+            <h1>订阅管理</h1>
+          </div>
+          <div class="top-actions">
+            <span id="operator" class="operator"></span>
+            <button id="logout" class="secondary" type="button">退出</button>
+          </div>
+        </header>
+
+        <nav class="tabs" aria-label="插件页面">
+          <button class="tab active" data-view="overview" type="button">概览</button>
+          <button class="tab" data-view="plans" type="button">套餐</button>
+          <button class="tab" data-view="subscriptions" type="button">用户订阅</button>
+          <button class="tab" data-view="audit" type="button">操作记录</button>
+          <button class="tab" data-view="settings" type="button">设置</button>
+        </nav>
+
+        <p id="app-error" class="error" role="alert" hidden></p>
+
+        <section id="view-overview" class="view stack">
+          <div class="section-heading"><div><h2>连接概览</h2><p class="muted">Core 是套餐、余额和订阅账本的唯一来源。</p></div><button id="refresh-all" class="secondary" type="button">刷新数据</button></div>
+          <div class="metric-grid">
+            <article class="metric"><span>插件状态</span><strong class="status ok">运行中</strong><small>独立服务 · 只读模式</small></article>
+            <article class="metric"><span>Core 连接</span><strong id="core-status" class="status">检查中</strong><small id="sync-time">尚未同步</small></article>
+            <article class="metric"><span>可售套餐</span><strong id="plan-count">-</strong><small>来自 Core 套餐目录</small></article>
+            <article class="metric"><span>订阅实例</span><strong id="subscription-count">-</strong><small>当前分页结果</small></article>
+            <article class="metric"><span>用户余额</span><strong id="user-balance">-</strong><small>选择用户后显示 Core 余额</small></article>
+          </div>
+          <form id="balance-form" class="filter-row balance-form">
+            <label><span>查询用户余额</span><input name="user_id" inputmode="numeric" pattern="[1-9][0-9]*" placeholder="用户 ID" required></label>
+            <button class="secondary" type="submit">查询余额</button>
+          </form>
+          <div class="notice"><strong>只读试验版</strong><span>余额购买、续费、撤销和外部支付尚未启用。页面不会提交任何写操作。</span></div>
+        </section>
+
+        <section id="view-plans" class="view" hidden>
+          <div class="section-heading"><div><h2>套餐目录</h2><p class="muted">展示 Core 当前返回的价格、额度和覆盖分组。</p></div><button class="secondary reload" data-target="plans" type="button">刷新</button></div>
+          <div id="plans-list" class="card-list"></div>
+        </section>
+
+        <section id="view-subscriptions" class="view" hidden>
+          <div class="section-heading"><div><h2>用户订阅</h2><p class="muted">每个订阅实例独立展示，支持同档位多实例。</p></div><button class="secondary reload" data-target="subscriptions" type="button">刷新</button></div>
+          <form id="subscription-filter" class="filter-row">
+            <label><span>用户 ID</span><input name="user_id" inputmode="numeric" pattern="[0-9]*"></label>
+            <label><span>状态</span><select name="status"><option value="">全部</option><option value="active">active</option><option value="expired">expired</option><option value="revoked">revoked</option></select></label>
+            <button class="secondary" type="submit">筛选</button>
+          </form>
+          <div id="subscriptions-list" class="table-wrap"></div>
+          <div id="subscription-pagination" class="pagination" hidden>
+            <span id="subscription-page-info" class="muted"></span>
+            <div><button id="subscription-prev" class="secondary" type="button">上一页</button><button id="subscription-next" class="secondary" type="button">下一页</button></div>
+          </div>
+        </section>
+
+        <section id="view-audit" class="view" hidden>
+          <div class="section-heading"><div><h2>操作记录</h2><p class="muted">仅记录插件会话和只读查询结果，不记录 token 或密码。</p></div><button class="secondary reload" data-target="audit" type="button">刷新</button></div>
+          <div id="audit-list" class="table-wrap"></div>
+        </section>
+
+        <section id="view-settings" class="view stack" hidden>
+          <div class="section-heading"><div><h2>插件设置</h2><p class="muted">部署参数由服务端环境变量管理，页面不提供 secret 编辑入口。</p></div></div>
+          <div class="settings-list">
+            <div><span>运行模式</span><strong>只读 V1</strong></div>
+            <div><span>Core API allowlist</span><strong>10 个固定端点</strong></div>
+            <div><span>会话存储</span><strong>进程内存（重启后需重新登录）</strong></div>
+            <div><span>Core 凭据</span><strong id="credential-status">检查中</strong></div>
+            <div><span>余额购买 / 续费 / 撤销</span><strong class="status">未启用</strong></div>
+          </div>
+        </section>
+      </section>
+    </main>
+    <dialog id="detail-dialog" class="detail-dialog">
+      <div class="dialog-heading"><h2>订阅详情</h2><button id="close-detail" class="icon-button" type="button" aria-label="关闭">×</button></div>
+      <pre id="detail-content"></pre>
+    </dialog>
+    <script src="__PLUGIN_BASE_PATH__/app.js" defer></script>
+  </body>
+</html>

plugins/subscription-admin/ui/styles.css

@@ -0,0 +1,103 @@
+:root { color-scheme: light dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #17202a; background: #f4f7fa; font-synthesis: none; }
+@media (prefers-color-scheme: dark) { :root { color: #edf2f7; background: #11161c; } }
+* { box-sizing: border-box; }
+[hidden] { display: none !important; }
+body { margin: 0; min-width: 320px; }
+button, input, select { font: inherit; }
+button { cursor: pointer; }
+button:disabled { cursor: wait; opacity: .6; }
+.shell { width: min(1160px, calc(100% - 32px)); margin: 0 auto; padding: 32px 0 64px; }
+.auth-panel { width: min(440px, 100%); margin: 10vh auto 0; padding: 32px; border: 1px solid #dce4eb; border-radius: 10px; background: #fff; box-shadow: 0 12px 36px rgb(20 38 56 / 8%); }
+@media (prefers-color-scheme: dark) { .auth-panel, .metric, .plan-card, .notice, table, .detail-dialog { background: #18212b; border-color: #2b3947; } }
+h1, h2, h3, p { margin: 0; }
+h1 { margin-top: 6px; font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: 0; }
+h2 { font-size: 1.2rem; }
+h3 { font-size: 1rem; }
+.eyebrow { color: #3977a9; font-size: .7rem; font-weight: 700; letter-spacing: .08em; }
+.muted { color: #647384; font-size: .86rem; line-height: 1.5; }
+@media (prefers-color-scheme: dark) { .muted { color: #a8b5c2; } }
+.stack { display: grid; gap: 18px; }
+form.stack { margin-top: 26px; }
+label { display: grid; gap: 7px; color: #4f6070; font-size: .82rem; font-weight: 600; }
+input, select, textarea { width: 100%; height: 36px; padding: 0 10px; border: 1px solid #cbd7e1; border-radius: 5px; color: inherit; background: transparent; outline: none; }
+textarea { height: auto; min-height: 72px; padding: 8px 10px; resize: vertical; font: .78rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
+input:focus, select:focus { border-color: #3977a9; box-shadow: 0 0 0 3px rgb(57 119 169 / 17%); }
+button { min-height: 36px; border-radius: 5px; border: 1px solid transparent; padding: 0 14px; }
+.primary { color: white; background: #3977a9; }
+.primary:hover { background: #2e628e; }
+.secondary { color: #2d536f; background: transparent; border-color: #b9c9d7; }
+.secondary:hover { background: rgb(57 119 169 / 8%); }
+.topbar, .section-heading, .card-heading, .top-actions, .filter-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
+.topbar { padding-bottom: 24px; border-bottom: 1px solid #d8e1e9; }
+.top-actions { flex-wrap: wrap; justify-content: flex-end; }
+.operator { max-width: 260px; overflow: hidden; color: #647384; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
+.tabs { display: flex; gap: 6px; overflow-x: auto; padding: 18px 0; border-bottom: 1px solid #d8e1e9; }
+.tab { color: #647384; background: transparent; border: 0; white-space: nowrap; }
+.tab.active { color: #3977a9; box-shadow: inset 0 -2px #3977a9; }
+.view { padding-top: 28px; }
+.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
+.metric { min-height: 122px; display: grid; align-content: space-between; gap: 8px; padding: 18px; border: 1px solid #dce4eb; border-radius: 8px; background: #fff; }
+.metric > span { color: #647384; font-size: .82rem; }
+.metric strong { font-size: 1.55rem; font-variant-numeric: tabular-nums; }
+.metric small { color: #7b8996; font-size: .75rem; }
+.status { color: #647384; }
+.status.ok { color: #2f8b5c; }
+.status.bad { color: #c14f4f; }
+.notice { display: flex; gap: 12px; align-items: baseline; padding: 14px 16px; border: 1px solid #c6dce9; border-left: 3px solid #3977a9; border-radius: 6px; background: #fff; font-size: .86rem; }
+.card-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
+.plan-card { display: grid; gap: 15px; padding: 20px; border: 1px solid #dce4eb; border-radius: 8px; background: #fff; }
+.plan-price { color: #3977a9; font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
+.plan-price small { color: #647384; font-size: .8rem; font-weight: 500; }
+.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
+.facts div { padding: 10px; border-radius: 5px; background: rgb(100 115 132 / 8%); }
+.facts dt { color: #647384; font-size: .72rem; }
+.facts dd { margin: 4px 0 0; font-size: .86rem; font-variant-numeric: tabular-nums; }
+.tags { display: flex; flex-wrap: wrap; gap: 6px; }
+.tag, .pill { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 99px; font-size: .72rem; white-space: nowrap; }
+.tag { color: #3977a9; background: rgb(57 119 169 / 11%); }
+.pill { color: #647384; background: rgb(100 115 132 / 12%); }
+.pill-active, .pill-success { color: #2f8b5c; background: rgb(47 139 92 / 13%); }
+.pill-expired, .pill-revoked, .pill-failed, .pill-bad { color: #bd5050; background: rgb(189 80 80 / 13%); }
+.feature-list { display: grid; gap: 5px; margin: 0; padding-left: 18px; color: #647384; font-size: .82rem; }
+.filter-row { justify-content: flex-start; flex-wrap: wrap; margin-top: 18px; }
+.filter-row label { width: min(220px, 100%); }
+.balance-form { margin-top: 16px; }
+.captcha-panel { display: grid; gap: 10px; margin: 2px 0 0; padding: 12px; border: 1px solid #dce4eb; border-radius: 6px; }
+.captcha-panel legend { padding: 0 4px; color: #4f6070; font-size: .82rem; font-weight: 600; }
+.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
+.pagination > div { display: flex; gap: 8px; }
+.settings-list { display: grid; gap: 1px; overflow: hidden; border: 1px solid #dce4eb; border-radius: 8px; background: #dce4eb; }
+.settings-list > div { display: flex; justify-content: space-between; gap: 18px; padding: 15px 16px; background: #fff; font-size: .84rem; }
+.settings-list strong { font-weight: 600; text-align: right; }
+@media (prefers-color-scheme: dark) { .settings-list { border-color: #2b3947; background: #2b3947; } .settings-list > div { background: #18212b; } }
+.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 18px; border: 1px solid #dce4eb; border-radius: 8px; }
+table { width: 100%; min-width: 760px; border-collapse: collapse; background: #fff; }
+th, td { padding: 13px 14px; border-bottom: 1px solid #e2e8ee; text-align: left; vertical-align: top; font-size: .82rem; white-space: nowrap; }
+th { color: #647384; font-size: .74rem; font-weight: 600; background: rgb(100 115 132 / 6%); }
+tr:last-child td { border-bottom: 0; }
+code { color: #3977a9; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; }
+.link-button { min-height: 28px; padding: 0; color: #3977a9; background: transparent; border: 0; }
+.empty { padding: 32px; color: #647384; text-align: center; }
+.error { color: #b84d4d; font-size: .84rem; }
+.detail-dialog { width: min(720px, calc(100% - 28px)); max-height: min(700px, calc(100dvh - 28px)); padding: 0; border: 1px solid #dce4eb; border-radius: 8px; color: inherit; background: #fff; }
+.detail-dialog::backdrop { background: rgb(15 27 39 / 42%); }
+.dialog-heading { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid #dce4eb; }
+.icon-button { width: 32px; min-height: 32px; padding: 0; color: #647384; background: transparent; border: 0; font-size: 1.3rem; }
+pre { max-height: 580px; overflow: auto; margin: 0; padding: 18px; font: .76rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
+@media (max-width: 760px) {
+  .shell { width: min(100% - 20px, 600px); padding-top: 18px; }
+  .auth-panel { margin-top: 4vh; padding: 22px; }
+  .topbar, .section-heading { align-items: flex-start; flex-direction: column; }
+  .top-actions { width: 100%; justify-content: space-between; }
+  .metric-grid, .card-list { grid-template-columns: 1fr; }
+  .metric { min-height: 104px; }
+  .notice { align-items: flex-start; flex-direction: column; gap: 5px; }
+  .filter-row { align-items: stretch; flex-direction: column; }
+  .filter-row label { width: 100%; }
+  .filter-row button { width: 100%; }
+  .pagination { align-items: stretch; flex-direction: column; }
+  .pagination > div { width: 100%; }
+  .pagination button { flex: 1; }
+  .settings-list > div { align-items: flex-start; flex-direction: column; gap: 5px; }
+  .settings-list strong { text-align: left; }
+}