Add sen:// subscription with master keys

A master key is a sen:// link with a device limit. Each device
generates its own WireGuard keypair and registers only the public key,
then polls a signed /sub/v1/config, so params and generation changes
reach users without re-importing a key.

- awg-ctrl: peers table and /api/peers*, /api/profile; nextIp and
  rebuildConf take peers into account (output unchanged without them)
- awg-ui: link codec and signatures (sen.ts), registry, panel routes
  and the public listener on SUB_PORT (sub.ts)
- responses are always Ed25519-signed; TLS with a pinned self-signed
  certificate is optional
- devices report a client version, shown as platform-version
- "Мастер-ключи" tab: a table with the devices nested under each key,
  a device-limit meter, per-key settings and a placeholder for the
  servers a key serves; cards on mobile
- install.sh/CLI: subscription signing key, optional certificate, port;
  kept across reinstalls with KEEP_DATA
- add the missing mock-server.ts used by npm run dev:mock

awg-ui/src/App.css

@@ -24,6 +24,7 @@ html, body, #root { height: 100%; }
     --success-bg:   #c0dd97; --success-text: #2c4d0a; --success-dot: #639922;
     --neutral-bg:   #e4dac9; --neutral-text: #7a6a55; --neutral-dot:  #a99a85;
     --error-bg:     #ffdad6; --error-text:   #410002; --error-dot:    #ba1a1a;
+    --warn-dot:     #e08a2c;
 
     --danger-border: #e6c4bc;
     --danger-text:   #b34a3a;
@@ -65,6 +66,7 @@ html, body, #root { height: 100%; }
     --success-bg:   #2d4413; --success-text: #c8e3a0; --success-dot: #8fc24f;
     --neutral-bg:   #34291c; --neutral-text: #d0c0a4; --neutral-dot:  #b0a085;
     --error-bg:     #5c1414; --error-text:   #ffb4ab; --error-dot:    #ff5449;
+    --warn-dot:     #ffb76b;
 
     --danger-border: #6e4540;
     --danger-text:   #ffb4ab;

awg-ui/src/components/icons.tsx

@@ -35,6 +35,13 @@ export const IcoRefresh = () => (
         <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
     </svg>
 );
+export const IcoSettings = () => (
+    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+        <line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="17" x2="20" y2="17"/>
+        <circle cx="9" cy="7" r="2.5" fill="var(--surface-bright, transparent)"/>
+        <circle cx="15" cy="17" r="2.5" fill="var(--surface-bright, transparent)"/>
+    </svg>
+);
 export const IcoQR = () => (
     <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
         <rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/>

awg-ui/src/tabs/masterkeys/index.tsx

@@ -0,0 +1,343 @@
+// Copyright (c) 2026 Ivan Vasilev
+// This source code is licensed under the MIT license found in the
+// LICENSE file in the root directory of this source tree.
+import { Fragment, useState, useEffect, useCallback } from 'react';
+import QRCode from 'qrcode';
+import { apiFetch, copyText, bytes, timeAgo, genLabel, type AwgGen, type PageProps } from '../../lib/shared';
+import { IcoPlus, IcoTrash, IcoCopy, IcoQR, IcoKey, IcoRefresh, IcoSettings } from '../../components/icons';
+import './masterkeys.css';
+
+// Вкладка «Мастер-ключи»: sen://-подписки для SenAWG. Мастер-ключ — это ссылка
+// плюс лимит устройств; устройства регистрируются сами (приватный ключ остаётся
+// на них) и здесь только отображаются и отзываются. Формат — docs/sen-link.md.
+interface MasterKey { id: number; label: string; device_limit: number; devices: number; created_at: number }
+interface Device {
+    id: number; device_id: string; device_name: string; platform: string; version: string; created_at: number; last_seen: number | null;
+    rekey_requested: boolean; online: boolean; lastHandshake: number; rx: number; tx: number;
+}
+
+// Платформа и версия клиента: «macOS-0.6.5»; без версии — просто платформа.
+const platformLabel = (d: Device): string =>
+    d.platform ? (d.version ? `${d.platform}-${d.version}` : d.platform) : '—';
+
+const errText = (e: any): string => e?.response?.data?.error ?? 'Ошибка запроса';
+
+export default function MasterKeysPage({ token, showMsg }: PageProps) {
+    const [keys, setKeys]       = useState<MasterKey[]>([]);
+    const [enabled, setEnabled] = useState(true);
+    const [tls, setTls]         = useState(false);
+    const [server, setServer]   = useState<{ name: string; ip: string; gen: string } | null>(null);
+    const [label, setLabel]     = useState('');
+    const [limit, setLimit]     = useState('3');
+    const [devs, setDevs]       = useState<Record<number, Device[]>>({});
+    const [folded, setFolded]   = useState<Set<number>>(new Set());   // свёрнутые узлы
+    const [tools, setTools]     = useState<number | null>(null);        // узел с открытыми настройками
+    const [limitEdit, setLimitEdit] = useState('');
+    const [modal, setModal]     = useState<{ label: string; link: string; tls: boolean; dataUrl: string } | null>(null);
+
+    const load = useCallback(async () => {
+        try {
+            const d = await apiFetch('GET', '/ui/masterkeys', token);
+            const list: MasterKey[] = d.keys ?? [];
+            setKeys(list); setEnabled(!!d.enabled); setTls(!!d.tls);
+            // Сервер, который сейчас отдаётся по ключу (он пока единственный).
+            apiFetch('GET', '/health', token).then(h => setServer({ name: h.server, ip: h.ip, gen: h.gen })).catch(() => {});
+            const all = await Promise.all(list.map(k =>
+                apiFetch('GET', `/ui/masterkeys/${k.id}/devices`, token).then(r => [k.id, r.devices ?? []] as const)));
+            setDevs(Object.fromEntries(all));
+        } catch { showMsg('Ошибка загрузки мастер-ключей'); }
+    }, [token, showMsg]);
+
+    // Действие над ключом/устройством: выполнить, показать сообщение, обновить данные.
+    const act = useCallback(async (fn: () => Promise<unknown>, ok: string) => {
+        try { await fn(); showMsg(ok); await load(); }
+        catch (e) { showMsg(errText(e)); }
+    }, [load, showMsg]);
+
+    const create = useCallback(async () => {
+        if (!label.trim()) return;
+        await act(async () => {
+            await apiFetch('POST', '/ui/masterkeys', token, { label: label.trim(), device_limit: Number(limit) });
+            setLabel('');
+        }, 'Мастер-ключ создан');
+    }, [label, limit, token, act]);
+
+    const remove = useCallback(async (k: MasterKey) => {
+        if (!confirm(`Удалить «${k.label}»? Все ${k.devices} устройств потеряют доступ.`)) return;
+        await act(() => apiFetch('DELETE', `/ui/masterkeys/${k.id}`, token), 'Удалён: ' + k.label);
+    }, [token, act]);
+
+    const fetchLink = useCallback(async (k: MasterKey) => {
+        const r = await apiFetch('GET', `/ui/masterkeys/${k.id}/link`, token);
+        return r as { link: string; tls: boolean };
+    }, [token]);
+
+    const showQR = useCallback(async (k: MasterKey) => {
+        try {
+            const { link, tls: t } = await fetchLink(k);
+            const dataUrl = await QRCode.toDataURL(link, { width: 560, margin: 2, errorCorrectionLevel: 'H' });
+            setModal({ label: k.label, link, tls: t, dataUrl });
+        } catch (e) { showMsg(errText(e)); }
+    }, [fetchLink, showMsg]);
+
+    const copyLink = useCallback(async (k: MasterKey) => {
+        try { await copyText((await fetchLink(k)).link); showMsg('Ссылка скопирована'); }
+        catch (e) { showMsg(errText(e)); }
+    }, [fetchLink, showMsg]);
+
+    const fold = (id: number) => setFolded(prev => {
+        const n = new Set(prev); n.has(id) ? n.delete(id) : n.add(id); return n;
+    });
+    const openTools = (k: MasterKey) => { setLimitEdit(String(k.device_limit)); setTools(tools === k.id ? null : k.id); };
+
+    useEffect(() => { if (token) load(); }, [token, load]);
+
+    const actions = (k: MasterKey) => (
+        <div className="actions">
+            <button className="btn-icon" title="QR-код" aria-label="QR-код" onClick={() => showQR(k)}><IcoQR /></button>
+            <button className="btn-icon" title="Скопировать ссылку" aria-label="Скопировать ссылку" onClick={() => copyLink(k)}><IcoCopy /></button>
+            <button className="btn-icon" title="Настройки мастер-ключа" aria-label="Настройки мастер-ключа" aria-expanded={tools === k.id} onClick={() => openTools(k)}><IcoSettings /></button>
+            <button className="btn-icon btn-icon--danger" title="Удалить мастер-ключ" aria-label="Удалить мастер-ключ" onClick={() => remove(k)}><IcoTrash /></button>
+        </div>
+    );
+
+    const toolbox = (k: MasterKey) => (
+        <div className="mk-tools">
+            {/* Слева — настройки самого ключа */}
+            <section className="mk-box">
+                <h4 className="mk-box-title">Настройки ключа</h4>
+                <div className="mk-setting">
+                    <div className="mk-setting-text">
+                        <label className="mk-setting-name" htmlFor={`mk-limit-${k.id}`}>Лимит устройств</label>
+                        <span className="mk-setting-hint">Сколько устройств может подключить ключ</span>
+                    </div>
+                    <div className="mk-setting-ctl">
+                        <input id={`mk-limit-${k.id}`} className="field mk-limit-input" type="number" min={1} max={100}
+                            value={limitEdit} onChange={e => setLimitEdit(e.target.value)} />
+                        <button className="btn btn--tonal" onClick={() =>
+                            act(() => apiFetch('PATCH', `/ui/masterkeys/${k.id}`, token, { device_limit: Number(limitEdit) }), 'Лимит сохранён')}>
+                            Сохранить
+                        </button>
+                    </div>
+                </div>
+                <div className="mk-setting">
+                    <div className="mk-setting-text">
+                        <span className="mk-setting-name">Ссылка</span>
+                        <span className="mk-setting-hint">Старая перестанет принимать новые устройства</span>
+                    </div>
+                    <div className="mk-setting-ctl">
+                        <button className="btn btn--tonal" onClick={() => {
+                            if (confirm('Выпустить новую ссылку? Старая перестанет принимать новые устройства, уже добавленные продолжат работать.'))
+                                act(() => apiFetch('POST', `/ui/masterkeys/${k.id}/rotate`, token), 'Ссылка перевыпущена');
+                        }}>Перевыпустить</button>
+                    </div>
+                </div>
+                <div className="mk-setting">
+                    <div className="mk-setting-text">
+                        <span className="mk-setting-name">Ключи устройств</span>
+                        <span className="mk-setting-hint">Клиенты сменят их при следующем опросе</span>
+                    </div>
+                    <div className="mk-setting-ctl">
+                        <button className="btn btn--tonal" onClick={() =>
+                            act(() => apiFetch('POST', `/ui/masterkeys/${k.id}/rekey`, token), 'Смена ключей запрошена')}>
+                            Запросить смену
+                        </button>
+                    </div>
+                </div>
+            </section>
+
+            {/* Справа — какие серверы отдаются пользователю. Заглушка: сервер один и всегда включён.
+                TODO multi-server: список серверов из реестра, выбор по галочкам; в config.servers[]
+                уйдут только выбранные (подписка уже отдаёт servers[] массивом с id). */}
+            <section className="mk-box">
+                <h4 className="mk-box-title">Включённые серверы</h4>
+                <label className="mk-server">
+                    <input type="checkbox" checked disabled />
+                    <span className="mk-server-name">{server?.name ?? 'Текущий сервер'}</span>
+                    {server?.ip && <code className="mk-server-ip">{server.ip}</code>}
+                    {server?.gen && <span className="mk-server-gen">{genLabel(server.gen as AwgGen)}</span>}
+                </label>
+                <span className="tip-wrap" data-tip="Появится вместе с поддержкой нескольких серверов">
+                    <button className="btn mk-server-add" disabled><IcoPlus /> Добавить сервер</button>
+                </span>
+            </section>
+        </div>
+    );
+
+    // Полоска занятых слотов: числа по краям внутри; цвет по заполнению.
+    const meter = (k: MasterKey, n: number) => (
+        <div className={`mk-meter${n >= k.device_limit ? ' mk-meter--full' : n * 3 >= k.device_limit * 2 ? ' mk-meter--warn' : ''}`}
+            role="progressbar" aria-label="Устройства" aria-valuemin={0}
+            aria-valuemax={k.device_limit} aria-valuenow={n}
+            title={`Устройств: ${n} из ${k.device_limit}`}>
+            <span className="mk-meter-text"><span>{n}</span><span>{k.device_limit}</span></span>
+            <div className="mk-meter-fill"
+                style={{ width: `${Math.min(100, (n / Math.max(1, k.device_limit)) * 100)}%` }}>
+                {/* тот же текст поверх заливки — светлый, чтобы читался на ней */}
+                <span className="mk-meter-text mk-meter-text--on" aria-hidden="true"><span>{n}</span><span>{k.device_limit}</span></span>
+            </div>
+        </div>
+    );
+
+    const deviceActions = (d: Device) => (
+        <div className="actions">
+            <button className="btn-icon" title="Новый PSK" aria-label="Новый PSK" onClick={() =>
+                act(() => apiFetch('POST', `/ui/devices/${d.id}/psk`, token), 'PSK обновлён')}><IcoRefresh /></button>
+            <button className="btn-icon btn-icon--danger" title="Отозвать устройство" aria-label="Отозвать устройство" onClick={() => {
+                if (confirm('Отозвать устройство «' + (d.device_name || d.id) + '»?'))
+                    act(() => apiFetch('DELETE', `/ui/devices/${d.id}`, token), 'Устройство отозвано');
+            }}><IcoTrash /></button>
+        </div>
+    );
+
+    const caret = (k: MasterKey) => (
+        <button className={`mk-caret${folded.has(k.id) ? ' mk-caret--folded' : ''}`}
+            aria-label={folded.has(k.id) ? 'Развернуть' : 'Свернуть'} aria-expanded={!folded.has(k.id)}
+            onClick={() => fold(k.id)}>▾</button>
+    );
+
+    const deviceNode = (k: MasterKey, d: Device) => (
+        <li className="mk-node mk-node--device" key={d.id}>
+            <div className="mk-device">
+                <div className="mk-device-main">
+                    <span className="mk-device-title">
+                        <span className="mk-device-name">{d.device_name || 'Устройство'}</span>
+                        <code className="mk-device-id" title={`ID устройства: ${d.device_id}`}>{d.device_id}</code>
+                    </span>
+                    <span className="mk-device-sub">{platformLabel(d)} · был {d.last_seen ? timeAgo(d.last_seen) + ' назад' : 'никогда'}
+                        {d.rekey_requested ? ' · ждёт смены ключа' : ''}</span>
+                </div>
+                <span className={`chip chip--${d.online ? 'online' : 'offline'}`}>
+                    <span className="chip-dot" />{d.online ? 'Онлайн' : 'Офлайн'}
+                </span>
+                <div className="mk-device-traffic">
+                    <span className="mk-metric"><i className="mk-metric-name" data-sfx=" rx">↓</i><b>{bytes(d.rx)}</b></span>
+                    <span className="mk-metric"><i className="mk-metric-name" data-sfx=" tx">↑</i><b>{bytes(d.tx)}</b></span>
+                </div>
+                {deviceActions(d)}
+            </div>
+        </li>
+    );
+
+    return (
+        <>
+            {!enabled && (
+                <p className="mk-notice">Подписка не настроена на сервере: нет ключа подписи или SUB_PORT. Ссылки выдавать нельзя.</p>
+            )}
+            {enabled && !tls && (
+                <p className="mk-notice">Подписка работает без TLS: ответы подписаны, но secret ссылки и конфиг видны в сети.</p>
+            )}
+
+            <div className="toolbar">
+                <input className="field" placeholder="Метка (напр. Семья)" value={label}
+                    onChange={e => setLabel(e.target.value)} onKeyDown={e => e.key === 'Enter' && create()} />
+                <input className="field mk-limit-input" type="number" min={1} max={100} title="Лимит устройств"
+                    aria-label="Лимит устройств" value={limit} onChange={e => setLimit(e.target.value)} />
+                <div className="toolbar-btns">
+                    <button className="btn btn--primary" onClick={create}><IcoPlus /> Создать ключ</button>
+                </div>
+            </div>
+
+            {/* Десктоп: таблица, иерархия — строка мастер-ключа и устройства под ней */}
+            <div className="table-card mk-table-card">
+                <table className="mk-table">
+                    <thead>
+                        <tr>
+                            <th>Имя</th><th>ID устройства</th><th>Платформа</th><th>Статус</th>
+                            <th>↓ rx</th><th>↑ tx</th><th>Был</th><th>Устройства</th><th></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {keys.length === 0 ? (
+                            <tr><td colSpan={9} className="empty">Нет мастер-ключей</td></tr>
+                        ) : keys.map(k => {
+                            const list = devs[k.id] ?? [];
+                            const free = Math.max(0, k.device_limit - list.length);
+                            const open = !folded.has(k.id);
+                            return (
+                                <Fragment key={k.id}>
+                                    <tr className="mk-tr-master">
+                                        <td><span className="mk-name">{caret(k)}<IcoKey />{k.label}</span></td>
+                                        <td colSpan={6}></td>
+                                        <td>{meter(k, list.length)}</td>
+                                        <td className="td-actions mk-td-actions">{actions(k)}</td>
+                                    </tr>
+                                    {tools === k.id && <tr className="mk-tr-tools"><td colSpan={9}>{toolbox(k)}</td></tr>}
+                                    {open && list.map((d, i) => (
+                                        <tr key={d.id} className={`mk-tr-device${i === list.length - 1 && free === 0 ? ' mk-last' : ''}`}>
+                                            <td><span className="mk-indent">{d.device_name || 'Устройство'}</span></td>
+                                            <td className="td-mono"><code className="mk-device-id" title={d.device_id}>{d.device_id}</code></td>
+                                            <td>{platformLabel(d)}</td>
+                                            <td>
+                                                <span className={`chip chip--${d.online ? 'online' : 'offline'}`}>
+                                                    <span className="chip-dot" />{d.online ? 'Онлайн' : 'Офлайн'}
+                                                </span>
+                                            </td>
+                                            <td className="td-mono">{bytes(d.rx)}</td>
+                                            <td className="td-mono">{bytes(d.tx)}</td>
+                                            <td>{d.last_seen ? timeAgo(d.last_seen) + ' назад' : 'никогда'}
+                                                {d.rekey_requested && <span className="mk-flag"> · ждёт смены ключа</span>}</td>
+                                            <td></td>
+                                            <td className="td-actions mk-td-actions">{deviceActions(d)}</td>
+                                        </tr>
+                                    ))}
+                                    {open && free > 0 && (
+                                        <tr className="mk-tr-free mk-last">
+                                            <td colSpan={9}><span className="mk-indent">Свободно: {free}</span></td>
+                                        </tr>
+                                    )}
+                                </Fragment>
+                            );
+                        })}
+                    </tbody>
+                </table>
+            </div>
+
+            {/* Мобильный: таблица скрыта (.table-card), то же — деревом карточек */}
+            {keys.length === 0 ? <p className="mk-empty mk-tree">Нет мастер-ключей</p> : (
+                <ul className="mk-tree">
+                    {keys.map(k => {
+                        const list = devs[k.id] ?? [];
+                        const free = Math.max(0, k.device_limit - list.length);
+                        const isFolded = folded.has(k.id);
+                        return (
+                            <li className="mk-root" key={k.id}>
+                                <div className="mk-master">
+                                    {caret(k)}
+                                    <IcoKey />
+                                    <span className="mk-master-label">{k.label}</span>
+                                    {meter(k, list.length)}
+                                    {actions(k)}
+                                </div>
+                                {tools === k.id && toolbox(k)}
+                                {!isFolded && (
+                                    <ul className="mk-children">
+                                        {list.map(d => deviceNode(k, d))}
+                                        {free > 0 && (
+                                            <li className="mk-node mk-node--free"><div className="mk-free">Свободно: {free}</div></li>
+                                        )}
+                                    </ul>
+                                )}
+                            </li>
+                        );
+                    })}
+                </ul>
+            )}
+
+            {modal && (
+                <div className="qr-backdrop" onClick={() => setModal(null)}>
+                    <div className="qr-card" onClick={e => e.stopPropagation()}>
+                        <p className="qr-name">{modal.label}</p>
+                        <img className="qr-img" src={modal.dataUrl} alt="QR" title="Нажми чтобы скопировать sen:// ссылку"
+                            onClick={async () => { await copyText(modal.link); showMsg('Ссылка скопирована'); }} />
+                        <p className="qr-hint">Отсканируй в SenAWG · нажми на QR чтобы скопировать{modal.tls ? '' : ' · без TLS'}</p>
+                        <div className="qr-actions">
+                            <button className="btn btn--primary" onClick={async () => { await copyText(modal.link); showMsg('Ссылка скопирована'); }}><IcoCopy /> Скопировать</button>
+                            <button className="btn btn--tonal" onClick={() => setModal(null)}>Закрыть</button>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </>
+    );
+}

awg-ui/src/tabs/masterkeys/masterkeys.css

@@ -0,0 +1,281 @@
+/*
+Copyright (c) 2026 Ivan Vasilev
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+/* Стили вкладки «Мастер-ключи»: дерево «мастер-ключ → устройства».
+   Общая дизайн-система — в App.css. */
+
+.mk-notice {
+    font-size: 13px;
+    color: var(--error-text);
+    background: var(--error-bg);
+    border-radius: 16px;
+    padding: 10px 16px;
+}
+.mk-empty { font-size: 14px; color: var(--neutral-text); text-align: center; padding: 48px 0; }
+.mk-limit-input { width: 88px !important; }
+
+/* ── таблица (десктоп) ── */
+.mk-table td, .mk-table th { white-space: nowrap; }
+.mk-table .td-actions { width: 150px; }
+.mk-table .mk-device-id { display: inline-block; max-width: 170px; vertical-align: middle; }
+.mk-table th, .mk-table td { padding-left: 10px; padding-right: 10px; }
+.mk-table th:first-child, .mk-table td:first-child { padding-left: 20px; }
+.mk-table th:last-child, .mk-table td:last-child { padding-right: 16px; }
+.mk-tr-master td { background: var(--surface-container); font-weight: 500; padding-top: 6px; padding-bottom: 6px; }
+.mk-tr-master:hover td { background: var(--surface-container); }
+.mk-name { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); }
+.mk-name .mk-caret { margin-left: -8px; }
+.mk-tr-master .mk-name { color: var(--on-surface); }
+.mk-tr-master .mk-name svg { color: var(--primary); }
+.mk-tr-tools td { background: var(--surface-container); padding-top: 4px; padding-bottom: 12px; }  /* слева/справа — общие отступы колонок таблицы: блок стоит под заголовком «Имя» */
+.mk-tr-tools:hover { background: transparent; }
+.mk-tr-device td, .mk-tr-free td { padding-top: 10px; padding-bottom: 10px; }
+.mk-flag { color: var(--neutral-text); font-size: 12px; }
+/* иерархия: линия слева от имени и «ножка» к каждой строке; у последней линия обрывается */
+.mk-tr-device td:first-child, .mk-tr-free td:first-child {
+    background: linear-gradient(var(--outline), var(--outline)) 30px 0 / 2px 100% no-repeat;
+}
+.mk-tr-device.mk-last td:first-child, .mk-tr-free.mk-last td:first-child { background-size: 2px 50%; }
+.mk-indent { position: relative; display: inline-block; padding-left: 36px; }
+.mk-indent::before {
+    content: ''; position: absolute; left: 10px; top: 50%; width: 16px;
+    border-top: 2px solid var(--outline);
+}
+.mk-tr-free td { color: var(--neutral-dot); font-size: 12px; }
+.mk-tr-free:hover { background: transparent; }
+
+/* ── дерево (мобильный) ── */
+.mk-tree, .mk-children { list-style: none; margin: 0; padding: 0; }
+.mk-tree { display: none; flex-direction: column; gap: 12px; }  /* только мобильный */
+
+.mk-root {
+    background: var(--surface-bright);
+    border: 1px solid var(--outline-variant);
+    border-radius: var(--r-card);
+    padding: 12px 18px 14px;
+}
+
+/* родитель */
+.mk-master { display: flex; align-items: center; gap: 10px; color: var(--primary); min-height: 42px; }
+.mk-master-label {
+    font-size: 16px;
+    font-weight: 500;
+    color: var(--on-surface);
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mk-caret {
+    width: 28px; height: 28px;
+    border: 0; border-radius: 50%;
+    background: transparent;
+    color: var(--neutral-text);
+    font-size: 16px;
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: transform 0.15s;
+}
+.mk-caret:hover { background: var(--state-neutral); }
+.mk-caret--folded { transform: rotate(-90deg); }
+
+.mk-tools {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 12px;
+    align-items: stretch;
+    margin: 6px 0 8px;
+}
+/* два одинаковых блока: слева настройки ключа, справа серверы */
+.mk-box {
+    display: flex; flex-direction: column; gap: 10px;
+    background: var(--surface-bright);
+    border: 1px solid var(--outline-variant);
+    border-radius: 16px;
+    padding: 12px 16px 14px;
+}
+.mk-box-title { margin: 0; font-size: 13px; font-weight: 500; color: var(--label); }
+.mk-box .mk-box-title { margin-bottom: 2px; }
+/* строка настройки: слева название и пояснение, справа контрол */
+.mk-setting {
+    display: flex; align-items: center; justify-content: space-between; gap: 16px;
+    padding: 10px 0;
+    border-top: 1px solid var(--outline-variant);
+}
+.mk-box-title + .mk-setting { border-top: 0; padding-top: 4px; }
+.mk-setting:last-child { padding-bottom: 0; }
+.mk-setting-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.mk-setting-name { font-size: 14px; font-weight: 500; color: var(--on-surface); }
+.mk-setting-hint { font-size: 12px; color: var(--neutral-text); }
+.mk-setting-ctl { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
+.mk-setting-ctl .btn { height: 36px; padding: 0 16px; font-size: 13px; }
+.mk-limit-input { height: 36px; width: 80px !important; text-align: center; }
+
+/* прогресс занятых слотов с числом внутри; полный — цветом «ошибка».
+   Текст дублируется: тёмный на дорожке, светлый поверх заливки (обрезается ею). */
+.mk-meter {
+    --mk-w: 136px;
+    --meter-fill: var(--success-dot);   /* < 2/3 — зелёный */
+    --meter-on: #2a2118;                /* цвет числа поверх заливки */
+    position: relative;
+    width: var(--mk-w); height: 20px;
+    border-radius: var(--r-pill);
+    background: var(--outline-variant);
+    overflow: hidden;
+    flex-shrink: 0;
+}
+.mk-meter-fill {
+    position: absolute; left: 0; top: 0; bottom: 0;
+    background: var(--meter-fill);
+    overflow: hidden;
+    transition: width 0.25s, background 0.25s;
+}
+/* числа по краям внутри полоски: текущее слева, лимит справа */
+.mk-meter-text {
+    position: absolute; left: 0; top: 0;
+    width: var(--mk-w); height: 100%;
+    box-sizing: border-box;
+    padding: 0 11px;
+    display: flex; align-items: center; justify-content: space-between;
+    font-size: 12px; font-weight: 500;
+    font-variant-numeric: tabular-nums;
+    color: var(--on-surface);
+}
+.mk-meter-text--on { color: var(--meter-on); }
+.mk-meter--warn { --meter-fill: var(--warn-dot); }                 /* от 2/3 — оранжевый */
+.mk-meter--full { --meter-fill: var(--error-dot); --meter-on: #fff; } /* лимит — красный */
+:root[data-theme="dark"] .mk-meter--full { --meter-on: #2a2118; }
+
+/* серверы, отдаваемые по ключу (заглушка) */
+.mk-server {
+    display: flex; align-items: center; gap: 10px;
+    background: var(--surface-container);
+    border-radius: 12px;
+    padding: 10px 14px;
+    font-size: 13px;
+    color: var(--on-surface);
+}
+.mk-server input { accent-color: var(--primary); margin: 0; }
+.mk-server-name { font-weight: 500; }
+.mk-server-ip, .mk-server-gen { font-size: 12px; color: var(--neutral-text); }
+.mk-server-ip { font-family: var(--mono); margin-left: auto; }
+.mk-server-add {
+    width: 100%; justify-content: center;
+    background: transparent;
+    border: 1px dashed var(--outline);
+    color: var(--neutral-dot);
+    cursor: not-allowed;
+}
+.mk-box .tip-wrap { width: 100%; }
+
+/* дети: вертикальная линия слева и «ножка» к каждому узлу */
+.mk-children { margin: 8px 0 0 18px; padding-left: 28px; border-left: 2px solid var(--outline); }
+.mk-node { position: relative; padding: 4px 0; }
+.mk-node::before {
+    content: '';
+    position: absolute;
+    left: -28px; top: 50%;
+    width: 28px;
+    border-top: 2px solid var(--outline);
+}
+/* последний узел: линия родителя обрывается на его «ножке» */
+.mk-node:last-child::after {
+    content: '';
+    position: absolute;
+    left: -30px; top: calc(50% + 1px); bottom: 0;
+    width: 2px;
+    background: var(--surface-bright);
+}
+
+.mk-device {
+    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
+    background: var(--surface-container);
+    border-radius: 14px;
+    padding: 8px 14px;
+}
+.mk-device-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 160px; }
+.mk-device-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
+.mk-device-id {
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--neutral-text);
+    background: var(--surface-bright);
+    border-radius: var(--r-pill);
+    padding: 1px 8px;
+    min-width: 0;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mk-device-name { font-size: 14px; font-weight: 500; color: var(--on-surface); }
+.mk-device-sub  { font-size: 12px; color: var(--neutral-text); }
+.mk-device-traffic { display: flex; gap: 12px; font-family: var(--mono); font-size: 12px; color: var(--neutral-text); }
+.mk-metric { display: inline-flex; gap: 4px; }
+.mk-metric i, .mk-metric b { font-style: normal; font-weight: 400; }
+
+.mk-free {
+    border: 1px dashed var(--outline);
+    border-radius: 14px;
+    padding: 10px 14px;
+    font-size: 13px;
+    color: var(--neutral-dot);
+}
+
+/* ── мобильный (design.md, часть IV): одна колонка, тач-цели ≥ 44px, rx/tx блоками
+      50/50, действия рядом с большим пальцем ── */
+@media (max-width: 640px) {
+    .mk-tree { display: flex; }
+    .mk-limit-input { width: 100% !important; }
+
+    .mk-root { padding: 12px; }
+
+    /* родитель: шапка, затем ряд действий на всю ширину */
+    .mk-master { flex-wrap: wrap; row-gap: 10px; }
+    .mk-master .actions { width: 100%; gap: 8px; }
+    .mk-caret { width: 44px; height: 44px; margin: -6px 0 -6px -8px; }
+    .mk-meter { --mk-w: 112px; height: 24px; }
+
+    /* настройки узла: поля и кнопки на всю ширину */
+    .mk-tools { grid-template-columns: minmax(0, 1fr); margin: 8px 0 4px; }
+    .mk-setting { flex-direction: column; align-items: stretch; gap: 8px; }
+    .mk-setting-ctl { width: 100%; }
+    .mk-setting-ctl .btn { flex: 1; height: 44px; }
+    .mk-setting-ctl .mk-limit-input { width: 100% !important; flex: 1; height: 44px; }
+    .mk-tools .btn { width: 100%; height: 44px; justify-content: center; }
+
+    /* дерево уже: отступы поменьше, «ножки» короче */
+    .mk-children { margin-left: 8px; padding-left: 14px; }
+    .mk-node { padding: 4px 0; }
+    .mk-node::before { left: -14px; width: 14px; }
+    .mk-node:last-child::after { left: -16px; }
+
+    /* устройство — карточка: заголовок + чип, метрики 50/50, ряд действий */
+    .mk-device { border-radius: 16px; padding: 12px; gap: 10px; }
+    .mk-device-main { flex: 1 1 0; }
+    .mk-device-title { flex-wrap: wrap; row-gap: 2px; }
+    .mk-device-id { max-width: 100%; }
+    .mk-device-traffic { width: 100%; gap: 8px; }
+    .mk-metric {
+        flex: 1; flex-direction: column; gap: 2px;
+        background: var(--surface-bright);
+        border-radius: 16px; padding: 8px 12px;
+    }
+    .mk-metric i { font-family: var(--font, inherit); font-size: 12px; color: var(--neutral-text); }
+    .mk-metric-name::after { content: attr(data-sfx); }
+    .mk-metric b { font-size: 16px; font-weight: 500; color: var(--on-surface); }
+
+    /* кнопки действий: контурные, на всю ширину ряда, 44px */
+    .mk-device .actions { width: 100%; gap: 8px; }
+    .mk-master .btn-icon, .mk-device .btn-icon {
+        flex: 1; width: auto; height: 44px;
+        border: 1px solid var(--outline);
+        border-radius: var(--r-pill);
+    }
+    .mk-master .btn-icon--danger, .mk-device .btn-icon--danger { border-color: var(--error-dot); }
+
+    .mk-free { padding: 12px; font-size: 13px; }
+}

awg-ui/src/tabs/masterkeys/metadata.json

@@ -0,0 +1,6 @@
+{
+  "id": "masterkeys",
+  "label": "Мастер-ключи",
+  "icon": "key",
+  "order": 1.5
+}