Unautharazed!<!-- JLP: draggable launcher + animated modal + tabs by HTML attributes -->

<button id="jlp-launcher" type="button" aria-label="JL Power" title="JL Power">
  <span class="jlp-dot"></span>
</button>

<div id="jlp-backdrop" class="jlp-backdrop" aria-hidden="true"></div>

<section id="jlp-modal" class="jlp-modal" role="dialog" aria-modal="true" aria-hidden="true">
  <header class="jlp-head">
    <div class="jlp-brand">
      <div class="jlp-logo">
        <span class="jlp-ring"></span>
        <span class="jlp-core"></span>
      </div>
      <div>
        <div class="jlp-title">JL Power</div>
        <div class="jlp-subtitle">Engineering your advantage</div>
      </div>
    </div>

    <div class="jlp-actions">
      <button id="jlp-menuBtn" class="jlp-btn jlp-btn-ghost" type="button" aria-label="Toggle menu">☰</button>
      <button id="jlp-close" class="jlp-btn" type="button">Закрыть</button>
    </div>
  </header>

  <div class="jlp-body">
    <!-- LEFT: Navigation (your buttons) -->
    <aside id="jlp-nav" class="jlp-nav">
      <div class="jlp-nav-title">Навигация</div>

      <!-- 👇 Вы сами добавляете кнопки -->
      <div class="jlp-tabs-nav">
        <button class="jlp-tab-btn" jlp-tab="benchingPad">
            <svg style="height: 20px; margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22.8 19.4C22.9 19.4 22.9 19.5 22.8 19.6L21.8 21.3C21.7 21.4 21.6 21.4 21.5 21.4L20.3 21C20 21.2 19.8 21.3 19.5 21.5L19.3 22.8C19.3 22.9 19.2 23 19.1 23H17.1C17 23 16.9 22.9 16.8 22.8L16.6 21.5C16.3 21.4 16 21.2 15.8 21L14.6 21.5C14.5 21.5 14.4 21.5 14.3 21.4L13.3 19.7C13.2 19.6 13.3 19.5 13.4 19.4L14.5 18.6V17.6L13.4 16.8C13.3 16.7 13.3 16.6 13.3 16.5L14.3 14.8C14.4 14.7 14.5 14.7 14.6 14.7L15.8 15.2C16.1 15 16.3 14.9 16.6 14.7L16.8 13.4C16.8 13.3 16.9 13.2 17.1 13.2H19.1C19.2 13.2 19.3 13.3 19.3 13.4L19.5 14.7C19.8 14.8 20.1 15 20.4 15.2L21.6 14.7C21.7 14.7 21.9 14.7 21.9 14.8L22.9 16.5C23 16.6 22.9 16.7 22.8 16.8L21.7 17.6V18.6L22.8 19.4M19.5 18C19.5 17.2 18.8 16.5 18 16.5S16.5 17.2 16.5 18 17.2 19.5 18 19.5 19.5 18.8 19.5 18M13 14V8H11V14M15 1H9V3H15V1M11.3 20C7.8 19.6 5 16.6 5 13C5 9.1 8.1 6 12 6C15.2 6 17.9 8.1 18.7 11C19.5 11.1 20.2 11.3 20.9 11.6C20.6 10 20 8.6 19 7.4L20.5 6C20 5.5 19.5 5 19 4.6L17.6 6C16.1 4.7 14.1 4 12 4C7 4 3 8 3 13S7 22 12 22H12.3C11.8 21.4 11.5 20.7 11.3 20Z" /></svg>
            Benching pad
        </button>
        <button class="jlp-tab-btn" jlp-tab="sqlConsole"> 
            <svg style="height: 20px; margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 7C4 4.79 7.58 3 12 3S20 4.79 20 7 16.42 11 12 11 4 9.21 4 7M12.08 18L12 18C7.58 18 4 16.21 4 14V17C4 19.21 7.58 21 12 21C12.1 21 12.2 21 12.29 21C12.11 20.36 12 19.69 12 19C12 18.66 12.03 18.33 12.08 18M20 12.08C20 12.05 20 12.03 20 12V9C20 11.21 16.42 13 12 13S4 11.21 4 9V12C4 14.21 7.58 16 12 16C12.23 16 12.46 16 12.69 16C13.82 13.63 16.22 12 19 12C19.34 12 19.67 12.03 20 12.08M23.8 20.4C23.9 20.4 23.9 20.5 23.8 20.6L22.8 22.3C22.7 22.4 22.6 22.4 22.5 22.4L21.3 22C21 22.2 20.8 22.3 20.5 22.5L20.3 23.8C20.3 23.9 20.2 24 20.1 24H18.1C18 24 17.9 23.9 17.8 23.8L17.6 22.5C17.3 22.4 17 22.2 16.8 22L15.6 22.5C15.5 22.5 15.4 22.5 15.3 22.4L14.3 20.7C14.2 20.6 14.3 20.5 14.4 20.4L15.5 19.6V18.6L14.4 17.8C14.3 17.7 14.3 17.6 14.3 17.5L15.3 15.8C15.4 15.7 15.5 15.7 15.6 15.7L16.8 16.2C17.1 16 17.3 15.9 17.6 15.7L17.8 14.4C17.8 14.3 17.9 14.2 18.1 14.2H20.1C20.2 14.2 20.3 14.3 20.3 14.4L20.5 15.7C20.8 15.8 21.1 16 21.4 16.2L22.6 15.7C22.7 15.7 22.9 15.7 22.9 15.8L23.9 17.5C24 17.6 23.9 17.7 23.8 17.8L22.7 18.6V19.6L23.8 20.4M20.5 19C20.5 18.2 19.8 17.5 19 17.5S17.5 18.2 17.5 19 18.2 20.5 19 20.5 20.5 19.8 20.5 19Z" /></svg>
            SQL Console
        </button>
        <button class="jlp-tab-btn" jlp-tab="phpCompile">
            <svg style="height: 20px; margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.89,3L14.85,3.4L11.11,21L9.15,20.6L12.89,3M19.59,12L16,8.41V5.58L22.42,12L16,18.41V15.58L19.59,12M1.58,12L8,5.58V8.41L4.41,12L8,15.58V18.41L1.58,12Z" /></svg>
            PHP compiler
        </button>
        <button class="jlp-tab-btn" jlp-tab="routerList">
            <svg style="height: 20px; margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 9C3.9 9 3 9.9 3 11V15C3 16.11 3.9 17 5 17H11V19H10C9.45 19 9 19.45 9 20H2V22H9C9 22.55 9.45 23 10 23H14C14.55 23 15 22.55 15 22H22V20H15C15 19.45 14.55 19 14 19H13V17H19C20.11 17 21 16.11 21 15V11C21 9.9 20.11 9 19 9H5M6 12H8V14H6V12M9.5 12H11.5V14H9.5V12M13 12H15V14H13V12Z" /></svg>
            Router list
        </button>
        <button class="jlp-tab-btn" jlp-tab="pinMaster">
            <svg style="height: 20px; margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z" /></svg>
            Pin master
        </button>
      </div>
    </aside>

    <!-- RIGHT: Panels (your tab contents) -->
    <main class="jlp-main">
      <div class="jlp-panel">
        <div class="jlp-tabs">
          <!-- 👇 Вы сами добавляете блоки контента -->
          <div jlp-tab-id="benchingPad">
            <div class="jlp-panel-inner">
              <h3 style="margin:0 0 8px;">Benching pad</h3>
              <p style="margin:0; color: rgba(18,22,29,.70);">Бенч/метрики/профайлинг.</p>
              <hr>
              <!-- Speed Metric Gauge (Google Charts) -->
              <div class="speed-metric" id="speedMetric" style="width: 100%;">
                <div class="speed-head">
                  <div>
                    <div class="speed-title">Page Speed</div>
                    <div class="speed-sub">Latency / load indicator</div>
                  </div>

                  <div class="speed-kpi">
                    <div class="speed-ms" id="speedMs">— ms</div>
                    <div class="speed-grade" id="speedGrade">—</div>
                  </div>
                </div>

                <div class="speed-foot">
                  <div class="speed-badge" id="speedPercent">0%</div>
                  <div class="speed-note">0.5 ms → 0% (best) · 10s+ → 100% (worst)</div>
                </div>
              </div>

              <style>
                .speed-metric{
                  width: min(520px, 100%);
                  border: 1px solid rgba(20,24,30,.12);
                  border-radius: 18px;
                  background: rgba(255,255,255,.92);
                  box-shadow: 0 10px 28px rgba(0,0,0,.10);
                  overflow: hidden;
                  position: relative;
                }

                .speed-metric::before{
                  content:"";
                  position:absolute; inset: 0;
                  background: radial-gradient(circle at 25% 15%, rgba(255,255,255,.9), transparent 55%);
                  pointer-events:none;
                }

                .speed-head{
                  display:flex;
                  justify-content: space-between;
                  align-items: center;
                  padding: 14px 16px;
                  border-bottom: 1px solid rgba(20,24,30,.10);
                  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
                }

                .speed-title{
                  font-weight: 800;
                  letter-spacing: .2px;
                  color: #12161d;
                  font-size: 16px;
                }
                .speed-sub{
                  margin-top: 2px;
                  font-size: 12px;
                  color: rgba(18,22,29,.62);
                }

                .speed-kpi{
                  text-align: right;
                  display:flex;
                  flex-direction: column;
                  gap: 2px;
                }
                .speed-ms{
                  font-weight: 900;
                  font-size: 18px;
                  color: #12161d;
                }
                .speed-grade{
                  font-size: 12px;
                  color: rgba(18,22,29,.68);
                  font-weight: 700;
                }

                .speed-chart-wrap{
                  padding: 10px 12px 4px;
                }
                .speed-chart{
                  width: 100%;
                  height: 220px;
                }

                .speed-foot{
                  display:flex;
                  justify-content: space-between;
                  align-items: center;
                  padding: 10px 14px 14px;
                  gap: 10px;
                }

                .speed-badge{
                  padding: 8px 10px;
                  border-radius: 14px;
                  font-weight: 900;
                  border: 1px solid rgba(20,24,30,.12);
                  background: rgba(255,255,255,.9);
                  min-width: 64px;
                  text-align: center;
                }
                .speed-note{
                  font-size: 12px;
                  color: rgba(18,22,29,.62);
                  line-height: 1.25;
                }

                /* “glow” color driven by JS via data-grade */
                .speed-metric[data-grade="purple"]{ box-shadow: 0 12px 34px rgba(0,0,0,.10), 0 0 0 2px rgba(140,82,255,.35); }
                .speed-metric[data-grade="cyan"]{   box-shadow: 0 12px 34px rgba(0,0,0,.10), 0 0 0 2px rgba(0,180,255,.30); }
                .speed-metric[data-grade="green"]{  box-shadow: 0 12px 34px rgba(0,0,0,.10), 0 0 0 2px rgba(40,200,120,.30); }
                .speed-metric[data-grade="yellow"]{ box-shadow: 0 12px 34px rgba(0,0,0,.10), 0 0 0 2px rgba(255,204,0,.35); }
                .speed-metric[data-grade="orange"]{ box-shadow: 0 12px 34px rgba(0,0,0,.10), 0 0 0 2px rgba(255,149,0,.35); }
                .speed-metric[data-grade="red"]{    box-shadow: 0 12px 34px rgba(0,0,0,.10), 0 0 0 2px rgba(255,69,58,.35); }

                @media (max-width: 520px){
                  .speed-chart{ height: 200px; }
                  .speed-foot{ flex-direction: column; align-items: flex-start; }
                  .speed-kpi{ text-align: left; }
                }
              </style>

              <!-- Google Charts loader -->
              <script src="https://www.gstatic.com/charts/loader.js"></script>
              <script>
                // ===== Config: mapping ms -> "bad percent" =====
                // 0.5 ms => 0% (best) ; 10s (10000 ms) => 100% (worst)
                const MIN_MS = 0.5;
                const MAX_MS = 10000;

                function clamp(n, a, b){ return Math.max(a, Math.min(b, n)); }

                function msToBadPercent(ms){
                  const v = clamp(ms, MIN_MS, MAX_MS);
                  const p = ((v - MIN_MS) / (MAX_MS - MIN_MS)) * 100;
                  return Math.round(p);
                }

                function gradeByMs(ms){
                  // your thresholds (ms)
                  if (ms < 5)       return { grade: "Идеально +", key: "purple" };
                  if (ms < 10)      return { grade: "Идеально",   key: "cyan" };
                  if (ms < 1000)    return { grade: "Хорошо",     key: "green" };  // 10–40 & 40–1s
                  if (ms < 4000)    return { grade: "Неплохо",    key: "yellow" };
                  if (ms < 10000)   return { grade: "Требует оптимизацию", key: "orange" };
                  return             { grade: "Плохо",      key: "red" };
                }

                // ===== Google Gauge =====
                let gauge, data, options;
                let chartsReady = false;

                google.charts.load('current', {'packages':['gauge']});
                google.charts.setOnLoadCallback(() => {
                  chartsReady = true;

                  data = google.visualization.arrayToDataTable([
                    ['Label', 'Value'],
                    ['Bad %', 0]
                  ]);

                  // NOTE: Gauge supports only 3 color zones.
                  // We map: (0..40%) as "good", (40..85%) as "mid", (85..100%) as "bad"
                  options = {
                    min: 0,
                    max: 100,
                    width: '100%',
                    height: 220,
                    minorTicks: 5,
                    majorTicks: ['0','20','40','60','80','100'],

                    // 3-zone gauge colors
                    greenFrom: 0, greenTo: 40,
                    yellowFrom: 40, yellowTo: 85,
                    redFrom: 85, redTo: 100
                  };

                  gauge = new google.visualization.Gauge(document.getElementById('speedGauge'));
                  gauge.draw(data, options);
                });

                function renderSpeedGauge(ms){
                  // ms can come as string/number
                  ms = Number(ms);
                  if (!Number.isFinite(ms) || ms <= 0) ms = MIN_MS;

                  const badPct = msToBadPercent(ms);
                  const g = gradeByMs(ms);

                  // UI text
                  document.getElementById("speedMs").textContent = ms.toFixed(2) + " ms";
                  document.getElementById("speedGrade").textContent = g.grade;
                  document.getElementById("speedPercent").textContent = badPct + "%";

                  // glow coloring (7-grade precise)
                  const root = document.getElementById("speedMetric");
                  root.setAttribute("data-grade", g.key);

                  // update chart
                  if (chartsReady && data && gauge){
                    data.setValue(0, 1, badPct);
                    gauge.draw(data, options);
                  }
                }

                // ===== Example usage =====
                // You will call this with your real value:
                renderSpeedGauge(7.88);
              </script>

            
            </div>
          </div>

          <div jlp-tab-id="sqlConsole" class="jlp-hide">
            <div class="jlp-panel-inner">
              <h3 style="margin:0 0 8px;">SQL Console</h3>
              <p style="margin:0; color: rgba(18,22,29,.70);">Здесь ваш редактор/консоль.</p>
            </div>
          </div>

          <div jlp-tab-id="phpCompile" class="jlp-hide">
            <div class="jlp-panel-inner">
              <h3 style="margin:0 0 8px;">PHP compiler</h3>
              <p style="margin:0; color: rgba(18,22,29,.70);">Песочница/раннер.</p>
            </div>
          </div>

          <div jlp-tab-id="routerList" class="jlp-hide">
            <div class="jlp-panel-inner">
              <h3 style="margin:0 0 8px;">Router list</h3>
              <p style="margin:0; color: rgba(18,22,29,.70);">Список роутов.</p>
                <div style="margin-bottom: 12px;">
                <input 
                  type="text" 
                  id="routerSearch" 
                  placeholder="Поиск по маршрутам..." 
                  style="
                  width: 100%;
                  padding: 10px 12px;
                  border: 1px solid rgba(20,24,30,.12);
                  border-radius: 12px;
                  font-size: 14px;
                  background: rgba(255,255,255,.9);
                  color: #12161d;
                  transition: border-color .2s ease;
                  "
                />
                </div>

                <div style="overflow-x: auto;">
                <table id="routerTable" style="
                  width: 100%;
                  border-collapse: collapse;
                  font-size: 14px;
                ">
                  <thead>
                  <tr style="background: rgba(47,107,255,.08); border-bottom: 1px solid rgba(20,24,30,.12);">
                    <th style="
                    padding: 12px;
                    text-align: left;
                    font-weight: 700;
                    color: #12161d;
                    letter-spacing: .3px;
                    ">Маршрут</th>
                    <th style="
                    padding: 12px;
                    text-align: left;
                    font-weight: 700;
                    color: #12161d;
                    letter-spacing: .3px;
                    ">Путь</th>
                  </tr>
                  </thead>
                  <tbody>
                                    <tr class="router-row" data-router="/" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/" target="_blank" style="color: rgb(47,107,255)">
                        /                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">site/index.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/oferta" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/oferta" target="_blank" style="color: rgb(47,107,255)">
                        /oferta                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">site/oferta.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/landing" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/landing" target="_blank" style="color: rgb(47,107,255)">
                        /landing                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">site/index.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/survey-form" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/survey-form" target="_blank" style="color: rgb(47,107,255)">
                        /survey-form                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">site/survey-form.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/tarif" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/tarif" target="_blank" style="color: rgb(47,107,255)">
                        /tarif                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">site/tarif.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/page" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/page" target="_blank" style="color: rgb(47,107,255)">
                        /page                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">site/page/main.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/soon" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/soon" target="_blank" style="color: rgb(47,107,255)">
                        /soon                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/jammer/soon.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/sign" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/sign" target="_blank" style="color: rgb(47,107,255)">
                        /sign                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/agreement/sign.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/faq" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/faq" target="_blank" style="color: rgb(47,107,255)">
                        /faq                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/guides/pages-faq.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/profile" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/profile" target="_blank" style="color: rgb(47,107,255)">
                        /profile                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/settings/profile.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/pages-login" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/pages-login" target="_blank" style="color: rgb(47,107,255)">
                        /pages-login                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/auth/pages-login-2.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/pages-register" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/pages-register" target="_blank" style="color: rgb(47,107,255)">
                        /pages-register                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/auth/pages-register-2.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/app-forget-password" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/app-forget-password" target="_blank" style="color: rgb(47,107,255)">
                        /app-forget-password                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/auth/forget-password.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/app-forget-password-success" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/app-forget-password-success" target="_blank" style="color: rgb(47,107,255)">
                        /app-forget-password-success                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/auth/forget-password-success.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/app-forget-password-failed" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/app-forget-password-failed" target="_blank" style="color: rgb(47,107,255)">
                        /app-forget-password-failed                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/auth/forget-password-failed.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/price" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/price" target="_blank" style="color: rgb(47,107,255)">
                        /price                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/billing/price.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/wallet" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/wallet" target="_blank" style="color: rgb(47,107,255)">
                        /wallet                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/billing/wallet/wallet.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/chat" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/chat" target="_blank" style="color: rgb(47,107,255)">
                        /chat                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/chat/chat.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/support" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/support" target="_blank" style="color: rgb(47,107,255)">
                        /support                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/chat/support.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/frames/wallet" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/frames/wallet" target="_blank" style="color: rgb(47,107,255)">
                        /frames/wallet                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/frames/wallet.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/frames/notif" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/frames/notif" target="_blank" style="color: rgb(47,107,255)">
                        /frames/notif                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/frames/notif.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/frames/notes" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/frames/notes" target="_blank" style="color: rgb(47,107,255)">
                        /frames/notes                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/frames/notes.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/frames/map" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/frames/map" target="_blank" style="color: rgb(47,107,255)">
                        /frames/map                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/frames/map.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/folder" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/folder" target="_blank" style="color: rgb(47,107,255)">
                        /folder                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/selections/folder.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/view" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/view" target="_blank" style="color: rgb(47,107,255)">
                        /view                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/selections/view.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/base-detail-external" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/base-detail-external" target="_blank" style="color: rgb(47,107,255)">
                        /base-detail-external                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/selections/base-detail-external.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/add-folder-object" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/add-folder-object" target="_blank" style="color: rgb(47,107,255)">
                        /add-folder-object                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/selections/add-folder-object.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/agency-crm" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/agency-crm" target="_blank" style="color: rgb(47,107,255)">
                        /agency-crm                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/agency/agency-crm.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/agency-exc" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/agency-exc" target="_blank" style="color: rgb(47,107,255)">
                        /agency-exc                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/agency/agency-exc.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/base-leads" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/base-leads" target="_blank" style="color: rgb(47,107,255)">
                        /base-leads                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/agency/base-leads.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/price-agency" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/price-agency" target="_blank" style="color: rgb(47,107,255)">
                        /price-agency                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/agency/price-agency.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/my-agency" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/my-agency" target="_blank" style="color: rgb(47,107,255)">
                        /my-agency                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/agency/my-agency.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/tracker" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/tracker" target="_blank" style="color: rgb(47,107,255)">
                        /tracker                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/agency/tracker.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/agency-storage" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/agency-storage" target="_blank" style="color: rgb(47,107,255)">
                        /agency-storage                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/agency/agency-storage.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/add-exclusive" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/add-exclusive" target="_blank" style="color: rgb(47,107,255)">
                        /add-exclusive                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/base/exclusive/add-exclusive.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/my-exclusives" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/my-exclusives" target="_blank" style="color: rgb(47,107,255)">
                        /my-exclusives                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/base/exclusive/my-exclusives.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/exc" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/exc" target="_blank" style="color: rgb(47,107,255)">
                        /exc                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/base/exclusive/index.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/exclusive-detail" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/exclusive-detail" target="_blank" style="color: rgb(47,107,255)">
                        /exclusive-detail                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/base/exclusive/exclusive-detail.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/add-customers" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/add-customers" target="_blank" style="color: rgb(47,107,255)">
                        /add-customers                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/base/customers/add-customers.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/my-customers" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/my-customers" target="_blank" style="color: rgb(47,107,255)">
                        /my-customers                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/base/customers/my-customers.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/base-customers" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/base-customers" target="_blank" style="color: rgb(47,107,255)">
                        /base-customers                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/base/customers/base-customers.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/base-detail-customers" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/base-detail-customers" target="_blank" style="color: rgb(47,107,255)">
                        /base-detail-customers                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/base/customers/base-detail-customers.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/for-customer" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/for-customer" target="_blank" style="color: rgb(47,107,255)">
                        /for-customer                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/base/customers/for-customer.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/form-estate" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/form-estate" target="_blank" style="color: rgb(47,107,255)">
                        /form-estate                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/base/estates/form-estate.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/my-form-place" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/my-form-place" target="_blank" style="color: rgb(47,107,255)">
                        /my-form-place                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/base/estates/places/my-form-place.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/base-places" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/base-places" target="_blank" style="color: rgb(47,107,255)">
                        /base-places                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/base/estates/places/base-places.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/base-detail-places" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/base-detail-places" target="_blank" style="color: rgb(47,107,255)">
                        /base-detail-places                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/base/estates/places/base-detail.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/my-form-commercy" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/my-form-commercy" target="_blank" style="color: rgb(47,107,255)">
                        /my-form-commercy                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/base/estates/commercial/my-form-commercy.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/base-commercial" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/base-commercial" target="_blank" style="color: rgb(47,107,255)">
                        /base-commercial                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/base/estates/commercial/base-commercy.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/base-detail-commercial" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/base-detail-commercial" target="_blank" style="color: rgb(47,107,255)">
                        /base-detail-commercial                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/base/estates/commercial/base-detail.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/my-form-object" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/my-form-object" target="_blank" style="color: rgb(47,107,255)">
                        /my-form-object                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/base/estates/apparts/my-form-object.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/base-apparts" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/base-apparts" target="_blank" style="color: rgb(47,107,255)">
                        /base-apparts                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/base/estates/apparts/base.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/base-detail-apparts" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/base-detail-apparts" target="_blank" style="color: rgb(47,107,255)">
                        /base-detail-apparts                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/base/estates/apparts/base-detail.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/base-apparts-copy" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/base-apparts-copy" target="_blank" style="color: rgb(47,107,255)">
                        /base-apparts-copy                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/base/estates/apparts/base_copy.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/base-map" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/base-map" target="_blank" style="color: rgb(47,107,255)">
                        /base-map                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/jammer/soon.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/base-search" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/base-search" target="_blank" style="color: rgb(47,107,255)">
                        /base-search                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/base/estates/search/reestr.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/my-objects" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/my-objects" target="_blank" style="color: rgb(47,107,255)">
                        /my-objects                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/base/estates/my-objects.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/my-page" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/my-page" target="_blank" style="color: rgb(47,107,255)">
                        /my-page                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/home/page.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/agency-page" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/agency-page" target="_blank" style="color: rgb(47,107,255)">
                        /agency-page                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/home/page.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/newbuilds" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/newbuilds" target="_blank" style="color: rgb(47,107,255)">
                        /newbuilds                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/base/newbuilds/newbuilds.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/ipocalc" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/ipocalc" target="_blank" style="color: rgb(47,107,255)">
                        /ipocalc                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/base/newbuilds/ipocalc.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/agent-login" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/agent-login" target="_blank" style="color: rgb(47,107,255)">
                        /agent-login                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">myid/agent/login.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/agent-register" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/agent-register" target="_blank" style="color: rgb(47,107,255)">
                        /agent-register                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">myid/agent/register.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/agent-passwd" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/agent-passwd" target="_blank" style="color: rgb(47,107,255)">
                        /agent-passwd                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">/myid/agent/passwd.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/agent-qr" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/agent-qr" target="_blank" style="color: rgb(47,107,255)">
                        /agent-qr                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">myid/agent/qr.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/bh" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/bh" target="_blank" style="color: rgb(47,107,255)">
                        /bh                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">TEMP/bh.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/view_object" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/view_object" target="_blank" style="color: rgb(47,107,255)">
                        /view_object                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/view_object.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/view-external" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/view-external" target="_blank" style="color: rgb(47,107,255)">
                        /view-external                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">app/view-external.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/rp" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/rp" target="_blank" style="color: rgb(47,107,255)">
                        /rp                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">main/reset.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/status_service" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/status_service" target="_blank" style="color: rgb(47,107,255)">
                        /status_service                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">site/status_service.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/api" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/api" target="_blank" style="color: rgb(47,107,255)">
                        /api                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">API/a.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/tokenizer" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/tokenizer" target="_blank" style="color: rgb(47,107,255)">
                        /tokenizer                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">../global/collection/system_tokenizer.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/rbd" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/rbd" target="_blank" style="color: rgb(47,107,255)">
                        /rbd                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">../global/collection/system_base.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/PUSH" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/PUSH" target="_blank" style="color: rgb(47,107,255)">
                        /PUSH                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">../global/collection/system_sendpush.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/coords" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/coords" target="_blank" style="color: rgb(47,107,255)">
                        /coords                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">../global/collection/passive_coords.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/tbot" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/tbot" target="_blank" style="color: rgb(47,107,255)">
                        /tbot                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">../global/collection/system_tbot.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/QrGen" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/QrGen" target="_blank" style="color: rgb(47,107,255)">
                        /QrGen                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">../global/collection/system_qrgen.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/chatting_bridge" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/chatting_bridge" target="_blank" style="color: rgb(47,107,255)">
                        /chatting_bridge                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">../global/collection/chatting_bridge.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/chat_bridge_broker" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/chat_bridge_broker" target="_blank" style="color: rgb(47,107,255)">
                        /chat_bridge_broker                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">../global/collection/chatting_bridge_broker.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/chatting_bridge_audio" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/chatting_bridge_audio" target="_blank" style="color: rgb(47,107,255)">
                        /chatting_bridge_audio                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">../global/collection/chatting_bridge_audio.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/test_ba" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/test_ba" target="_blank" style="color: rgb(47,107,255)">
                        /test_ba                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">../global/collection/system_baseApparts.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/chatbek" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/chatbek" target="_blank" style="color: rgb(47,107,255)">
                        /chatbek                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">/main/chat.php</td>
                  </tr>
                                    <tr class="router-row" data-router="/messenger" style="
                    border-bottom: 1px solid rgba(20,24,30,.08);
                    transition: background .12s ease;
                  " onmouseover="this.style.background='rgba(47,107,255,.06)'" onmouseout="this.style.background=''">
                    <td style="padding: 12px; color: #12161d; font-weight: 600;">
                      <a href="https://ok-na.kz/messenger" target="_blank" style="color: rgb(47,107,255)">
                        /messenger                      </a>
                    </td>
                    <td style="padding: 12px; color: rgba(18,22,29,.70); font-family: monospace; font-size: 13px;">/main/chat/messenger.php</td>
                  </tr>
                                    </tbody>
                </table>
                </div>

                <script>
                (() => {
                  const input = document.getElementById('routerSearch');
                  const rows = document.querySelectorAll('.router-row');

                  input.addEventListener('input', (e) => {
                  const query = e.target.value.toLowerCase().trim();

                  rows.forEach(row => {
                    const router = row.getAttribute('data-router').toLowerCase();
                    const path = row.textContent.toLowerCase();
                    const match = router.includes(query) || path.includes(query);
                    row.style.display = query === '' || match ? '' : 'none';
                  });
                  });

                  input.focus();
                })();
                </script>
            </div>
          </div>

          <div jlp-tab-id="pinMaster" class="jlp-hide">
            <div class="jlp-panel-inner">
              <h3 style="margin:0 0 8px;">Pin master</h3>
              <p style="margin:0; color: rgba(18,22,29,.70);">Пины/заметки.</p>
            </div>
          </div>

        </div>
      </div>
    </main>
  </div>
</section>

<style>
  :root{
    --jlp-bg: rgba(20, 24, 30, .55);
    --jlp-card: rgba(255,255,255,.92);
    --jlp-card-2: rgba(255,255,255,.78);
    --jlp-border: rgba(20,24,30,.12);
    --jlp-text: #12161d;
    --jlp-muted: rgba(18,22,29,.62);
    --jlp-shadow: 0 20px 60px rgba(0,0,0,.25);
    --jlp-shadow-soft: 0 10px 30px rgba(0,0,0,.18);
    --jlp-blue: #2f6bff;
    --jlp-radius: 18px;
    --jlp-radius-2: 22px;
  }

  /* Floating launcher (NO hover movement) */
  #jlp-launcher{
    position: fixed;
    right: 24px;
    bottom: 120px;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 16px;
    background: rgba(255,255,255,.9);
    box-shadow: var(--jlp-shadow-soft);
    cursor: grab;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    display: none;
    place-items: center;
    z-index: 100000;
    transition: box-shadow .18s ease, transform .12s ease; /* only visuals */
    backdrop-filter: blur(10px);
  }
  #jlp-launcher:hover{ box-shadow: 0 16px 40px rgba(0,0,0,.22); }
  #jlp-launcher:active{ cursor: grabbing; transform: scale(.98); }

  #jlp-launcher .jlp-dot{
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background:
      radial-gradient(circle at center, #ffffff 0 32%, transparent 33% 100%),
      radial-gradient(circle at center, rgba(0,0,0,.14) 0 14%, transparent 15% 100%),
      radial-gradient(circle at center, var(--jlp-blue) 0 100%);
    box-shadow: inset 0 0 0 6px rgba(47,107,255,.18);
  }

  .jlp-backdrop{
    position: fixed; inset: 0;
    background: var(--jlp-bg);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
    z-index: 99999;
  }
  .jlp-backdrop.is-open{
    opacity: 1; pointer-events: auto;
  }

  .jlp-modal{
    position: fixed;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%) scale(.96);
    width: min(980px, calc(100vw - 48px));
    height: min(620px, calc(100vh - 72px));
    /* background: var(--jlp-card); */
    border: 1px solid var(--jlp-border);
    border-radius: var(--jlp-radius-2);
    box-shadow: var(--jlp-shadow);
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 100000;
    transition: opacity .22s ease, transform .22s ease;
    backdrop-filter: blur(5px);
  }
  .jlp-modal.is-open{
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
  }

  .jlp-head{
    height: 74px;
    padding: 14px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom: 1px solid var(--jlp-border);
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  }

  .jlp-brand{ display:flex; align-items:center; gap: 12px; }
  .jlp-logo{
    width: 44px; height: 44px; border-radius: 14px;
    background: rgba(47,107,255,.10);
    display:grid; place-items:center;
    position: relative;
  }
  .jlp-logo .jlp-ring{
    width: 22px; height: 22px; border-radius: 999px;
    box-shadow: inset 0 0 0 6px rgba(47,107,255,.32);
    background: rgba(47,107,255,.18);
  }
  .jlp-logo .jlp-core{
    position:absolute;
    width: 8px; height: 8px; border-radius: 999px;
    background: rgba(18,22,29,.45);
  }

  .jlp-title{ font-weight: 700; color: var(--jlp-text); letter-spacing: .2px; }
  .jlp-subtitle{ font-size: 12px; color: var(--jlp-muted); margin-top: 2px; }

  .jlp-actions{ display:flex; gap: 10px; align-items:center; }
  .jlp-btn{
    border: 1px solid var(--jlp-border);
    background: rgba(255,255,255,.9);
    color: var(--jlp-text);
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
    transition: transform .12s ease, background .12s ease;
  }
  .jlp-btn:hover{ background: rgba(255,255,255,1); transform: translateY(-1px); }
  .jlp-btn:active{ transform: translateY(0); }
  .jlp-btn-ghost{ padding: 10px 12px; font-size: 18px; line-height: 1; }

  .jlp-body{
    height: calc(100% - 74px);
    display:flex;
    background: rgba(255,255,255,.72);
  }

  .jlp-nav{
    width: 260px;
    padding: 14px;
    border-right: 1px solid var(--jlp-border);
    /* background: rgba(255,255,255,.78); */
    display:flex;
    flex-direction: column;
    gap: 10px;
  }
  .jlp-nav-title{
    font-size: 12px;
    color: var(--jlp-muted);
    text-transform: uppercase;
    letter-spacing: .14em;
    padding: 4px 6px;
  }

  .jlp-tabs-nav{
    display:flex;
    flex-direction: column;
    gap: 8px;
    overflow: auto;
    padding-right: 2px;
  }

  .jlp-tab-btn{
    border: 1px solid transparent;
    background: rgba(255,255,255,.78);
    border-radius: 14px;
    padding: 10px 12px;
    cursor: pointer;
    text-align: left;
    font-weight: 600;
    color: var(--jlp-text);
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
    position: relative;
  }
  .jlp-tab-btn:hover{ background: rgba(255,255,255,.95); transform: translateY(-1px); }
  .jlp-tab-btn.is-active{
    border-color: rgba(47,107,255);
    background: rgba(47,107,255,.10);
  }
  /* .jlp-tab-btn.is-active{ padding-left: 28px; } */

  .jlp-main{
    flex: 1;
    padding: 16px;
    overflow: hidden;
  }
  .jlp-panel{
    width: 100%;
    height: 100%;
    border-radius: var(--jlp-radius);
    border: 1px solid var(--jlp-border);
    background: rgba(255,255,255,.86);
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    overflow: auto;
  }
  .jlp-panel-inner{
    padding: 18px;
    animation: jlpFadeIn .18s ease;
  }
  @keyframes jlpFadeIn{
    from{ opacity: 0; transform: translateY(6px); }
    to{ opacity: 1; transform: translateY(0); }
  }

  .jlp-hide{ display:none !important; }

  /* Mobile */
  @media (max-width: 720px){
    .jlp-modal{
      width: calc(100vw - 18px);
      height: calc(100vh - 18px);
      border-radius: 20px;
    }
    .jlp-body{ flex-direction: column; }
    .jlp-nav{
      width: 100%;
      border-right: 0;
      border-bottom: 1px solid var(--jlp-border);
    }
    .jlp-nav.is-collapsed{ display:none; }
    #jlp-launcher{
      right: 14px;
      top: 92px;
      width: 52px;
      height: 52px;
    }
  }
</style>

<script>
(() => {
  const launcher = document.getElementById("jlp-launcher");
  const modal    = document.getElementById("jlp-modal");
  const backdrop = document.getElementById("jlp-backdrop");
  const closeBtn = document.getElementById("jlp-close");
  const menuBtn  = document.getElementById("jlp-menuBtn");
  const nav      = document.getElementById("jlp-nav");

  // ===== Modal controls =====
  function openModal(){
    backdrop.classList.add("is-open");
    modal.classList.add("is-open");
    modal.setAttribute("aria-hidden","false");
    backdrop.setAttribute("aria-hidden","false");
  }
  function closeModal(){
    backdrop.classList.remove("is-open");
    modal.classList.remove("is-open");
    modal.setAttribute("aria-hidden","true");
    backdrop.setAttribute("aria-hidden","true");
  }
  closeBtn.addEventListener("click", closeModal);
  backdrop.addEventListener("click", closeModal);
  window.addEventListener("keydown", (e) => {
    if (e.key === "Escape" && modal.classList.contains("is-open")) closeModal();
  });

  menuBtn.addEventListener("click", () => nav.classList.toggle("is-collapsed"));

  // ===== Tabs by HTML attributes =====
  const tabButtons = Array.from(document.querySelectorAll("[jlp-tab]"));
  const tabPanels  = Array.from(document.querySelectorAll("[jlp-tab-id]"));

  function activateTab(tabId){
    // buttons
    tabButtons.forEach(btn => btn.classList.toggle("is-active", btn.getAttribute("jlp-tab") === tabId));
    // panels
    tabPanels.forEach(p => {
      const isTarget = p.getAttribute("jlp-tab-id") === tabId;
      p.classList.toggle("jlp-hide", !isTarget);
    });

    // mobile: after click -> collapse nav for focus
    if (window.matchMedia("(max-width: 720px)").matches) {
      nav.classList.add("is-collapsed");
    }
  }

  tabButtons.forEach(btn => {
    btn.addEventListener("click", () => activateTab(btn.getAttribute("jlp-tab")));
  });

  // init active tab = first button
  if (tabButtons[0]) activateTab(tabButtons[0].getAttribute("jlp-tab"));

  // ===== Drag vs Click (fixed: no movement on hover) =====
  let isDragging = false;
  let pointerDown = false;
  let startX=0, startY=0, startLeft=0, startTop=0;
  const TH = 7; // threshold px to start drag

  // normalize to left/top so dragging is stable
  (function normalize(){
    const r = launcher.getBoundingClientRect();
    launcher.style.left = r.left + "px";
    launcher.style.top  = r.top  + "px";
    launcher.style.right = "auto";
  })();

  launcher.addEventListener("pointerdown", (e) => {
    launcher.setPointerCapture(e.pointerId);
    pointerDown = true;
    isDragging = false;

    startX = e.clientX; startY = e.clientY;
    startLeft = parseFloat(launcher.style.left) || launcher.getBoundingClientRect().left;
    startTop  = parseFloat(launcher.style.top)  || launcher.getBoundingClientRect().top;
  });

  launcher.addEventListener("pointermove", (e) => {
    if (!pointerDown) return;

    const dx = e.clientX - startX;
    const dy = e.clientY - startY;

    if (!isDragging) {
      if (Math.hypot(dx, dy) < TH) return; // NOT dragging yet
      isDragging = true; // start drag only after threshold
    }

    let nx = startLeft + dx;
    let ny = startTop  + dy;

    const pad = 8;
    const bw = launcher.offsetWidth;
    const bh = launcher.offsetHeight;

    nx = Math.max(pad, Math.min(nx, window.innerWidth  - bw - pad));
    ny = Math.max(pad, Math.min(ny, window.innerHeight - bh - pad));

    launcher.style.left = nx + "px";
    launcher.style.top  = ny + "px";
  });

  launcher.addEventListener("pointerup", (e) => {
    pointerDown = false;
    launcher.releasePointerCapture(e.pointerId);

    // If no drag happened -> click open
    if (!isDragging) openModal();
  });

  // ===== Expose minimal API =====
  window.JLP = {
    open: openModal,
    close: closeModal,
    activate: activateTab
  };
})();
</script>

<script>
(() => {
  const TARGET_ID = "jlp-launcher";
  const TRIPLE_WINDOW_MS = 450;

  const LS_KEY = "jlp_launcher_visible"; // "1" = shown, "0" = hidden

  let clicks = 0;
  let timer = null;

  function setVisible(isVisible) {
    const el = document.getElementById(TARGET_ID);
    if (!el) return;

    el.style.display = isVisible ? "grid" : "none";
    localStorage.setItem(LS_KEY, isVisible ? "1" : "0");
  }

  function getVisible() {
    const v = localStorage.getItem(LS_KEY);
    if (v === null) return true;      // по умолчанию показываем
    return v === "1";
  }

  function toggle() {
    const el = document.getElementById(TARGET_ID);
    if (!el) return;

    const isHiddenNow = getComputedStyle(el).display === "none";
    setVisible(isHiddenNow); // если сейчас скрыт -> показать
  }

  function onAnyClick() {
    clicks++;

    clearTimeout(timer);
    timer = setTimeout(() => { clicks = 0; }, TRIPLE_WINDOW_MS);

    if (clicks >= 3) {
      clicks = 0;
      clearTimeout(timer);
      toggle();
    }
  }

  // применяем состояние при загрузке
  document.addEventListener("DOMContentLoaded", () => {
    setVisible(getVisible());
  });

  document.addEventListener("click", onAnyClick, { passive: true });
})();
</script>