T9-T12: env config + live owner search + responsive (§V11, I.env, I.web)

- config.py: env/.env (python-dotenv), defaults = konstanta lama; get_voters & dashboard pakai config
- dashboard: ?q= server filter + /api/search JSON (substring, LIKE-escape, rank global via correlated count)
- static/app.js: debounced live search; degrades to GET ?q=
- static/style.css: input search + responsive (1024/768/480), list→kartu berlabel di mobile
- test_dashboard: search/API/rank-global/config tests; .env.example; .env gitignored

static/app.js

@@ -0,0 +1,89 @@
+// Live filter daftar pemilih by owner (V11). Tanpa JS: form GET ?q= tetap jalan.
+(function () {
+  'use strict';
+
+  var input = document.getElementById('search-input');
+  var rows = document.getElementById('rows');
+  var pager = document.getElementById('pager');
+  var result = document.getElementById('search-result');
+
+  if (!input || !rows || !pager) {
+    return;
+  }
+
+  var timer = null;
+  var originalRows = null;
+  var originalPager = null;
+  var DEBOUNCE_MS = 200;
+
+  function escapeHtml(text) {
+    var el = document.createElement('div');
+    el.textContent = text == null ? '' : String(text);
+    return el.innerHTML;
+  }
+
+  function vex(value) {
+    return Number(value).toLocaleString('id-ID', {
+      minimumFractionDigits: 4,
+      maximumFractionDigits: 4
+    });
+  }
+
+  function setSearchMode(on) {
+    if (on && originalRows === null) {
+      originalRows = rows.innerHTML;
+      originalPager = pager.style.display || '';
+    } else if (!on && originalRows !== null) {
+      rows.innerHTML = originalRows;
+      pager.style.display = originalPager;
+      originalRows = null;
+      originalPager = null;
+      if (result) {
+        result.textContent = '';
+      }
+    }
+  }
+
+  function renderResults(data) {
+    if (!data.results.length) {
+      rows.innerHTML = '<div class="empty">TAK ADA AKUN COCOK</div>';
+    } else {
+      rows.innerHTML = data.results.map(function (r) {
+        return '<div class="list-row">' +
+          '<span class="rank">' + r.rank + '</span>' +
+          '<span class="owner">' + escapeHtml(r.owner) + '</span>' +
+          '<span class="stake" data-label="STAKE (VEX)">' + vex(r.staked) + '</span>' +
+          '<span class="weight" data-label="BOBOT SUARA">' + escapeHtml(r.weight) + '</span>' +
+          '</div>';
+      }).join('');
+    }
+    if (result) {
+      result.textContent = 'HASIL · ' + data.count + ' AKUN UNTUK "' + data.query + '"';
+    }
+    pager.style.display = 'none';
+  }
+
+  function liveSearch(q) {
+    fetch('/api/search?q=' + encodeURIComponent(q))
+      .then(function (res) {
+        return res.json();
+      })
+      .then(renderResults)
+      .catch(function () {
+        // Biarkan baris server tetap tampil bila fetch gagal.
+      });
+  }
+
+  input.addEventListener('input', function () {
+    clearTimeout(timer);
+    var q = input.value.trim();
+    if (q === '') {
+      setSearchMode(false);
+      return;
+    }
+    setSearchMode(true);
+    timer = setTimeout(function () {
+      liveSearch(q);
+    }, DEBOUNCE_MS);
+  });
+})();

static/style.css

@@ -121,8 +121,48 @@ body {
   color: var(--muted);
 }
 
+/* ————— search ————— */
+.search {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--sp-md);
+  margin: 0 var(--sp-lg) var(--sp-sm);
+  max-width: 560px;
+}
+.search-input {
+  background: transparent;
+  color: var(--on-dark);
+  font-family: var(--font-text);
+  font-size: 16px;
+  border: none;
+  border-bottom: 1px solid var(--hairline-strong);
+  border-radius: 0;
+  padding: var(--sp-sm) 0;
+  height: 44px;
+  flex: 1;
+  min-width: 0;
+}
+.search-input::placeholder { color: var(--muted); }
+.search-input:focus { outline: none; border-bottom-color: var(--on-dark); }
+button.pill {
+  background: transparent;
+  cursor: pointer;
+}
+.clear {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  color: var(--link);
+  text-decoration: none;
+  padding-bottom: 12px;
+  white-space: nowrap;
+}
+.search-result { margin: 0 var(--sp-lg); }
+.search-result:empty { display: none; }
+
 /* ————— spec-list ————— */
-.spec-list { margin: 0 var(--sp-lg); border-top: 1px solid var(--hairline-strong); }
+.spec-list { margin: var(--sp-md) var(--sp-lg) 0; border-top: 1px solid var(--hairline-strong); }
 .list-header,
 .list-row {
   display: grid;
@@ -153,6 +193,7 @@ body {
   font-size: 20px;
   letter-spacing: 1px;
   color: var(--on-dark);
+  overflow-wrap: anywhere;
 }
 .stake {
   font-family: var(--font-display);
@@ -218,17 +259,51 @@ body {
   color: var(--muted-soft);
 }
 
-/* ————— responsive ————— */
+/* ————— tablet (768–1024px) ————— */
+@media (max-width: 1024px) {
+  .list-header,
+  .list-row { grid-template-columns: 56px 1fr 160px 1fr; gap: var(--sp-md); }
+  .spec-list, .stats, .search, .search-result { margin-left: var(--sp-md); margin-right: var(--sp-md); }
+}
+
+/* ————— mobile (<768px): list → kartu berlabel ————— */
 @media (max-width: 768px) {
   .stats { grid-template-columns: 1fr; }
   .spec-cell + .spec-cell { border-left: none; border-top: 1px solid var(--hairline); }
-  .list-header,
-  .list-row { grid-template-columns: 48px 1fr; gap: var(--sp-sm); }
-  .list-header span:nth-child(3),
-  .list-header span:nth-child(4),
+
+  .search { flex-direction: column; align-items: stretch; }
+  .search .pill { justify-content: center; width: 100%; }
+
+  .list-header { display: none; }
+  .list-row {
+    grid-template-columns: 48px 1fr;
+    gap: var(--sp-xxs) var(--sp-sm);
+    padding: var(--sp-lg) var(--sp-sm);
+  }
+  .list-row .rank { grid-row: 1 / span 3; grid-column: 1; align-self: start; padding-top: 6px; }
+  .list-row .owner { grid-column: 2; font-size: 18px; }
   .list-row .stake,
   .list-row .weight { grid-column: 2; }
-  .list-header span:nth-child(3) { display: none; }
-  .list-header span:nth-child(4) { display: none; }
-  .pager { flex-wrap: wrap; }
+  .list-row .stake { text-align: left; }
+  .list-row .stake::before,
+  .list-row .weight::before {
+    content: attr(data-label);
+    display: block;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    color: var(--muted);
+    margin-bottom: 2px;
+  }
+
+  .pager { flex-direction: column; gap: var(--sp-md); }
+  .pager .pill { justify-content: center; width: 100%; }
+  .page-count { order: -1; }
+}
+
+/* ————— layar sangat kecil (<480px): sembunyikan nav-label ————— */
+@media (max-width: 480px) {
+  .nav-label { display: none; }
+  .hero { padding-top: var(--sp-lg); }
 }