Initial release: install, uninstall, SmartDNS, web UI

Co-authored-by: Cursor <cursoragent@cursor.com>

www/app.js

@@ -0,0 +1,238 @@
+(function () {
+  const API = '/api';
+  const TOKEN_KEY = 'ksd_token';
+
+  const TITLES = {
+    dashboard: 'Обзор',
+    domains: 'Домены',
+    upstreams: 'Upstream-профили',
+    test: 'Проверка DNS',
+    settings: 'Настройки',
+  };
+
+  let state = { domains: [], status: null, yaml: '' };
+  let selectedUpstream = null;
+
+  function token() {
+    return localStorage.getItem(TOKEN_KEY) || '';
+  }
+
+  function headers() {
+    const h = { Accept: 'application/json' };
+    const t = token();
+    if (t) h.Authorization = 'Bearer ' + t;
+    return h;
+  }
+
+  async function api(path, opts = {}) {
+    const res = await fetch(API + path, {
+      ...opts,
+      headers: { ...headers(), ...(opts.headers || {}) },
+    });
+    if (res.status === 401) {
+      document.getElementById('auth-gate').classList.remove('hidden');
+      throw new Error('unauthorized');
+    }
+    const text = await res.text();
+    try {
+      return JSON.parse(text);
+    } catch {
+      return { ok: false, raw: text };
+    }
+  }
+
+  function toast(msg) {
+    const t = document.getElementById('toast');
+    t.textContent = '✓ ' + msg;
+    t.classList.add('show');
+    setTimeout(() => t.classList.remove('show'), 2800);
+  }
+
+  function setStatusBadge(running) {
+    const el = document.getElementById('status-badge');
+    el.textContent = running ? 'SmartDNS работает' : 'SmartDNS остановлен';
+    el.className = 'badge badge-dot ' + (running ? 'badge-running' : 'badge-stopped');
+  }
+
+  async function refreshStatus() {
+    const s = await api('/status');
+    state.status = s;
+    const running = s.smartdns && s.smartdns.running;
+    setStatusBadge(running);
+    document.getElementById('stat-status').textContent = running ? 'Работает' : 'Остановлен';
+    document.getElementById('stat-status').style.color = running ? 'var(--success)' : 'var(--danger)';
+    document.getElementById('stat-pid').textContent = 'PID ' + (s.smartdns?.pid || '—');
+    document.getElementById('stat-domains').textContent = s.domains ?? '—';
+    document.getElementById('stat-url').textContent = s.url || '—';
+    document.getElementById('topbar-sub').textContent = s.url ? s.url.replace('http://', '') + ' · lighttpd + CGI' : 'Keenetic Split DNS';
+    if (s.web_port) document.getElementById('sidebar-port').textContent = s.web_port;
+  }
+
+  async function refreshDomains() {
+    const d = await api('/domains');
+    state.domains = d.domains || [];
+    renderDomainsTable();
+    renderUpstreams();
+    const ups = new Set(state.domains.map((x) => x.upstream));
+    document.getElementById('stat-upstreams').textContent = ups.size;
+    document.getElementById('stat-upstream-names').textContent = [...ups].join(', ') || '—';
+  }
+
+  function renderDomainsTable(filter = '') {
+    const tbody = document.querySelector('#domains-table tbody');
+    const q = filter.toLowerCase();
+    tbody.innerHTML = state.domains
+      .filter((x) => !q || x.domain.includes(q))
+      .map(
+        (x) =>
+          `<tr><td><code>${esc(x.domain)}</code></td><td>${esc(x.group)}</td><td><span class="badge-policy">${esc(x.upstream)}</span></td></tr>`
+      )
+      .join('');
+  }
+
+  function renderUpstreams() {
+    const ups = [...new Set(state.domains.map((x) => x.upstream))];
+    const defaultUp = 'isp-default';
+    if (!ups.includes(defaultUp)) ups.push(defaultUp);
+    const list = document.getElementById('upstream-list');
+    list.innerHTML = ups
+      .map(
+        (u) =>
+          `<li data-up="${esc(u)}" class="${u === selectedUpstream ? 'active' : ''}"><code>${esc(u)}</code></li>`
+      )
+      .join('');
+    list.querySelectorAll('li').forEach((li) => {
+      li.addEventListener('click', () => selectUpstream(li.dataset.up));
+    });
+    if (!selectedUpstream && ups.length) selectUpstream(ups[0]);
+  }
+
+  function selectUpstream(id) {
+    selectedUpstream = id;
+    document.querySelectorAll('#upstream-list li').forEach((li) => {
+      li.classList.toggle('active', li.dataset.up === id);
+    });
+    document.getElementById('upstream-detail-title').textContent = id + ' — домены';
+    const rows = state.domains.filter((x) => x.upstream === id);
+    document.getElementById('upstream-domains-tbody').innerHTML = rows
+      .map((x) => `<tr><td><code>${esc(x.domain)}</code></td><td>${esc(x.group)}</td></tr>`)
+      .join('') || '<tr><td colspan="2" class="hint">Нет доменов (остальной трафик — default upstream)</td></tr>';
+    document.getElementById('upstream-detail-body').innerHTML =
+      '<p class="hint">Профили задаются в config.yaml → upstreams. Домены группы ru-services используют yandex-dot по умолчанию.</p>';
+  }
+
+  async function loadConfigYaml() {
+    const res = await fetch(API + '/config', { headers: headers() });
+    if (res.status === 401) {
+      document.getElementById('auth-gate').classList.remove('hidden');
+      return;
+    }
+    state.yaml = await res.text();
+    document.getElementById('config-yaml').value = state.yaml;
+  }
+
+  async function applyConfig() {
+    await api('/reload', { method: 'POST' });
+    toast('Конфиг применён, SmartDNS перезагружен');
+    await refreshAll();
+  }
+
+  async function saveConfig() {
+    const yaml = document.getElementById('config-yaml').value;
+    await api('/config', {
+      method: 'POST',
+      headers: { 'Content-Type': 'text/plain' },
+      body: yaml,
+    });
+    toast('YAML сохранён — нажмите Применить');
+  }
+
+  async function runTest() {
+    const domain = document.getElementById('test-domain').value.trim() || 'vk.com';
+    const type = document.getElementById('test-type').value;
+    const r = await api('/test?domain=' + encodeURIComponent(domain) + '&type=' + type);
+    const out = document.getElementById('test-output');
+    if (r.output) {
+      out.textContent = r.output.replace(/\\n/g, '\n');
+      document.getElementById('test-latency').textContent = (r.ms || '—') + ' ms';
+    } else {
+      out.textContent = JSON.stringify(r, null, 2);
+    }
+  }
+
+  function esc(s) {
+    return String(s)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/"/g, '&quot;');
+  }
+
+  async function refreshAll() {
+    await refreshStatus();
+    await refreshDomains();
+  }
+
+  // Nav
+  document.querySelectorAll('.nav-item').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const tab = btn.dataset.tab;
+      document.querySelectorAll('.nav-item').forEach((b) => b.classList.remove('active'));
+      document.querySelectorAll('.panel').forEach((p) => p.classList.remove('active'));
+      btn.classList.add('active');
+      document.getElementById('panel-' + tab).classList.add('active');
+      document.getElementById('page-title').textContent = TITLES[tab];
+      if (tab === 'settings') loadConfigYaml();
+    });
+  });
+
+  document.getElementById('domain-search')?.addEventListener('input', (e) => renderDomainsTable(e.target.value));
+  document.getElementById('theme-btn').addEventListener('click', () => {
+    const html = document.documentElement;
+    html.dataset.theme = html.dataset.theme === 'dark' ? 'light' : 'dark';
+  });
+
+  ['apply-top', 'apply-settings'].forEach((id) => {
+    document.getElementById(id)?.addEventListener('click', () => applyConfig().catch((e) => toast(e.message)));
+  });
+
+  document.getElementById('save-config')?.addEventListener('click', () => saveConfig().catch((e) => toast(e.message)));
+  document.getElementById('run-test')?.addEventListener('click', () => runTest().catch((e) => toast(e.message)));
+  document.querySelectorAll('.quick-test').forEach((b) => {
+    b.addEventListener('click', () => {
+      document.getElementById('test-domain').value = b.dataset.d;
+      runTest();
+    });
+  });
+
+  document.getElementById('auth-save')?.addEventListener('click', () => {
+    const v = document.getElementById('auth-token-input').value.trim();
+    if (v) {
+      localStorage.setItem(TOKEN_KEY, v);
+      document.getElementById('auth-gate').classList.add('hidden');
+      refreshAll();
+    }
+  });
+
+  document.getElementById('save-token')?.addEventListener('click', () => {
+    const v = document.getElementById('settings-token').value.trim();
+    if (v) {
+      localStorage.setItem(TOKEN_KEY, v);
+      toast('Токен сохранён');
+    }
+  });
+
+  document.getElementById('btn-export-domains')?.addEventListener('click', () => {
+    const text = state.domains.map((x) => x.domain).join('\n');
+    const a = document.createElement('a');
+    a.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(text);
+    a.download = 'domains.txt';
+    a.click();
+  });
+
+  // Init
+  if (token()) {
+    document.getElementById('auth-gate').classList.add('hidden');
+    document.getElementById('settings-token').value = token();
+  }
+  refreshAll().catch(() => {});
+})();

www/index.html

@@ -0,0 +1,202 @@
+<!DOCTYPE html>
+<html lang="ru" data-theme="dark">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Keenetic Split DNS</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div id="auth-gate" class="auth-gate">
+    <div class="card auth-card">
+      <div class="card-header"><h3>Токен API</h3></div>
+      <p class="hint" style="margin-bottom:12px">Токен из <code>/opt/etc/keenetic-split-dns/token</code> (показан при установке)</p>
+      <div class="form-group">
+        <label>Bearer token</label>
+        <input type="password" id="auth-token-input" placeholder="вставьте токен">
+      </div>
+      <button class="btn btn-primary" id="auth-save" style="width:100%">Войти</button>
+    </div>
+  </div>
+
+  <div class="app">
+    <aside class="sidebar">
+      <div class="logo">
+        <div class="logo-icon">⚡</div>
+        <div>
+          <h1>Split DNS</h1>
+          <span>SmartDNS · Keenetic</span>
+        </div>
+      </div>
+      <nav class="nav">
+        <button class="nav-item active" data-tab="dashboard">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
+          Обзор
+        </button>
+        <button class="nav-item" data-tab="upstreams">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4"/></svg>
+          Upstream
+        </button>
+        <button class="nav-item" data-tab="domains">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/></svg>
+          Домены
+        </button>
+        <button class="nav-item" data-tab="test">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11l3 3L22 4"/></svg>
+          Проверка
+        </button>
+        <button class="nav-item" data-tab="settings">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/></svg>
+          Настройки
+        </button>
+      </nav>
+      <div class="sidebar-footer">
+        <div>Конфиг: <code>/opt/etc/keenetic-split-dns/</code></div>
+        <div style="margin-top:6px">Порт: <code id="sidebar-port">3200</code></div>
+      </div>
+    </aside>
+
+    <div class="main">
+      <header class="topbar">
+        <div class="topbar-left">
+          <h2 id="page-title">Обзор</h2>
+          <p id="topbar-sub">Загрузка…</p>
+        </div>
+        <div class="topbar-actions">
+          <span class="badge badge-running badge-dot" id="status-badge">SmartDNS</span>
+          <button class="btn btn-icon" id="theme-btn" title="Тема">🌓</button>
+          <button class="btn btn-success" id="apply-top">Применить</button>
+        </div>
+      </header>
+
+      <div class="content">
+        <section class="panel active" id="panel-dashboard">
+          <div class="grid grid-4" style="margin-bottom:20px">
+            <div class="card">
+              <div class="card-header"><span class="stat-label">Статус</span><span class="stat-icon" style="background:var(--success-bg)">✓</span></div>
+              <div class="stat-value" id="stat-status" style="font-size:18px">—</div>
+              <div class="stat-label" id="stat-pid">PID —</div>
+            </div>
+            <div class="card">
+              <div class="card-header"><span class="stat-label">Домены</span><span class="stat-icon" style="background:var(--info-bg)">🌐</span></div>
+              <div class="stat-value" id="stat-domains">—</div>
+              <div class="stat-label">в списках split-DNS</div>
+            </div>
+            <div class="card">
+              <div class="card-header"><span class="stat-label">Upstream</span><span class="stat-icon" style="background:var(--warning-bg)">🔗</span></div>
+              <div class="stat-value" id="stat-upstreams">—</div>
+              <div class="stat-label" id="stat-upstream-names">—</div>
+            </div>
+            <div class="card">
+              <div class="card-header"><span class="stat-label">Веб-UI</span><span class="stat-icon" style="background:var(--accent-dim)">🖥</span></div>
+              <div class="stat-value" style="font-size:16px" id="stat-url">—</div>
+              <div class="stat-label">только LAN</div>
+            </div>
+          </div>
+          <div class="card">
+            <div class="card-header"><h3>Журнал</h3></div>
+            <div id="log-container"><div class="log-line"><span class="log-time">—</span> Загрузка…</div></div>
+          </div>
+        </section>
+
+        <section class="panel" id="panel-upstreams">
+          <div class="toolbar">
+            <button class="btn btn-primary" id="btn-add-upstream">+ Профиль upstream</button>
+          </div>
+          <div class="master-detail">
+            <div class="card">
+              <div class="card-header"><h3>Профили</h3></div>
+              <ul class="upstream-list" id="upstream-list"></ul>
+            </div>
+            <div class="card" id="upstream-detail">
+              <div class="card-header"><h3 id="upstream-detail-title">Выберите профиль</h3></div>
+              <div id="upstream-detail-body"><p class="hint">Слева — upstream, справа — домены группы с этой политикой.</p></div>
+              <div class="table-wrap" style="margin-top:16px" id="upstream-domains-wrap">
+                <table><thead><tr><th>Домен</th><th>Группа</th></tr></thead><tbody id="upstream-domains-tbody"></tbody></table>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section class="panel" id="panel-domains">
+          <div class="toolbar">
+            <div class="search-box">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
+              <input type="search" placeholder="Поиск домена…" id="domain-search">
+            </div>
+            <button class="btn" id="btn-export-domains">Экспорт списка</button>
+          </div>
+          <div class="card" style="padding:0;overflow:hidden">
+            <div class="table-wrap" style="border:none">
+              <table id="domains-table">
+                <thead><tr><th>Домен</th><th>Группа</th><th>Upstream</th></tr></thead>
+                <tbody></tbody>
+              </table>
+            </div>
+          </div>
+        </section>
+
+        <section class="panel" id="panel-test">
+          <div class="card">
+            <div class="card-header"><h3>Проверка DNS-запроса</h3></div>
+            <div class="toolbar" style="margin-bottom:0">
+              <div class="form-group" style="flex:1;margin:0">
+                <input type="text" id="test-domain" value="vk.com">
+              </div>
+              <select id="test-type">
+                <option>A</option>
+                <option>AAAA</option>
+              </select>
+              <button class="btn btn-primary" id="run-test">Выполнить</button>
+            </div>
+            <pre class="test-result" id="test-output"># Нажмите «Выполнить»</pre>
+          </div>
+          <div class="grid grid-3" style="margin-top:16px">
+            <div class="card">
+              <div class="stat-label">Быстрые тесты</div>
+              <div style="margin-top:10px;display:flex;flex-wrap:wrap;gap:6px">
+                <button class="btn btn-sm quick-test" data-d="yandex.ru">yandex.ru</button>
+                <button class="btn btn-sm quick-test" data-d="vk.com">vk.com</button>
+                <button class="btn btn-sm quick-test" data-d="google.com">google.com</button>
+              </div>
+            </div>
+            <div class="card">
+              <div class="stat-label">Время ответа</div>
+              <div class="stat-value" style="font-size:20px" id="test-latency">—</div>
+            </div>
+          </div>
+        </section>
+
+        <section class="panel" id="panel-settings">
+          <div class="apply-banner">
+            <div>
+              <p><strong>Применить конфигурацию</strong> — YAML → SmartDNS + перезагрузка</p>
+            </div>
+            <button class="btn btn-primary" id="apply-settings">⚡ Применить</button>
+          </div>
+          <div class="grid grid-2">
+            <div class="card">
+              <div class="card-header"><h3>Токен API</h3></div>
+              <div class="form-group">
+                <label>Текущий токен (localStorage)</label>
+                <input type="password" id="settings-token">
+              </div>
+              <button class="btn" id="save-token">Сохранить токен</button>
+            </div>
+            <div class="card">
+              <div class="card-header"><h3>Конфиг YAML</h3></div>
+              <div class="form-group">
+                <textarea id="config-yaml" style="min-height:240px"></textarea>
+              </div>
+              <button class="btn btn-primary" id="save-config">Сохранить YAML</button>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  </div>
+
+  <div class="toast" id="toast">✓ Готово</div>
+  <script src="app.js"></script>
+</body>
+</html>

www/style.css

@@ -0,0 +1,337 @@
+:root {
+  --accent: #f5a623;
+  --accent-dim: rgba(245, 166, 35, 0.15);
+  --bg: #0f1114;
+  --bg-elevated: #181b20;
+  --bg-card: #1e2229;
+  --border: #2a3038;
+  --text: #e8eaed;
+  --text-muted: #8b939e;
+  --success: #3dd68c;
+  --success-bg: rgba(61, 214, 140, 0.12);
+  --danger: #f07178;
+  --danger-bg: rgba(240, 113, 120, 0.12);
+  --warning: #f5a623;
+  --warning-bg: rgba(245, 166, 35, 0.12);
+  --info: #6cb6ff;
+  --info-bg: rgba(108, 182, 255, 0.12);
+  --shadow: 0 4px 24px rgba(0,0,0,0.4);
+  --radius: 10px;
+  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --mono: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
+}
+[data-theme="light"] {
+  --bg: #f4f5f7;
+  --bg-elevated: #ffffff;
+  --bg-card: #ffffff;
+  --border: #dde1e6;
+  --text: #1a1d21;
+  --text-muted: #5c6570;
+  --shadow: 0 4px 20px rgba(0,0,0,0.08);
+  --success-bg: rgba(34, 160, 107, 0.1);
+  --danger-bg: rgba(220, 53, 69, 0.1);
+  --warning-bg: rgba(245, 166, 35, 0.12);
+  --info-bg: rgba(13, 110, 253, 0.08);
+}
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body {
+  font-family: var(--font);
+  background: var(--bg);
+  color: var(--text);
+  min-height: 100vh;
+  line-height: 1.5;
+}
+.app { display: flex; min-height: 100vh; }
+.sidebar {
+  width: 240px;
+  background: var(--bg-elevated);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+.logo {
+  padding: 20px 18px;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.logo-icon {
+  width: 36px; height: 36px;
+  background: linear-gradient(135deg, var(--accent), #e07800);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+}
+.logo h1 { font-size: 15px; font-weight: 600; }
+.logo span { font-size: 11px; color: var(--text-muted); display: block; }
+.nav { padding: 12px 8px; flex: 1; }
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  color: var(--text-muted);
+  font-size: 14px;
+  border: none;
+  background: none;
+  width: 100%;
+  text-align: left;
+  transition: all 0.15s;
+}
+.nav-item:hover { background: var(--accent-dim); color: var(--text); }
+.nav-item.active { background: var(--accent-dim); color: var(--accent); font-weight: 500; }
+.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.85; }
+.sidebar-footer {
+  padding: 14px 18px;
+  border-top: 1px solid var(--border);
+  font-size: 11px;
+  color: var(--text-muted);
+}
+.sidebar-footer code { font-family: var(--mono); font-size: 10px; color: var(--accent); }
+.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 24px;
+  background: var(--bg-elevated);
+  border-bottom: 1px solid var(--border);
+  gap: 16px;
+}
+.topbar-left h2 { font-size: 18px; font-weight: 600; }
+.topbar-left p { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
+.topbar-actions { display: flex; align-items: center; gap: 10px; }
+.content { padding: 24px; flex: 1; overflow-y: auto; }
+.panel { display: none; animation: fadeIn 0.2s ease; }
+.panel.active { display: block; }
+@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  color: var(--text);
+  transition: all 0.15s;
+}
+.btn:hover { border-color: var(--text-muted); }
+.btn-primary { background: var(--accent); border-color: var(--accent); color: #1a1d21; }
+.btn-primary:hover { filter: brightness(1.08); }
+.btn-success { background: var(--success); border-color: var(--success); color: #0a1a12; }
+.btn-ghost { background: transparent; }
+.btn-sm { padding: 5px 10px; font-size: 12px; }
+.btn-icon { padding: 8px; }
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 10px;
+  border-radius: 20px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+.badge-running { background: var(--success-bg); color: var(--success); }
+.badge-stopped { background: var(--danger-bg); color: var(--danger); }
+.badge-dot::before {
+  content: "";
+  width: 6px; height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+}
+.badge-running.badge-dot::before { animation: pulse 2s infinite; }
+@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
+.badge-policy { background: var(--info-bg); color: var(--info); font-size: 11px; text-transform: none; letter-spacing: 0; font-weight: 500; padding: 2px 8px; border-radius: 4px; }
+.grid { display: grid; gap: 16px; }
+.grid-4 { grid-template-columns: repeat(4, 1fr); }
+.grid-3 { grid-template-columns: repeat(3, 1fr); }
+.grid-2 { grid-template-columns: repeat(2, 1fr); }
+@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
+@media (max-width: 700px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } .sidebar { display: none; } }
+.card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 18px;
+  box-shadow: var(--shadow);
+}
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 14px;
+}
+.card-header h3 { font-size: 14px; font-weight: 600; }
+.stat-value { font-size: 28px; font-weight: 700; line-height: 1.2; }
+.stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
+.stat-icon {
+  width: 40px; height: 40px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+}
+.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); }
+table { width: 100%; border-collapse: collapse; font-size: 13px; }
+th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); }
+th { background: var(--bg-elevated); color: var(--text-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
+tr:last-child td { border-bottom: none; }
+tr:hover td { background: var(--accent-dim); }
+td code { font-family: var(--mono); font-size: 12px; color: var(--info); }
+.row-actions { display: flex; gap: 4px; }
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+  margin-bottom: 16px;
+}
+.search-box {
+  flex: 1;
+  min-width: 200px;
+  position: relative;
+}
+.search-box input {
+  width: 100%;
+  padding: 8px 12px 8px 36px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg-elevated);
+  color: var(--text);
+  font-size: 13px;
+}
+.search-box input:focus { outline: none; border-color: var(--accent); }
+.search-box svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-muted); }
+.form-group { margin-bottom: 14px; }
+.form-group label { display: block; font-size: 12px; font-weight: 500; color: var(--text-muted); margin-bottom: 5px; }
+.form-group input, .form-group select, .form-group textarea {
+  width: 100%;
+  padding: 9px 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg-elevated);
+  color: var(--text);
+  font-size: 13px;
+  font-family: inherit;
+}
+.form-group textarea { min-height: 100px; font-family: var(--mono); font-size: 12px; resize: vertical; }
+.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+.hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
+.test-result {
+  margin-top: 16px;
+  padding: 16px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  font-family: var(--mono);
+  font-size: 12px;
+  line-height: 1.7;
+  white-space: pre-wrap;
+}
+.test-result .ok { color: var(--success); }
+.test-result .meta { color: var(--text-muted); }
+.modal-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.55);
+  z-index: 100;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+.modal-overlay.open { display: flex; }
+.modal {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  width: 100%;
+  max-width: 480px;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: var(--shadow);
+}
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 18px;
+  border-bottom: 1px solid var(--border);
+}
+.modal-header h3 { font-size: 16px; }
+.modal-body { padding: 18px; }
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 14px 18px;
+  border-top: 1px solid var(--border);
+}
+.toast {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  padding: 12px 18px;
+  background: var(--bg-card);
+  border: 1px solid var(--success);
+  border-radius: 8px;
+  font-size: 13px;
+  box-shadow: var(--shadow);
+  display: none;
+  z-index: 200;
+  animation: slideUp 0.3s ease;
+}
+.toast.show { display: block; }
+@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } }
+.apply-banner {
+  background: linear-gradient(90deg, var(--accent-dim), transparent);
+  border: 1px solid var(--accent);
+  border-radius: var(--radius);
+  padding: 16px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+.apply-banner p { font-size: 13px; }
+.apply-banner strong { color: var(--accent); }
+.split-layout { display: grid; grid-template-columns: 1fr 320px; gap: 16px; }
+.master-detail { display: grid; grid-template-columns: 280px 1fr; gap: 16px; min-height: 360px; }
+.upstream-list { list-style: none; }
+.upstream-list li {
+  padding: 10px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  margin-bottom: 4px;
+  border: 1px solid transparent;
+}
+.upstream-list li:hover { background: var(--accent-dim); }
+.upstream-list li.active { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); }
+.log-line { font-family: var(--mono); font-size: 11px; color: var(--text-muted); padding: 4px 0; border-bottom: 1px solid var(--border); }
+.log-line:last-child { border: none; }
+.log-time { color: var(--accent); margin-right: 8px; }
+.auth-gate {
+  position: fixed;
+  inset: 0;
+  background: var(--bg);
+  z-index: 500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.auth-gate.hidden { display: none; }
+.auth-card { max-width: 400px; width: 100%; }