diff --git a/qtm-live-mixed-content.user.js b/qtm-live-mixed-content.user.js
new file mode 100644
index 0000000..e166f55
--- /dev/null
+++ b/qtm-live-mixed-content.user.js
@@ -0,0 +1,441 @@
+// ==UserScript==
+// @name         QTM Live — Allow Mixed Content
+// @namespace    https://th-live.online
+// @version      0.5
+// @description  Allows live streams served over plain http:// to play on
+//               QTM-platform pages (which are served over https://).
+//               Because the stream servers do not support HTTPS, URL-upgrading
+//               cannot be used.  Every http:// XMLHttpRequest and fetch() call
+//               made by the player (hls.js loads .m3u8 manifests and .ts
+//               segments this way) is transparently routed through
+//               GM_xmlhttpRequest, which runs in the extension context and is
+//               not subject to the browser's mixed-content policy.
+//
+//               v0.3: On Chromium-based browsers (Chrome, Edge, Brave) running
+//               Tampermonkey, the userscript sandbox runs in an isolated V8
+//               world that is separate from the page's own JavaScript context.
+//               Assigning a ProxiedXHR class directly to unsafeWindow.
+//               XMLHttpRequest does not work because Chrome prevents
+//               cross-world constructor invocation.
+//
+//               Fix: the XHR/fetch interception shim is serialised as a string
+//               and injected into the page world via an inline <script> element
+//               at document-start (before any page code runs).  Requests are
+//               forwarded to the userscript (which has GM_xmlhttpRequest access)
+//               via window.postMessage; responses are returned the same way.
+//               ArrayBuffers are transferred (not cloned) to avoid a redundant
+//               copy when loading .ts video segments.
+//
+//               v0.5: hls.js registers its response handler as
+//               xhr.onreadystatechange = fn (property assignment, not
+//               addEventListener), so PXhr._fire('readystatechange') silently
+//               skipped it — the clearTimeout() call inside hls.js's handler
+//               never ran, causing every request to hit the watchdog timer.
+//               Fix: call xhr.onreadystatechange() explicitly alongside _fire().
+// @match        https://th-live.online/*
+// @match        https://qqlive.online/*
+// @match        https://www.qqlive.online/*
+// @run-at       document-start
+// @grant        GM_xmlhttpRequest
+// @grant        unsafeWindow
+// @connect      *
+// ==/UserScript==
+
+// To add more QTM-clone domains, copy one of the @match lines above and
+// change the hostname.  All sites on this platform share the same player
+// stack (hls.js / video.js) and will be fixed by the same interceptions.
+
+(function () {
+  'use strict';
+
+  // unsafeWindow IS the real page Window DOM node.  With @grant directives
+  // Tampermonkey runs in an isolated sandbox; we use unsafeWindow to share
+  // the postMessage channel with the injected page-world shim below.
+  var w = (typeof unsafeWindow !== 'undefined') ? unsafeWindow : window;
+
+  // ── 1. Page-world interception shim ───────────────────────────────────────
+  //
+  // The function below is serialised and injected as an inline <script> so it
+  // runs in the page's own V8 context (not the Tampermonkey sandbox).  From
+  // there it can replace window.XMLHttpRequest / window.fetch and the
+  // replacements are visible to all page scripts (hls.js, video.js …).
+  //
+  // Message protocol (both directions use window.postMessage / addEventListener):
+  //   page  → userscript : { __qtm: 'req', reqType: 'xhr'|'fetch',
+  //                          id, method, url, headers, body,
+  //                          responseType, timeout }
+  //   userscript → page  : { __qtm: 'res', reqType: 'xhr'|'fetch',
+  //                          id, status, statusText, responseURL,
+  //                          responseHeaders, response [, error, url] }
+
+  // IMPORTANT: This function is self-contained — it must not reference any
+  // variable from the outer userscript scope because it is serialised with
+  // .toString() and injected as a plain <script> string into the page world.
+  // All dependencies (native XHR, native fetch, helpers) are captured inside
+  // the function itself at injection time.
+  var pageShimFn = function () {
+    var _NXhr    = window.XMLHttpRequest;   // native XHR (captured before shim)
+    var _nFetch  = window.fetch;            // native fetch (captured before shim)
+    var _pending  = {};                     // id → PXhr awaiting GM response
+    var _fPending = {};                     // id → {resolve,reject} for fetch
+    var _seq      = 0;                      // monotonic request counter
+
+    function isHTTP(url) {
+      return typeof url === 'string' && url.startsWith('http://');
+    }
+
+    function parseHeaders(raw) {
+      var h = {};
+      (raw || '').split(/\r?\n/).forEach(function (line) {
+        var c = line.indexOf(':');
+        if (c > 0) h[line.slice(0, c).trim().toLowerCase()] = line.slice(c + 1).trim();
+      });
+      return h;
+    }
+
+    // ── XHR shim ──────────────────────────────────────────────────────────────
+    function PXhr() {
+      this._proxy  = false;
+      this._id     = 0;
+      this._method = 'GET';
+      this._url    = '';
+      this._rh     = {};    // request headers
+      this._ls     = {};    // addEventListener listeners
+      this._nat    = null;  // native XHR for non-http requests
+      this._rt     = '';    // responseType
+      this._rspH   = {};    // parsed response headers
+
+      this.readyState      = 0;
+      this.status          = 0;
+      this.statusText      = '';
+      this.response        = null;
+      this.responseText    = '';
+      this.responseXML     = null;
+      this.responseURL     = '';
+      this.timeout         = 0;
+      this.withCredentials = false;
+
+      this.onreadystatechange = null;
+      this.onload      = null;
+      this.onerror     = null;
+      this.ontimeout   = null;
+      this.onprogress  = null;
+      this.onloadstart = null;
+      this.onloadend   = null;
+      this.onabort     = null;
+
+      this.upload = {
+        onprogress:          null,
+        addEventListener:    function () {},
+        removeEventListener: function () {},
+        dispatchEvent:       function () {}
+      };
+    }
+
+    PXhr.UNSENT           = 0;
+    PXhr.OPENED           = 1;
+    PXhr.HEADERS_RECEIVED = 2;
+    PXhr.LOADING          = 3;
+    PXhr.DONE             = 4;
+
+    PXhr.prototype.UNSENT           = 0;
+    PXhr.prototype.OPENED           = 1;
+    PXhr.prototype.HEADERS_RECEIVED = 2;
+    PXhr.prototype.LOADING          = 3;
+    PXhr.prototype.DONE             = 4;
+
+    Object.defineProperty(PXhr.prototype, 'responseType', {
+      get: function () { return this._rt; },
+      set: function (v) {
+        this._rt = v || '';
+        if (this._nat) { try { this._nat.responseType = v; } catch (e) {} }
+      },
+      configurable: true
+    });
+
+    PXhr.prototype.open = function (method, url, async, user, pass) {
+      this._method = method || 'GET';
+      this._url    = url;
+      if (isHTTP(url)) {
+        this._proxy = true;
+        this._nat   = null;
+        this.readyState = 1;
+        var evRSo = { type: 'readystatechange', target: this };
+        this._fire('readystatechange', evRSo);
+        if (this.onreadystatechange) this.onreadystatechange(evRSo);
+      } else {
+        this._proxy = false;
+        this._nat   = new _NXhr();
+        if (this._rt) { try { this._nat.responseType = this._rt; } catch (e) {} }
+        this._nat.open(method, url, async === undefined ? true : !!async, user, pass);
+      }
+    };
+
+    PXhr.prototype.setRequestHeader = function (name, value) {
+      if (this._proxy)       { this._rh[name] = value; }
+      else if (this._nat)    { this._nat.setRequestHeader(name, value); }
+    };
+
+    PXhr.prototype.send = function (body) {
+      if (!this._proxy) { this._sendNative(body); return; }
+      this._id = ++_seq;
+      _pending[this._id] = this;
+      var ev = { type: 'loadstart', target: this };
+      this._fire('loadstart', ev);
+      if (this.onloadstart) this.onloadstart(ev);
+      window.postMessage({
+        __qtm: 'req', reqType: 'xhr',
+        id: this._id, method: this._method, url: this._url,
+        headers: this._rh, body: body || null,
+        responseType: this._rt || 'text', timeout: this.timeout || 0
+      }, '*');
+    };
+
+    PXhr.prototype._sendNative = function (body) {
+      var self = this;
+      var n    = this._nat;
+      try { if (self.timeout)         n.timeout         = self.timeout;        } catch (e) {}
+      try { if (self.withCredentials) n.withCredentials = self.withCredentials; } catch (e) {}
+      ['onreadystatechange', 'onload', 'onerror', 'ontimeout',
+       'onprogress', 'onloadstart', 'onloadend', 'onabort'].forEach(function (k) {
+        if (self[k]) n[k] = self[k];
+      });
+      n.addEventListener('readystatechange', function () {
+        self.readyState = n.readyState;
+        if (n.readyState >= 2) { self.status = n.status; self.statusText = n.statusText; }
+        if (n.readyState === 4) {
+          try { self.response     = n.response;     } catch (e) {}
+          try { self.responseText = n.responseText; } catch (e) {}
+          try { self.responseURL  = n.responseURL;  } catch (e) {}
+        }
+      });
+      Object.keys(self._ls).forEach(function (type) {
+        self._ls[type].forEach(function (fn) { n.addEventListener(type, fn); });
+      });
+      n.send(body);
+    };
+
+    PXhr.prototype.abort = function () {
+      if (this._nat) {
+        this._nat.abort();
+      } else if (_pending[this._id]) {
+        delete _pending[this._id];
+      }
+      this.readyState = 0;
+      var ev = { type: 'abort', target: this };
+      this._fire('abort', ev);
+      if (this.onabort) this.onabort(ev);
+    };
+
+    PXhr.prototype.getResponseHeader = function (name) {
+      if (this._proxy) return this._rspH[name.toLowerCase()] || null;
+      return this._nat ? this._nat.getResponseHeader(name) : null;
+    };
+
+    PXhr.prototype.getAllResponseHeaders = function () {
+      if (this._proxy) {
+        var lines = Object.keys(this._rspH).map(function (k) {
+          return k + ': ' + this._rspH[k];
+        }, this);
+        return lines.length ? lines.join('\r\n') + '\r\n' : '';
+      }
+      return this._nat ? this._nat.getAllResponseHeaders() : '';
+    };
+
+    PXhr.prototype.addEventListener = function (type, fn, opts) {
+      if (!this._ls[type]) this._ls[type] = [];
+      if (this._ls[type].indexOf(fn) === -1) this._ls[type].push(fn);
+      if (this._nat) this._nat.addEventListener(type, fn, opts);
+    };
+
+    PXhr.prototype.removeEventListener = function (type, fn) {
+      if (this._ls[type]) {
+        var i = this._ls[type].indexOf(fn);
+        if (i !== -1) this._ls[type].splice(i, 1);
+      }
+      if (this._nat) this._nat.removeEventListener(type, fn);
+    };
+
+    PXhr.prototype._fire = function (type, evt) {
+      var fns = this._ls[type];
+      if (!fns || !fns.length) return;
+      evt.target = evt.target || this;
+      evt.type   = type;
+      for (var i = 0; i < fns.length; i++) { try { fns[i](evt); } catch (e) {} }
+    };
+
+    window.XMLHttpRequest = PXhr;
+
+    // ── fetch() shim ──────────────────────────────────────────────────────────
+    window.fetch = function (input, init) {
+      var url = typeof input === 'string' ? input
+              : (input && input.url ? input.url : '');
+      if (!isHTTP(url)) return _nFetch.apply(window, arguments);
+      var method     = (init && init.method)  || (input && input.method)  || 'GET';
+      var reqHeaders = (init && init.headers) || (input && input.headers) || {};
+      var body       = (init && init.body)    || null;
+      var hObj = {};
+      if (typeof reqHeaders.forEach === 'function') {
+        reqHeaders.forEach(function (v, k) { hObj[k] = v; });
+      } else {
+        hObj = reqHeaders;
+      }
+      return new Promise(function (resolve, reject) {
+        var id = ++_seq;
+        _fPending[id] = { resolve: resolve, reject: reject };
+        window.postMessage({
+          __qtm: 'req', reqType: 'fetch',
+          id: id, method: method, url: url,
+          headers: hObj, body: body
+        }, '*');
+      });
+    };
+
+    // ── Response listener (receives GM_xmlhttpRequest results from userscript)
+    window.addEventListener('message', function (e) {
+      var d = e.data;
+      if (!d || !d.__qtm) return;
+
+      // Progress event — keep hls.js's internal timeout watchdog alive.
+      // hls.js clears/resets its JS timeout on every XHR progress event; without
+      // these the watchdog fires before long .ts segments finish downloading.
+      if (d.__qtm === 'prg') {
+        var xhr = _pending[d.id];
+        if (xhr) {
+          var evPr = { type: 'progress', target: xhr,
+                       loaded: d.loaded || 0, total: d.total || 0,
+                       lengthComputable: !!(d.total) };
+          xhr._fire('progress', evPr);
+          if (xhr.onprogress) xhr.onprogress(evPr);
+        }
+        return;
+      }
+
+      if (d.__qtm !== 'res') return;
+
+      if (d.reqType === 'xhr') {
+        var xhr = _pending[d.id];
+        if (!xhr) return;
+        delete _pending[d.id];
+        xhr._rspH       = parseHeaders(d.responseHeaders || '');
+        xhr.status      = d.status     || 0;
+        xhr.statusText  = d.statusText || '';
+        xhr.responseURL = d.responseURL || xhr._url;
+        if (d.error) {
+          xhr.readyState = 4;
+          var evRSe = { type: 'readystatechange', target: xhr };
+          xhr._fire('readystatechange', evRSe);
+          if (xhr.onreadystatechange) xhr.onreadystatechange(evRSe);
+          var ee = { type: 'error',   target: xhr };
+          xhr._fire('error',   ee); if (xhr.onerror)   xhr.onerror(ee);
+          var el = { type: 'loadend', target: xhr };
+          xhr._fire('loadend', el); if (xhr.onloadend) xhr.onloadend(el);
+          return;
+        }
+        xhr.response     = d.response;
+        xhr.responseText = typeof d.response === 'string' ? d.response : '';
+        xhr.readyState   = 4;
+        var evRS = { type: 'readystatechange', target: xhr };
+        xhr._fire('readystatechange', evRS);
+        if (xhr.onreadystatechange) xhr.onreadystatechange(evRS);
+        var ev1 = { type: 'load',    target: xhr };
+        xhr._fire('load',    ev1); if (xhr.onload)    xhr.onload(ev1);
+        var ev2 = { type: 'loadend', target: xhr };
+        xhr._fire('loadend', ev2); if (xhr.onloadend) xhr.onloadend(ev2);
+
+      } else if (d.reqType === 'fetch') {
+        var p = _fPending[d.id];
+        if (!p) return;
+        delete _fPending[d.id];
+        if (d.error) {
+          p.reject(new TypeError('QTM proxy: network error loading ' + d.url));
+          return;
+        }
+        try {
+          p.resolve(new Response(d.response, {
+            status:     d.status,
+            statusText: d.statusText || '',
+            headers:    parseHeaders(d.responseHeaders || '')
+          }));
+        } catch (ex) { p.reject(ex); }
+      }
+    });
+  };
+
+  // Serialise the shim function and inject it as an inline <script> element.
+  // Running inside a <script> tag executes in the page's own V8 world, so
+  // window.XMLHttpRequest = PXhr is visible to all page scripts.
+  var scriptEl = document.createElement('script');
+  scriptEl.textContent = '(' + pageShimFn.toString() + ')()';
+  (document.head || document.documentElement).appendChild(scriptEl);
+  try { scriptEl.remove(); } catch (e) {}
+
+  // ── 2. Bridge: receive page requests, call GM_xmlhttpRequest, reply ────────
+  //
+  // The page shim posts { __qtm:'req', ... } messages on window.
+  // Because w = unsafeWindow shares the same DOM event bus as the page, our
+  // listener here fires when the page shim calls window.postMessage().
+  // We then call GM_xmlhttpRequest (extension context, no mixed-content block)
+  // and postMessage the result back so the shim can resolve the XHR / fetch.
+  //
+  // ArrayBuffers are transferred (postMessage transferList) rather than cloned
+  // to avoid a redundant copy for every .ts video segment.
+
+  w.addEventListener('message', function (e) {
+    var d = e.data;
+    if (!d || d.__qtm !== 'req') return;
+
+    var id      = d.id;
+    var reqType = d.reqType;
+    var gmType  = d.responseType === 'arraybuffer' ? 'arraybuffer'
+                : d.responseType === 'blob'        ? 'blob'
+                :                                    'text';
+
+    GM_xmlhttpRequest({
+      method:       d.method || 'GET',
+      url:          d.url,
+      headers:      d.headers   || {},
+      data:         d.body      || null,
+      responseType: gmType,
+      timeout:      d.timeout   || undefined,
+      anonymous:    true,
+
+      onload: function (res) {
+        var response = res.response;
+        var transfer = (response instanceof ArrayBuffer) ? [response] : [];
+        w.postMessage({
+          __qtm:           'res',
+          reqType:         reqType,
+          id:              id,
+          status:          res.status,
+          statusText:      res.statusText      || '',
+          responseURL:     res.finalUrl        || d.url,
+          responseHeaders: res.responseHeaders || '',
+          response:        response
+        }, '*', transfer);
+      },
+
+      onprogress: function (res) {
+        w.postMessage({
+          __qtm:  'prg',
+          id:     id,
+          loaded: res.loaded || 0,
+          total:  res.total  || 0
+        }, '*');
+      },
+
+      onerror: function () {
+        w.postMessage({
+          __qtm: 'res', reqType: reqType, id: id, error: true, url: d.url
+        }, '*');
+      },
+
+      ontimeout: function () {
+        w.postMessage({
+          __qtm: 'res', reqType: reqType, id: id, error: true, url: d.url
+        }, '*');
+      }
+    });
+  });
+
+})();
diff --git a/th-live-console-ban.txt b/th-live-console-ban.txt
new file mode 100644
index 0000000..38dd0ed
--- /dev/null
+++ b/th-live-console-ban.txt
@@ -0,0 +1,176 @@
+th-live.online — Bypassing console-ban.js with uBlock Origin
+=============================================================
+
+Short answer
+------------
+The QTM Live sites bundle the `console-ban` npm package inside their
+app.*.js bundle.  Its entry point is:
+
+    e.prototype.prepare = function () {
+        this.clear(), this.bfcache(), this.debug()
+    }
+
+Three uBlock Origin scriptlet lines are sufficient to neutralise it
+completely, without blocking the whole app bundle:
+
+    th-live.online##+js(set-constant, console.clear, noopFunc)
+    th-live.online##+js(no-setInterval-if, debugger)
+    th-live.online##+js(remove-event-listener-if, pageshow)
+
+Copy those three lines into your uBlock Origin "My filters" list
+(Settings → Filter lists → scroll to the bottom → "My filters" tab).
+
+Repeat for every QTM-clone domain you want to cover, e.g.:
+
+    qqlive.online##+js(set-constant, console.clear, noopFunc)
+    qqlive.online##+js(no-setInterval-if, debugger)
+    qqlive.online##+js(remove-event-listener-if, pageshow)
+
+    www.qqlive.online##+js(set-constant, console.clear, noopFunc)
+    www.qqlive.online##+js(no-setInterval-if, debugger)
+    www.qqlive.online##+js(remove-event-listener-if, pageshow)
+
+
+What each of the three methods does
+------------------------------------
+
+1. clear()
+~~~~~~~~~~
+The `clear()` method registers a setInterval that calls console.clear()
+every few hundred milliseconds.  This floods the DevTools console panel
+with blank frames so error messages and log output disappear.
+
+Neutralise with:
+    domain##+js(set-constant, console.clear, noopFunc)
+
+This replaces window.console.clear with an empty function before any
+page script runs.  The library's setInterval still fires, but each call
+is now a harmless no-op instead of clearing the console.
+
+
+2. debug()
+~~~~~~~~~~
+The `debug()` method registers a setInterval that contains a `debugger`
+statement.  When DevTools is open the browser pauses on the debugger
+statement every tick, making the page unusable for inspection.
+
+Neutralise with:
+    domain##+js(no-setInterval-if, debugger)
+
+This suppresses any setInterval registration whose callback source
+contains the string "debugger".  The interval is never created.
+
+If the site uses a minified form such as `eval` or an obfuscated
+function that does not contain the literal word "debugger", you can
+also try:
+    domain##+js(no-setInterval-if, /debugger|eval/)
+
+
+3. bfcache()
+~~~~~~~~~~~~
+The `bfcache()` method adds a `pageshow` event listener.  If the event
+has `persisted === true` (i.e. the browser served the page from the
+back-forward cache) it calls location.reload(), forcing a full reload
+and clearing whatever you had open in DevTools.
+
+Neutralise with:
+    domain##+js(remove-event-listener-if, pageshow)
+
+This removes any `pageshow` event listener whose handler source
+contains "pageshow".  (More precisely, uBlock Origin matches the type
+string of addEventListener calls; this removes all handlers registered
+for the "pageshow" event that were added by inline or eval'd code.)
+
+
+Ready-to-paste filter block
+-----------------------------
+Paste the block below into uBlock Origin → My filters, then click
+"Apply changes":
+
+    ! console-ban.js neutralisation — QTM Live platform
+    ! Prevents console clearing, debugger pausing, and bfcache reloads
+    th-live.online##+js(set-constant, console.clear, noopFunc)
+    th-live.online##+js(no-setInterval-if, debugger)
+    th-live.online##+js(remove-event-listener-if, pageshow)
+    qqlive.online##+js(set-constant, console.clear, noopFunc)
+    qqlive.online##+js(no-setInterval-if, debugger)
+    qqlive.online##+js(remove-event-listener-if, pageshow)
+    www.qqlive.online##+js(set-constant, console.clear, noopFunc)
+    www.qqlive.online##+js(no-setInterval-if, debugger)
+    www.qqlive.online##+js(remove-event-listener-if, pageshow)
+
+
+How to verify the filters are working
+---------------------------------------
+1. Apply the filters and hard-reload the page (Ctrl+Shift+R).
+2. Open DevTools (F12).
+3. Switch to the Console tab.
+4. Leave it open for 10–15 seconds.
+   - Before fix: the console clears itself every few hundred
+     milliseconds and the Sources panel keeps pausing on "debugger".
+   - After fix: the console stays intact and execution is not paused.
+5. Press the browser back button to go to a previous page, then
+   forward again.
+   - Before fix: the page reloads (bfcache prevented).
+   - After fix: the page is restored from cache instantly with no
+     reload.
+
+
+Troubleshooting
+---------------
+
+Q: The `no-setInterval-if` filter isn't stopping the debugger pauses.
+A: Some versions of the bundle obfuscate the debugger statement so that
+   the literal string "debugger" is not present.  Try the broader pattern:
+       domain##+js(no-setInterval-if, /0x/)
+   (most obfuscators produce hex-encoded property names like `_0x1a2b`).
+   Or use DevTools → Sources → "Deactivate breakpoints" (Ctrl+F8) as a
+   manual workaround.
+
+Q: The filters work locally but a different QTM-clone domain is still
+   affected.
+A: Add three more lines for the new domain.  All QTM Live clone sites
+   share the same app bundle, so the same scriptlets apply.
+
+Q: uBlock Origin shows "Filter(s) are invalid" for one of the lines.
+A: The `remove-event-listener-if` scriptlet is only available in
+   uBlock Origin 1.41 or later.  Update the extension, or omit that
+   line (the bfcache reload is the least disruptive of the three
+   behaviours).
+
+Q: Can I use Violentmonkey / Tampermonkey instead of uBlock Origin?
+A: Yes.  The equivalent approach in a userscript is:
+
+       // @run-at document-start
+       console.clear = function () {};
+       const _sI = window.setInterval;
+       window.setInterval = function (fn, delay) {
+           if (typeof fn === 'function' &&
+               fn.toString().indexOf('debugger') !== -1) return 0;
+           return _sI.apply(this, arguments);
+       };
+       window.addEventListener = (function (orig) {
+           return function (type, handler, opts) {
+               if (type === 'pageshow') return;
+               return orig.call(this, type, handler, opts);
+           };
+       }(window.addEventListener));
+
+   Run this at document-start before any site JavaScript executes.
+
+
+Background: what console-ban.js is
+------------------------------------
+`console-ban` (https://github.com/fz6m/console-ban) is a small npm
+package that website owners embed to deter reverse-engineering.  It
+detects an open DevTools panel via the debugger-pause timing trick and
+retaliates with:
+
+  - Continuously clearing the console output.
+  - Pausing JavaScript execution inside a tight setInterval loop.
+  - Reloading the page when it is restored from the browser cache.
+
+None of these mechanisms affect the server side; they are purely
+client-side annoyances.  The uBlock Origin scriptlets above neutralise
+all three before the library's `prepare()` call can register any of
+them.
diff --git a/th-live-desktop-width.txt b/th-live-desktop-width.txt
new file mode 100644
index 0000000..43b6699
--- /dev/null
+++ b/th-live-desktop-width.txt
@@ -0,0 +1,226 @@
+QTM Live Platform — Desktop Width Fix (th-live.online / qqlive.online / etc.)
+==============================================================================
+
+Short answer
+------------
+These sites are built as phone-only apps.  On a wide desktop display the
+Vue app fills the full browser window width, producing an ugly stretched
+layout.  The userscript fixes this in six complementary ways (v0.7):
+
+  1. It overrides window.innerWidth and document.documentElement.clientWidth
+     at document-start (before any site JavaScript runs) so that flexible.js,
+     Vant Sticky, and all other layout code see 390 px instead of the real
+     desktop viewport width.  This is the primary fix for text sizing and
+     fixed-element positioning.
+
+  2. It emulates touch capability — the same way Chrome DevTools Device
+     Toolbar does — by overriding navigator.maxTouchPoints to 5 and
+     setting window.ontouchstart to null.  Without this, Vue/Vant skip swipe
+     gesture handlers, bottom-sheet pull-to-close, tap ripple effects, and
+     other mobile-only code paths, making the page feel like a desktop site
+     even inside the 390 px column.
+
+  3. It overrides the page's <meta name="viewport"> to width=390.  This makes
+     the browser lay out the entire page as if the viewport were a phone
+     (390 CSS px wide), so the site's own CSS works as the designers intended.
+
+  4. It pins the HTML root font-size to 39 px in CSS with !important as a
+     belt-and-suspenders fix in case flexible.js fires before the override in
+     step 1 can be installed.
+
+  5. It injects CSS that (a) centers the #app column on a dark desktop
+     background, (b) repositions known Vant UI fixed-position components
+     (bottom nav bar, top nav bar, popups, overlays) into the phone column,
+     and (c) after page load scans all elements by computed style (not by
+     class name) to constrain any remaining fixed-position elements —
+     including site-specific custom navigation bars.
+
+  6. It hooks history.pushState, history.replaceState, and the popstate event
+     to detect Vue Router SPA navigations (including the browser back/forward
+     buttons).  On each navigation it re-applies the viewport lock and
+     re-runs a fresh 6-second fixed-element scan burst, so every new page
+     rendered by the router is constrained the same way as the initial load.
+
+A small toggle button in the top-right corner lets you switch back to
+full-width at any time without editing the script.
+
+
+Why the site looks stretched
+-----------------------------
+The app bundle (app.*.js) uses Vant UI, a component library built for
+mobile.  Its components are designed for a ~390 px wide viewport:
+
+  - The root component sets the #app element to width:100%.
+  - Icon sizes, font sizes, padding, and grid columns are all tuned for
+    ~360–430 px.
+  - There are no CSS breakpoints for desktop widths — none are needed on
+    a phone.
+
+When viewed in a desktop browser the 100% width stretches across 1 000–
+2 000 px, so every component is proportionally oversized.
+
+
+Why overriding the viewport meta is the right fix
+--------------------------------------------------
+The CSS-only alternatives (max-width: 390px on #app; transform: scale)
+cannot change the value reported by window.innerWidth or CSS viewport
+units (vw / vh / dvh).  Media queries and calc() expressions that
+reference those units still see the full desktop width and render
+incorrectly.
+
+Setting <meta name="viewport" content="width=390"> tells the browser to
+treat the layout viewport as 390 px wide.  Every CSS length unit, every
+media query, and every JS window.innerWidth call then sees 390 px, and
+the site renders identically to how it looks on an actual phone.
+
+The browser scales the result up to fill the physical window (just as it
+does when you open a desktop page on a phone without a viewport tag) but
+the layout itself is computed at 390 px.
+
+
+Why the viewport override alone is not enough
+----------------------------------------------
+Even with the viewport locked to 390 px, Vant UI's navigation and overlay
+components use  position:fixed; left:0; right:0  which attaches them to
+the viewport edges, not to the #app container.  This means:
+
+  - .van-tabbar  (bottom navigation bar)
+  - .van-nav-bar (top title bar)
+  - .van-overlay / popups / action sheets
+
+…would all span the full desktop viewport even after the viewport meta is
+overridden, because the browser still needs a CSS rule to constrain them.
+
+The script therefore also includes explicit CSS for all known Vant UI
+fixed components:
+
+    left:  max(0px, calc(50vw - 195px))
+    width: min(390px, 100vw)
+    right: auto
+
+This positions them exactly over the phone column regardless of the
+viewport width, and works even if the viewport override fails (e.g. the
+browser ignores the late meta change).
+
+
+How the layout is fixed (v0.6)
+------------------------------
+Five bugs / gaps cumulatively caused the stretched layout and oversized
+text seen on desktop in v0.3 and earlier:
+
+Bug 1 — Duplicate viewport meta (fixed in v0.3)
+  The script runs at document-start before the HTML is parsed, so any
+  <meta name="viewport"> it creates is inserted *before* the site's own
+  tag.  Browsers use the *last* duplicate viewport meta, so the site's
+  later-parsed tag silently won.
+
+  Fix: applyViewport() uses querySelectorAll to find and lock *every*
+  viewport meta.  A MutationObserver fires when the site's tag is parsed
+  and immediately corrects and watches it.
+
+Bug 2 — Font size computed from desktop clientWidth (fixed in v0.3 / v0.4)
+  flexible.js runs: html.style.fontSize = clientWidth / 10 + 'px'.
+  On a 1440 px desktop it sets 144 px instead of 39 px.
+
+  Fix (CSS, v0.3): html { font-size: 39px !important }.
+  Fix (JS, v0.4):  override document.documentElement.clientWidth to
+  return 390 before any site JS runs, so flexible.js computes 39 px
+  naturally without needing the CSS override to fight it.
+
+Bug 3 — Vant Sticky reads window.innerWidth for fixed-element width (v0.4)
+  Vant Sticky initialises by calling window.innerWidth to determine the
+  width it should give to fixed-position elements.  On a 1440 px desktop
+  (where the viewport meta override may not have propagated yet) it sets
+  style="width: 1440px" on the sticky bar, making it span the full screen.
+
+  Fix: override window.innerWidth at document-start to return PHONE_WIDTH
+  (390).  All Vant Sticky initialisation therefore computes 390 px widths.
+  When the toggle button switches to full-width mode, the override is
+  deleted so native values are restored automatically.
+
+Bug 4 — Custom navigation bars not covered by Vant CSS selectors (v0.4)
+  QTM Live sites include custom Vue components (home-page section tabs,
+  live-room controls) that use position:fixed but have site-specific class
+  names not in the Vant selector list.  CSS alone cannot constrain them.
+
+  Fix: after page load, a JS scan iterates every element in the DOM, finds
+  those whose *computed* position is "fixed" (regardless of class name),
+  and applies left/width/right constraints via inline style with !important.
+  The scan repeats every 500 ms for 6 seconds to catch elements that
+  become fixed during Vue's mounted() lifecycle or after lazy hydration.
+
+Gap 5 — No touch capability (fixed in v0.5)
+  Chrome DevTools Device Toolbar does more than resize the viewport — it
+  also enables touch event emulation.  Without this, Vue/Vant detect a
+  desktop (navigator.maxTouchPoints === 0, 'ontouchstart' not in window)
+  and skip swipe gesture handlers, bottom-sheet pull-to-close, tap ripple
+  effects, and other mobile-only code paths.
+
+  Fix: override navigator.maxTouchPoints to 5 and set window.ontouchstart
+  to null at document-start.  This is exactly what DevTools device toolbar
+  does when you click it, and it activates the same mobile code paths the
+  site runs on a real phone.
+
+Gap 6 — SPA navigation reverts phone-width constraints (fixed in v0.6)
+  QTM Live sites are Vue Router SPAs (history mode).  Using the browser
+  back/forward buttons, or clicking navigation links, does NOT trigger a
+  page reload — Vue Router re-renders the page in-place.  The initial
+  DOMContentLoaded / load listeners only fire once, so after the first
+  6-second scan window expires, newly mounted fixed-position components on
+  later pages are never constrained.  Additionally, some routes reset the
+  viewport meta in their own mounted() hook.
+
+  Fix: wrap history.pushState and history.replaceState (the methods Vue
+  Router uses for programmatic navigation), and listen to the popstate
+  event (back/forward buttons).  On each SPA navigation, re-apply the
+  viewport lock and start a fresh 6-second fixAllFixedEls polling burst.
+  This ensures every route rendered by the SPA receives the same
+  phone-width treatment as the initial page load.
+
+Additionally, a 500 ms interval runs for 5 seconds after DOMContentLoaded
+to catch any late SPA viewport reset.
+
+
+The full userscript is in th-live-desktop-width.user.js.
+
+
+What to expect
+~~~~~~~~~~~~~~
+  - Install the script in Tampermonkey (or any GM-compatible extension).
+  - Open https://th-live.online (or qqlive.online) in a desktop browser.
+  - The page will render in a narrow ~390 px column centered on a dark
+    background, exactly as it looks on a phone.
+  - A small "⊞ Full width" button appears in the top-right corner.
+    Clicking it restores the full-width layout for the current tab.
+    Clicking it again re-applies the phone-width fix.
+  - The button only appears after the page has fully loaded.  During the
+    initial load the phone-width layout is already active via the
+    viewport meta override.
+
+
+Adding more domains
+~~~~~~~~~~~~~~~~~~~~
+Any site running the same QTM Live Hub codebase will be fixed by the
+same script.  To add a domain:
+
+  1. Open the Tampermonkey editor for this script.
+  2. Add a new @match line, e.g.:
+       // @match  https://example-clone.com/*
+  3. Save.
+
+Sites on this platform can be identified by:
+  - The same pink (#eb457e) color scheme.
+  - Avatar images loaded from oss-th*.qtmlivehub.com.
+  - The Tencent IM SDK (tim-js.js) in the page source.
+
+
+Known limitations
+~~~~~~~~~~~~~~~~~
+  - The JS fixed-element scan runs once at page load and then every 500 ms
+    for 6 seconds.  A fixed element added after that window (e.g. opened
+    very late by user interaction) will be constrained by the CSS Vant
+    selectors only; if it uses a custom class it may still appear full-width.
+    In that case, identify its class in DevTools and add a CSS rule to the
+    script's FIXED_SELECTORS list.
+  - The dark (#111) surround color can be changed by editing the CSS
+    block in the script.
diff --git a/th-live-desktop-width.user.js b/th-live-desktop-width.user.js
new file mode 100644
index 0000000..0bfcf03
--- /dev/null
+++ b/th-live-desktop-width.user.js
@@ -0,0 +1,833 @@
+// ==UserScript==
+// @name         QTM Live — Desktop Width Fix
+// @namespace    https://th-live.online
+// @version      0.14
+// @description  Constrains QTM-platform live-streaming sites to a
+//               phone-width column when viewed on a wide desktop screen.
+//               Overrides the viewport meta at document-start and adds
+//               a CSS phone-frame background.  Also emulates a mobile
+//               User-Agent so the site's own JS believes it is running on
+//               an iPhone, suppressing "download our app" overlays.
+//               A toggle button lets you switch between phone width and
+//               full width on the fly.
+// @match        https://th-live.online/*
+// @match        https://qqlive.online/*
+// @match        https://www.qqlive.online/*
+// @run-at       document-start
+// @grant        none
+// ==/UserScript==
+
+// To add more QTM-clone domains, copy one of the @match lines above and
+// change the hostname.  All sites on this platform share the same #app
+// structure and will be fixed by the same CSS.
+
+(function () {
+  'use strict';
+
+  var PHONE_WIDTH  = 390;     // logical CSS px — matches iPhone 14 (common design baseline)
+  var PHONE_HEIGHT = 844;     // logical CSS px — matches iPhone 14 screen height
+  var VIEWPORT    = 'width=' + PHONE_WIDTH + ',initial-scale=1';
+
+  // Read the REAL viewport dimensions before we override any of them.
+  // These captured values are used as fallbacks in full-width mode.
+  var realViewportWidth  = window.screen.width;
+  var realViewportHeight = window.screen.height;
+  var realAvailWidth     = window.screen.availWidth;
+  var realAvailHeight    = window.screen.availHeight;
+  var realOuterWidth     = window.outerWidth;
+  var realOuterHeight    = window.outerHeight;
+  if (realViewportWidth <= PHONE_WIDTH) return;
+
+  // phoneMode must be declared here (before the property getters below reference it
+  // via closure) even though it is assigned before any getter is ever called.
+  var phoneMode = true;
+
+  // ── 1. Override window.innerWidth / document.documentElement.clientWidth ───
+  //
+  // These must be intercepted at document-start — before flexible.js or any
+  // Vant component initialises — so that every JS layout calculation that reads
+  // these values uses PHONE_WIDTH instead of the actual desktop viewport width.
+  //
+  // Without this, flexible.js reads clientWidth = 1440 and sets
+  //   html { font-size: 144px }
+  // and Vant Sticky reads innerWidth = 1440 when it positions fixed elements,
+  // making them span the full desktop screen.
+  //
+  // When the user toggles to full-width mode we delete the overrides so the
+  // native browser values are restored automatically.
+
+  try {
+    Object.defineProperty(window, 'innerWidth', {
+      get: function () { return phoneMode ? PHONE_WIDTH : realViewportWidth; },
+      configurable: true
+    });
+  } catch (e) {}
+
+  try {
+    // document.documentElement.clientWidth is what most flexible.js variants read.
+    // Overriding it on the *instance* (not Element.prototype) keeps the override
+    // isolated to just this element.
+    var _elCWDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'clientWidth');
+    Object.defineProperty(document.documentElement, 'clientWidth', {
+      get: function () {
+        if (phoneMode) return PHONE_WIDTH;
+        return _elCWDesc ? _elCWDesc.get.call(this) : realViewportWidth;
+      },
+      configurable: true
+    });
+  } catch (e) {}
+
+  // ── 1b. Override window.innerHeight / document.documentElement.clientHeight ─
+  //
+  // The "download our app" bottom sheet (and any other component that reads
+  // viewport height in JS) uses window.innerHeight to calculate its own height.
+  // On a 900 px desktop screen it renders full-screen tall; on a 844 px phone it
+  // renders as a compact banner.  Spoofing innerHeight to PHONE_HEIGHT makes
+  // those JS calculations produce phone-sized results.
+  //
+  // CSS `vh` units are not affected by this override (they resolve against the
+  // visual viewport regardless of JS property values), so the companion CSS rule
+  // `height: auto !important` on `.van-popup--bottom` handles vh-based heights.
+
+  var _elCHDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'clientHeight');
+
+  try {
+    Object.defineProperty(window, 'innerHeight', {
+      get: function () { return phoneMode ? PHONE_HEIGHT : realViewportHeight; },
+      configurable: true
+    });
+  } catch (e) {}
+
+  try {
+    Object.defineProperty(document.documentElement, 'clientHeight', {
+      get: function () {
+        if (phoneMode) return PHONE_HEIGHT;
+        return _elCHDesc ? _elCHDesc.get.call(this) : realViewportHeight;
+      },
+      configurable: true
+    });
+  } catch (e) {}
+
+  // ── 1c. Override screen.width/height and window.outerWidth/outerHeight ────
+  //
+  // Chrome DevTools Device Toolbar also sets screen.width, screen.height,
+  // screen.availWidth, screen.availHeight, window.outerWidth and
+  // window.outerHeight to the emulated device dimensions.  Several flexible.js
+  // variants (and some Vue/Vant internals) read screen.width as the primary
+  // viewport reference rather than window.innerWidth, so these overrides are
+  // required to make the phone-width mode indistinguishable from Device Toolbar.
+
+  try {
+    Object.defineProperty(window.screen, 'width', {
+      get: function () { return phoneMode ? PHONE_WIDTH : realViewportWidth; },
+      configurable: true
+    });
+  } catch (e) {}
+
+  try {
+    Object.defineProperty(window.screen, 'availWidth', {
+      get: function () { return phoneMode ? PHONE_WIDTH : realAvailWidth; },
+      configurable: true
+    });
+  } catch (e) {}
+
+  try {
+    Object.defineProperty(window.screen, 'height', {
+      get: function () { return phoneMode ? PHONE_HEIGHT : realViewportHeight; },
+      configurable: true
+    });
+  } catch (e) {}
+
+  try {
+    Object.defineProperty(window.screen, 'availHeight', {
+      get: function () { return phoneMode ? PHONE_HEIGHT : realAvailHeight; },
+      configurable: true
+    });
+  } catch (e) {}
+
+  try {
+    Object.defineProperty(window, 'outerWidth', {
+      get: function () { return phoneMode ? PHONE_WIDTH : realOuterWidth; },
+      configurable: true
+    });
+  } catch (e) {}
+
+  try {
+    Object.defineProperty(window, 'outerHeight', {
+      get: function () { return phoneMode ? PHONE_HEIGHT : realOuterHeight; },
+      configurable: true
+    });
+  } catch (e) {}
+
+  // ── 2. Touch capability emulation ─────────────────────────────────────────
+  //
+  // Chrome DevTools Device Toolbar does more than just resize the viewport — it
+  // also enables touch event emulation.  Without this, sites that check for
+  // touch capability keep running their desktop code paths even in a 390 px
+  // column:
+  //
+  //   • navigator.maxTouchPoints === 0 (desktop default) → Vant, Vue Router
+  //     and many SPA frameworks skip swipe handlers, bottom-sheet gestures,
+  //     and tap ripple effects entirely.
+  //
+  //   • 'ontouchstart' in window === false → older jQuery-style checks bail
+  //     out of the touch branch.
+  //
+  // Overriding these at document-start (before any framework code runs)
+  // activates the same mobile code paths the site would use on a real phone.
+  //
+  // The real values are saved so they can be restored when the user toggles to
+  // full-width mode.
+
+  var realMaxTouchPoints = navigator.maxTouchPoints;
+
+  try {
+    Object.defineProperty(navigator, 'maxTouchPoints', {
+      get: function () {
+        return phoneMode ? 5 : realMaxTouchPoints;
+      },
+      configurable: true
+    });
+  } catch (e) {}
+
+  // 'ontouchstart' in window is the classic touch-capability check.
+  // Setting it to null is enough — the property exists (returns true for `in`)
+  // and is falsy (avoids breaking code that also reads the value).
+  // ensureOntouchstart() is also called when toggling back to phone mode.
+  function ensureOntouchstart() {
+    if (!('ontouchstart' in window)) {
+      try { window.ontouchstart = null; } catch (e) {}
+    }
+  }
+  ensureOntouchstart();
+
+  // ── 2b. User-Agent and platform emulation ─────────────────────────────────
+  //
+  // QTM Live sites show a "download our mobile app" interstitial when they
+  // detect a mobile viewport (innerWidth = 390, maxTouchPoints > 0) paired
+  // with a desktop User-Agent string.  Their client-side logic reads
+  //   navigator.userAgent / navigator.platform
+  // and infers "desktop browser pretending to be mobile → show app promo".
+  //
+  // Overriding these to an iPhone Mobile Safari UA makes the site's JS believe
+  // we are a genuine mobile browser, suppressing the interstitial and activating
+  // the interactive live-room UI (chat, like/gift controls, navigation bar).
+  //
+  // NOTE: this only affects JS-readable values.  HTTP request headers are
+  // unchanged, so server-side UA checks still see the real desktop UA.
+
+  var realUserAgent = navigator.userAgent;
+  var realPlatform  = navigator.platform;
+
+  // Standard iPhone 14 / iOS 17 / Mobile Safari UA — widely recognised.
+  var MOBILE_UA = 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X)' +
+                  ' AppleWebKit/605.1.15 (KHTML, like Gecko)' +
+                  ' Version/17.0 Mobile/15E148 Safari/604.1';
+
+  try {
+    Object.defineProperty(navigator, 'userAgent', {
+      get: function () { return phoneMode ? MOBILE_UA : realUserAgent; },
+      configurable: true
+    });
+  } catch (e) {}
+
+  try {
+    Object.defineProperty(navigator, 'platform', {
+      get: function () { return phoneMode ? 'iPhone' : realPlatform; },
+      configurable: true
+    });
+  } catch (e) {}
+
+  // ── 3. Viewport meta override ──────────────────────────────────────────────
+  //
+  // Two independent observers keep the viewport meta locked to PHONE_WIDTH:
+  //
+  //   vpChildObserver  — watches the whole document for a new <meta> element
+  //                      being inserted (catches the static HTML meta and any
+  //                      createElement + appendChild calls).
+  //   vpAttrObservers  — one per viewport meta; watches the content attribute
+  //                      so that a plain JS assignment like
+  //                        meta.content = '...'
+  //                      is immediately reversed.
+  //
+  // querySelectorAll is used (not querySelector) so ALL duplicate viewport metas
+  // are corrected — browsers use the *last* one, so any site-inserted tag that
+  // comes after ours must also be locked.
+
+  var vpAttrObservers = [];   // one entry per watched <meta name="viewport">
+  var vpLocked = false;       // re-entrancy guard
+
+  function disconnectVpAttrObservers() {
+    for (var i = 0; i < vpAttrObservers.length; i++) vpAttrObservers[i].disconnect();
+    vpAttrObservers = [];
+  }
+
+  function applyViewport() {
+    if (vpLocked) return;
+    vpLocked = true;
+
+    var all = document.querySelectorAll('meta[name="viewport"]');
+
+    if (all.length === 0) {
+      // No viewport meta in the DOM yet — create one.  vpChildObserver will
+      // fire when it is inserted and call applyViewport again.
+      var m = document.createElement('meta');
+      m.name    = 'viewport';
+      m.content = VIEWPORT;
+      (document.head || document.documentElement).appendChild(m);
+      vpLocked = false;
+      return;
+    }
+
+    // Lock every existing viewport meta.
+    for (var i = 0; i < all.length; i++) {
+      if (all[i].content !== VIEWPORT) all[i].content = VIEWPORT;
+    }
+
+    // Reconnect attribute observers.
+    disconnectVpAttrObservers();
+    for (var j = 0; j < all.length; j++) {
+      (function watchMeta(el) {
+        var obs = new MutationObserver(function () {
+          if (el.content !== VIEWPORT) el.content = VIEWPORT;
+        });
+        obs.observe(el, { attributes: true, attributeFilter: ['content'] });
+        vpAttrObservers.push(obs);
+      }(all[j]));
+    }
+
+    vpLocked = false;
+  }
+
+  applyViewport();
+
+  // Watch for new <meta name="viewport"> elements being added.
+  var vpChildObserver = new MutationObserver(function (mutations) {
+    for (var mi = 0; mi < mutations.length; mi++) {
+      var added = mutations[mi].addedNodes;
+      for (var ni = 0; ni < added.length; ni++) {
+        var n = added[ni];
+        if (n.nodeType !== 1) continue;
+        var isVp = n.tagName === 'META' &&
+                   (n.name === 'viewport' || n.getAttribute('name') === 'viewport');
+        var containsVp = !isVp && n.querySelector && n.querySelector('meta[name="viewport"]');
+        if (isVp || containsVp) { applyViewport(); return; }
+      }
+    }
+  });
+  vpChildObserver.observe(document.documentElement, { childList: true, subtree: true });
+
+  document.addEventListener('DOMContentLoaded', function () {
+    vpChildObserver.disconnect();   // static DOM is complete; attribute observers take over
+    applyViewport();
+
+    // Poll for ~5 s to catch any late SPA viewport reset (e.g. Vue mounted hook).
+    var ticks = 0;
+    var MAX_POLL_TICKS = 10;   // 10 ticks × 500 ms = 5 s
+    var poll = setInterval(function () {
+      applyViewport();
+      if (++ticks >= MAX_POLL_TICKS) clearInterval(poll);
+    }, 500);
+  });
+
+  // ── 4. CSS ─────────────────────────────────────────────────────────────────
+  //
+  // Layer A — root font-size pin
+  //   Ensures the rem baseline is correct even if flexible.js already ran
+  //   before our window.innerWidth override was applied.
+  //
+  // Layer B — container centering
+  //   Centers #app in a dark desktop surround, capped at PHONE_WIDTH px.
+  //
+  // Layer C — named fixed-element repositioning (Vant UI class names)
+  //   CSS !important overrides inline styles set by Vant's own JS.
+  //   Centres fixed elements over the phone column:
+  //     left:  max(0px, calc(50vw - 195px))
+  //     width: min(390px, 100vw)
+  //   Works whether the viewport is 390 px (meta override succeeded) or the
+  //   full desktop width (meta override failed — CSS-only fallback).
+
+  var PHONE_HALF_WIDTH     = (PHONE_WIDTH / 2) + 'px';        // '195px'
+  var COL_LEFT             = 'max(0px,calc(50vw - ' + PHONE_HALF_WIDTH + '))';
+  var COL_WIDTH            = 'min(' + PHONE_WIDTH + 'px,100vw)';
+  var PHONE_ROOT_FONT_SIZE = (PHONE_WIDTH / 10) + 'px';        // '39px'
+
+  // Vant UI selectors for elements that use position:fixed and span the viewport.
+  var FIXED_SELECTORS = [
+    '.van-tabbar',
+    '.van-nav-bar',
+    '.van-sticky > .van-nav-bar',
+    '.van-sticky > [class]',
+    '.van-notify',
+    '.van-overlay',
+    '.van-popup--bottom',
+    '.van-popup--top',
+    '.van-popup--left',
+    '.van-popup--right',
+    '.van-action-sheet',
+    '.van-share-sheet',
+    '.van-number-keyboard'
+  ].join(',\n  ');
+
+  var CSS = [
+    '/* ── root font-size + background ── */',
+    'html {',
+    '  font-size: ' + PHONE_ROOT_FONT_SIZE + ' !important;',
+    '  background: #111 !important;',
+    '}',
+    'body {',
+    '  display: flex !important;',
+    '  justify-content: center !important;',
+    '  min-height: 100vh !important;',
+    '  background: #111 !important;',
+    '  margin: 0 !important;',
+    '  padding: 0 !important;',
+    '}',
+    '#app, [data-v-app] {',
+    '  max-width: ' + PHONE_WIDTH + 'px !important;',
+    '  width: 100% !important;',
+    '  box-shadow: 0 0 60px rgba(0,0,0,.7) !important;',
+    '  min-height: 100vh !important;',
+    '  overflow-x: hidden !important;',
+    '  position: relative !important;',
+    '}',
+    '',
+    '/* ── Live-stream video player ── */',
+    '/* The HLS player (hls.js / video.js) often sets an explicit pixel width  */',
+    '/* matching the full desktop viewport.  Constrain it to the phone column.  */',
+    '#app video,',
+    '[data-v-app] video {',
+    '  max-width: 100% !important;',
+    '  width: 100% !important;',
+    '}',
+    '',
+    '/* ── Vant fixed / overlay elements ── */',
+    '  ' + FIXED_SELECTORS + ' {',
+    '  left:  ' + COL_LEFT  + ' !important;',
+    '  width: ' + COL_WIDTH + ' !important;',
+    '  right: auto !important;',
+    '  max-width: ' + PHONE_WIDTH + 'px !important;',
+    '}',
+    '',
+    '/* van-toast is centred by transform; keep its anchor in the column */',
+    '.van-toast {',
+    '  left: 50vw !important;',
+    '}',
+    '',
+    '/* Bottom popups (including the app-download banner) must not use the full',
+    '   desktop viewport height.  The JS scan above handles any inline !important',
+    '   height set by Vant/Vue; these CSS rules are a belt-and-suspenders fallback',
+    '   for heights set purely through stylesheets (which CSS !important can reach). */',
+    '.van-popup--bottom,',
+    '.van-action-sheet,',
+    '.van-share-sheet {',
+    '  height: auto !important;',
+    '  max-height: ' + PHONE_HEIGHT + 'px !important;',
+    '}'
+  ].join('\n');
+
+  var styleEl = document.createElement('style');
+  styleEl.id          = '__qtm_width_fix';
+  styleEl.textContent = CSS;
+  (document.head || document.documentElement).appendChild(styleEl);
+
+  // ── 5. JS fixed-element scan ───────────────────────────────────────────────
+  //
+  // The CSS layer above covers known Vant class names, but QTM Live sites also
+  // have custom components (e.g. the home-page section tab bar, live-room
+  // like/gift/follow controls) with site-specific class names not in the Vant
+  // selector list.
+  //
+  // This scan iterates every element in the live DOM, finds those whose
+  // *computed* position is "fixed", and applies phone-column constraints with
+  // !important priority.  It runs:
+  //   • once immediately after DOMContentLoaded (catches initial Vant setup)
+  //   • every 500 ms for 6 seconds after window load (catches elements that
+  //     become fixed during Vue's mounted() lifecycle or after lazy hydration)
+  //
+  // For performance the scan is targeted: it checks
+  //   • direct children of <body>  (Vant teleports overlays/popups here)
+  //   • all descendants of #app / [data-v-app]  (catches sticky navs and
+  //     custom bars inside the Vue component tree)
+  // rather than every element in the full DOM, which keeps each pass fast
+  // even on complex pages.
+  //
+  // Constraint strategy (v0.10):
+  //   Center-anchored elements (left ≈ 50 % of visual viewport, typically paired
+  //   with transform:translate(-50%,…)) — small in-stream popups, gift dialogs
+  //     → preserve natural width; re-anchor left to the phone column center so
+  //       the translateX keeps the popup centered over the column.
+  //   Wide elements (width ≥ 60 % of PHONE_WIDTH) — nav bars, overlays, popups
+  //     → full column constraint: left=COL_LEFT, width=COL_WIDTH, right=auto
+  //   Narrow elements (width < 60 % of PHONE_WIDTH) — floating action buttons,
+  //     live-room like/gift/follow icons, badges
+  //     → preserve width; re-anchor left/right relative to the phone column
+  //       so they stay inside the column without being stretched.
+
+  function fixAllFixedEls() {
+    if (!phoneMode || !document.body) return;
+
+    // Build a de-duplicated candidate list: body's direct children + everything
+    // inside the Vue app root.
+    var candidates = [];
+    var bodyChildren = document.body.children;
+    for (var bi = 0; bi < bodyChildren.length; bi++) {
+      candidates.push(bodyChildren[bi]);
+    }
+    var appRoots = document.querySelectorAll('#app, [data-v-app]');
+    for (var ai = 0; ai < appRoots.length; ai++) {
+      var appEls = appRoots[ai].querySelectorAll('*');
+      for (var ae = 0; ae < appEls.length; ae++) {
+        candidates.push(appEls[ae]);
+      }
+    }
+
+    // The phone column's right edge measured from the *right* side of the
+    // viewport.  Used to re-anchor right-positioned narrow elements so they
+    // stay inside the phone column rather than drifting off-screen.
+    //   = calc(max(0px, (100vw - 390px) / 2))   (mirrors COL_LEFT by symmetry)
+    var COL_RIGHT_INSET = 'max(0px,calc((100vw - ' + PHONE_WIDTH + 'px) / 2))';
+
+    // Phone column centre as a CSS calc() for re-anchoring centred popups.
+    // left=COL_CENTER_LEFT with transform:translateX(-50%) centres the popup.
+    var COL_CENTER_LEFT = 'calc(' + COL_LEFT + ' + ' + (PHONE_WIDTH / 2) + 'px)';
+
+    // Real visual viewport width.  position:fixed elements are positioned
+    // relative to the visual viewport (browser window), not the layout viewport
+    // set by the meta tag.  window.visualViewport.width gives this directly;
+    // fall back to screen.width (captured before our innerWidth override).
+    var realVW = (window.visualViewport && window.visualViewport.width)
+                   ? Math.round(window.visualViewport.width)
+                   : realViewportWidth;
+
+    for (var i = 0; i < candidates.length; i++) {
+      var el = candidates[i];
+      if (el.id === '__qtm_btn') continue;
+      var cs = window.getComputedStyle(el);
+      if (cs.position !== 'fixed') continue;
+
+      var elW    = parseFloat(cs.width) || 0;
+      var csLeft  = cs.left;
+      var csRight = cs.right;
+      var rawLeft  = parseFloat(csLeft);
+      var rawRight = parseFloat(csRight);
+
+      // Mark the element so clearFixedElStyles() can find and clean it up.
+      el.setAttribute('data-qtm-fixed', '1');
+
+      // ── Center-anchored element (left ≈ 50 % of visual viewport) ──────────
+      // These use CSS `left:50%` + `transform:translate(-50%,…)` to center
+      // themselves.  If we apply COL_LEFT to them the transform shifts them
+      // further left, placing them outside the column.  Instead we set left to
+      // the column center; the existing translateX(-50%) then centers the
+      // element over the phone column.  Width is intentionally preserved so
+      // small popups (gift dialogs, join prompts) remain their natural size.
+      var isCenteredX = csLeft !== 'auto' &&
+                        !isNaN(rawLeft) &&
+                        Math.abs(rawLeft - realVW / 2) < 5;
+
+      if (isCenteredX) {
+        el.style.setProperty('max-width', PHONE_WIDTH + 'px', 'important');
+        el.style.setProperty('left',      COL_CENTER_LEFT,     'important');
+        el.style.removeProperty('right');
+      } else if (elW >= PHONE_WIDTH * 0.6) {
+        // ── Wide element (nav bar, overlay, popup, backdrop) ────────────────
+        // Constrain to the phone column exactly as before.
+        el.style.setProperty('max-width', PHONE_WIDTH + 'px', 'important');
+        el.style.setProperty('width',     COL_WIDTH,           'important');
+        el.style.setProperty('left',      COL_LEFT,            'important');
+        el.style.setProperty('right',     'auto',              'important');
+        // If the element is taller than a phone screen it is almost certainly
+        // a bottom-sheet or interstitial whose height was calculated from the
+        // real desktop window.innerHeight (or set as 100vh inline).  Force it
+        // to size itself to its content instead.  This wins over any inline
+        // `!important` height that CSS-level rules cannot override.
+        // Overlays that use both `top:0` and `bottom:0` are unaffected because
+        // the browser ignores the `height` property when both are set.
+        var elH = parseFloat(cs.height) || 0;
+        if (elH > PHONE_HEIGHT) {
+          el.style.setProperty('height', 'auto', 'important');
+        }
+      } else {
+        // ── Narrow element (floating action button, badge, live-room control)
+        // DON'T stretch its width.  Only re-anchor it so it stays within the
+        // phone column.  Elements positioned from the right (right: Xpx) get
+        // their right inset adjusted relative to the column's right edge.
+        // Elements positioned from the left get their left offset adjusted
+        // relative to the column's left edge.
+        el.style.setProperty('max-width', PHONE_WIDTH + 'px', 'important');
+
+        if (csRight !== 'auto' && !isNaN(rawRight)) {
+          // Right-anchored: shift inset so it's relative to column right edge.
+          el.style.setProperty('right',
+            'calc(' + COL_RIGHT_INSET + ' + ' + rawRight + 'px)', 'important');
+          el.style.removeProperty('left');
+        } else if (csLeft !== 'auto' && !isNaN(rawLeft)) {
+          // Left-anchored: shift offset so it's relative to column left edge.
+          el.style.setProperty('left',
+            'calc(' + COL_LEFT + ' + ' + rawLeft + 'px)', 'important');
+          el.style.removeProperty('right');
+        }
+      }
+    }
+  }
+
+  // Remove all inline styles that fixAllFixedEls() applied when we switch to
+  // full-width mode.  Without this, the phone-column-relative calc() values
+  // remain on elements and mis-position them against the full-width viewport.
+  function clearFixedElStyles() {
+    var tagged = document.querySelectorAll('[data-qtm-fixed]');
+    for (var i = 0; i < tagged.length; i++) {
+      var el = tagged[i];
+      el.style.removeProperty('max-width');
+      el.style.removeProperty('width');
+      el.style.removeProperty('left');
+      el.style.removeProperty('right');
+      el.style.removeProperty('height');
+      el.removeAttribute('data-qtm-fixed');
+    }
+  }
+
+  document.addEventListener('DOMContentLoaded', fixAllFixedEls);
+
+  window.addEventListener('load', function () {
+    fixAllFixedEls();
+    var scanTicks = 0;
+    var scanMax   = 12;   // 12 × 500 ms = 6 s
+    var scanPoll  = setInterval(function () {
+      fixAllFixedEls();
+      if (++scanTicks >= scanMax) clearInterval(scanPoll);
+    }, 500);
+  });
+
+  // ── 6. SPA navigation hook ────────────────────────────────────────────────
+  //
+  // QTM Live sites are Vue Router SPAs (history mode).  Navigating between
+  // pages (including the browser back/forward buttons) does NOT trigger a
+  // page reload, so the DOMContentLoaded / load listeners above only fire
+  // once — on the initial page load.
+  //
+  // After that, two things can undo the phone-width constraints:
+  //   a) Vue Router re-creates fixed-position components (nav bars, overlays)
+  //      with fresh inline styles from Vant Sticky, sized with the native
+  //      (desktop) window.innerWidth.  Our window.innerWidth override is
+  //      still in place, but Vant cached the value at its first init.
+  //   b) Some routes reset the viewport meta via their own mounted() hook.
+  //
+  // Fix:
+  //   • Wrap history.pushState / history.replaceState so we are notified of
+  //     programmatic SPA navigations (clicking links, tabs, etc.).
+  //   • Listen to the `popstate` event for back/forward button presses.
+  //   • On each navigation, re-run applyViewport() and start a fresh 6-second
+  //     fixAllFixedEls polling burst to constrain newly mounted components.
+
+  var _spaNavScanPoll = null;
+
+  function onSpaNav() {
+    if (!phoneMode) return;
+    applyViewport();
+
+    // Clear any in-flight scan timer, then start a fresh burst.
+    if (_spaNavScanPoll) clearInterval(_spaNavScanPoll);
+    var navTicks = 0;
+    var navMax   = 12;   // 12 × 500 ms = 6 s
+    _spaNavScanPoll = setInterval(function () {
+      fixAllFixedEls();
+      if (++navTicks >= navMax) {
+        clearInterval(_spaNavScanPoll);
+        _spaNavScanPoll = null;
+      }
+    }, 500);
+  }
+
+  // Wrap pushState / replaceState.  These are the methods Vue Router calls
+  // when navigating programmatically (link clicks, router.push(), etc.).
+  (function () {
+    var origPush    = history.pushState.bind(history);
+    var origReplace = history.replaceState.bind(history);
+
+    history.pushState = function () {
+      origPush.apply(history, arguments);
+      onSpaNav();
+    };
+    history.replaceState = function () {
+      origReplace.apply(history, arguments);
+      onSpaNav();
+    };
+  })();
+
+  // popstate fires on back/forward button presses.
+  window.addEventListener('popstate', onSpaNav);
+
+  // ── 7. Toggle button ───────────────────────────────────────────────────────
+  //
+  // A small button fixed to the top-right corner.  Clicking it switches
+  // between phone-width mode and full-width mode.
+
+  function applyMode() {
+    styleEl.disabled = !phoneMode;
+
+    if (phoneMode) {
+      // Re-establish the innerWidth / clientWidth overrides in case the toggle
+      // was clicked while they had been deleted.  Use the same phoneMode-aware
+      // getters as the initial setup so a rapid double-click can never leave
+      // them in an inconsistent state.
+      try {
+        Object.defineProperty(window, 'innerWidth', {
+          get: function () { return phoneMode ? PHONE_WIDTH : realViewportWidth; },
+          configurable: true
+        });
+      } catch (e) {}
+      try {
+        Object.defineProperty(document.documentElement, 'clientWidth', {
+          get: function () {
+            if (phoneMode) return PHONE_WIDTH;
+            return _elCWDesc ? _elCWDesc.get.call(this) : realViewportWidth;
+          },
+          configurable: true
+        });
+      } catch (e) {}
+      // Restore touch emulation.
+      try {
+        Object.defineProperty(navigator, 'maxTouchPoints', {
+          get: function () { return phoneMode ? 5 : realMaxTouchPoints; },
+          configurable: true
+        });
+      } catch (e) {}
+      ensureOntouchstart();
+      // Restore mobile UA / platform so the site's JS still sees a phone.
+      try {
+        Object.defineProperty(navigator, 'userAgent', {
+          get: function () { return phoneMode ? MOBILE_UA : realUserAgent; },
+          configurable: true
+        });
+      } catch (e) {}
+      try {
+        Object.defineProperty(navigator, 'platform', {
+          get: function () { return phoneMode ? 'iPhone' : realPlatform; },
+          configurable: true
+        });
+      } catch (e) {}
+      // Restore innerHeight override so JS popup height calculations use phone size.
+      try {
+        Object.defineProperty(window, 'innerHeight', {
+          get: function () { return phoneMode ? PHONE_HEIGHT : realViewportHeight; },
+          configurable: true
+        });
+      } catch (e) {}
+      try {
+        Object.defineProperty(document.documentElement, 'clientHeight', {
+          get: function () {
+            if (phoneMode) return PHONE_HEIGHT;
+            return _elCHDesc ? _elCHDesc.get.call(this) : realViewportHeight;
+          },
+          configurable: true
+        });
+      } catch (e) {}
+      // Restore screen/outer dimension overrides so all JS property reads reflect
+      // phone dimensions (matching what Chrome DevTools Device Toolbar exposes).
+      try {
+        Object.defineProperty(window.screen, 'width', {
+          get: function () { return phoneMode ? PHONE_WIDTH : realViewportWidth; },
+          configurable: true
+        });
+      } catch (e) {}
+      try {
+        Object.defineProperty(window.screen, 'availWidth', {
+          get: function () { return phoneMode ? PHONE_WIDTH : realAvailWidth; },
+          configurable: true
+        });
+      } catch (e) {}
+      try {
+        Object.defineProperty(window.screen, 'height', {
+          get: function () { return phoneMode ? PHONE_HEIGHT : realViewportHeight; },
+          configurable: true
+        });
+      } catch (e) {}
+      try {
+        Object.defineProperty(window.screen, 'availHeight', {
+          get: function () { return phoneMode ? PHONE_HEIGHT : realAvailHeight; },
+          configurable: true
+        });
+      } catch (e) {}
+      try {
+        Object.defineProperty(window, 'outerWidth', {
+          get: function () { return phoneMode ? PHONE_WIDTH : realOuterWidth; },
+          configurable: true
+        });
+      } catch (e) {}
+      try {
+        Object.defineProperty(window, 'outerHeight', {
+          get: function () { return phoneMode ? PHONE_HEIGHT : realOuterHeight; },
+          configurable: true
+        });
+      } catch (e) {}
+      applyViewport();
+      fixAllFixedEls();
+      // Trigger resize so Vant / flexible.js recalculate with phone-width values.
+      window.dispatchEvent(new Event('resize'));
+    } else {
+      // Full-width mode: remove our property overrides so native values return.
+      try { delete window.innerWidth; } catch (e) {}
+      try { delete document.documentElement.clientWidth; } catch (e) {}
+      try { delete window.innerHeight; } catch (e) {}
+      try { delete document.documentElement.clientHeight; } catch (e) {}
+      try { delete navigator.maxTouchPoints; } catch (e) {}
+      try { delete navigator.userAgent; } catch (e) {}
+      try { delete navigator.platform; } catch (e) {}
+      try { delete window.screen.width; } catch (e) {}
+      try { delete window.screen.availWidth; } catch (e) {}
+      try { delete window.screen.height; } catch (e) {}
+      try { delete window.screen.availHeight; } catch (e) {}
+      try { delete window.outerWidth; } catch (e) {}
+      try { delete window.outerHeight; } catch (e) {}
+      // Remove inline styles fixAllFixedEls() injected onto fixed elements.
+      // Without this, phone-column-relative calc() values mis-position elements
+      // against the full-width viewport (e.g. left:525px instead of left:0).
+      clearFixedElStyles();
+      disconnectVpAttrObservers();
+      var vp = document.querySelector('meta[name="viewport"]');
+      if (vp) vp.content = 'width=device-width,initial-scale=1';
+      // Trigger resize so Vant / flexible.js recalculate with full-width values.
+      window.dispatchEvent(new Event('resize'));
+    }
+
+    if (btn) {
+      btn.textContent = phoneMode ? '\u229e Full width' : '\u260e Phone width';
+      btn.title = phoneMode
+        ? 'Click to restore full-width layout'
+        : 'Click to re-enable phone-width fix';
+    }
+  }
+
+  var btn = null;
+
+  window.addEventListener('load', function () {
+    btn = document.createElement('button');
+    btn.id          = '__qtm_btn';
+    btn.textContent = '\u229e Full width';
+    btn.title       = 'Click to restore full-width layout';
+    btn.style.cssText = [
+      'position:fixed',
+      'top:8px',
+      'right:8px',
+      'z-index:2147483647',
+      'background:rgba(0,0,0,.55)',
+      'color:#fff',
+      'border:1px solid rgba(255,255,255,.25)',
+      'border-radius:6px',
+      'padding:4px 9px',
+      'font-size:11px',
+      'line-height:1.5',
+      'cursor:pointer',
+      'font-family:sans-serif',
+      'user-select:none',
+      '-webkit-user-select:none'
+    ].join(';');
+    btn.onclick = function () {
+      phoneMode = !phoneMode;
+      applyMode();
+    };
+    document.body.appendChild(btn);
+  });
+})();
diff --git a/th-live-email-tab-missing.txt b/th-live-email-tab-missing.txt
new file mode 100644
index 0000000..0576775
--- /dev/null
+++ b/th-live-email-tab-missing.txt
@@ -0,0 +1,196 @@
+th-live.online — "I Don't See the Email Registration Tab"
+==========================================================
+
+Short answer
+------------
+The email registration tab does not exist in the current production
+version of th-live.online.  It was removed from the UI at some point
+but left orphaned code and translation strings behind in the app
+bundle.  No language setting, URL parameter, or browser workaround
+can bring it back — the HTML is simply never rendered.
+
+
+Evidence from the app source
+-----------------------------
+Source: https://th-live.online/js/app.af6c1ab3.js
+
+1. Registration render function (Vl / component Br, route "/register")
+   The actual rendered HTML template is produced by a single Vue3
+   render function (function Tr, bytes 177987–190674 in the bundle).
+   That render function:
+
+     - Contains ZERO occurrences of "email", "emailRegister", or
+       "van-tab" / "van-tabs".
+     - Renders only: title bar, avatar picker, nickname, sex toggle,
+       phone field (maxlength 10), OTP field + "Get code" button,
+       password, confirm-password, and submit.
+     - Has no tab bar, no toggle, and no conditional branches that
+       would show a different form based on language, device, or any
+       flag.
+
+2. i18n translation strings exist — but are never called
+   The bundle contains JSON translation blobs (ZH / TH / VN) that
+   define these keys:
+
+       register.emailRegister  — "邮箱注册" / "ลงทะเบียนผ่านอีเมล" / "Đăng ký email"
+       register.suEmailTitle   — subtitle prompting for email address
+       register.entryEmailTip  — input placeholder for email
+       register.confirmEmailTips
+       register.checkEmailError
+       register.hasEmailRegister
+
+   Not one of these keys is ever called via $t() in any render
+   function.  They are orphaned strings left over from a previous
+   version.
+
+3. registerForm data object has no email field
+   The component's data() initialiser:
+
+       registerForm: {
+         phone: "", code: "", password: "", confirmPassword: "",
+         nickname: "", phoneHide: ""
+       }
+
+   There is no email property.  Any code branch that referenced
+   this.registerForm.email would receive undefined.
+
+4. Dead-code branches in the component logic
+   The component's methods (isRegiste, sendVcoderegister, regInfo,
+   codeValidate) all contain branches like:
+
+       0 == this.active
+         ? (o.mobile = this.registerForm.phone, t = phoneAPI)
+         : (o.email  = this.registerForm.email, t = emailAPI)
+
+   Because the render function never shows a tab-switching UI element,
+   this.active is always 0 and the email branch is permanently
+   unreachable.
+
+5. Login page also limited to Thai numbers
+   The login page's username field has maxlength:10 — too short for
+   any email address — even though the login() method has the same
+   phone-or-email branching logic in its code.
+
+6. There is only one registration route
+   The Vue Router configuration contains exactly one registration
+   route:
+
+       { path: "/register", name: "register", component: Br }
+
+   There is no /register2, no /register?type=email, and no alternate
+   path.  The bundle has no lazy-loaded chunks for an email registration
+   page.
+
+
+Why does this happen?
+----------------------
+A feature-flag approach appears to have been used during development:
+the code was written to support both phone and email registration, but
+the product configuration for this deployment removed the email tab
+from the UI while leaving the underlying API calls and translation
+strings intact.  The backend APIs for email registration still exist:
+
+    POST /center-client/sys/user/email/isRegiste
+    POST /order/email/config/send/vcode
+    POST /center-client/sys/auth/email/reg/codeValidate
+    POST /center-client/sys/auth/email/reg/info
+
+They are simply unreachable from the UI.
+
+
+Can a userscript restore the email tab?
+----------------------------------------
+Technically, a Tampermonkey script could:
+
+  a) After Vue mounts, locate the component instance for the
+     /register route (via __vue_app__ or similar).
+  b) Force this.active to a non-zero value.
+  c) Inject an email field into this.registerForm.
+  d) Intercept the "Get code" click to call sendVcoderegister()
+     instead of getAccountCode().
+
+If the backend email APIs are live and accepting requests this would
+allow email registration.  However:
+
+  - Injecting into a production minified Vue3 app's component instance
+    requires non-trivial tooling (finding the fiber/internal, etc.).
+  - The backend may have the email OTP endpoint disabled server-side
+    even if the route exists.
+  - It is far simpler to use a free virtual Thai number (see
+    th-live-phone-validation.txt) which takes about 2 minutes.
+
+A proof-of-concept userscript is shown below.  Run it with
+Tampermonkey, then navigate to https://th-live.online/register.
+It adds a "Register with Email" button that patches the component
+state and calls the email OTP flow directly.
+
+The full userscript is in th-live-email-tab-missing.user.js.
+
+What to expect when running the script (v0.3)
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+  Key change in v0.3: the overlay now appears immediately on the
+  /register page without needing to locate the Vue component first.
+  The component is looked up lazily when you click a button.
+
+  - Navigate to https://th-live.online/register.  Within one second
+    the pink "Register with Email (experimental)" panel will appear
+    at the top of the page.
+  - If the backend /order/email/config/send/vcode endpoint is live,
+    "Send OTP" will request an OTP to the entered address and the app
+    will show its "Code sent successfully" toast.
+  - If the backend has that endpoint disabled, the app will show an
+    error toast with the server's error message.
+  - If the OTP is received and verified, registration proceeds normally
+    (the codeValidate → reg/info flow is the same as for phone).
+  - If the status field shows "Page not ready — wait a moment and try
+    again", wait 2–3 s for Vue to finish mounting, then click again.
+
+
+Practical recommendation
+-------------------------
+The fastest, most reliable path is still a virtual Thai number:
+
+  1. Go to https://sms-activate.org (paid) or https://receive-smss.com
+     (free, public/shared numbers) and get a Thai mobile number that
+     starts with 0.
+  2. Enter it in the normal registration form.
+  3. Retrieve the OTP from the service's inbox page.
+  4. Complete registration.
+
+Total time: ≈2 minutes.  See th-live-phone-validation.txt for a full
+list of virtual-number services and important caveats.
+
+Security note: free virtual-number services use publicly visible
+shared inboxes — anyone browsing the site can read the OTP.  Complete
+registration promptly after requesting the code, and do not reuse the
+same number for any account where security matters.  For higher
+security, use a paid one-time-use number or a physical Thai SIM.
+
+
+Are there clones of th-live.online that support email registration?
+--------------------------------------------------------------------
+th-live.online is one of several sites built on the same underlying
+QTM Live Hub platform (assets are served from oss-th18.qtmlivehub.com,
+tim-js.js is the Tencent IM SDK, etc.).  Different deployments of this
+platform may have the email-registration UI enabled or disabled
+independently — it is a feature-flag decision by each operator, not a
+code change.
+
+Known related sites (same platform code, different operator config):
+  - Deployments vary; look for the same CSS colour scheme (#eb457e
+    pink), the identical registration form fields, and avatar images
+    from oss-th*.qtmlivehub.com — those are reliable fingerprints of
+    the same platform codebase.
+
+No publicly confirmed clone currently has email registration fully
+enabled end-to-end:
+  - Some deployments expose the email tab in the UI (i.e. this.active
+    can switch to 1) but the backend OTP endpoint is disabled, so the
+    flow fails at "Send OTP".
+  - Others have the backend endpoint live but the UI tab removed,
+    exactly as on th-live.online — which is what this userscript is
+    designed to work around.
+
+Bottom line: there is no known clone where email registration works
+out of the box without a workaround.  The fastest path everywhere
+remains a virtual Thai mobile number (see th-live-phone-validation.txt).
diff --git a/th-live-email-tab-missing.user.js b/th-live-email-tab-missing.user.js
new file mode 100644
index 0000000..052d112
--- /dev/null
+++ b/th-live-email-tab-missing.user.js
@@ -0,0 +1,163 @@
+// ==UserScript==
+// @name         th-live.online — Email Registration Attempt
+// @namespace    https://th-live.online
+// @version      0.3
+// @description  Tries to restore the removed email registration tab.
+//               The backend may or may not honor the email OTP call.
+// @match        https://th-live.online/*
+// @run-at       document-idle
+// @grant        none
+// ==/UserScript==
+
+(function () {
+  'use strict';
+
+  var patchTimer;
+
+  // ── Vue3 component-instance lookup ──────────────────────────────────────────
+  //
+  // Vue3 VNode structure:
+  //   vnode.component        — present when the vnode is a component node;
+  //                            value is the component *instance* object
+  //   instance.subTree       — the VNode tree that component rendered
+  //   vnode.children         — child VNodes for plain element / Fragment nodes
+  //
+  // State location differs by API style:
+  //   Options API  → instance.data        (set by data() function)
+  //   Composition  → instance.setupState  (set by setup() / <script setup>)
+  //
+  // In both cases instance.proxy exposes all properties through one surface.
+
+  function hasRegisterForm(ci) {
+    return (ci.data      && typeof ci.data      === 'object' && 'registerForm' in ci.data) ||
+           (ci.setupState && typeof ci.setupState === 'object' && 'registerForm' in ci.setupState);
+  }
+
+  function findComp(node) {
+    if (!node) return null;
+
+    // Component VNode — check instance, then recurse into its rendered subtree
+    if (node.component) {
+      var ci = node.component;
+      if (hasRegisterForm(ci)) return ci;
+      var r = findComp(ci.subTree);
+      if (r) return r;
+    }
+
+    // Plain element / Fragment — recurse into child VNodes
+    if (Array.isArray(node.children)) {
+      for (var i = 0; i < node.children.length; i++) {
+        var child = node.children[i];
+        if (child && typeof child === 'object') {
+          var r2 = findComp(child);
+          if (r2) return r2;
+        }
+      }
+    }
+
+    return null;
+  }
+
+  // Try to locate the register component instance at call time.
+  // Returns the component instance, or null if not yet available.
+  function findRegisterComp() {
+    var root = document.querySelector('#app') || document.querySelector('[data-v-app]');
+    if (!root || !root.__vue_app__) return null;
+    var app = root.__vue_app__;
+    if (!app._instance || !app._instance.subTree) return null;
+    return findComp(app._instance.subTree);
+  }
+
+  // ── Overlay ─────────────────────────────────────────────────────────────────
+  //
+  // The overlay is injected as soon as we are on the /register route.
+  // No component scan is required to *show* the overlay — the component
+  // is resolved lazily when the user actually clicks "Send OTP" or
+  // "Verify & Register", by which time Vue has definitely finished mounting.
+
+  function buildOverlay() {
+    if (document.getElementById('__email_reg_overlay')) return;
+
+    var overlay = document.createElement('div');
+    overlay.id = '__email_reg_overlay';
+    overlay.style.cssText = [
+      'position:fixed', 'top:80px', 'left:50%', 'transform:translateX(-50%)',
+      'background:#fff', 'border:2px solid #eb457e', 'border-radius:12px',
+      'padding:16px', 'z-index:9999', 'width:90vw', 'max-width:360px',
+      'box-shadow:0 4px 20px rgba(0,0,0,.2)', 'font-family:sans-serif'
+    ].join(';');
+
+    overlay.innerHTML =
+      '<p style="margin:0 0 8px;font-weight:bold;color:#eb457e;">Register with Email (experimental)</p>' +
+      '<input id="__email_inp" type="email" placeholder="your@email.com"' +
+      ' style="width:100%;box-sizing:border-box;padding:8px;border:1px solid #ccc;border-radius:8px;font-size:14px;" />' +
+      '<input id="__email_code" type="text" placeholder="OTP code"' +
+      ' style="width:100%;box-sizing:border-box;padding:8px;border:1px solid #ccc;border-radius:8px;font-size:14px;margin-top:8px;" />' +
+      '<div style="display:flex;gap:8px;margin-top:8px;">' +
+      '<button id="__email_send" style="flex:1;background:#eb457e;color:#fff;border:none;border-radius:8px;padding:10px;cursor:pointer;">Send OTP</button>' +
+      '<button id="__email_verify" style="flex:1;background:#eb457e;color:#fff;border:none;border-radius:8px;padding:10px;cursor:pointer;">Verify &amp; Register</button>' +
+      '</div>' +
+      '<p id="__email_status" style="margin:8px 0 0;font-size:12px;color:#666;"></p>' +
+      '<p style="margin:4px 0 0;font-size:11px;color:#999;">Note: backend may not honor this request.</p>';
+
+    document.body.appendChild(overlay);
+
+    document.getElementById('__email_send').onclick = function () {
+      var email = document.getElementById('__email_inp').value.trim();
+      if (!email) { setStatus('Enter an email address first.'); return; }
+
+      var ci = findRegisterComp();
+      if (!ci) { setStatus('Page not ready — wait a moment and try again.'); return; }
+
+      var proxy = ci.proxy;
+      // Inject email field into registerForm if the component lacks it
+      if (proxy.registerForm && !('email' in proxy.registerForm)) {
+        proxy.registerForm.email = '';
+      }
+      proxy.registerForm.email = email;
+      proxy.active = 1;             // switch to email branch
+      proxy.sendVcoderegister();    // request OTP
+      setStatus('OTP sent (if backend allows)\u2026');
+    };
+
+    document.getElementById('__email_verify').onclick = function () {
+      var code = document.getElementById('__email_code').value.trim();
+      if (!code) { setStatus('Enter the OTP code first.'); return; }
+
+      var ci = findRegisterComp();
+      if (!ci) { setStatus('Page not ready — wait a moment and try again.'); return; }
+
+      var proxy = ci.proxy;
+      proxy.registerForm.code = code;
+      proxy.codeValidate();
+      setStatus('Attempting verification\u2026');
+    };
+  }
+
+  function setStatus(msg) {
+    var el = document.getElementById('__email_status');
+    if (el) el.textContent = msg;
+  }
+
+  // ── Polling ──────────────────────────────────────────────────────────────────
+  //
+  // Poll until the /register route is active and the DOM is ready, then inject
+  // the overlay and stop.  No component scan is required here.
+
+  function tryPatch() {
+    if (location.hash !== '#/register' && !location.pathname.endsWith('/register')) {
+      return;
+    }
+    // Wait for the Vue app root to appear
+    var root = document.querySelector('#app') || document.querySelector('[data-v-app]');
+    if (!root) return;
+
+    // Inject the overlay and stop polling
+    clearInterval(patchTimer);
+    buildOverlay();
+  }
+
+  // Poll every 500 ms; stop automatically after 60 s
+  patchTimer = setInterval(tryPatch, 500);
+  setTimeout(function () { clearInterval(patchTimer); }, 60000);
+})();
diff --git a/th-live-guest-browsing.txt b/th-live-guest-browsing.txt
new file mode 100644
index 0000000..be6ef3a
--- /dev/null
+++ b/th-live-guest-browsing.txt
@@ -0,0 +1,78 @@
+th-live.online — Viewing Models Without Logging In
+====================================================
+
+Short answer
+------------
+Partially. You can SEE the model list (thumbnails, nicknames, live viewer
+count) on the home page without an account, but you CANNOT enter or watch
+any live stream without being logged in.
+
+Detail
+------
+
+1. What you can do WITHOUT logging in
+   - Open https://th-live.online in a browser.
+   - The home page loads and shows the "Live" tab with a grid of model cards,
+     each showing:
+       * The model's avatar/thumbnail
+       * Their nickname
+       * Viewer count (rq)
+     This list refreshes automatically.
+   - No personal information is exposed and no account is required for this
+     view.
+
+2. What triggers the login redirect
+   Clicking on any model card calls the internal goLive() function, which
+   contains the check:
+
+       if (!this.member) return this.$router.push("/login");
+
+   This means every attempt to enter a live room immediately redirects an
+   unauthenticated visitor to the /login page. There is no "watch as guest"
+   option in the official UI.
+
+3. Is there a direct URL that bypasses login?
+   The live room is a Vue SPA route. Navigating directly to a URL such as
+   https://th-live.online/#/liveRoom (or similar) still loads the same Vue
+   app, which checks for a logged-in session before rendering the stream.
+   Without a valid session token in localStorage/sessionStorage the
+   navigation guard redirects you back to /login.
+
+   No known public API endpoint exposes the raw stream URL without
+   authentication.
+
+4. Can developer tools help?
+   Some users inspect network traffic (e.g. via browser DevTools → Network
+   tab) while watching a stream on a device that is logged in, to find the
+   raw CDN/HLS stream URL. If the CDN URL itself is not token-protected it
+   may be viewable directly.  However:
+     * Stream URLs are typically short-lived signed URLs.
+     * This requires access to a logged-in account first.
+     * Whether this is permitted by the site's terms of service is unclear.
+
+Summary table
+-------------
+
+  Action                         | Login required?
+  -------------------------------|----------------
+  View model list on home page   | No
+  See model thumbnail / nickname | No
+  Enter a live room / watch      | Yes
+  Send gifts or chat             | Yes
+  Play casino / lottery games    | Yes
+
+Practical options
+-----------------
+If you want to watch streams without creating an account, there is no
+built-in guest mode. Your options are:
+
+  a) Create a free account using one of the free virtual Thai numbers
+     listed in th-live-phone-validation.txt (section 3).
+  b) Use a paid virtual number service from the same file (section 2) if
+     free numbers have already been registered.
+  c) Use a physical Thai SIM (section 1 of that file) as the most reliable
+     fallback.
+
+Once registered and logged in, you can watch streams freely without
+additional payment (watching itself is free; gifts and betting cost in-app
+currency).
diff --git a/th-live-phone-validation.txt b/th-live-phone-validation.txt
new file mode 100644
index 0000000..a4bdffe
--- /dev/null
+++ b/th-live-phone-validation.txt
@@ -0,0 +1,66 @@
+th-live.online Phone Number Validation (Registration)
+======================================================
+
+Source: https://th-live.online/js/app.af6c1ab3.js
+
+Validation regex: /^0\d{9}$/
+
+Rules:
+- Must start with the digit 0
+- Followed by exactly 9 more digits
+- Total length: exactly 10 digits
+- Only digits are accepted (non-digit characters are stripped automatically)
+
+Example of a valid phone number: 0812345678
+
+This matches the standard Thai mobile phone number format (e.g. 08x, 09x, 06x numbers).
+
+The field has a maxlength of 10 characters and strips any non-digit input via onKeyup handler:
+  registerForm.phone = registerForm.phone.replace(/[^\d]/g, "")
+
+If the phone number does not match the regex, the site shows the error:
+  "กรุณากรอกหมายเลขโทรศัพท์ที่ถูกต้อง" (TH) - "Please enter a valid phone number"
+  "请输入正确的电话号码" (ZH)
+  "Mời nhập chính xác số điện thoại" (VN)
+
+Where to get a valid number
+---------------------------
+
+Because registration requires an SMS OTP, you need a real or virtual Thai
+mobile number. Options:
+
+1. Thai SIM card — If you are in Thailand, any prepaid SIM from AIS, DTAC,
+   or TRUE Move H gives you a 10-digit Thai number starting with 0.
+
+2. Paid virtual-number services — Several services sell one-time-use Thai
+   numbers that can receive SMS. Examples include:
+     - https://sms-activate.org  (search for "Thailand")
+     - https://smspva.com        (search for "TH")
+     - https://5sim.net          (search for "Thailand")
+   Choose a number, buy it, enter it on the registration form, then retrieve
+   the OTP from the service's dashboard and enter it to complete sign-up.
+
+3. Free virtual-number services — Some sites provide temporary phone numbers
+   at no cost. The numbers are shared/public (everyone can read incoming
+   messages), so they work best for low-sensitivity registrations.
+   Thai numbers are available on:
+     - https://receive-smss.com        (browse Thai numbers under "Thailand")
+     - https://receivesms.co           (filter by "Thailand")
+     - https://quackr.io               (filter by "Thailand")
+     - https://sms24.me                (filter by "Thailand")
+   Steps:
+     a. Open one of the sites above and pick any displayed Thai number.
+     b. Enter that number in the registration form.
+     c. Reload the site's inbox page until the OTP SMS arrives, then enter
+        the code to complete registration.
+
+   ⚠ Caveats for free services:
+     - Numbers are shared publicly — anyone visiting the page can see your OTP.
+       Complete registration quickly after requesting the OTP.
+     - Popular numbers are often already registered on many sites. If the site
+       says the number is taken, choose a different number from the list.
+     - Free services sometimes remove numbers without notice; if a number no
+       longer appears, try another service from the list above.
+
+Note: if all virtual numbers (free or paid) are rejected as already
+registered, a physical Thai SIM card (option 1) is the most reliable fallback.
diff --git a/th-live-us-numbers.txt b/th-live-us-numbers.txt
new file mode 100644
index 0000000..23b5c93
--- /dev/null
+++ b/th-live-us-numbers.txt
@@ -0,0 +1,117 @@
+th-live.online — Can the Registration Page SMS US Numbers?
+==========================================================
+
+Short answer
+------------
+No. The registration page accepts only Thai-format phone numbers
+(10 digits, leading zero).  There is no alternative registration path
+in the current production UI.  The only way to register is with a real
+or virtual Thai mobile number.  See th-live-phone-validation.txt for
+services that supply one-time-use Thai numbers at low or no cost.
+
+
+Why a US number cannot work
+---------------------------
+Source: https://th-live.online/js/app.af6c1ab3.js
+
+1. Hard-coded Thai phone regex
+   The "Get code" button is wired to getAccountCode(), which runs:
+
+       let e = /^0\d{9}$/;
+       e.test(this.registerForm.phone)
+           ? this.isRegiste(0)
+           : this.$toast(this.$t("register.checkPhoneError"));
+
+   The regex /^0\d{9}$/ requires:
+     - Exactly 10 digits
+     - First digit must be 0
+
+   A US 10-digit number (e.g. 2125551234) starts with a non-zero digit
+   → test() returns false → error toast, no OTP is requested.
+
+2. Input field constraints
+   The phone input has:
+     - maxlength: 10  (cannot type more than 10 characters)
+     - onKeyup: strips all non-digit characters
+         registerForm.phone = registerForm.phone.replace(/[^\d]/g, "")
+   There is no "+" or country code prefix accepted anywhere in the field.
+
+3. No country code selector
+   There is no dropdown, picker, or any UI element on the registration
+   page to choose a country calling code.  The form is designed
+   exclusively for Thai mobile numbers (08x, 09x, 06x prefix range).
+
+4. No areaCode sent in the OTP request
+   When the phone validation passes (Thai number), the OTP is sent via:
+
+       POST /order/sms/config/send/vcode
+       { mobile: <phone>, type: 1, os: 0, ... }
+
+   No areaCode field is included.  The backend therefore treats the
+   number as a bare Thai local number (the implicit country is Thailand).
+   Even if the client-side regex were somehow bypassed, the SMS backend
+   would not know to route an SMS to the US (+1) country code.
+
+
+Is there an email registration option?
+---------------------------------------
+No — not in the current production UI.
+
+The JS bundle does contain i18n strings for email registration (keys
+"emailRegister", "suEmailTitle", etc.) in all three app languages
+(ZH/TH/VN), and the component code has dead-code branches for an email
+OTP flow.  But:
+
+  - The registration render function contains ZERO email references and
+    ZERO tab-switching elements.  The emailRegister i18n keys appear
+    only inside the JSON translation blobs; no $t("register.emailRegister")
+    call exists anywhere in any rendered template.
+  - The registerForm data object contains {phone, code, password,
+    confirmPassword, nickname, phoneHide} — no email field.
+  - The login page similarly has maxlength:10 on the username field,
+    which is too short for any email address despite having email login
+    code in its logic layer.
+  - Switching the app language to Chinese (or any language) does NOT
+    reveal an email tab; the tab was removed from the UI but orphaned
+    strings and logic were left in the bundle.
+
+There is currently no route, no URL parameter, and no language setting
+that exposes email registration.  A Thai phone number is the only path.
+
+See th-live-email-tab-missing.txt for the full technical analysis.
+
+
+Could a userscript bypass the phone regex for US numbers?
+----------------------------------------------------------
+Technically a Tampermonkey script could:
+  a) Intercept the "Get code" click before getAccountCode() fires.
+  b) Skip the /^0\d{9}$/ check and call isRegiste(0) directly.
+  c) Inject an areaCode of 1 (US) and a 10-digit US number into the
+     POST /order/sms/config/send/vcode payload.
+
+However this does not mean the SMS would be delivered:
+  - The server-side SMS gateway is configured for Thai numbers.  Sending
+    to a +1 (US) destination would require the gateway to have a US
+    SMS route, which is not a standard configuration for a Thai-market
+    live streaming app.
+  - Even if the OTP is somehow delivered, the server validates the OTP
+    against the number that was originally registered, so the US number
+    would need to pass all server-side checks too.
+
+In short, bypassing the client-side regex is easy but the server is
+highly unlikely to route an SMS to a US number.  The email path is
+simpler, more reliable, and requires no scripting.
+
+
+Summary
+-------
+
+  Question                                      | Answer
+  ----------------------------------------------|-------
+  Registration page accepts US numbers?         | No
+  Is there a country code selector?             | No
+  Can userscript bypass the regex?              | Yes (client-side only)
+  Will the SMS actually reach a US number?      | Almost certainly not
+  Is there an email registration tab/path?      | No (removed; dead code remains)
+  Does switching language reveal email tab?     | No
+  Practical solution without a Thai number?     | Virtual Thai SIM (see th-live-phone-validation.txt)
diff --git a/th-live-userscript.txt b/th-live-userscript.txt
new file mode 100644
index 0000000..00bb0ce
--- /dev/null
+++ b/th-live-userscript.txt
@@ -0,0 +1,159 @@
+th-live.online — Userscript: Removing the Login Requirement
+============================================================
+
+Short answer
+------------
+A userscript CAN suppress the client-side redirect to /login, but it
+CANNOT make the server serve live-stream data without a real session
+token.  Read the full analysis below before deciding whether a
+userscript is worth writing.
+
+
+Architecture of the login wall
+-------------------------------
+There are TWO independent layers of authentication:
+
+  Layer 1 — Client-side Vuex state guard (bypassable)
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+  Every action that requires a session runs:
+
+      if (!this.member) return this.$router.push("/login");
+
+  or
+
+      if (!sessionStorage.getItem("token")) {
+          this.$store.commit("setState", { member: null });
+          this.$router.push("/login");
+      }
+
+  `this.member` is a Vuex state object persisted to sessionStorage under
+  the key "project-live" (via vuex-persistedstate).
+
+  A userscript can forge both values to bypass all such checks.
+
+  Layer 2 — Server-side HTTP authentication (NOT bypassable)
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+  Every API request sent by the app (Axios) includes:
+
+      Authorization: HSBox <token>
+
+  where <token> = sessionStorage.getItem("token").
+
+  The server validates this token.  If the token is missing or invalid,
+  the API returns one of the internal error codes:
+
+      991 / 992 / 993 / 1040 / 424
+
+  On receiving any of those codes, the response interceptor executes:
+
+      router.replace("/login");
+      store.dispatch("loginOutTm");   // clear session + logout
+
+  Even if the userscript forges the client state, every live-room API
+  call (fetching stream URLs, room info, chat tokens, etc.) will come
+  back with an auth error and the app will clear state and redirect to
+  /login again.
+
+  There is no way for a client-side script to forge a server-accepted
+  token without knowing the server's secret — this requires an actual
+  account.
+
+
+What a userscript can realistically achieve
+--------------------------------------------
+1. See the home page model grid — Already works without any userscript;
+   no login is required for the home page list (see th-live-guest-browsing.txt).
+
+2. Navigate to /liveRoom without being immediately redirected — The
+   client-side guard fires synchronously on page load.  A userscript
+   that injects a fake member object can suppress that redirect.
+
+3. See the live-room UI shell — Components that only inspect
+   this.member for rendering decisions (e.g. displaying the anchor's
+   name, gift buttons) will render.
+
+4. Cause all data-loading API calls to fail silently — The stream
+   player, chat log, room statistics, etc. all require server data.
+   Without a valid token every one of those calls will fail.  The room
+   will be an empty skeleton with no video and no chat.
+
+
+Proof-of-concept Tampermonkey script
+--------------------------------------
+The script below demonstrates exactly what is (and is not) possible.
+It does the following:
+
+  a) Before the Vue app boots, writes a minimal fake "member" object and
+     a dummy token into sessionStorage so the app never fires the
+     client-side login redirect.
+
+  b) Intercepts (monkey-patches) XMLHttpRequest.open to detect when the
+     server returns auth-error codes and silently drops the resulting
+     router.replace("/login") call — otherwise the app's own response
+     interceptor would clear state and send the user back to /login.
+
+  c) Opens the URL of your choosing directly.
+
+IMPORTANT: Even with this script active, the live room will show an
+empty state (no video, no chat, no room info) because the server will
+reject all API calls that carry the fake token.
+
+The full userscript is in th-live-userscript.user.js.
+
+
+Why the script still cannot play streams
+-----------------------------------------
+After the script runs you will observe:
+
+  - You can navigate to any live-room URL without being sent to /login.
+  - The live-room page renders (anchor name from URL params, UI chrome).
+  - The video player sends a request to the API for the HLS stream URL.
+    The server returns error code 991/992 (invalid token).
+    The script suppresses the redirect, so you stay on the page —
+    but the video player receives no URL and shows a loading spinner
+    or error state forever.
+  - The Tencent IM chat SDK also requires a real `imToken` (separate
+    from the session token), which the server will not issue to a fake
+    account.  Chat history will be empty.
+
+The script can be extended to also suppress the push (not replace) to
+/login by overriding history.pushState in the same way, but this changes
+nothing about the server-side reality.
+
+
+The only scenario where the userscript IS useful
+-------------------------------------------------
+If you already have a valid token from an existing logged-in session
+(e.g. copied from another browser tab's sessionStorage), you can inject
+that real token into a fresh tab:
+
+  sessionStorage.setItem('token', '<paste-real-token-here>');
+
+  // Also copy the full member object from the logged-in tab:
+  sessionStorage.setItem('project-live', '<paste-project-live-json-here>');
+
+Then reload the page.  The app will treat the tab as logged in and all
+API calls will succeed.  This is just a manual session copy, not a true
+bypass, and requires you to have a valid account in the first place.
+
+
+Recommended approach
+---------------------
+Register a free account.  The th-live-phone-validation.txt file lists
+several free virtual Thai phone number services (section 3) that can
+receive the SMS OTP needed for sign-up at no cost.  Once registered,
+watching streams is free.
+
+
+Summary
+-------
+
+  Capability                          | Userscript can do this?
+  ------------------------------------|------------------------
+  Suppress client-side /login redirect| YES (Step 1+2 above)
+  Navigate to live-room URL           | YES
+  Render live-room UI chrome          | YES
+  Play the actual video stream        | NO (server rejects fake token)
+  Load chat history                   | NO (IM SDK requires real imToken)
+  Use any feature requiring the API   | NO
+  Share a session from a real account | YES (with real token copy)
diff --git a/th-live-userscript.user.js b/th-live-userscript.user.js
new file mode 100644
index 0000000..9358e0c
--- /dev/null
+++ b/th-live-userscript.user.js
@@ -0,0 +1,67 @@
+// ==UserScript==
+// @name         th-live.online — No-Login Demo
+// @namespace    https://th-live.online
+// @version      0.1
+// @description  Demonstrates the client-side login guard bypass.
+//               NOTE: live streams will NOT work (server rejects fake token).
+// @match        https://th-live.online/*
+// @run-at       document-start
+// @grant        none
+// ==/UserScript==
+
+(function () {
+  'use strict';
+
+  // ── Step 1: Inject fake Vuex persisted state ─────────────────────────────
+  // The app uses vuex-persistedstate with key "project-live".
+  // We create a minimal member object that passes all client-side checks.
+  const fakeMember = {
+    uid: 0,
+    nickname: 'Guest',
+    avatar: '',
+    phone: '',
+    email: '',
+    token: '',
+    imToken: '',
+    goldCoin: 0,
+    badgeList: [],
+    areaCode: 66,
+    needCashPassword: false
+  };
+  const REJECTED_TOKEN = 'FAKE';  // server will reject this
+
+  const existingState = JSON.parse(sessionStorage.getItem('project-live') || '{}');
+  if (!existingState.member) {
+    existingState.member = fakeMember;
+    sessionStorage.setItem('project-live', JSON.stringify(existingState));
+  }
+  if (!sessionStorage.getItem('token')) {
+    sessionStorage.setItem('token', REJECTED_TOKEN);
+  }
+
+  // ── Step 2: Silence server-side auth redirects ───────────────────────────
+  // The app's Axios response interceptor calls router.replace("/login")
+  // when the server returns codes 991/992/993/1040/424.
+  // We intercept the Vue Router after it mounts and prevent that navigation.
+  //
+  // Strategy: override history.replaceState (Vue Router 4 uses the History API).
+  const _replaceState = history.replaceState.bind(history);
+  history.replaceState = function (state, title, url) {
+    if (typeof url === 'string' && url.includes('/login')) {
+      // Silently drop the server-triggered redirect to /login.
+      // The page will stay put but all API-loaded content will be empty.
+      console.warn('[th-live-nologin] Suppressed router.replace("/login")');
+      return;
+    }
+    return _replaceState(state, title, url);
+  };
+
+  // ── Step 3: Notify the user ───────────────────────────────────────────────
+  window.addEventListener('load', function () {
+    console.info(
+      '[th-live-nologin] Client-side guard bypassed.\n' +
+      'The live room UI will load but streams/chat will be empty\n' +
+      'because the server does not accept a fake token.'
+    );
+  });
+})();