From 50de5d7af65b62bf00b45e471f59de4f12c2e9b8 Mon Sep 17 00:00:00 2001
From: Vladless <Vladless@users.noreply.github.com>
Date: Wed, 6 May 2026 22:00:56 +0000
Subject: [PATCH] mobile: stream renderer

---
 SoloNet Cabinet.html |  805 -----------------------------
 SoloNet.html         | 1154 ------------------------------------------
 2 files changed, 1959 deletions(-)
 delete mode 100644 SoloNet Cabinet.html
 delete mode 100644 SoloNet.html
diff --git a/SoloNet Cabinet.html b/SoloNet Cabinet.html
deleted file mode 100644
index 6b1126ef..00000000
--- a/SoloNet Cabinet.html	
+++ /dev/null
@@ -1,805 +0,0 @@
-<!doctype html>
-<html lang="ru" data-theme="dark">
-<head>
-<meta charset="utf-8" />
-<title>SoloNet — Кабинет</title>
-<meta name="viewport" content="width=device-width,initial-scale=1" />
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&display=swap" rel="stylesheet">
-<style>
-  *,*::before,*::after{box-sizing:border-box}
-  html,body{margin:0;padding:0;height:100%}
-  :root{
-    --bg:#0A0A0A; --bg-2:#111; --bg-3:#181818;
-    --fg:#F2F2F2; --fg-dim:#7A7A7A; --fg-mute:#3A3A3A;
-    --line:#1F1F1F; --line-2:#2A2A2A;
-    --red:#FF2D2D; --green:#2DD46F; --yellow:#FFC107;
-    --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
-  }
-  body{background:var(--bg);color:var(--fg);font-family:var(--mono);font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased}
-  ::selection{background:var(--red);color:#fff}
-  button{font-family:inherit;cursor:pointer}
-
-  .app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
-
-  /* sidebar */
-  aside{border-right:1px solid var(--line);background:var(--bg);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
-  .brand{display:flex;align-items:center;gap:10px;padding:18px 20px;border-bottom:1px solid var(--line);font-weight:700;letter-spacing:.02em}
-  .brand-mark{width:18px;height:18px;border:1.5px solid var(--fg);position:relative;flex-shrink:0}
-  .brand-mark::before{content:"";position:absolute;inset:2.5px;background:var(--red)}
-  .brand-name{font-size:14px;letter-spacing:.04em}
-  .brand-ver{font-size:9px;color:var(--fg-dim);letter-spacing:.16em;margin-left:auto}
-
-  .conn-card{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
-  .conn-row{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--fg-dim);letter-spacing:.14em;text-transform:uppercase}
-  .conn-status{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--green);font-weight:600;letter-spacing:.04em}
-  .conn-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 var(--green);animation:pulse 1.6s infinite}
-  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(45,212,111,.6)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
-  .conn-loc{font-size:11px;color:var(--fg-dim);font-variant-numeric:tabular-nums}
-
-  nav.tabs{flex:1;padding:14px 8px;display:flex;flex-direction:column;gap:1px;overflow-y:auto}
-  .tab{display:flex;align-items:center;gap:12px;padding:10px 12px;border:0;background:transparent;color:var(--fg-dim);font:inherit;text-align:left;border-left:2px solid transparent;letter-spacing:.02em;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
-  .tab .num{font-size:9px;color:var(--fg-mute);width:18px}
-  .tab .ic{width:14px;height:14px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.4}
-  .tab .lbl{flex:1}
-  .tab .badge{font-size:9px;background:var(--red);color:#fff;padding:1px 6px;letter-spacing:.1em}
-  .tab:hover{color:var(--fg);background:var(--bg-2)}
-  .tab.active{color:var(--fg);background:var(--bg-2);border-left-color:var(--red)}
-  .tab.active .num{color:var(--red)}
-
-  .side-foot{padding:16px;border-top:1px solid var(--line);font-size:10px;color:var(--fg-dim);letter-spacing:.12em;display:flex;flex-direction:column;gap:8px}
-  .user{display:flex;align-items:center;gap:10px;text-transform:none;letter-spacing:0;font-size:12px;color:var(--fg)}
-  .avatar{width:28px;height:28px;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--red);flex-shrink:0}
-  .user-meta{flex:1;min-width:0}
-  .user-name{font-weight:600;font-size:12px}
-  .user-plan{font-size:10px;color:var(--fg-dim);letter-spacing:.14em;text-transform:uppercase}
-  .icon-btn{width:24px;height:24px;border:1px solid var(--line-2);background:transparent;color:var(--fg-dim);display:inline-flex;align-items:center;justify-content:center;font-size:11px}
-  .icon-btn:hover{color:var(--fg);border-color:var(--fg-dim)}
-
-  /* main */
-  main{display:flex;flex-direction:column;min-width:0}
-  .topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 28px;border-bottom:1px solid var(--line);position:sticky;top:0;background:color-mix(in oklab, var(--bg) 88%, transparent);backdrop-filter:blur(12px);z-index:10}
-  .crumbs{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--fg-dim);letter-spacing:.14em;text-transform:uppercase}
-  .crumbs b{color:var(--fg);font-weight:600}
-  .crumbs .sep{color:var(--fg-mute)}
-  .top-actions{display:flex;align-items:center;gap:10px}
-  .search{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line-2);background:var(--bg-2);font-size:11px;color:var(--fg-dim);min-width:240px}
-  .search input{background:transparent;border:0;color:var(--fg);font:inherit;outline:none;flex:1;font-size:12px}
-  .kbd{font-size:9px;border:1px solid var(--line-2);padding:1px 5px;color:var(--fg-dim);letter-spacing:.06em}
-
-  .btn{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border:1px solid var(--fg);background:var(--fg);color:var(--bg);font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;border-radius:0;transition:transform .12s, box-shadow .18s}
-  .btn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--red)}
-  .btn-ghost{background:transparent;color:var(--fg)}
-  .btn-ghost:hover{background:var(--fg);color:var(--bg);box-shadow:none;transform:none}
-  .btn-red{background:var(--red);border-color:var(--red);color:#fff}
-  .btn-red:hover{box-shadow:3px 3px 0 var(--fg)}
-  .btn-sm{height:26px;padding:0 10px;font-size:10px}
-
-  /* content area */
-  .content{padding:28px;display:flex;flex-direction:column;gap:24px;min-height:0}
-
-  /* page header */
-  .page-h{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
-  .eyebrow{font-size:10px;color:var(--red);letter-spacing:.22em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}
-  .eyebrow::before{content:"";width:18px;height:1px;background:var(--red)}
-  .page-title{font-size:28px;line-height:1;letter-spacing:-.02em;font-weight:700;margin:8px 0 0;text-transform:uppercase}
-  .page-meta{font-size:11px;color:var(--fg-dim);letter-spacing:.14em;text-transform:uppercase;text-align:right}
-
-  /* grid panels */
-  .grid{display:grid;gap:16px}
-  .grid-3{grid-template-columns:1.4fr 1fr 1fr}
-  .grid-2{grid-template-columns:2fr 1fr}
-  .grid-4{grid-template-columns:repeat(4,1fr)}
-
-  .panel{border:1px solid var(--line);background:var(--bg);display:flex;flex-direction:column;min-height:0}
-  .panel-h{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);font-size:10px;color:var(--fg-dim);letter-spacing:.16em;text-transform:uppercase}
-  .panel-h b{color:var(--fg);font-weight:600}
-  .panel-h .red{color:var(--red)}
-  .panel-b{padding:18px 16px;flex:1}
-
-  /* connect block */
-  .connect{padding:24px;display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center}
-  .conn-btn{width:120px;height:120px;border:2px solid var(--red);background:var(--red);color:#fff;font-family:var(--mono);font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:0;position:relative;transition:all .15s}
-  .conn-btn::after{content:"";position:absolute;inset:-6px;border:1px solid var(--red);opacity:.4;pointer-events:none}
-  .conn-btn .ico{font-size:28px;line-height:1}
-  .conn-btn:hover{box-shadow:6px 6px 0 var(--fg)}
-  .conn-btn[data-on="0"]{background:transparent;color:var(--fg);border-color:var(--fg-dim)}
-  .conn-btn[data-on="0"]::after{border-color:var(--fg-dim)}
-  .conn-info{display:flex;flex-direction:column;gap:8px}
-  .conn-info .big{font-size:24px;font-weight:700;letter-spacing:-.01em;line-height:1;text-transform:uppercase}
-  .conn-info .big .accent{color:var(--green)}
-  .conn-info .row{display:flex;gap:24px;font-size:11px;color:var(--fg-dim);letter-spacing:.12em;text-transform:uppercase;margin-top:4px}
-  .conn-info .row .v{color:var(--fg);font-weight:600;margin-left:6px;font-variant-numeric:tabular-nums}
-  .conn-meta-line{font-size:10px;color:var(--fg-mute);letter-spacing:.16em;font-family:var(--mono)}
-
-  /* stats row */
-  .stat{padding:18px 16px}
-  .stat-k{font-size:10px;color:var(--fg-dim);letter-spacing:.14em;text-transform:uppercase}
-  .stat-v{font-size:28px;font-weight:700;letter-spacing:-.01em;margin-top:6px;font-variant-numeric:tabular-nums;line-height:1}
-  .stat-v .u{color:var(--red);font-size:14px;margin-left:4px}
-  .stat-d{font-size:10px;color:var(--green);margin-top:6px;letter-spacing:.1em}
-  .stat-d.down{color:var(--red)}
-
-  /* charts */
-  .chart{height:180px;width:100%}
-  .chart-foot{display:flex;justify-content:space-between;font-size:10px;color:var(--fg-dim);letter-spacing:.12em;padding:10px 16px;border-top:1px solid var(--line)}
-
-  /* server list */
-  .srv-list{display:flex;flex-direction:column}
-  .srv{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:14px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--line);font-size:12px}
-  .srv:last-child{border-bottom:0}
-  .srv:hover{background:var(--bg-2)}
-  .srv.active{background:var(--bg-2);border-left:2px solid var(--red);padding-left:14px}
-  .flag{width:22px;height:16px;border:1px solid var(--line-2);font-size:9px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;letter-spacing:.04em;color:var(--fg-dim)}
-  .srv .name{font-weight:600}
-  .srv .city{color:var(--fg-dim);font-size:11px;margin-left:8px}
-  .srv .ping{font-variant-numeric:tabular-nums;color:var(--fg-dim);font-size:11px;letter-spacing:.06em}
-  .srv .ping b{color:var(--fg)}
-  .load-bar{width:60px;height:4px;background:var(--line);position:relative}
-  .load-bar i{position:absolute;left:0;top:0;height:100%;background:var(--green)}
-  .load-bar i.med{background:var(--yellow)}
-  .load-bar i.high{background:var(--red)}
-  .srv .pick{font-size:10px;letter-spacing:.12em;color:var(--fg-dim);text-transform:uppercase}
-  .srv:hover .pick{color:var(--red)}
-  .srv.active .pick{color:var(--red)}
-
-  /* feed */
-  .feed{font-size:11px;font-family:var(--mono);padding:8px 16px;max-height:240px;overflow-y:auto}
-  .feed-line{display:flex;gap:10px;padding:4px 0;color:var(--fg-dim);font-variant-numeric:tabular-nums}
-  .feed-line .ts{color:var(--fg-mute);flex-shrink:0}
-  .feed-line .lvl{flex-shrink:0;width:48px;font-weight:700}
-  .feed-line .lvl.ok{color:var(--green)}
-  .feed-line .lvl.warn{color:var(--yellow)}
-  .feed-line .lvl.err{color:var(--red)}
-  .feed-line .msg{color:var(--fg)}
-
-  /* devices grid */
-  .dev{padding:16px;border:1px solid var(--line);background:var(--bg);display:flex;flex-direction:column;gap:10px}
-  .dev .top{display:flex;justify-content:space-between;align-items:flex-start}
-  .dev-name{font-size:13px;font-weight:600}
-  .dev-id{font-size:10px;color:var(--fg-dim);letter-spacing:.14em}
-  .dev .body{font-size:11px;color:var(--fg-dim);display:flex;flex-direction:column;gap:4px}
-  .dev .body b{color:var(--fg);font-weight:500}
-  .dev .foot{display:flex;justify-content:space-between;align-items:center;border-top:1px dashed var(--line-2);padding-top:10px}
-  .dev .pill{font-size:9px;letter-spacing:.14em;text-transform:uppercase;padding:3px 6px;border:1px solid var(--green);color:var(--green)}
-  .dev .pill.off{border-color:var(--fg-mute);color:var(--fg-dim)}
-
-  /* invoice list */
-  .inv{display:grid;grid-template-columns:120px 1fr auto auto auto;gap:16px;padding:11px 16px;border-bottom:1px solid var(--line);font-size:12px;align-items:center}
-  .inv:last-child{border-bottom:0}
-  .inv .date{font-variant-numeric:tabular-nums;color:var(--fg-dim);letter-spacing:.06em}
-  .inv .label{font-weight:500}
-  .inv .amount{font-variant-numeric:tabular-nums;font-weight:700}
-  .inv .pill{font-size:9px;letter-spacing:.14em;text-transform:uppercase;padding:3px 6px;border:1px solid var(--green);color:var(--green)}
-  .inv .pill.fail{border-color:var(--red);color:var(--red)}
-  .inv .dl{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim)}
-  .inv .dl:hover{color:var(--red)}
-
-  /* settings rows */
-  .opt{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);gap:16px}
-  .opt:last-child{border-bottom:0}
-  .opt .opt-l{display:flex;flex-direction:column;gap:2px}
-  .opt .opt-name{font-size:13px;font-weight:500}
-  .opt .opt-d{font-size:11px;color:var(--fg-dim);max-width:60ch}
-  .toggle{position:relative;width:36px;height:20px;border:0;border-radius:0;background:var(--line);transition:background .15s;padding:0;border:1px solid var(--line-2)}
-  .toggle[data-on="1"]{background:var(--red);border-color:var(--red)}
-  .toggle i{position:absolute;top:1px;left:1px;width:16px;height:16px;background:#fff;transition:transform .15s}
-  .toggle[data-on="1"] i{transform:translateX(16px)}
-  .seg{display:inline-flex;border:1px solid var(--line-2)}
-  .seg button{appearance:none;background:transparent;border:0;color:var(--fg-dim);padding:6px 10px;font:inherit;font-size:10px;letter-spacing:.14em;text-transform:uppercase;border-right:1px solid var(--line-2)}
-  .seg button:last-child{border-right:0}
-  .seg button.on{background:var(--fg);color:var(--bg)}
-
-  /* support */
-  .ticket{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;align-items:center}
-  .ticket:last-child{border-bottom:0}
-  .ticket .meta{font-size:10px;color:var(--fg-dim);letter-spacing:.14em;text-transform:uppercase}
-  .ticket .subj{font-size:13px;margin-top:4px}
-  .ticket .right{text-align:right;font-size:11px;color:var(--fg-dim)}
-
-  /* security */
-  .sec-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line)}
-  .sec-row:last-child{border-bottom:0}
-  .sec-ico{width:32px;height:32px;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--green);flex-shrink:0}
-  .sec-ico.warn{color:var(--yellow);border-color:var(--yellow)}
-  .sec-ico svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5}
-  .sec-row .body{flex:1}
-  .sec-row .body b{display:block;font-size:13px;margin-bottom:2px}
-  .sec-row .body span{font-size:11px;color:var(--fg-dim)}
-
-  /* referral */
-  .ref-card{padding:24px 20px;border:1px solid var(--red);background:linear-gradient(180deg, color-mix(in oklab, var(--red) 12%, transparent) 0%, transparent 100%)}
-  .ref-num{font-size:42px;font-weight:800;letter-spacing:-.02em;line-height:1}
-  .ref-num .u{color:var(--red);font-size:18px;margin-left:4px}
-  .ref-link{display:flex;align-items:center;border:1px solid var(--line-2);background:var(--bg-2);padding:10px 14px;margin-top:18px;font-size:12px;justify-content:space-between;gap:12px}
-  .ref-link code{color:var(--fg);font-family:var(--mono);font-size:12px;letter-spacing:0}
-
-  .empty{padding:40px 16px;text-align:center;color:var(--fg-dim);font-size:12px}
-  .empty-big{font-size:18px;color:var(--fg);margin-bottom:8px;letter-spacing:.04em;text-transform:uppercase}
-
-  @media (max-width: 1100px){
-    .grid-3{grid-template-columns:1fr 1fr}
-    .grid-4{grid-template-columns:repeat(2,1fr)}
-  }
-  @media (max-width: 760px){
-    .app{grid-template-columns:1fr}
-    aside{position:relative;height:auto}
-    .grid-3,.grid-4,.grid-2{grid-template-columns:1fr}
-  }
-</style>
-</head>
-<body>
-<div id="root"></div>
-
-<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
-
-<script type="text/babel" data-presets="env,react">
-const { useState, useEffect, useRef, useMemo } = React;
-
-// ───────────────────── Icons ─────────────────────
-const Ico = {
-  prof: <svg className="ic" viewBox="0 0 16 16"><circle cx="8" cy="5.5" r="2.6"/><path d="M2.5 14c.6-2.6 2.9-4.2 5.5-4.2S13 11.4 13.5 14"/></svg>,
-  bill: <svg className="ic" viewBox="0 0 16 16"><rect x="2" y="3" width="12" height="10"/><path d="M2 6h12"/><path d="M5 10h2"/></svg>,
-  ref:  <svg className="ic" viewBox="0 0 16 16"><circle cx="5" cy="5" r="2"/><circle cx="11" cy="11" r="2"/><path d="M5 7v2a2 2 0 0 0 2 2h2"/></svg>,
-  gift: <svg className="ic" viewBox="0 0 16 16"><rect x="2" y="6" width="12" height="8"/><path d="M2 9h12M8 6v8"/><path d="M5 6c0-1.5 1-2.5 2-2.5S8 4 8 6c0-2 0-2.5 1-2.5S11 4.5 11 6"/></svg>,
-  bell: <svg className="ic" viewBox="0 0 16 16"><path d="M4 11V7a4 4 0 0 1 8 0v4l1 1.5H3z"/><path d="M6.5 13.5a1.5 1.5 0 0 0 3 0"/></svg>,
-};
-
-// ───────────────────── Tabs definition ─────────────────────
-const TABS = [
-  { id: 'prof', num: '01', label: 'Профиль', icon: Ico.prof },
-  { id: 'bill', num: '02', label: 'Подписки', icon: Ico.bill },
-  { id: 'ref',  num: '03', label: 'Партнёрка', icon: Ico.ref },
-  { id: 'gift', num: '04', label: 'Подарки', icon: Ico.gift, badge: '2' },
-  { id: 'note', num: '05', label: 'Уведомления', icon: Ico.bell, badge: '5' },
-];
-
-// ───────────────────── Server data ─────────────────────
-const SERVERS = [
-  { code:'NL', city:'Amsterdam', name:'AMS-03', ping:14, load:'low', loadV:22, hops:1 },
-  { code:'DE', city:'Frankfurt', name:'FRA-07', ping:18, load:'low', loadV:31 },
-  { code:'CH', city:'Zürich',    name:'ZRH-02', ping:24, load:'low', loadV:18 },
-  { code:'SE', city:'Stockholm', name:'STO-01', ping:32, load:'med', loadV:54 },
-  { code:'IS', city:'Reykjavík', name:'KEF-01', ping:48, load:'med', loadV:62 },
-  { code:'US', city:'New York',  name:'NYC-09', ping:74, load:'low', loadV:38 },
-  { code:'US', city:'Los Angeles', name:'LAX-04', ping:128, load:'high', loadV:84 },
-  { code:'JP', city:'Tokyo',     name:'TYO-02', ping:172, load:'med', loadV:48 },
-  { code:'SG', city:'Singapore', name:'SIN-03', ping:188, load:'low', loadV:24 },
-];
-
-// ───────────────────── Sparkline ─────────────────────
-function Sparkline({ data, color = 'var(--red)', fill = true, height = 180 }){
-  const ref = useRef(null);
-  useEffect(() => {
-    const c = ref.current; if (!c) return;
-    const ctx = c.getContext('2d');
-    const dpr = window.devicePixelRatio || 1;
-    const w = c.clientWidth, h = c.clientHeight;
-    c.width = w*dpr; c.height = h*dpr; ctx.setTransform(dpr,0,0,dpr,0,0);
-    ctx.clearRect(0,0,w,h);
-    // grid
-    ctx.strokeStyle = 'rgba(245,245,245,0.05)'; ctx.lineWidth = 1; ctx.beginPath();
-    for (let i=1;i<5;i++){ const y = (h/5)*i; ctx.moveTo(0,y); ctx.lineTo(w,y); }
-    ctx.stroke();
-    // data
-    const max = Math.max(...data) || 1;
-    const min = Math.min(...data);
-    const norm = data.map(v => (v - min) / (max - min || 1));
-    ctx.lineWidth = 1.5;
-    ctx.strokeStyle = color;
-    if (fill){
-      const grad = ctx.createLinearGradient(0,0,0,h);
-      grad.addColorStop(0, color === 'var(--red)' ? 'rgba(255,45,45,0.35)' : 'rgba(45,212,111,0.35)');
-      grad.addColorStop(1, 'rgba(0,0,0,0)');
-      ctx.fillStyle = grad;
-      ctx.beginPath();
-      ctx.moveTo(0, h - norm[0]*(h-20) - 8);
-      for (let i=1;i<norm.length;i++){
-        const x = (i/(norm.length-1))*w;
-        const y = h - norm[i]*(h-20) - 8;
-        ctx.lineTo(x,y);
-      }
-      ctx.lineTo(w,h); ctx.lineTo(0,h); ctx.closePath(); ctx.fill();
-    }
-    ctx.beginPath();
-    for (let i=0;i<norm.length;i++){
-      const x = (i/(norm.length-1))*w;
-      const y = h - norm[i]*(h-20) - 8;
-      i===0 ? ctx.moveTo(x,y) : ctx.lineTo(x,y);
-    }
-    ctx.stroke();
-  }, [data, color, fill]);
-  return <canvas ref={ref} className="chart" style={{height}}/>;
-}
-
-// ───────────────────── Sidebar ─────────────────────
-function Sidebar({ active, setActive }){
-  return (
-    <aside>
-      <div className="brand">
-        <span className="brand-mark"></span>
-        <span className="brand-name">SOLONET</span>
-        <span className="brand-ver">v 4.2.0</span>
-      </div>
-
-      <div className="conn-card">
-        <div className="conn-row"><span>// TUNNEL</span><span>WG-01</span></div>
-        <div className="conn-status"><span className="conn-dot"></span> CONNECTED</div>
-        <div className="conn-loc">NL · AMS-03 · 14 ms</div>
-      </div>
-
-      <nav className="tabs">
-        {TABS.map(t => (
-          <button key={t.id} className={`tab ${active===t.id?'active':''}`} onClick={() => setActive(t.id)}>
-            <span className="num">{t.num}</span>
-            {t.icon}
-            <span className="lbl">{t.label}</span>
-            {t.badge && <span className="badge">{t.badge}</span>}
-          </button>
-        ))}
-      </nav>
-
-      <div className="side-foot">
-        <div className="user">
-          <div className="avatar">SK</div>
-          <div className="user-meta">
-            <div className="user-name">solo_kirill</div>
-            <div className="user-plan">PRIME · 247 дн</div>
-          </div>
-          <button className="icon-btn" title="Выйти">↗</button>
-        </div>
-      </div>
-    </aside>
-  );
-}
-
-// ───────────────────── Topbar ─────────────────────
-function Topbar({ active }){
-  const tab = TABS.find(t => t.id === active);
-  return (
-    <div className="topbar">
-      <div className="crumbs">
-        <span>Кабинет</span><span className="sep">/</span>
-        <b>{tab.label}</b>
-        <span className="sep">·</span>
-        <span>NODE-AMS-03</span>
-      </div>
-      <div className="top-actions">
-        <div className="search">
-          <span>⌕</span>
-          <input placeholder="Поиск серверов, устройств…" />
-          <span className="kbd">⌘ K</span>
-        </div>
-        <button className="btn btn-sm btn-ghost">Помощь</button>
-        <button className="btn btn-sm btn-red">Купить трафик</button>
-      </div>
-    </div>
-  );
-}
-
-
-// ───────────────────── Page: Profile ─────────────────────
-function ProfilePage(){
-  const [twofa, setTwofa] = useState(false);
-  const [news, setNews] = useState(true);
-  return (
-    <>
-      <div className="page-h">
-        <div>
-          <span className="eyebrow">/// Личные данные</span>
-          <h1 className="page-title">Профиль</h1>
-        </div>
-        <div className="page-meta">ID · SK-9F3A2C</div>
-      </div>
-
-      <div className="grid grid-2">
-        <div className="panel">
-          <div className="panel-h"><b>// Учётная запись</b><span>аккаунт</span></div>
-          <div className="panel-b" style={{display:'flex',flexDirection:'column',gap:14}}>
-            <div style={{display:'flex',gap:14,alignItems:'center'}}>
-              <div className="avatar" style={{width:56,height:56,fontSize:18}}>SK</div>
-              <div>
-                <div style={{fontSize:16,fontWeight:600}}>solo_kirill</div>
-                <div style={{fontSize:11,color:'var(--fg-dim)',letterSpacing:'.12em',textTransform:'uppercase',marginTop:4}}>с 04 апр 2024 · 763 дня</div>
-              </div>
-              <button className="btn btn-sm btn-ghost" style={{marginLeft:'auto'}}>Сменить</button>
-            </div>
-            <div style={{height:1,background:'var(--line)'}}></div>
-            <Field k="E-mail" v="kirill@solonet.io" verified />
-            <Field k="Телефон" v="+7 ··· ··· 47-12" />
-            <Field k="Telegram" v="@solo_kirill" verified />
-            <Field k="Язык" v="Русский" />
-          </div>
-        </div>
-
-        <div className="panel">
-          <div className="panel-h"><b>// Безопасность</b><span>защита</span></div>
-          <div className="opt">
-            <div className="opt-l"><div className="opt-name">Двухфакторная (2FA)</div><div className="opt-d">Подтверждение по TOTP-коду из приложения. Рекомендуется.</div></div>
-            <button className="toggle" data-on={twofa?'1':'0'} onClick={()=>setTwofa(!twofa)}><i/></button>
-          </div>
-          <div className="opt">
-            <div className="opt-l"><div className="opt-name">Письма с новостями</div><div className="opt-d">Раз в месяц. Никакого спама — только важные обновления.</div></div>
-            <button className="toggle" data-on={news?'1':'0'} onClick={()=>setNews(!news)}><i/></button>
-          </div>
-          <div className="opt">
-            <div className="opt-l"><div className="opt-name">Сменить пароль</div><div className="opt-d">Последнее изменение — 47 дней назад.</div></div>
-            <button className="btn btn-sm btn-ghost">Изменить</button>
-          </div>
-          <div className="opt">
-            <div className="opt-l"><div className="opt-name" style={{color:'var(--red)'}}>Удалить аккаунт</div><div className="opt-d">Все данные стираются с RAM-серверов в течение 24 часов.</div></div>
-            <button className="btn btn-sm btn-ghost" style={{borderColor:'var(--red)',color:'var(--red)'}}>Удалить</button>
-          </div>
-        </div>
-      </div>
-
-      <div className="panel">
-        <div className="panel-h"><b>// История входов</b><span>последние 5</span></div>
-        <div className="srv-list">
-          {[
-            ['MBP-14 · macOS','198.51.100.91 · NL','сейчас'],
-            ['iPhone 15 Pro','198.51.100.42 · NL','12 мин назад'],
-            ['Web · Firefox','83.220.171.4 · RU','3 ч назад'],
-            ['Router OpenWrt','198.51.100.12 · DE','вчера'],
-            ['ThinkPad X1','—','5 дней назад'],
-          ].map(([n,ip,t],i)=>(
-            <div className="srv" key={i}>
-              <span className="flag">●</span>
-              <span><span className="name">{n}</span></span>
-              <span className="ping">{ip}</span>
-              <span></span>
-              <span className="pick">{t}</span>
-            </div>
-          ))}
-        </div>
-      </div>
-    </>
-  );
-}
-
-function Field({k,v,verified}){
-  return (
-    <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',gap:12,padding:'8px 0',borderBottom:'1px dashed var(--line)'}}>
-      <span style={{fontSize:11,color:'var(--fg-dim)',letterSpacing:'.12em',textTransform:'uppercase'}}>{k}</span>
-      <span style={{display:'flex',alignItems:'center',gap:8}}>
-        <b style={{fontSize:13,fontWeight:600}}>{v}</b>
-        {verified && <span style={{fontSize:9,letterSpacing:'.14em',color:'var(--green)',border:'1px solid var(--green)',padding:'2px 5px'}}>VERIFIED</span>}
-      </span>
-    </div>
-  );
-}
-
-// ───────────────────── Page: Subscriptions ─────────────────────
-function SubsPage(){
-  const invoices = [
-    { date:'2026-04-12', label:'PRIME · 12 мес', amount:'4 788 ₽', status:'PAID' },
-    { date:'2025-04-12', label:'PRIME · 12 мес', amount:'4 788 ₽', status:'PAID' },
-    { date:'2024-10-04', label:'CORE · 6 мес',  amount:'1 494 ₽', status:'PAID' },
-    { date:'2024-04-04', label:'PROBE · 1 мес', amount:'99 ₽',    status:'FAIL' },
-  ];
-  return (
-    <>
-      <div className="page-h">
-        <div>
-          <span className="eyebrow">/// Тарифы и платежи</span>
-          <h1 className="page-title">Подписки</h1>
-        </div>
-        <div className="page-meta">PRIME · ДО 12 АПР 2027</div>
-      </div>
-
-      <div className="grid grid-4">
-        <Stat k="До продления" v="347" u="дн" d="автопродление активно" />
-        <Stat k="Списание" v="4 788" u="₽" d="12 апр 2027" />
-        <Stat k="Сэкономлено" v="3 624" u="₽" d="скидка за год · 39%" />
-        <Stat k="Бонусных дней" v="+210" d="7 рефералов" />
-      </div>
-
-      <div className="grid grid-2">
-        <div className="panel">
-          <div className="panel-h"><b>// Текущий тариф</b><span className="red">PRIME</span></div>
-          <div className="panel-b" style={{display:'flex',flexDirection:'column',gap:18}}>
-            <div style={{fontSize:48,fontWeight:800,letterSpacing:'-.02em',lineHeight:1}}>399 <span style={{fontSize:18,color:'var(--fg-dim)'}}>₽ / мес</span></div>
-            <div style={{fontSize:11,color:'var(--fg-dim)',letterSpacing:'.14em',textTransform:'uppercase'}}>Списание 4 788 ₽ — 12 АПР 2027</div>
-            <div style={{height:1,background:'var(--line)'}}></div>
-            <ul style={{listStyle:'none',padding:0,margin:0,fontSize:12,display:'flex',flexDirection:'column',gap:8,color:'var(--fg-dim)'}}>
-              <li style={{display:'flex',justifyContent:'space-between'}}><span>Серверы</span><b style={{color:'var(--fg)'}}>412</b></li>
-              <li style={{display:'flex',justifyContent:'space-between'}}><span>Устройств</span><b style={{color:'var(--fg)'}}>10</b></li>
-              <li style={{display:'flex',justifyContent:'space-between'}}><span>Multi-hop</span><b style={{color:'var(--fg)'}}>2 узла</b></li>
-              <li style={{display:'flex',justifyContent:'space-between'}}><span>Поддержка</span><b style={{color:'var(--fg)'}}>Live · 24/7</b></li>
-            </ul>
-            <div style={{display:'flex',gap:10,marginTop:'auto',paddingTop:8}}>
-              <button className="btn btn-red">Перейти на SHADOW →</button>
-              <button className="btn btn-sm btn-ghost">Отменить</button>
-            </div>
-          </div>
-        </div>
-
-        <div className="panel">
-          <div className="panel-h"><b>// Метод оплаты</b><span>основной</span></div>
-          <div className="panel-b" style={{display:'flex',flexDirection:'column',gap:14}}>
-            <div style={{border:'1px solid var(--line-2)',padding:16,display:'flex',justifyContent:'space-between',alignItems:'center'}}>
-              <div>
-                <div style={{fontSize:13,fontWeight:600}}>•••• •••• •••• 4 829</div>
-                <div style={{fontSize:11,color:'var(--fg-dim)',marginTop:4,letterSpacing:'.1em'}}>VISA · ИСТЕКАЕТ 11/28</div>
-              </div>
-              <button className="btn btn-sm btn-ghost">Сменить</button>
-            </div>
-            <div style={{fontSize:11,color:'var(--fg-dim)',letterSpacing:'.12em',textTransform:'uppercase'}}>// Альтернативные методы</div>
-            <div style={{display:'flex',gap:8,flexWrap:'wrap'}}>
-              <span style={{padding:'6px 10px',border:'1px solid var(--line-2)',fontSize:11,letterSpacing:'.08em'}}>SBP</span>
-              <span style={{padding:'6px 10px',border:'1px solid var(--line-2)',fontSize:11,letterSpacing:'.08em'}}>BTC</span>
-              <span style={{padding:'6px 10px',border:'1px solid var(--line-2)',fontSize:11,letterSpacing:'.08em'}}>USDT</span>
-              <span style={{padding:'6px 10px',border:'1px solid var(--line-2)',fontSize:11,letterSpacing:'.08em'}}>MONERO</span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div className="panel">
-        <div className="panel-h"><b>// История платежей</b><span>{invoices.length} записей</span></div>
-        <div>
-          {invoices.map((inv,i) => (
-            <div className="inv" key={i}>
-              <span className="date">{inv.date}</span>
-              <span className="label">{inv.label}</span>
-              <span className="amount">{inv.amount}</span>
-              <span className={`pill ${inv.status==='FAIL'?'fail':''}`}>{inv.status}</span>
-              <a className="dl" href="#">↓ PDF</a>
-            </div>
-          ))}
-        </div>
-      </div>
-    </>
-  );
-}
-
-// ───────────────────── Page: Partner ─────────────────────
-function PartnerPage(){
-  return (
-    <>
-      <div className="page-h">
-        <div>
-          <span className="eyebrow">/// Приведи одного</span>
-          <h1 className="page-title">Партнёрка</h1>
-        </div>
-        <div className="page-meta">+30 ДНЕЙ + 30% за каждого</div>
-      </div>
-
-      <div className="grid grid-4">
-        <Stat k="Приведено" v="7" d="+2 за месяц" />
-        <Stat k="Бонус-дней" v="+210" d="к подписке" />
-        <Stat k="Кэшбек" v="1 050" u="₽" d="к выводу" />
-        <Stat k="Конверсия" v="58" u="%" d="переход → оплата" />
-      </div>
-
-      <div className="grid grid-2">
-        <div className="ref-card">
-          <div style={{fontSize:11,color:'var(--fg-dim)',letterSpacing:'.16em',textTransform:'uppercase',marginBottom:12}}>// твоя реферальная ссылка</div>
-          <div className="ref-num">SK<span className="u">-9F3A</span></div>
-          <div className="ref-link">
-            <code>solonet.io/r/SK-9F3A</code>
-            <button className="btn btn-sm">Копировать</button>
-          </div>
-          <div style={{display:'flex',gap:10,marginTop:18}}>
-            <button className="btn btn-sm btn-ghost">Поделиться</button>
-            <button className="btn btn-sm btn-ghost">QR-код</button>
-            <button className="btn btn-sm btn-ghost">UTM</button>
-          </div>
-        </div>
-        <div className="panel">
-          <div className="panel-h"><b>// Условия программы</b><span>tier · BRONZE</span></div>
-          <div className="panel-b" style={{display:'flex',flexDirection:'column',gap:12,fontSize:12,color:'var(--fg-dim)'}}>
-            <div style={{display:'flex',justifyContent:'space-between'}}><span>Друг получает</span><b style={{color:'var(--fg)'}}>−30% на 1-й платёж</b></div>
-            <div style={{display:'flex',justifyContent:'space-between'}}><span>Ты получаешь</span><b style={{color:'var(--fg)'}}>+30 дней + 30%</b></div>
-            <div style={{display:'flex',justifyContent:'space-between'}}><span>Активация</span><b style={{color:'var(--fg)'}}>после оплаты</b></div>
-            <div style={{display:'flex',justifyContent:'space-between'}}><span>Срок жизни ссылки</span><b style={{color:'var(--fg)'}}>30 дней</b></div>
-            <div style={{height:1,background:'var(--line)',margin:'4px 0'}}></div>
-            <div style={{fontSize:10,letterSpacing:'.16em',textTransform:'uppercase',color:'var(--fg-dim)'}}>// до SILVER · 13 рефералов</div>
-            <div style={{height:6,background:'var(--line)',position:'relative'}}><div style={{position:'absolute',left:0,top:0,bottom:0,width:'35%',background:'var(--red)'}}/></div>
-          </div>
-        </div>
-      </div>
-
-      <div className="panel">
-        <div className="panel-h"><b>// Приведённые друзья</b><span>7 человек</span></div>
-        <div className="srv-list">
-          {[
-            ['solo_anya','PRIME · 12 мес','+30 дн','2 дня назад'],
-            ['mr_quiet','CORE · 6 мес','+30 дн','1 нед назад'],
-            ['root@ghost','SHADOW · 12 мес','+30 дн','2 нед назад'],
-            ['ave','PROBE','—','1 мес назад'],
-            ['nox_4','CORE · 6 мес','+30 дн','1 мес назад'],
-            ['v.lonely','PRIME · 12 мес','+30 дн','2 мес назад'],
-            ['static_id','PRIME · 12 мес','+30 дн','3 мес назад'],
-          ].map(([n,p,b,t],i)=>(
-            <div className="srv" key={i}>
-              <span className="flag">@</span>
-              <span><span className="name">{n}</span><span className="city">· {p}</span></span>
-              <span className="ping" style={{color:'var(--green)'}}>{b}</span>
-              <span></span>
-              <span className="pick">{t}</span>
-            </div>
-          ))}
-        </div>
-      </div>
-    </>
-  );
-}
-
-// ───────────────────── Page: Gifts ─────────────────────
-function GiftsPage(){
-  return (
-    <>
-      <div className="page-h">
-        <div>
-          <span className="eyebrow">/// Промо и бонусы</span>
-          <h1 className="page-title">Подарки</h1>
-        </div>
-        <div className="page-meta">2 АКТИВНЫХ · 1 НОВЫЙ</div>
-      </div>
-
-      <div className="grid grid-3">
-        {[
-          { tag:'NEW', t:'+30 дней SHADOW', d:'Активируй апгрейд за 7 дней — получи +30 дней триала премиум-уровня.', exp:'до 06 МАЯ', cta:'Активировать', red:true },
-          { tag:'ACTIVE', t:'−50% на год CORE', d:'Промо для друга. Один раз на новый аккаунт.', exp:'до 31 МАЯ', cta:'Скопировать код', code:'SOLO50-FRIEND' },
-          { tag:'ACTIVE', t:'+15 дней за 2FA', d:'Включи двухфакторку — получи дополнительные 15 дней к подписке.', exp:'бессрочно', cta:'Включить 2FA' },
-        ].map((g,i)=>(
-          <div className="panel" key={i} style={g.red?{borderColor:'var(--red)'}:{}}>
-            <div className="panel-h"><b className={g.red?'red':''}>// {g.tag}</b><span>{g.exp}</span></div>
-            <div className="panel-b" style={{display:'flex',flexDirection:'column',gap:12,minHeight:160}}>
-              <div style={{fontSize:22,fontWeight:700,letterSpacing:'-.01em',lineHeight:1.05,textTransform:'uppercase'}}>{g.t}</div>
-              <div style={{fontSize:12,color:'var(--fg-dim)'}}>{g.d}</div>
-              {g.code && <div style={{padding:'8px 10px',border:'1px dashed var(--line-2)',fontSize:13,fontWeight:600,letterSpacing:'.08em',color:'var(--red)'}}>{g.code}</div>}
-              <button className={`btn ${g.red?'btn-red':'btn-ghost'}`} style={{marginTop:'auto'}}>{g.cta} →</button>
-            </div>
-          </div>
-        ))}
-      </div>
-
-      <div className="grid grid-2">
-        <div className="panel">
-          <div className="panel-h"><b>// Промо-код</b><span>введи и активируй</span></div>
-          <div className="panel-b" style={{display:'flex',gap:10,alignItems:'stretch'}}>
-            <input placeholder="PROMO-XXXX-XXXX" style={{flex:1,background:'var(--bg-2)',border:'1px solid var(--line-2)',color:'var(--fg)',font:'inherit',padding:'10px 14px',outline:'none',letterSpacing:'.08em'}}/>
-            <button className="btn btn-red">Активировать</button>
-          </div>
-        </div>
-        <div className="panel">
-          <div className="panel-h"><b>// История подарков</b><span>5 активаций</span></div>
-          <div className="srv-list">
-            {[
-              ['+30 дней триала PRIME','SOLO-FRIEND-9F3A','12 апр 2026'],
-              ['Кэшбек 1 050 ₽','REF-PROGRAM','01 апр 2026'],
-              ['+15 дней за 2FA','—','—'],
-              ['−50% на CORE','BLACKFRI-2025','24 ноя 2025'],
-            ].map(([t,c,d],i)=>(
-              <div className="srv" key={i}>
-                <span className="flag" style={{color:'var(--red)'}}>★</span>
-                <span><span className="name">{t}</span></span>
-                <span className="ping">{c}</span>
-                <span></span>
-                <span className="pick" style={{color:'var(--fg-dim)'}}>{d}</span>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}
-
-// ───────────────────── Page: Notifications ─────────────────────
-function NotificationsPage(){
-  const [filter, setFilter] = useState('all');
-  const items = [
-    { lvl:'WARN', cls:'warn', t:'Замечена попытка входа из другой страны', d:'IP 213.180.42.8 · Германия · браузер Chrome. Если это не вы — смените пароль.', ts:'14:08 · сегодня', unread:true },
-    { lvl:'INFO', cls:'',     t:'Новый сервер в сети — Лиссабон (LIS-01)',  d:'Доступен в тарифах PRIME и SHADOW. Латентность из Москвы — 64 мс.', ts:'10 ч назад', unread:true },
-    { lvl:'OK',   cls:'ok',   t:'Платёж 4 788 ₽ прошёл успешно',           d:'Подписка PRIME продлена до 12 апреля 2027.', ts:'12 апр', unread:true },
-    { lvl:'INFO', cls:'',     t:'Друг solo_anya активировал PRIME · 12 мес', d:'+30 бонусных дней начислено к твоей подписке.', ts:'10 апр', unread:true },
-    { lvl:'WARN', cls:'warn', t:'2FA не включён',                          d:'Рекомендуем настроить — это даст +15 дней подписки в подарок.', ts:'05 апр', unread:true },
-    { lvl:'OK',   cls:'ok',   t:'Утечка данных не обнаружена',             d:'Авто-аудит DNS · IPv6 · WebRTC прошёл успешно.', ts:'02 апр' },
-    { lvl:'INFO', cls:'',     t:'Обновление клиента 4.2.0',                d:'Поддержка obfuscated протокола, починка автостарта на macOS Sonoma.', ts:'28 мар' },
-    { lvl:'INFO', cls:'',     t:'Сменили дизайн кабинета',                  d:'Добавили вкладки Подарки и Партнёрку — загляни.', ts:'15 мар' },
-  ];
-  const filtered = filter==='unread' ? items.filter(i=>i.unread) : filter==='warn' ? items.filter(i=>i.lvl==='WARN') : items;
-
-  return (
-    <>
-      <div className="page-h">
-        <div>
-          <span className="eyebrow">/// Системные события</span>
-          <h1 className="page-title">Уведомления</h1>
-        </div>
-        <div className="page-meta">5 НЕПРОЧИТАННЫХ</div>
-      </div>
-
-      <div className="panel">
-        <div className="panel-h" style={{justifyContent:'space-between'}}>
-          <b>// Лента событий</b>
-          <div style={{display:'flex',gap:10,alignItems:'center'}}>
-            <div className="seg">
-              {[['all','Все · 8'],['unread','Новые · 5'],['warn','Важные · 2']].map(([k,l]) => (
-                <button key={k} className={filter===k?'on':''} onClick={()=>setFilter(k)}>{l}</button>
-              ))}
-            </div>
-            <button className="btn btn-sm btn-ghost">Пометить как прочитанные</button>
-          </div>
-        </div>
-        <div>
-          {filtered.map((n,i)=>(
-            <div key={i} style={{display:'grid',gridTemplateColumns:'auto 60px 1fr auto',gap:14,alignItems:'flex-start',padding:'14px 16px',borderBottom:'1px solid var(--line)',background:n.unread?'var(--bg-2)':'transparent'}}>
-              <span style={{width:8,height:8,marginTop:6,background:n.unread?'var(--red)':'var(--fg-mute)',display:'inline-block',borderRadius:'50%'}}></span>
-              <span className={`lvl ${n.cls}`} style={{fontSize:10,fontWeight:700,letterSpacing:'.14em',marginTop:2,color:n.cls==='ok'?'var(--green)':n.cls==='warn'?'var(--yellow)':'var(--fg-dim)'}}>{n.lvl}</span>
-              <div>
-                <div style={{fontSize:13,fontWeight:600,marginBottom:3}}>{n.t}</div>
-                <div style={{fontSize:11,color:'var(--fg-dim)',lineHeight:1.5,maxWidth:'70ch'}}>{n.d}</div>
-              </div>
-              <span style={{fontSize:10,color:'var(--fg-dim)',letterSpacing:'.12em',textTransform:'uppercase',whiteSpace:'nowrap',marginTop:2}}>{n.ts}</span>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      <div className="panel">
-        <div className="panel-h"><b>// Каналы доставки</b><span>куда присылать</span></div>
-        <NotifChannel name="E-mail" v="kirill@solonet.io" on={true}/>
-        <NotifChannel name="Telegram" v="@solo_kirill" on={true}/>
-        <NotifChannel name="Push в приложении" v="3 устройства" on={true}/>
-        <NotifChannel name="SMS" v="+7 ··· ··· 47-12" on={false}/>
-      </div>
-    </>
-  );
-}
-
-function NotifChannel({name,v,on:onInit}){
-  const [on,setOn] = useState(onInit);
-  return (
-    <div className="opt">
-      <div className="opt-l"><div className="opt-name">{name}</div><div className="opt-d">{v}</div></div>
-      <button className="toggle" data-on={on?'1':'0'} onClick={()=>setOn(!on)}><i/></button>
-    </div>
-  );
-}
-
-function Stat({ k, v, u, d, down }){
-  return (
-    <div className="panel stat">
-      <div className="stat-k">{k}</div>
-      <div className="stat-v">{v}{u && <span className="u">{u}</span>}</div>
-      {d && <div className={`stat-d ${down?'down':''}`}>{down?'↓':'↑'} {d}</div>}
-    </div>
-  );
-}
-
-// ───────────────────── App ─────────────────────
-const PAGES = {
-  prof: ProfilePage,
-  bill: SubsPage,
-  ref:  PartnerPage,
-  gift: GiftsPage,
-  note: NotificationsPage,
-};
-
-function App(){
-  const [active, setActive] = useState('prof');
-  const Page = PAGES[active];
-  return (
-    <div className="app" data-screen-label={`Cabinet · ${active}`}>
-      <Sidebar active={active} setActive={setActive}/>
-      <main>
-        <Topbar active={active}/>
-        <div className="content">
-          <Page />
-        </div>
-      </main>
-    </div>
-  );
-}
-
-ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
-</script>
-</body>
-</html>
diff --git a/SoloNet.html b/SoloNet.html
deleted file mode 100644
index f5974240..00000000
--- a/SoloNet.html
+++ /dev/null
@@ -1,1154 +0,0 @@
-<!doctype html>
-<html lang="ru">
-<head>
-<meta charset="utf-8" />
-<title>SoloNet — VPN</title>
-<meta name="viewport" content="width=device-width,initial-scale=1" />
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
-<style>
-  *,*::before,*::after{box-sizing:border-box}
-  html,body{margin:0;padding:0}
-  :root{
-    --bg:#0A0A0A;
-    --bg-2:#111111;
-    --fg:#F2F2F2;
-    --fg-dim:#7A7A7A;
-    --fg-mute:#3A3A3A;
-    --line:#1F1F1F;
-    --line-2:#2A2A2A;
-    --red:#FF2D2D;
-    --red-deep:#C81E1E;
-    --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
-    --display:'JetBrains Mono',ui-monospace,monospace;
-  }
-  [data-theme="light"]{
-    --bg:#F5F4F1;
-    --bg-2:#EDEBE6;
-    --fg:#0A0A0A;
-    --fg-dim:#5A5A5A;
-    --fg-mute:#BEBCB6;
-    --line:#D9D6CF;
-    --line-2:#C7C3BB;
-  }
-  html,body{background:var(--bg);color:var(--fg);font-family:var(--mono);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
-  a{color:inherit;text-decoration:none}
-  button{font-family:inherit}
-  ::selection{background:var(--red);color:#fff}
-
-  /* layout */
-  .wrap{max-width:1320px;margin:0 auto;padding:0 32px}
-  .rule{height:1px;background:var(--line);width:100%}
-
-  /* nav */
-  .nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:color-mix(in oklab, var(--bg) 78%, transparent);border-bottom:1px solid var(--line)}
-  .nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
-  .logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.02em}
-  .logo-mark{width:22px;height:22px;border:1.5px solid var(--fg);position:relative;display:inline-block}
-  .logo-mark::before{content:"";position:absolute;inset:3px;background:var(--red)}
-  .logo-mark::after{content:"";position:absolute;width:6px;height:6px;background:var(--bg);right:-3px;top:-3px;border:1.5px solid var(--fg)}
-  .nav-links{display:flex;gap:28px;font-size:12px;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.12em}
-  .nav-links a:hover{color:var(--fg)}
-  .nav-cta{display:flex;gap:10px;align-items:center}
-  .status-dot{display:inline-flex;align-items:center;gap:8px;font-size:11px;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.14em}
-  .status-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 var(--red);animation:pulse 1.6s infinite}
-  @keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--red) 60%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
-
-  /* buttons */
-  .btn{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;border:1px solid var(--fg);background:var(--fg);color:var(--bg);font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:transform .12s ease, background .18s ease;border-radius:0;position:relative}
-  .btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--red)}
-  .btn-red{background:var(--red);border-color:var(--red);color:#fff}
-  .btn-red:hover{box-shadow:6px 6px 0 var(--fg)}
-  .btn-ghost{background:transparent;color:var(--fg)}
-  .btn-ghost:hover{background:var(--fg);color:var(--bg);box-shadow:none;transform:none}
-  .btn-sm{height:36px;padding:0 14px;font-size:11px}
-  .btn .arr{display:inline-block;transition:transform .2s}
-  .btn:hover .arr{transform:translateX(3px)}
-
-  /* hero */
-  .hero{position:relative;padding:64px 0 72px;border-bottom:1px solid var(--line);overflow:hidden}
-  .hero-grid{position:absolute;inset:0;pointer-events:none;opacity:.55}
-  .hero-meta{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.18em;margin-bottom:32px}
-  .hero-meta span{display:inline-flex;gap:8px;align-items:center}
-  .hero-meta .sep{color:var(--fg-mute)}
-  h1.hero-title{font-family:var(--display);font-weight:800;font-size:clamp(72px,15vw,232px);line-height:.86;letter-spacing:-.04em;margin:0;text-transform:uppercase;position:relative;z-index:2}
-  h1.hero-title .accent{color:var(--red)}
-  h1.hero-title .blink{display:inline-block;color:var(--red);animation:blink 1s steps(2) infinite}
-  @keyframes blink{50%{opacity:0}}
-  .hero-row{display:grid;grid-template-columns:1.4fr 1fr;gap:56px;margin-top:48px;align-items:end;position:relative;z-index:2}
-  .hero-tag{font-size:14px;color:var(--fg-dim);max-width:42ch}
-  .hero-tag b{color:var(--fg);font-weight:600}
-  .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
-  .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border:1px solid var(--line);padding:20px;background:color-mix(in oklab, var(--bg-2) 70%, transparent)}
-  .stat-k{font-size:11px;color:var(--fg-dim);letter-spacing:.14em;text-transform:uppercase}
-  .stat-v{font-size:30px;font-weight:700;letter-spacing:-.02em;margin-top:4px;font-variant-numeric:tabular-nums}
-  .stat-u{color:var(--red);font-size:16px;margin-left:4px}
-
-  /* tag-line ascii */
-  .ascii-rule{font-family:var(--mono);color:var(--fg-mute);overflow:hidden;white-space:nowrap;font-size:12px;line-height:1.2;letter-spacing:0;user-select:none}
-
-  /* section */
-  section.s{padding:96px 0;border-bottom:1px solid var(--line);position:relative}
-  .s-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:48px}
-  .s-eyebrow{font-size:11px;color:var(--red);letter-spacing:.22em;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px}
-  .s-eyebrow::before{content:"";width:24px;height:1px;background:var(--red)}
-  .s-title{font-family:var(--display);font-size:clamp(40px,5vw,72px);line-height:.95;letter-spacing:-.025em;font-weight:700;margin:14px 0 0;max-width:18ch;text-transform:uppercase}
-  .s-num{font-family:var(--mono);font-size:11px;color:var(--fg-dim);letter-spacing:.18em}
-
-  /* features */
-  .features{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line)}
-  .feat{padding:32px;border-right:1px solid var(--line);position:relative;min-height:340px;display:flex;flex-direction:column;justify-content:space-between;background:var(--bg);transition:background .2s}
-  .feat:last-child{border-right:0}
-  .feat:hover{background:var(--bg-2)}
-  .feat-top{display:flex;justify-content:space-between;align-items:flex-start}
-  .feat-id{font-size:11px;color:var(--fg-dim);letter-spacing:.14em}
-  .feat-icon{width:64px;height:64px;border:1px solid var(--line-2);position:relative;display:flex;align-items:center;justify-content:center}
-  .feat-icon svg{width:32px;height:32px;stroke:var(--fg);fill:none;stroke-width:1.4}
-  .feat:hover .feat-icon{border-color:var(--red)}
-  .feat:hover .feat-icon svg{stroke:var(--red)}
-  .feat-title{font-family:var(--display);font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1;margin:32px 0 12px;text-transform:uppercase}
-  .feat-desc{font-size:13px;color:var(--fg-dim);line-height:1.55;max-width:34ch}
-  .feat-metric{display:flex;align-items:baseline;gap:6px;margin-top:24px;border-top:1px dashed var(--line-2);padding-top:14px}
-  .feat-metric .v{font-size:24px;font-weight:700;color:var(--fg);font-variant-numeric:tabular-nums}
-  .feat-metric .v .red{color:var(--red)}
-  .feat-metric .l{font-size:10px;color:var(--fg-dim);letter-spacing:.16em;text-transform:uppercase}
-
-  /* plans carousel */
-  .plans-wrap{position:relative}
-  .plans-rail{display:flex;gap:0;overflow:hidden;border:1px solid var(--line)}
-  .plans-track{display:flex;transition:transform .55s cubic-bezier(.7,.04,.16,1);width:100%}
-  .plan{flex:0 0 calc(100% / 3);padding:36px 32px 32px;border-right:1px solid var(--line);min-height:520px;display:flex;flex-direction:column;position:relative;background:var(--bg)}
-  .plan.featured{background:var(--bg-2)}
-  .plan.featured::after{content:"";position:absolute;inset:0;border:1px solid var(--red);pointer-events:none}
-  .plan-tag{position:absolute;top:0;right:0;background:var(--red);color:#fff;font-size:10px;letter-spacing:.16em;padding:6px 10px;text-transform:uppercase;font-weight:700}
-  .plan-id{font-size:11px;color:var(--fg-dim);letter-spacing:.14em;text-transform:uppercase}
-  .plan-name{font-family:var(--display);font-size:40px;font-weight:700;letter-spacing:-.02em;line-height:1;margin:14px 0 6px;text-transform:uppercase}
-  .plan-sub{font-size:12px;color:var(--fg-dim);max-width:30ch}
-  .plan-price{display:flex;align-items:baseline;gap:6px;margin:28px 0 4px}
-  .plan-price .num{font-family:var(--display);font-size:64px;font-weight:800;line-height:.9;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
-  .plan-price .cur{font-size:20px;color:var(--fg-dim)}
-  .plan-period{font-size:11px;color:var(--fg-dim);letter-spacing:.12em;text-transform:uppercase}
-  .plan-feats{list-style:none;padding:0;margin:24px 0 0;border-top:1px solid var(--line);font-size:13px}
-  .plan-feats li{padding:10px 0;border-bottom:1px dashed var(--line);display:flex;justify-content:space-between;gap:12px;color:var(--fg-dim)}
-  .plan-feats li b{color:var(--fg);font-weight:600}
-  .plan-cta{margin-top:auto;padding-top:24px}
-  .plan-cta .btn{width:100%;justify-content:space-between}
-
-  .plans-controls{display:flex;justify-content:space-between;align-items:center;margin-top:24px;gap:24px}
-  .plans-arrows{display:flex;gap:0;border:1px solid var(--fg)}
-  .arrow-btn{width:48px;height:48px;border:0;background:transparent;color:var(--fg);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-right:1px solid var(--fg);font-size:18px;transition:background .15s}
-  .arrow-btn:last-child{border-right:0}
-  .arrow-btn:hover{background:var(--fg);color:var(--bg)}
-  .arrow-btn:disabled{opacity:.25;cursor:not-allowed}
-  .arrow-btn:disabled:hover{background:transparent;color:var(--fg)}
-  .plans-progress{flex:1;height:1px;background:var(--line);position:relative;overflow:hidden}
-  .plans-progress-bar{height:100%;background:var(--red);transition:width .4s ease, transform .4s ease}
-  .plans-counter{font-size:11px;letter-spacing:.16em;color:var(--fg-dim);font-variant-numeric:tabular-nums;text-transform:uppercase}
-
-  /* faq */
-  .faq{border-top:1px solid var(--line)}
-  .faq-item{border-bottom:1px solid var(--line)}
-  .faq-q{display:flex;justify-content:space-between;align-items:center;width:100%;padding:24px 0;background:transparent;border:0;color:inherit;font-family:var(--mono);font-size:18px;text-align:left;cursor:pointer;letter-spacing:-.005em;font-weight:500}
-  .faq-q:hover{color:var(--red)}
-  .faq-q .qid{color:var(--fg-dim);font-size:12px;width:60px;flex-shrink:0;letter-spacing:.16em}
-  .faq-q .qtxt{flex:1;padding-right:24px}
-  .faq-q .qtoggle{width:32px;height:32px;border:1px solid var(--line-2);display:inline-flex;align-items:center;justify-content:center;font-size:14px;transition:all .2s;flex-shrink:0}
-  .faq-item.open .qtoggle{background:var(--red);border-color:var(--red);color:#fff}
-  .faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;padding:0 0 0 60px}
-  .faq-item.open .faq-a{max-height:300px}
-  .faq-a-inner{padding:0 24px 28px 0;color:var(--fg-dim);font-size:14px;max-width:62ch}
-
-  /* CTA */
-  .cta{padding:120px 0;background:var(--red);color:#fff;border-bottom:1px solid var(--red);position:relative;overflow:hidden}
-  .cta::before{content:"";position:absolute;inset:0;background-image:linear-gradient(0deg,transparent 0,transparent calc(100% - 1px),rgba(255,255,255,.08) 100%),linear-gradient(90deg,transparent 0,transparent calc(100% - 1px),rgba(255,255,255,.08) 100%);background-size:40px 40px;pointer-events:none}
-  .cta-inner{position:relative;display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:end}
-  .cta h2{font-family:var(--display);font-size:clamp(48px,8vw,128px);line-height:.86;letter-spacing:-.03em;margin:0;font-weight:800;text-transform:uppercase}
-  .cta p{font-size:16px;max-width:38ch;color:rgba(255,255,255,.85);margin:0 0 24px}
-  .cta .btn{background:#fff;border-color:#fff;color:var(--red);height:56px;padding:0 24px;font-size:14px}
-  .cta .btn:hover{box-shadow:6px 6px 0 #000;transform:translate(-2px,-2px)}
-  .cta .btn.btn-ghost{background:transparent;color:#fff;border-color:#fff}
-  .cta .btn.btn-ghost:hover{background:#fff;color:var(--red);box-shadow:none;transform:none}
-
-  /* footer */
-  footer{padding:48px 0 56px;font-size:12px;color:var(--fg-dim)}
-  .foot-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;margin-top:24px}
-  .foot-row span{letter-spacing:.14em;text-transform:uppercase}
-
-  /* hero canvas */
-  .grid-canvas{position:absolute;inset:0;width:100%;height:100%}
-
-  /* responsive-ish */
-  @media (max-width: 980px){
-    .features{grid-template-columns:1fr}
-    .feat{border-right:0;border-bottom:1px solid var(--line)}
-    .plan{flex:0 0 100%}
-    .hero-row{grid-template-columns:1fr}
-    .cta-inner{grid-template-columns:1fr}
-    .nav-links{display:none}
-  }
-</style>
-</head>
-<body>
-<div id="root"></div>
-
-<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
-
-<script type="text/babel" data-presets="env,react">
-
-// tweaks-panel.jsx
-// Reusable Tweaks shell + form-control helpers.
-//
-// Owns the host protocol (listens for __activate_edit_mode / __deactivate_edit_mode,
-// posts __edit_mode_available / __edit_mode_set_keys / __edit_mode_dismissed) so
-// individual prototypes don't re-roll it. Ships a consistent set of controls so you
-// don't hand-draw <input type="range">, segmented radios, steppers, etc.
-//
-// Usage (in an HTML file that loads React + Babel):
-//
-//   const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
-//     "primaryColor": "#D97757",
-//     "fontSize": 16,
-//     "density": "regular",
-//     "dark": false
-//   }/*EDITMODE-END*/;
-//
-//   function App() {
-//     const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
-//     return (
-//       <div style={{ fontSize: t.fontSize, color: t.primaryColor }}>
-//         Hello
-//         <TweaksPanel>
-//           <TweakSection label="Typography" />
-//           <TweakSlider label="Font size" value={t.fontSize} min={10} max={32} unit="px"
-//                        onChange={(v) => setTweak('fontSize', v)} />
-//           <TweakRadio  label="Density" value={t.density}
-//                        options={['compact', 'regular', 'comfy']}
-//                        onChange={(v) => setTweak('density', v)} />
-//           <TweakSection label="Theme" />
-//           <TweakColor  label="Primary" value={t.primaryColor}
-//                        onChange={(v) => setTweak('primaryColor', v)} />
-//           <TweakToggle label="Dark mode" value={t.dark}
-//                        onChange={(v) => setTweak('dark', v)} />
-//         </TweaksPanel>
-//       </div>
-//     );
-//   }
-//
-// ─────────────────────────────────────────────────────────────────────────────
-
-const __TWEAKS_STYLE = `
-  .twk-panel{position:fixed;right:16px;bottom:16px;z-index:2147483646;width:280px;
-    max-height:calc(100vh - 32px);display:flex;flex-direction:column;
-    background:rgba(250,249,247,.78);color:#29261b;
-    -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
-    border:.5px solid rgba(255,255,255,.6);border-radius:14px;
-    box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 12px 40px rgba(0,0,0,.18);
-    font:11.5px/1.4 ui-sans-serif,system-ui,-apple-system,sans-serif;overflow:hidden}
-  .twk-hd{display:flex;align-items:center;justify-content:space-between;
-    padding:10px 8px 10px 14px;cursor:move;user-select:none}
-  .twk-hd b{font-size:12px;font-weight:600;letter-spacing:.01em}
-  .twk-x{appearance:none;border:0;background:transparent;color:rgba(41,38,27,.55);
-    width:22px;height:22px;border-radius:6px;cursor:default;font-size:13px;line-height:1}
-  .twk-x:hover{background:rgba(0,0,0,.06);color:#29261b}
-  .twk-body{padding:2px 14px 14px;display:flex;flex-direction:column;gap:10px;
-    overflow-y:auto;overflow-x:hidden;min-height:0;
-    scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.15) transparent}
-  .twk-body::-webkit-scrollbar{width:8px}
-  .twk-body::-webkit-scrollbar-track{background:transparent;margin:2px}
-  .twk-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:4px;
-    border:2px solid transparent;background-clip:content-box}
-  .twk-body::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.25);
-    border:2px solid transparent;background-clip:content-box}
-  .twk-row{display:flex;flex-direction:column;gap:5px}
-  .twk-row-h{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
-  .twk-lbl{display:flex;justify-content:space-between;align-items:baseline;
-    color:rgba(41,38,27,.72)}
-  .twk-lbl>span:first-child{font-weight:500}
-  .twk-val{color:rgba(41,38,27,.5);font-variant-numeric:tabular-nums}
-
-  .twk-sect{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
-    color:rgba(41,38,27,.45);padding:10px 0 0}
-  .twk-sect:first-child{padding-top:0}
-
-  .twk-field{appearance:none;width:100%;height:26px;padding:0 8px;
-    border:.5px solid rgba(0,0,0,.1);border-radius:7px;
-    background:rgba(255,255,255,.6);color:inherit;font:inherit;outline:none}
-  .twk-field:focus{border-color:rgba(0,0,0,.25);background:rgba(255,255,255,.85)}
-  select.twk-field{padding-right:22px;
-    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='rgba(0,0,0,.5)' d='M0 0h10L5 6z'/></svg>");
-    background-repeat:no-repeat;background-position:right 8px center}
-
-  .twk-slider{appearance:none;-webkit-appearance:none;width:100%;height:4px;margin:6px 0;
-    border-radius:999px;background:rgba(0,0,0,.12);outline:none}
-  .twk-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
-    width:14px;height:14px;border-radius:50%;background:#fff;
-    border:.5px solid rgba(0,0,0,.12);box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:default}
-  .twk-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;
-    background:#fff;border:.5px solid rgba(0,0,0,.12);box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:default}
-
-  .twk-seg{position:relative;display:flex;padding:2px;border-radius:8px;
-    background:rgba(0,0,0,.06);user-select:none}
-  .twk-seg-thumb{position:absolute;top:2px;bottom:2px;border-radius:6px;
-    background:rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(0,0,0,.12);
-    transition:left .15s cubic-bezier(.3,.7,.4,1),width .15s}
-  .twk-seg.dragging .twk-seg-thumb{transition:none}
-  .twk-seg button{appearance:none;position:relative;z-index:1;flex:1;border:0;
-    background:transparent;color:inherit;font:inherit;font-weight:500;min-height:22px;
-    border-radius:6px;cursor:default;padding:4px 6px;line-height:1.2;
-    overflow-wrap:anywhere}
-
-  .twk-toggle{position:relative;width:32px;height:18px;border:0;border-radius:999px;
-    background:rgba(0,0,0,.15);transition:background .15s;cursor:default;padding:0}
-  .twk-toggle[data-on="1"]{background:#34c759}
-  .twk-toggle i{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
-    background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
-  .twk-toggle[data-on="1"] i{transform:translateX(14px)}
-
-  .twk-num{display:flex;align-items:center;height:26px;padding:0 0 0 8px;
-    border:.5px solid rgba(0,0,0,.1);border-radius:7px;background:rgba(255,255,255,.6)}
-  .twk-num-lbl{font-weight:500;color:rgba(41,38,27,.6);cursor:ew-resize;
-    user-select:none;padding-right:8px}
-  .twk-num input{flex:1;min-width:0;height:100%;border:0;background:transparent;
-    font:inherit;font-variant-numeric:tabular-nums;text-align:right;padding:0 8px 0 0;
-    outline:none;color:inherit;-moz-appearance:textfield}
-  .twk-num input::-webkit-inner-spin-button,.twk-num input::-webkit-outer-spin-button{
-    -webkit-appearance:none;margin:0}
-  .twk-num-unit{padding-right:8px;color:rgba(41,38,27,.45)}
-
-  .twk-btn{appearance:none;height:26px;padding:0 12px;border:0;border-radius:7px;
-    background:rgba(0,0,0,.78);color:#fff;font:inherit;font-weight:500;cursor:default}
-  .twk-btn:hover{background:rgba(0,0,0,.88)}
-  .twk-btn.secondary{background:rgba(0,0,0,.06);color:inherit}
-  .twk-btn.secondary:hover{background:rgba(0,0,0,.1)}
-
-  .twk-swatch{appearance:none;-webkit-appearance:none;width:56px;height:22px;
-    border:.5px solid rgba(0,0,0,.1);border-radius:6px;padding:0;cursor:default;
-    background:transparent;flex-shrink:0}
-  .twk-swatch::-webkit-color-swatch-wrapper{padding:0}
-  .twk-swatch::-webkit-color-swatch{border:0;border-radius:5.5px}
-  .twk-swatch::-moz-color-swatch{border:0;border-radius:5.5px}
-`;
-
-// ── useTweaks ───────────────────────────────────────────────────────────────
-// Single source of truth for tweak values. setTweak persists via the host
-// (__edit_mode_set_keys → host rewrites the EDITMODE block on disk).
-function useTweaks(defaults) {
-  const [values, setValues] = React.useState(defaults);
-  // Accepts either setTweak('key', value) or setTweak({ key: value, ... }) so a
-  // useState-style call doesn't write a "[object Object]" key into the persisted
-  // JSON block.
-  const setTweak = React.useCallback((keyOrEdits, val) => {
-    const edits = typeof keyOrEdits === 'object' && keyOrEdits !== null
-      ? keyOrEdits : { [keyOrEdits]: val };
-    setValues((prev) => ({ ...prev, ...edits }));
-    window.parent.postMessage({ type: '__edit_mode_set_keys', edits }, '*');
-  }, []);
-  return [values, setTweak];
-}
-
-// ── TweaksPanel ─────────────────────────────────────────────────────────────
-// Floating shell. Registers the protocol listener BEFORE announcing
-// availability — if the announce ran first, the host's activate could land
-// before our handler exists and the toolbar toggle would silently no-op.
-// The close button posts __edit_mode_dismissed so the host's toolbar toggle
-// flips off in lockstep; the host echoes __deactivate_edit_mode back which
-// is what actually hides the panel.
-function TweaksPanel({ title = 'Tweaks', children }) {
-  const [open, setOpen] = React.useState(false);
-  const dragRef = React.useRef(null);
-  const offsetRef = React.useRef({ x: 16, y: 16 });
-  const PAD = 16;
-
-  const clampToViewport = React.useCallback(() => {
-    const panel = dragRef.current;
-    if (!panel) return;
-    const w = panel.offsetWidth, h = panel.offsetHeight;
-    const maxRight = Math.max(PAD, window.innerWidth - w - PAD);
-    const maxBottom = Math.max(PAD, window.innerHeight - h - PAD);
-    offsetRef.current = {
-      x: Math.min(maxRight, Math.max(PAD, offsetRef.current.x)),
-      y: Math.min(maxBottom, Math.max(PAD, offsetRef.current.y)),
-    };
-    panel.style.right = offsetRef.current.x + 'px';
-    panel.style.bottom = offsetRef.current.y + 'px';
-  }, []);
-
-  React.useEffect(() => {
-    if (!open) return;
-    clampToViewport();
-    if (typeof ResizeObserver === 'undefined') {
-      window.addEventListener('resize', clampToViewport);
-      return () => window.removeEventListener('resize', clampToViewport);
-    }
-    const ro = new ResizeObserver(clampToViewport);
-    ro.observe(document.documentElement);
-    return () => ro.disconnect();
-  }, [open, clampToViewport]);
-
-  React.useEffect(() => {
-    const onMsg = (e) => {
-      const t = e?.data?.type;
-      if (t === '__activate_edit_mode') setOpen(true);
-      else if (t === '__deactivate_edit_mode') setOpen(false);
-    };
-    window.addEventListener('message', onMsg);
-    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
-    return () => window.removeEventListener('message', onMsg);
-  }, []);
-
-  const dismiss = () => {
-    setOpen(false);
-    window.parent.postMessage({ type: '__edit_mode_dismissed' }, '*');
-  };
-
-  const onDragStart = (e) => {
-    const panel = dragRef.current;
-    if (!panel) return;
-    const r = panel.getBoundingClientRect();
-    const sx = e.clientX, sy = e.clientY;
-    const startRight = window.innerWidth - r.right;
-    const startBottom = window.innerHeight - r.bottom;
-    const move = (ev) => {
-      offsetRef.current = {
-        x: startRight - (ev.clientX - sx),
-        y: startBottom - (ev.clientY - sy),
-      };
-      clampToViewport();
-    };
-    const up = () => {
-      window.removeEventListener('mousemove', move);
-      window.removeEventListener('mouseup', up);
-    };
-    window.addEventListener('mousemove', move);
-    window.addEventListener('mouseup', up);
-  };
-
-  if (!open) return null;
-  return (
-    <>
-      <style>{__TWEAKS_STYLE}</style>
-      <div ref={dragRef} className="twk-panel"
-           style={{ right: offsetRef.current.x, bottom: offsetRef.current.y }}>
-        <div className="twk-hd" onMouseDown={onDragStart}>
-          <b>{title}</b>
-          <button className="twk-x" aria-label="Close tweaks"
-                  onMouseDown={(e) => e.stopPropagation()}
-                  onClick={dismiss}>✕</button>
-        </div>
-        <div className="twk-body">{children}</div>
-      </div>
-    </>
-  );
-}
-
-// ── Layout helpers ──────────────────────────────────────────────────────────
-
-function TweakSection({ label, children }) {
-  return (
-    <>
-      <div className="twk-sect">{label}</div>
-      {children}
-    </>
-  );
-}
-
-function TweakRow({ label, value, children, inline = false }) {
-  return (
-    <div className={inline ? 'twk-row twk-row-h' : 'twk-row'}>
-      <div className="twk-lbl">
-        <span>{label}</span>
-        {value != null && <span className="twk-val">{value}</span>}
-      </div>
-      {children}
-    </div>
-  );
-}
-
-// ── Controls ────────────────────────────────────────────────────────────────
-
-function TweakSlider({ label, value, min = 0, max = 100, step = 1, unit = '', onChange }) {
-  return (
-    <TweakRow label={label} value={`${value}${unit}`}>
-      <input type="range" className="twk-slider" min={min} max={max} step={step}
-             value={value} onChange={(e) => onChange(Number(e.target.value))} />
-    </TweakRow>
-  );
-}
-
-function TweakToggle({ label, value, onChange }) {
-  return (
-    <div className="twk-row twk-row-h">
-      <div className="twk-lbl"><span>{label}</span></div>
-      <button type="button" className="twk-toggle" data-on={value ? '1' : '0'}
-              role="switch" aria-checked={!!value}
-              onClick={() => onChange(!value)}><i /></button>
-    </div>
-  );
-}
-
-function TweakRadio({ label, value, options, onChange }) {
-  const trackRef = React.useRef(null);
-  const [dragging, setDragging] = React.useState(false);
-  const opts = options.map((o) => (typeof o === 'object' ? o : { value: o, label: o }));
-  const idx = Math.max(0, opts.findIndex((o) => o.value === value));
-  const n = opts.length;
-
-  // The active value is read by pointer-move handlers attached for the lifetime
-  // of a drag — ref it so a stale closure doesn't fire onChange for every move.
-  const valueRef = React.useRef(value);
-  valueRef.current = value;
-
-  const segAt = (clientX) => {
-    const r = trackRef.current.getBoundingClientRect();
-    const inner = r.width - 4;
-    const i = Math.floor(((clientX - r.left - 2) / inner) * n);
-    return opts[Math.max(0, Math.min(n - 1, i))].value;
-  };
-
-  const onPointerDown = (e) => {
-    setDragging(true);
-    const v0 = segAt(e.clientX);
-    if (v0 !== valueRef.current) onChange(v0);
-    const move = (ev) => {
-      if (!trackRef.current) return;
-      const v = segAt(ev.clientX);
-      if (v !== valueRef.current) onChange(v);
-    };
-    const up = () => {
-      setDragging(false);
-      window.removeEventListener('pointermove', move);
-      window.removeEventListener('pointerup', up);
-    };
-    window.addEventListener('pointermove', move);
-    window.addEventListener('pointerup', up);
-  };
-
-  return (
-    <TweakRow label={label}>
-      <div ref={trackRef} role="radiogroup" onPointerDown={onPointerDown}
-           className={dragging ? 'twk-seg dragging' : 'twk-seg'}>
-        <div className="twk-seg-thumb"
-             style={{ left: `calc(2px + ${idx} * (100% - 4px) / ${n})`,
-                      width: `calc((100% - 4px) / ${n})` }} />
-        {opts.map((o) => (
-          <button key={o.value} type="button" role="radio" aria-checked={o.value === value}>
-            {o.label}
-          </button>
-        ))}
-      </div>
-    </TweakRow>
-  );
-}
-
-function TweakSelect({ label, value, options, onChange }) {
-  return (
-    <TweakRow label={label}>
-      <select className="twk-field" value={value} onChange={(e) => onChange(e.target.value)}>
-        {options.map((o) => {
-          const v = typeof o === 'object' ? o.value : o;
-          const l = typeof o === 'object' ? o.label : o;
-          return <option key={v} value={v}>{l}</option>;
-        })}
-      </select>
-    </TweakRow>
-  );
-}
-
-function TweakText({ label, value, placeholder, onChange }) {
-  return (
-    <TweakRow label={label}>
-      <input className="twk-field" type="text" value={value} placeholder={placeholder}
-             onChange={(e) => onChange(e.target.value)} />
-    </TweakRow>
-  );
-}
-
-function TweakNumber({ label, value, min, max, step = 1, unit = '', onChange }) {
-  const clamp = (n) => {
-    if (min != null && n < min) return min;
-    if (max != null && n > max) return max;
-    return n;
-  };
-  const startRef = React.useRef({ x: 0, val: 0 });
-  const onScrubStart = (e) => {
-    e.preventDefault();
-    startRef.current = { x: e.clientX, val: value };
-    const decimals = (String(step).split('.')[1] || '').length;
-    const move = (ev) => {
-      const dx = ev.clientX - startRef.current.x;
-      const raw = startRef.current.val + dx * step;
-      const snapped = Math.round(raw / step) * step;
-      onChange(clamp(Number(snapped.toFixed(decimals))));
-    };
-    const up = () => {
-      window.removeEventListener('pointermove', move);
-      window.removeEventListener('pointerup', up);
-    };
-    window.addEventListener('pointermove', move);
-    window.addEventListener('pointerup', up);
-  };
-  return (
-    <div className="twk-num">
-      <span className="twk-num-lbl" onPointerDown={onScrubStart}>{label}</span>
-      <input type="number" value={value} min={min} max={max} step={step}
-             onChange={(e) => onChange(clamp(Number(e.target.value)))} />
-      {unit && <span className="twk-num-unit">{unit}</span>}
-    </div>
-  );
-}
-
-function TweakColor({ label, value, onChange }) {
-  return (
-    <div className="twk-row twk-row-h">
-      <div className="twk-lbl"><span>{label}</span></div>
-      <input type="color" className="twk-swatch" value={value}
-             onChange={(e) => onChange(e.target.value)} />
-    </div>
-  );
-}
-
-function TweakButton({ label, onClick, secondary = false }) {
-  return (
-    <button type="button" className={secondary ? 'twk-btn secondary' : 'twk-btn'}
-            onClick={onClick}>{label}</button>
-  );
-}
-
-Object.assign(window, {
-  useTweaks, TweaksPanel, TweakSection, TweakRow,
-  TweakSlider, TweakToggle, TweakRadio, TweakSelect,
-  TweakText, TweakNumber, TweakColor, TweakButton,
-});
-
-</script>
-<script type="text/babel" data-presets="env,react">
-// SoloNet — landing app
-const { useState, useEffect, useRef, useCallback } = React;
-
-const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
-  "dark": true
-}/*EDITMODE-END*/;
-
-// ──────────────────────────── Hero canvas ────────────────────────────
-function HeroGrid({ dark }) {
-  const ref = useRef(null);
-  useEffect(() => {
-    const canvas = ref.current;
-    if (!canvas) return;
-    const ctx = canvas.getContext('2d');
-    let raf, w, h, dpr;
-    const dot = dark ? 'rgba(245,245,245,0.55)' : 'rgba(10,10,10,0.55)';
-    const lineSoft = dark ? 'rgba(245,245,245,0.06)' : 'rgba(10,10,10,0.06)';
-    const accent = '#FF2D2D';
-
-    const nodes = [];
-    const COLS = 18, ROWS = 9;
-
-    function resize() {
-      dpr = window.devicePixelRatio || 1;
-      w = canvas.clientWidth;
-      h = canvas.clientHeight;
-      canvas.width = w * dpr;
-      canvas.height = h * dpr;
-      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-      // build node grid
-      nodes.length = 0;
-      const padX = 40, padY = 40;
-      for (let y = 0; y < ROWS; y++) {
-        for (let x = 0; x < COLS; x++) {
-          const px = padX + (x / (COLS - 1)) * (w - padX * 2);
-          const py = padY + (y / (ROWS - 1)) * (h - padY * 2);
-          nodes.push({ x: px, y: py, ox: px, oy: py, phase: Math.random() * Math.PI * 2, hot: Math.random() < 0.04 });
-        }
-      }
-    }
-
-    let t = 0;
-    function frame() {
-      t += 0.012;
-      ctx.clearRect(0, 0, w, h);
-
-      // soft grid lines
-      ctx.strokeStyle = lineSoft;
-      ctx.lineWidth = 1;
-      ctx.beginPath();
-      const stepX = w / 24, stepY = h / 12;
-      for (let x = 0; x <= 24; x++) { ctx.moveTo(x * stepX, 0); ctx.lineTo(x * stepX, h); }
-      for (let y = 0; y <= 12; y++) { ctx.moveTo(0, y * stepY); ctx.lineTo(w, y * stepY); }
-      ctx.stroke();
-
-      // wandering pulse line
-      const wave = Math.sin(t * 0.6) * 80;
-      const pulseY = h * 0.5 + wave;
-
-      // dots with subtle motion
-      for (let i = 0; i < nodes.length; i++) {
-        const n = nodes[i];
-        n.x = n.ox + Math.cos(t + n.phase) * 1.2;
-        n.y = n.oy + Math.sin(t * 0.8 + n.phase) * 1.2;
-
-        const distToPulse = Math.abs(n.y - pulseY);
-        const isPulse = distToPulse < 8;
-
-        ctx.fillStyle = n.hot ? accent : (isPulse ? accent : dot);
-        const r = n.hot ? 1.8 : (isPulse ? 1.6 : 0.9);
-        ctx.beginPath();
-        ctx.arc(n.x, n.y, r, 0, Math.PI * 2);
-        ctx.fill();
-      }
-
-      // connecting lines from a "hub" node to nearest hot ones
-      const hub = nodes[Math.floor(nodes.length / 2) + 4];
-      ctx.strokeStyle = accent;
-      ctx.lineWidth = 1;
-      ctx.globalAlpha = 0.35 + Math.sin(t * 2) * 0.15;
-      for (const n of nodes) {
-        if (!n.hot) continue;
-        const d = Math.hypot(n.x - hub.x, n.y - hub.y);
-        if (d < 260) {
-          ctx.beginPath();
-          ctx.moveTo(hub.x, hub.y);
-          ctx.lineTo(n.x, n.y);
-          ctx.stroke();
-        }
-      }
-      ctx.globalAlpha = 1;
-
-      // hub ring
-      ctx.strokeStyle = accent;
-      ctx.lineWidth = 1.2;
-      const ringR = 12 + Math.sin(t * 2.4) * 4;
-      ctx.beginPath();
-      ctx.arc(hub.x, hub.y, ringR, 0, Math.PI * 2);
-      ctx.stroke();
-      ctx.fillStyle = accent;
-      ctx.beginPath();
-      ctx.arc(hub.x, hub.y, 2.2, 0, Math.PI * 2);
-      ctx.fill();
-
-      raf = requestAnimationFrame(frame);
-    }
-
-    resize();
-    frame();
-    window.addEventListener('resize', resize);
-    return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', resize); };
-  }, [dark]);
-  return <canvas ref={ref} className="grid-canvas" />;
-}
-
-// ──────────────────────────── Hero ────────────────────────────
-function Hero({ dark }) {
-  const [now, setNow] = useState('');
-  useEffect(() => {
-    const tick = () => {
-      const d = new Date();
-      const pad = (n) => String(n).padStart(2, '0');
-      setNow(`${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}:${pad(d.getUTCSeconds())} UTC`);
-    };
-    tick();
-    const id = setInterval(tick, 1000);
-    return () => clearInterval(id);
-  }, []);
-
-  const asciiLine = '── ─ ── ── ─── ── ── ─ ──── ── ── ─ ── ─── ── ─ ── ── ──── ── ── ─ ── ── ── ── ─── ── ── ─ ── ── ── ─ ─── ──';
-
-  return (
-    <header className="hero">
-      <HeroGrid dark={dark} />
-      <div className="wrap">
-        <div className="hero-meta">
-          <span><span className="status-dot">SYS // ONLINE</span></span>
-          <span><span className="sep">/</span> NODE_47 <span className="sep">·</span> AMS-03 <span className="sep">·</span> {now}</span>
-          <span>v 4.2.0 — STABLE</span>
-        </div>
-
-        <h1 className="hero-title">
-          SOLO<span className="accent">/</span>NET<span className="blink">_</span>
-        </h1>
-
-        <div className="ascii-rule" style={{marginTop:24}}>{asciiLine}{asciiLine}</div>
-
-        <div className="hero-row">
-          <div>
-            <p className="hero-tag">
-              <b>VPN для одиночек.</b> Шифрование уровня военных протоколов, нулевые логи и защита от утечек DNS / WebRTC. Никаких компромиссов, никакой телеметрии — только ты и сеть.
-            </p>
-            <div className="hero-actions">
-              <button className="btn btn-red">
-                Попробовать 7 дней бесплатно <span className="arr">→</span>
-              </button>
-            </div>
-          </div>
-
-          <div className="hero-stats">
-            <div>
-              <div className="stat-k">Скорость</div>
-              <div className="stat-v">10<span className="stat-u">Gbps</span></div>
-            </div>
-            <div>
-              <div className="stat-k">Серверов</div>
-              <div className="stat-v">412</div>
-            </div>
-            <div>
-              <div className="stat-k">Логов</div>
-              <div className="stat-v">0<span className="stat-u">.00</span></div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </header>
-  );
-}
-
-// ──────────────────────────── Features ────────────────────────────
-const FEATURES = [
-  {
-    id: '01',
-    code: 'SEC-01',
-    title: 'ШИФРОВАНИЕ',
-    desc: 'AES-256-GCM поверх WireGuard®. Perfect Forward Secrecy при каждом подключении — ключи живут минуты, не дни.',
-    metric: { v: 'AES-256', l: 'GCM / X25519' },
-    icon: (
-      <svg viewBox="0 0 32 32"><rect x="6" y="14" width="20" height="14"/><path d="M10 14V10a6 6 0 0 1 12 0v4"/><circle cx="16" cy="21" r="1.5"/></svg>
-    ),
-  },
-  {
-    id: '02',
-    code: 'SEC-02',
-    title: 'ZERO LEAK',
-    desc: 'Killswitch на ядре. Утечки DNS, IPv6 и WebRTC заблокированы по умолчанию — даже если туннель упадёт, трафик встанет вместе с ним.',
-    metric: { v: '0.000%', l: 'leak rate / 90d' },
-    icon: (
-      <svg viewBox="0 0 32 32"><path d="M16 4l10 4v8c0 6-4 10-10 12C10 26 6 22 6 16V8l10-4z"/><path d="M11 16l4 4 7-7"/></svg>
-    ),
-  },
-  {
-    id: '03',
-    code: 'PRF-01',
-    title: 'СКОРОСТЬ',
-    desc: 'Магистрали 10G в каждом регионе. Multi-hop без потери пакетов, реальные 940+ Mbps на гигабитном канале.',
-    metric: { v: '940 / Mbps', l: 'p50 across regions' },
-    icon: (
-      <svg viewBox="0 0 32 32"><path d="M4 24h24"/><path d="M8 20l4-6 4 4 6-10 4 6"/><circle cx="22" cy="8" r="1.5"/></svg>
-    ),
-  },
-];
-
-function Features() {
-  return (
-    <section className="s" id="features">
-      <div className="wrap">
-        <div className="s-head">
-          <div>
-            <span className="s-eyebrow">/// Что внутри</span>
-            <h2 className="s-title">Три кита,<br/>на которых стоит SoloNet</h2>
-          </div>
-          <span className="s-num">[ 01 / 04 ]</span>
-        </div>
-
-        <div className="features">
-          {FEATURES.map((f) => (
-            <article className="feat" key={f.id}>
-              <div className="feat-top">
-                <span className="feat-id">// {f.code}</span>
-                <div className="feat-icon">{f.icon}</div>
-              </div>
-              <div>
-                <div className="feat-title">{f.title}</div>
-                <div className="feat-desc">{f.desc}</div>
-                <div className="feat-metric">
-                  <div className="v"><span className="red">▍</span> {f.metric.v}</div>
-                  <div className="l">— {f.metric.l}</div>
-                </div>
-              </div>
-            </article>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}
-
-// ──────────────────────────── Plans carousel ────────────────────────────
-const PLANS = [
-  {
-    id: '01', code: 'SOLO/01', name: 'PROBE', sub: 'Для разовых сессий и теста скорости.',
-    price: 99, period: '/ 1 месяц',
-    feats: [
-      ['Серверы', '40+'],
-      ['Устройств', '2'],
-      ['Скорость', 'до 1 Gbps'],
-      ['Поддержка', 'Email · 48h'],
-    ],
-    cta: 'Начать',
-  },
-  {
-    id: '02', code: 'SOLO/02', name: 'CORE', sub: 'Базовая защита для одного устройства класса.', tag: 'BASIC',
-    price: 249, period: '/ 6 месяцев',
-    feats: [
-      ['Серверы', '180+'],
-      ['Устройств', '5'],
-      ['Скорость', 'до 5 Gbps'],
-      ['Killswitch', 'Да'],
-      ['Поддержка', 'Email · 24h'],
-    ],
-    cta: 'Подписаться',
-  },
-  {
-    id: '03', code: 'SOLO/03', name: 'PRIME', sub: 'Самый ходовой. Multi-hop и приоритет в очереди.', tag: 'POPULAR', featured: true,
-    price: 399, period: '/ 12 месяцев',
-    feats: [
-      ['Серверы', '412'],
-      ['Устройств', '10'],
-      ['Скорость', 'до 10 Gbps'],
-      ['Multi-hop', '2 узла'],
-      ['Killswitch', 'Да'],
-      ['Поддержка', 'Live · 24/7'],
-    ],
-    cta: 'Выбрать PRIME',
-  },
-  {
-    id: '04', code: 'SOLO/04', name: 'SHADOW', sub: 'Triple-hop, выделенный IP, обфускация трафика.',
-    price: 899, period: '/ 12 месяцев',
-    feats: [
-      ['Серверы', '412 + dedicated'],
-      ['Устройств', '∞'],
-      ['Скорость', 'до 10 Gbps'],
-      ['Triple-hop', 'Да'],
-      ['Obfuscation', 'XOR + TLS'],
-      ['Выделенный IP', 'Да'],
-      ['Поддержка', 'Live · 24/7'],
-    ],
-    cta: 'Получить SHADOW',
-  },
-];
-
-function Plans() {
-  const [idx, setIdx] = useState(0);
-  const [perView, setPerView] = useState(3);
-  const trackRef = useRef(null);
-
-  useEffect(() => {
-    const calc = () => {
-      const w = window.innerWidth;
-      if (w < 760) setPerView(1);
-      else if (w < 1080) setPerView(2);
-      else setPerView(3);
-    };
-    calc();
-    window.addEventListener('resize', calc);
-    return () => window.removeEventListener('resize', calc);
-  }, []);
-
-  const maxIdx = Math.max(0, PLANS.length - perView);
-  const safeIdx = Math.min(idx, maxIdx);
-
-  const go = (delta) => setIdx((i) => Math.max(0, Math.min(maxIdx, i + delta)));
-
-  // dynamic flex-basis based on perView
-  const basis = `${100 / perView}%`;
-  const offset = `-${(100 / perView) * safeIdx}%`;
-
-  return (
-    <section className="s" id="plans">
-      <div className="wrap">
-        <div className="s-head">
-          <div>
-            <span className="s-eyebrow">/// Тарифы</span>
-            <h2 className="s-title">Выбери свой<br/>уровень дисциплины</h2>
-          </div>
-          <span className="s-num">[ 02 / 04 ]</span>
-        </div>
-
-        <div className="plans-wrap">
-          <div className="plans-rail">
-            <div className="plans-track" ref={trackRef} style={{ transform: `translateX(${offset})` }}>
-              {PLANS.map((p) => (
-                <article className={`plan ${p.featured ? 'featured' : ''}`} key={p.id} style={{ flex: `0 0 ${basis}` }}>
-                  {p.tag && <div className="plan-tag">{p.tag}</div>}
-                  <div className="plan-id">// {p.code}</div>
-                  <div className="plan-name">{p.name}</div>
-                  <div className="plan-sub">{p.sub}</div>
-
-                  <div className="plan-price">
-                    <span className="num">{p.price}</span>
-                    <span className="cur">₽</span>
-                  </div>
-                  <div className="plan-period">{p.period}</div>
-
-                  <ul className="plan-feats">
-                    {p.feats.map(([k, v], i) => (
-                      <li key={i}><span>{k}</span><b>{v}</b></li>
-                    ))}
-                  </ul>
-
-                  <div className="plan-cta">
-                    <button className={`btn ${p.featured ? 'btn-red' : ''}`}>
-                      {p.cta} <span className="arr">→</span>
-                    </button>
-                  </div>
-                </article>
-              ))}
-            </div>
-          </div>
-
-          <div className="plans-controls">
-            <div className="plans-arrows">
-              <button className="arrow-btn" onClick={() => go(-1)} disabled={safeIdx === 0} aria-label="prev">←</button>
-              <button className="arrow-btn" onClick={() => go(1)} disabled={safeIdx >= maxIdx} aria-label="next">→</button>
-            </div>
-            <div className="plans-progress">
-              <div className="plans-progress-bar" style={{ width: `${((safeIdx + perView) / PLANS.length) * 100}%` }} />
-            </div>
-            <div className="plans-counter">
-              {String(safeIdx + 1).padStart(2,'0')} — {String(Math.min(safeIdx + perView, PLANS.length)).padStart(2,'0')} / {String(PLANS.length).padStart(2,'0')}
-            </div>
-          </div>
-
-          <div style={{marginTop:24,display:'flex',gap:12,flexWrap:'wrap'}}>
-            <button className="btn btn-red">7 дней бесплатно — без карты <span className="arr">→</span></button>
-            <button className="btn btn-ghost">Сравнить все тарифы</button>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
-
-// ──────────────────────────── FAQ ────────────────────────────
-const FAQ = [
-  { q: 'Действительно ли SoloNet не ведёт логи?',
-    a: 'Да. Архитектура построена на RAM-only серверах: при перезагрузке всё стирается. Аудит проводила независимая фирма Cure53 — отчёт открыт.' },
-  { q: 'Что произойдёт после 7 дней пробного периода?',
-    a: 'Ничего. Карта не нужна для активации триала, поэтому списания не произойдёт. Если захочешь продолжить — оформишь любой тариф.' },
-  { q: 'Будет ли работать в странах с жёсткими ограничениями?',
-    a: 'Да. У нас собственный обфускационный слой Stealth, маскирующий трафик под обычный TLS. Тариф SHADOW добавляет дополнительный XOR-шифр поверх.' },
-  { q: 'Сколько устройств можно подключить одновременно?',
-    a: 'От 2 на PROBE до неограниченного числа на SHADOW. PRIME покрывает 10 устройств — обычно этого хватает с запасом.' },
-  { q: 'Поддерживаются ли роутеры и Linux?',
-    a: 'Да. Есть нативные клиенты для Windows, macOS, iOS, Android, Linux (deb/rpm/AUR), а также прошивки OpenWrt и конфиги WireGuard для роутеров.' },
-];
-
-function FAQSection() {
-  const [open, setOpen] = useState(0);
-  return (
-    <section className="s" id="faq">
-      <div className="wrap">
-        <div className="s-head">
-          <div>
-            <span className="s-eyebrow">/// Вопросы</span>
-            <h2 className="s-title">Часто спрашивают</h2>
-          </div>
-          <span className="s-num">[ 03 / 04 ]</span>
-        </div>
-
-        <div className="faq">
-          {FAQ.map((f, i) => (
-            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
-              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
-                <span className="qid">// {String(i+1).padStart(2,'0')}</span>
-                <span className="qtxt">{f.q}</span>
-                <span className="qtoggle">{open === i ? '−' : '+'}</span>
-              </button>
-              <div className="faq-a"><div className="faq-a-inner">{f.a}</div></div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}
-
-// ──────────────────────────── CTA ────────────────────────────
-function CTA() {
-  return (
-    <section className="cta">
-      <div className="wrap cta-inner">
-        <div>
-          <div style={{fontSize:11,letterSpacing:'.22em',marginBottom:24,opacity:.85}}>/// Финальный узел [ 04 / 04 ]</div>
-          <h2>ОДИН<br/>ПОЛЬЗОВАТЕЛЬ.<br/>ОДИН ТУННЕЛЬ.</h2>
-        </div>
-        <div>
-          <p>7 дней бесплатно. Без карты, без капчи, без e-mail подтверждения. Просто скачай, запусти и выбирай узел.</p>
-          <div style={{display:'flex',gap:12,flexWrap:'wrap'}}>
-            <button className="btn">Попробовать бесплатно <span className="arr">→</span></button>
-            <button className="btn btn-ghost">Документация</button>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
-
-// ──────────────────────────── Footer ────────────────────────────
-function Footer() {
-  return (
-    <footer>
-      <div className="wrap">
-        <div className="rule" />
-        <div className="foot-row">
-          <span>© 2026 SoloNet · Built for those who go alone</span>
-          <span>NODE-AMS-03 · 47.61 ms · Stable</span>
-          <span>Privacy / Terms / Audit</span>
-        </div>
-      </div>
-    </footer>
-  );
-}
-
-// ──────────────────────────── Nav ────────────────────────────
-function Nav() {
-  return (
-    <nav className="nav">
-      <div className="wrap nav-inner">
-        <div className="logo"><span className="logo-mark"></span> SOLONET</div>
-        <div className="nav-links">
-          <a href="#features">Features</a>
-          <a href="#plans">Plans</a>
-          <a href="#faq">FAQ</a>
-          <a href="#download">Download</a>
-        </div>
-        <div className="nav-cta">
-          <span className="status-dot">412 NODES LIVE</span>
-          <button className="btn btn-red btn-sm">Try free <span className="arr">→</span></button>
-        </div>
-      </div>
-    </nav>
-  );
-}
-
-// ──────────────────────────── App ────────────────────────────
-function App() {
-  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
-
-  useEffect(() => {
-    document.documentElement.dataset.theme = t.dark ? 'dark' : 'light';
-  }, [t.dark]);
-
-  return (
-    <div data-screen-label="01 Landing">
-      <Nav />
-      <Hero dark={t.dark} />
-      <Features />
-      <Plans />
-      <FAQSection />
-      <CTA />
-      <Footer />
-
-      <TweaksPanel>
-        <TweakSection label="Theme" />
-        <TweakToggle label="Dark mode" value={t.dark} onChange={(v) => setTweak('dark', v)} />
-      </TweaksPanel>
-    </div>
-  );
-}
-
-ReactDOM.createRoot(document.getElementById('root')).render(<App />);
-
-</script>
-</body>
-</html>
