diff --git a/.env.example b/.env.example
index 4955b72..f2a470c 100644
--- a/.env.example
+++ b/.env.example
@@ -17,6 +17,8 @@ VOD_PUBLIC_BASE=
 # Required. Generate with: python -c "import secrets; print(secrets.token_hex(32))"
 VOD_SECRET_KEY=
 VOD_SECURE_COOKIES=false
+# Content-Security-Policy: true (default) enforces it, false sends it as Report-Only.
+VOD_CSP_ENFORCE=true
 
 # --- Cloud / External Storage (optional) ---
 # Dedicated AES-GCM key for provider credentials. Falls back to VOD_SECRET_KEY.
diff --git a/CHANGELOG.md b/CHANGELOG.md
index fd6c5d6..1c0583c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,9 +12,10 @@ All notable changes to this project are documented here. The format follows
   the new "log out everywhere" action (`POST /logout/all`) and every password
   change sign the account out on all devices.
 - **Overlay tokens in the query string are off by default.** The bundled
-  TTS/alert overlay pages pass `?token=`; set `OVERLAY_ALLOW_QUERY_TOKEN=true`
-  while you use them. The `/tts/api/ack` and `/alerts/api/ack` routes accept
-  POST only.
+  TTS/alert overlays read the token from `#token=` (or an old `?token=` URL)
+  and send it only as a header, so existing OBS sources keep working; move
+  the token behind `#` to keep it out of server logs. The `/tts/api/ack` and
+  `/alerts/api/ack` routes accept POST only.
 - **Resource uploads use an allowlist** (documents, images, audio/video,
   archives; `VOD_FILES_ALLOWED_EXTENSIONS` overrides it). Existing files with
   other extensions are no longer served but can still be deleted.
@@ -115,6 +116,15 @@ All notable changes to this project are documented here. The format follows
   with `STREAM_RECORDER_USE_PROXY=true`.
 - **Backups.** `BACKUP_DIR` defaults to `<VOD_META_DIR>/backups`; "create
   backup" runs the script named in `VOD_BACKUP_SCRIPT`.
+- **Content-Security-Policy is enforced.** `VOD_CSP_ENFORCE` now defaults to
+  `true`: inline scripts need the per-request nonce and inline event handlers
+  (`onclick=` ...) are blocked. Custom templates or overlays with inline
+  scripts must use `nonce="{{ csp_nonce() }}"`. `VOD_CSP_ENFORCE=false` falls
+  back to `Content-Security-Policy-Report-Only`.
+- **Overlay tokens as headers.** The TTS and alert overlays read the token
+  from `#token=` (or `?token=`) of their own URL and send it to the API only as
+  `X-TTS-Token` / `X-Alert-Token`; audio is fetched with the header and played
+  from a blob URL. Options > Settings shows the recommended OBS URLs.
 
 ### Security
 
@@ -123,6 +133,9 @@ All notable changes to this project are documented here. The format follows
   rate limits and bans. `VOD_TRUSTED_PROXIES` accepts CIDR networks.
 - Code and dot-directories below `VOD_BASE_DIR` can no longer be deleted as
   streamer archives.
+- WebUI: chat fallbacks escape Twitch chat text, toasts use `textContent`,
+  banner/hero URLs only reach CSS `url()` through the `css_url` filter, and
+  the CSP allows the emote hosts (BTTV, FFZ, 7TV, ivr.fi) and `https:` images.
 
 ### Fixed
 
@@ -145,6 +158,14 @@ All notable changes to this project are documented here. The format follows
 
 ### Added
 
+- WebUI accessibility and design (audit 2026-11-12): native `<dialog>` modals
+  with focus handling, one confirmation dialog (`data-confirm`) for restart,
+  maintenance and deletions, bottom navigation with logout below 768px,
+  "Log out everywhere" in the rail, bottom navigation and mobile pages,
+  skip link, labelled fields, AA contrast tokens, unlocked zoom on mobile.
+  `static/css/tokens.css` is the single token layer; stylesheets load as
+  parallel `<link>`s.
+
 - GitHub Actions CI (Python 3.10–3.12, ruff, unit tests, shell syntax),
   Dependabot, contribution and security guidelines.
 - Web UI in 12 languages, chosen from the browser language or the switcher.
diff --git a/WEBUI/i18n.py b/WEBUI/i18n.py
index 71cabda..dcc5062 100644
--- a/WEBUI/i18n.py
+++ b/WEBUI/i18n.py
@@ -143,6 +143,10 @@ def N_(text):
     N_("Progress"),
     N_("Volume"),
     N_("Start playback"),
+    # static/sv_confirm.js (confirmation dialog)
+    N_("Please confirm"),
+    N_("Confirm"),
+    N_("Cancel"),
 )
 
 
diff --git a/WEBUI/static/alerts_overlay.html b/WEBUI/static/alerts_overlay.html
index 9133c27..980069b 100644
--- a/WEBUI/static/alerts_overlay.html
+++ b/WEBUI/static/alerts_overlay.html
@@ -19,71 +19,7 @@
 <body>
   <div id="hud"></div>
   <audio id="player" preload="auto"></audio>
-  <script>
-    const token = new URLSearchParams(location.search).get("token") || "";
-    const hud = document.getElementById("hud");
-    const player = document.getElementById("player");
-    let busy = false;
-    let currentId = null;
-
-    function url(path) {
-      const u = new URL(path, location.origin);
-      u.searchParams.set("token", token);
-      return u.pathname + u.search;
-    }
-
-    async function ack(id) {
-      if (!id) return;
-      try {
-        await fetch(url("/alerts/api/ack?id=" + encodeURIComponent(id)), { method: "POST" });
-      } catch (e) {}
-    }
-
-    async function tick() {
-      if (busy) return;
-      try {
-        const res = await fetch(url("/alerts/api/next"));
-        if (!res.ok) return;
-        const data = await res.json();
-        if (!data || !data.item) return;
-        const item = data.item;
-        busy = true;
-        currentId = item.id;
-        hud.textContent = "🔔 " + (item.label || item.event);
-        hud.classList.add("show");
-        player.src = item.audio_url;
-        await player.play();
-      } catch (e) {
-        hud.textContent = "click once to unlock audio";
-        hud.classList.add("show");
-        busy = false;
-        currentId = null;
-      }
-    }
-
-    player.addEventListener("ended", async () => {
-      const id = currentId;
-      currentId = null;
-      busy = false;
-      hud.classList.remove("show");
-      await ack(id);
-      tick();
-    });
-
-    player.addEventListener("error", async () => {
-      const id = currentId;
-      currentId = null;
-      busy = false;
-      hud.classList.remove("show");
-      await ack(id);
-    });
-
-    window.addEventListener("pointerdown", () => {
-      player.play().catch(() => {});
-    }, { once: true });
-
-    setInterval(tick, 900);
-    tick();
-  </script>
+  <script src="/static/overlay_common.js"></script>
+  <script src="/static/alerts_overlay.js"></script>
 </body>
 </html>
diff --git a/WEBUI/static/alerts_overlay.js b/WEBUI/static/alerts_overlay.js
new file mode 100644
index 0000000..1395b77
--- /dev/null
+++ b/WEBUI/static/alerts_overlay.js
@@ -0,0 +1,88 @@
+/* Alert sound overlay (OBS browser source). External file: the enforced CSP blocks inline scripts.
+   Auth: token from #token= of the overlay URL (a legacy ?token= is moved into the fragment),
+   sent to the API only as X-Alert-Token header. No token or HTTP 401: polling stops. */
+(function () {
+    const overlay = window.SVOverlay;
+    const token = overlay.readToken().token;
+    const hud = document.getElementById("hud");
+    const player = document.getElementById("player");
+    const AUTH_HEADERS = { "X-Alert-Token": token };
+
+    function showHud(text) {
+      hud.textContent = text;
+      hud.classList.add("show");
+    }
+
+    if (!token) {
+      showHud("Token fehlt – Overlay-URL mit #token=… verwenden");
+      return;
+    }
+
+    const audio = overlay.createAudio(player, AUTH_HEADERS);
+    let busy = false;
+    let currentId = null;
+
+    async function ack(id) {
+      if (!id) return;
+      try {
+        await fetch("/alerts/api/ack?id=" + encodeURIComponent(id), { method: "POST", headers: AUTH_HEADERS });
+      } catch (e) {
+        console.error("[alerts-overlay] ack failed for item", id, e);
+      }
+    }
+
+    async function tick() {
+      if (busy) return "ok";
+      const res = await fetch("/alerts/api/next", { headers: AUTH_HEADERS });
+      if (res.status === 401) return "unauthorized";
+      if (!res.ok) return "error";
+      const data = await res.json();
+      if (!data || !data.item) return "ok";
+      const item = data.item;
+      busy = true;
+      currentId = item.id;
+      showHud("🔔 " + (item.label || item.event));
+      try {
+        await audio.load(item.audio_url);
+        await player.play();
+      } catch (e) {
+        console.error("[alerts-overlay] loading or playing the next alert failed", e);
+        showHud("click once to unlock audio");
+        busy = false;
+        currentId = null;
+      }
+      return "ok";
+    }
+
+    const poller = overlay.createPoller(tick, {
+      interval: 900,
+      maxInterval: 30000,
+      label: "alerts next",
+      onUnauthorized: function () { showHud("Token ungültig – Abfrage angehalten"); },
+    });
+
+    player.addEventListener("ended", async () => {
+      const id = currentId;
+      currentId = null;
+      busy = false;
+      hud.classList.remove("show");
+      audio.release();
+      await ack(id);
+      poller.now();
+    });
+
+    player.addEventListener("error", async () => {
+      const id = currentId;
+      currentId = null;
+      busy = false;
+      hud.classList.remove("show");
+      audio.release();
+      await ack(id);
+    });
+
+    window.addEventListener("pointerdown", () => {
+      player.play().catch((e) => console.error("[alerts-overlay] unlock play failed", e));
+    }, { once: true });
+
+    poller.start();
+})();
diff --git a/WEBUI/static/css/a11y.css b/WEBUI/static/css/a11y.css
index 2610fd9..53acd1e 100644
--- a/WEBUI/static/css/a11y.css
+++ b/WEBUI/static/css/a11y.css
@@ -1,4 +1,5 @@
-/* Accessibility helpers — Phase 6 */
+/* Accessibility layer. Linked LAST (components/styles.html) so focus, target size and
+   dialog rules win over legacy !important declarations in style.css / tube_design_system.css. */
 .sr-only {
   position: absolute !important;
   width: 1px !important;
@@ -11,7 +12,273 @@
   border: 0 !important;
 }
 
-:focus-visible {
-  outline: 2px solid var(--tube-accent, #f2e58d);
-  outline-offset: 2px;
+/* One focus language: outline in --nebula-focus-ring (>= 3:1 on every surface). */
+:focus-visible,
+:where(a, button, input, select, textarea, summary, [tabindex], [role="button"], [role="tab"], [contenteditable="true"]):focus-visible {
+  outline: 2px solid var(--nebula-focus-ring) !important;
+  outline-offset: 2px !important;
+}
+:where(input, select, textarea):focus-visible {
+  outline-offset: 1px !important;
+}
+.vod-cb-btn:focus-visible,
+.vod-control-bar button:focus-visible,
+.mobile-player button:focus-visible,
+#vodPlayer:focus-visible {
+  outline: 2px solid var(--nebula-focus-ring) !important;
+  outline-offset: 2px !important;
+  box-shadow: 0 0 0 4px rgba(7, 11, 20, 0.85) !important;
+}
+
+/* Skip link */
+.sv-skip-link {
+  position: fixed;
+  top: 8px;
+  left: 8px;
+  z-index: 2147483000;
+  padding: 10px 16px;
+  border-radius: var(--nebula-radius-sm);
+  background: var(--nebula-bg-card);
+  color: var(--nebula-text-main);
+  font: 600 14px/1.2 var(--nebula-font-sans);
+  text-decoration: none;
+  transform: translateY(-200%);
+}
+.sv-skip-link:focus,
+.sv-skip-link:focus-visible {
+  transform: none;
+}
+main[tabindex="-1"]:focus {
+  outline: none !important;
+}
+
+/* Form fields: visible edges (>= 3:1, WCAG 1.4.11) */
+:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"], [type="color"]), select, textarea) {
+  border-color: var(--nebula-field-edge) !important;
+}
+
+/* Target size (WCAG 2.5.8): 20px box + 2px margin keeps a 24px spacing circle free. */
+input[type="checkbox"],
+input[type="radio"] {
+  inline-size: 20px !important;
+  block-size: 20px !important;
+  min-inline-size: 20px !important;
+  margin: 2px !important;
+  accent-color: var(--nebula-accent-primary);
+  cursor: pointer;
+}
+.vod-channel-link,
+.nebula-streamer-link,
+.ns-module-link,
+.sidebar-link {
+  min-block-size: 24px;
+  display: inline-flex;
+  align-items: center;
+}
+button, [role="button"], input[type="submit"], input[type="button"] {
+  touch-action: manipulation;
+}
+
+/* Dialogs (native <dialog>) */
+.sv-dialog {
+  inline-size: min(440px, calc(100vw - 32px));
+  max-block-size: calc(100dvh - 32px);
+  padding: 0;
+  border: 1px solid var(--nebula-border-bright);
+  border-radius: var(--nebula-radius-lg);
+  background: var(--nebula-bg-surface);
+  color: var(--nebula-text-main);
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7);
+  overflow: auto;
+}
+.sv-dialog::backdrop {
+  background: rgba(4, 8, 16, 0.82);
+}
+.sv-dialog--wide {
+  inline-size: min(640px, calc(100vw - 32px));
+}
+.sv-dialog__head,
+.sv-dialog__foot {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 20px;
+  background: var(--nebula-bg-card);
+}
+.sv-dialog__head {
+  justify-content: space-between;
+  border-bottom: 1px solid var(--nebula-border);
+}
+.sv-dialog__foot {
+  justify-content: flex-end;
+  border-top: 1px solid var(--nebula-border);
+}
+.sv-dialog__title-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--nebula-accent-text);
+}
+.sv-dialog__title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--nebula-text-main);
+}
+.sv-dialog__body {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 20px;
+}
+.sv-dialog__form {
+  margin: 0;
+}
+.sv-dialog__close {
+  min-inline-size: 32px;
+  min-block-size: 32px;
+  border: none;
+  border-radius: var(--nebula-radius-sm);
+  background: transparent;
+  color: var(--nebula-text-secondary);
+  font-size: 22px;
+  line-height: 1;
+  cursor: pointer;
+}
+.sv-dialog__close:hover {
+  background: var(--nebula-bg-hover);
+  color: var(--nebula-text-main);
+}
+.sv-confirm__msg {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--nebula-text-secondary);
+}
+.sv-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.sv-field > label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--nebula-text-secondary);
+}
+.sv-field > :is(input, select, textarea) {
+  inline-size: 100%;
+  box-sizing: border-box;
+  padding: 10px 14px;
+  border: 1px solid var(--nebula-field-edge);
+  border-radius: var(--nebula-radius-sm);
+  background: var(--nebula-bg-deep);
+  color: var(--nebula-text-main);
+  font-size: 14px;
+}
+
+/* Buttons used by dialogs and confirmations */
+.sv-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-block-size: 36px;
+  padding: 8px 16px;
+  border: 1px solid transparent;
+  border-radius: var(--nebula-radius-sm);
+  font: 600 13px/1.2 var(--nebula-font-sans);
+  cursor: pointer;
+  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
+}
+.sv-btn--primary {
+  background: var(--nebula-accent-primary);
+  color: var(--nebula-text-on-accent);
+}
+.sv-btn--primary:hover {
+  background: var(--nebula-accent-primary-hover);
+}
+.sv-btn--secondary {
+  background: transparent;
+  border-color: var(--nebula-field-edge);
+  color: var(--nebula-text-main);
+}
+.sv-btn--secondary:hover {
+  background: var(--nebula-bg-hover);
+}
+.sv-btn--danger {
+  background: var(--nebula-danger-bg);
+  color: var(--nebula-text-on-accent);
+}
+.sv-btn--danger:hover {
+  background: var(--nebula-danger-bg-hover);
+}
+.sv-btn--danger-outline {
+  background: transparent;
+  border-color: var(--nebula-status-live-text);
+  color: var(--nebula-status-live-text);
+}
+.sv-btn--danger-outline:hover {
+  background: rgba(240, 68, 88, 0.12);
+}
+.sv-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Alerts */
+.sv-alert {
+  padding: 10px 14px;
+  border-radius: var(--nebula-radius-sm);
+  border: 1px solid transparent;
+  font-size: 13px;
+  font-weight: 500;
+}
+.sv-alert--error {
+  background: rgba(240, 68, 88, 0.15);
+  border-color: rgba(240, 68, 88, 0.45);
+  color: var(--nebula-status-live-text);
+}
+.sv-alert--success {
+  background: rgba(72, 214, 162, 0.12);
+  border-color: rgba(72, 214, 162, 0.45);
+  color: var(--nebula-status-success);
+}
+
+/* Bottom navigation <= 768px for desktop-UA pages (rail is hidden there) */
+.sv-bottom-nav__logout {
+  display: flex;
+  flex: 1 1 0;
+  margin: 0;
+}
+.sv-bottom-nav__logout > button {
+  inline-size: 100%;
+}
+.mobile-global-nav a.active,
+.mobile-global-nav a[aria-current="page"] {
+  color: var(--nebula-accent-text) !important;
+}
+.mobile-global-nav a.active svg {
+  stroke: var(--nebula-accent-text) !important;
+}
+.mobile-global-nav span {
+  font-size: 12px;
+}
+
+body .mobile-global-nav .sv-bottom-nav__logout > button {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  color: var(--nebula-text-muted) !important;
+  font-size: 12px !important;
+  min-height: 48px !important;
+  padding: 4px 6px !important;
+  margin: 0 !important;
+}
+body .mobile-global-nav .sv-bottom-nav__logout > button:hover { color: var(--nebula-text-main) !important; }
+
+/* PWA install banner (injected by webui.py) sits above the bottom navigation, not on it. */
+@media (max-width: 768px) {
+  body:has(.mobile-global-nav) .ns-pwa-install {
+    bottom: calc(var(--sv-bottom-nav-h) + 8px + env(safe-area-inset-bottom, 0px));
+  }
 }
diff --git a/WEBUI/static/css/mobile.css b/WEBUI/static/css/mobile.css
index 60ac8fa..5575250 100644
--- a/WEBUI/static/css/mobile.css
+++ b/WEBUI/static/css/mobile.css
@@ -1,122 +1,83 @@
 /* Mobile page styles extracted from style.css — Phase 6 */
 /* MOBILE_INDEX */
-body.page-mobile-index{ margin:0; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background:#0b0d11; color:#fff; padding-bottom:80px; -webkit-tap-highlight-color: transparent; }
-body.page-mobile-index .header{ padding:16px; background:#18181b; border-bottom:1px solid #27272a; font-weight:800; font-size:20px; display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:10; }
-body.page-mobile-index .section{ padding:16px; }
-body.page-mobile-index .section-title{ font-size:13px; color:#a1a1aa; margin-bottom:12px; text-transform:uppercase; letter-spacing:0.05em; font-weight:600; }
-body.page-mobile-index .card{ background:#1f1f23; padding:16px; border-radius:12px; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; text-decoration:none; color:#fff; border:1px solid #27272a; transition:0.2s; }
-body.page-mobile-index .card:active{ transform:scale(0.98); background:#27272a; }
-body.page-mobile-index .live-card{ border-color:rgba(239,68,68,0.3); background:rgba(239,68,68,0.05); }
-body.page-mobile-index .badge{ background:#27272a; padding:4px 8px; border-radius:6px; font-size:12px; color:#a1a1aa; }
-body.page-mobile-index .live-badge{ background:#ef4444; color:white; padding:4px 8px; border-radius:6px; font-size:12px; font-weight:bold; box-shadow:0 0 10px rgba(239,68,68,0.4); }
-body.page-mobile-index .mobile-live-start{
-  display:flex;
-  gap:8px;
-  margin-bottom:12px;
+body.page-mobile-index .nav {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  backdrop-filter: blur(10px);
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  z-index: 20;
+  padding-bottom: env(safe-area-inset-bottom);
 }
-body.page-mobile-index .mobile-live-start input{
-  flex:1;
-  min-width:0;
-  background:#1f1f23;
-  border:1px solid #27272a;
-  color:#fff;
-  padding:12px;
-  border-radius:8px;
-  outline:none;
+body.page-mobile-index .nav a {
+  text-decoration: none;
+  font-size: var(--sv-min-text);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+  padding: 8px 0;
 }
-body.page-mobile-index .mobile-live-start input:focus{ border-color:#ef4444; }
-body.page-mobile-index .mobile-live-start button{
-  flex-shrink:0;
-  width:48px;
-  border:none;
-  border-radius:8px;
-  background:#ef4444;
-  color:#fff;
-  font-size:14px;
-  cursor:pointer;
-}
-body.page-mobile-index .nav{ position:fixed; bottom:0; left:0; right:0; height:60px; background:rgba(24,24,27,0.95); backdrop-filter:blur(10px); border-top:1px solid #27272a; display:flex; justify-content:space-around; align-items:center; z-index:20; padding-bottom:env(safe-area-inset-bottom); }
-body.page-mobile-index .nav a{ color:#71717a; text-decoration:none; font-size:10px; display:flex; flex-direction:column; align-items:center; gap:4px; width:100%; padding:8px 0; }
-body.page-mobile-index .nav a.active{ color:#f59e0b; }
-body.page-mobile-index .nav-icon{ font-size:20px; }
 /* MOBILE_STREAMER */
-body.page-mobile-streamer{ margin:0; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background:#0b0d11; color:#fff; padding-bottom:80px; }
-body.page-mobile-streamer .header{ padding:12px 16px; background:#18181b; border-bottom:1px solid #27272a; display:flex; align-items:center; gap:16px; position:sticky; top:0; z-index:100; }
-body.page-mobile-streamer .back-btn{ font-size:24px; text-decoration:none; color:#fff; padding:4px; }
-body.page-mobile-streamer .page-title{ font-weight:800; font-size:18px; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
-body.page-mobile-streamer .controls{ padding:16px; background:#121214; border-bottom:1px solid #27272a; }
-body.page-mobile-streamer .btn-row{ display:flex; gap:8px; margin-bottom:12px; overflow-x:auto; padding-bottom:4px; }
-body.page-mobile-streamer .btn{ background:#27272a; color:#fff; border:1px solid #3f3f46; padding:8px 12px; border-radius:8px; font-size:13px; font-weight:600; white-space:nowrap; text-decoration:none; cursor:pointer; display:flex; align-items:center; gap:6px; }
-body.page-mobile-streamer .btn-primary{ background:#f59e0b; border-color:#d97706; }
-body.page-mobile-streamer .btn-danger{ background:rgba(239,68,68,0.2); color:#fca5a5; border-color:rgba(239,68,68,0.4); }
-body.page-mobile-streamer .search-row{ display:flex; gap:8px; }
-body.page-mobile-streamer .search-input{ flex:1; background:#000; border:1px solid #3f3f46; padding:8px 12px; border-radius:8px; color:#fff; outline:none; }
-body.page-mobile-streamer .tabs{ display:flex; padding:12px 16px; gap:10px; overflow-x:auto; border-bottom:1px solid #27272a; }
-body.page-mobile-streamer .tab{ padding:8px 16px; background:#1f1f23; border-radius:20px; color:#a1a1aa; text-decoration:none; font-size:14px; font-weight:600; white-space:nowrap; border:1px solid #27272a; display:flex; align-items:center; gap:6px; }
-body.page-mobile-streamer .tab.active{ background:#f59e0b; color:white; border-color:#f59e0b; }
-body.page-mobile-streamer .badge{ background:rgba(255,255,255,0.2); padding:2px 6px; border-radius:4px; font-size:10px; }
-body.page-mobile-streamer .list{ padding:16px; display:grid; gap:16px; }
-body.page-mobile-streamer .video-card{ background:#18181b; border-radius:12px; overflow:hidden; border:1px solid #27272a; }
-body.page-mobile-streamer .thumb-area{ position:relative; aspect-ratio:16/9; display:block; }
-body.page-mobile-streamer .thumb{ width:100%; height:100%; object-fit:cover; }
-body.page-mobile-streamer .dur{ position:absolute; bottom:6px; right:6px; background:rgba(0,0,0,0.8); padding:2px 6px; border-radius:4px; font-size:11px; font-weight:600; }
-body.page-mobile-streamer .meta{ padding:12px; }
-body.page-mobile-streamer .title{ font-weight:600; font-size:14px; margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:#fff; text-decoration:none; }
-body.page-mobile-streamer .info{ font-size:12px; color:#a1a1aa; margin-bottom:12px; }
-body.page-mobile-streamer .actions{ display:flex; gap:8px; border-top:1px solid #27272a; padding-top:12px; }
-body.page-mobile-streamer .act-btn{ flex:1; text-align:center; padding:6px; background:#27272a; border-radius:6px; font-size:12px; color:#a1a1aa; text-decoration:none; border:1px solid #3f3f46; }
-body.page-mobile-streamer .pagination{ display:flex !important; flex-direction:column !important; justify-content:center !important; gap:12px !important; padding:16px 12px 24px !important; align-items:stretch !important; width:100% !important; }
-body.page-mobile-streamer .pagination-pages{ display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; justify-content:center !important; align-items:center !important; gap:8px !important; width:100% !important; }
-body.page-mobile-streamer .pagination-nav-row{ display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; justify-content:center !important; align-items:center !important; gap:10px !important; width:100% !important; }
-body.page-mobile-streamer .pagination-page{ display:inline-flex !important; align-items:center !important; justify-content:center !important; min-width:44px !important; width:auto !important; height:44px !important; padding:0 12px !important; border-radius:10px !important; border:1px solid rgba(255,255,255,0.14) !important; background:rgba(255,255,255,0.06) !important; color:#f5f5f5 !important; font-size:15px !important; font-weight:700 !important; text-decoration:none !important; line-height:1 !important; box-sizing:border-box !important; flex:0 0 auto !important; }
-body.page-mobile-streamer .pagination-page.is-current{ background:rgba(242,229,141,0.18) !important; border-color:rgba(242,229,141,0.55) !important; color:#fff3a9 !important; }
-body.page-mobile-streamer .empty{ text-align:center; padding:40px; color:#52525b; }
-/* MOBILE_PLAYER */
-body.page-mobile-player{ margin:0; background:#000; color:#fff; height:100vh; height:100dvh; display:flex; flex-direction:column; overflow:hidden; font-family:-apple-system, sans-serif; }
-
-
-body.page-mobile-player .video-container{ flex: 2; position:relative; background:#000; display:flex; align-items:center; justify-content:center; min-height:0; }
-body.page-mobile-player .chat-container{ flex: 1; background:#0e0e10; border-top:1px solid #333; display:flex; flex-direction:column; min-height:0; }
-
-body.page-mobile-player video{ width:100%; height:100%; object-fit:contain; }
-
-body.page-mobile-player .overlay-header{ position:absolute; top:0; left:0; right:0; padding:10px; background:linear-gradient(to bottom, rgba(0,0,0,0.8), transparent); z-index:50; display:flex; justify-content:space-between; pointer-events:none; }
-body.page-mobile-player .back-btn{ pointer-events:auto; color:white; text-decoration:none; font-size:24px; text-shadow:0 1px 3px rgba(0,0,0,0.8); padding:5px; }
-body.page-mobile-player .title-block{ min-width:0; max-width:72%; text-align:right; pointer-events:auto; }
-body.page-mobile-player .title{ font-size:12px; color:rgba(255,255,255,0.8); text-shadow:0 1px 2px black; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
-body.page-mobile-player .mobile-vod-meta{ margin-top:2px; color:rgba(255,255,255,0.62); font-size:10px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 2px black; }
-
-body.page-mobile-player .chat-list{ flex:1; overflow-y:auto; padding:10px 10px 40px 10px; font-size:13px; line-height:1.4; }
-body.page-mobile-player .chat-line{ margin-bottom:4px; word-wrap:break-word; }
-body.page-mobile-player .u{ font-weight:700; color:#a970ff; margin-right:4px; }
-body.page-mobile-player .m{ color:#efeff1; }
-body.page-mobile-player .t{ color:#555; font-size:10px; margin-right:4px; }
-
-body.page-mobile-player.is-landscape-active{
-  flex-direction: row;
+body.page-mobile-streamer .title {
+  display: -webkit-box;
 }
-body.page-mobile-player.is-landscape-active .video-container{ flex: 1 1 100%; }
-body.page-mobile-player.is-landscape-active .chat-container,
-body.page-mobile-player.is-landscape-active .chat-container.chat-panel-tabs{
-  display: none !important;
+body.page-mobile-streamer .pagination-pages {
+  display: flex !important;
+  flex-direction: row !important;
+  flex-wrap: wrap !important;
+  justify-content: center !important;
+  align-items: center !important;
+  gap: 8px !important;
+  width: 100% !important;
 }
-body.page-mobile-player.is-landscape-active.landscape-chat-open .video-container{
-  flex: 1 1 66.666% !important;
-  width: 66.666% !important;
-  max-width: 66.666% !important;
+body.page-mobile-streamer .pagination-page {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  min-width: 44px !important;
+  width: auto !important;
+  height: 44px !important;
+  padding: 0 12px !important;
+  border-radius: var(--nebula-radius-sm) !important;
+  border: 1px solid rgba(255,255,255,0.14) !important;
+  background: rgba(255,255,255,0.06) !important;
+  color: var(--nebula-text-main) !important;
+  font-size: var(--sv-text-md) !important;
+  font-weight: 700 !important;
+  text-decoration: none !important;
+  line-height: 1 !important;
+  box-sizing: border-box !important;
+  flex: 0 0 auto !important;
 }
-body.page-mobile-player.is-landscape-active.landscape-chat-open .chat-container,
-body.page-mobile-player.is-landscape-active.landscape-chat-open .chat-container.chat-panel-tabs{
-  display: flex !important;
-  flex: 0 0 33.334% !important;
-  width: 33.334% !important;
-  max-width: 33.334% !important;
-  min-width: 33.334% !important;
-  border-top: none;
-  border-left: 1px solid #333;
+body.page-mobile-streamer .pagination-page.is-current {
+  background: rgba(242,229,141,0.18) !important;
+  border-color: rgba(242,229,141,0.55) !important;
+  color: #fff3a9 !important;
+}
+/* MOBILE_PLAYER */
+body.page-mobile-player {
+  height: 100vh;
+  height: 100dvh;
+}
+body.page-mobile-player .video-container {
+  min-height: 0;
+}
+body.page-mobile-player .title {
+  font-size: var(--sv-text-xs);
+  color: rgba(255,255,255,0.8);
+  text-shadow: 0 1px 2px black;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-
-@media (orientation: landscape){
+@media (orientation: landscape) {
   /* Fallback before JS marks is-landscape-active */
-  body.page-mobile-player{ flex-direction: row; }
+  body.page-mobile-player {
+    flex-direction: row;
+  }
 }
diff --git a/WEBUI/static/css/tokens.css b/WEBUI/static/css/tokens.css
index 320b3f1..5284152 100644
--- a/WEBUI/static/css/tokens.css
+++ b/WEBUI/static/css/tokens.css
@@ -16,6 +16,7 @@
   --nebula-border: #26344F;           /* Feine, dezente Konturen */
   --nebula-border-subtle: rgba(38, 52, 79, 0.6);
   --nebula-border-bright: #3B4E73;
+  --nebula-field-edge: #66789C;       /* Formularfeld-Kanten: >= 3:1 auf allen Flaechen (WCAG 1.4.11) */
   --nebula-border-glow: rgba(77, 99, 255, 0.4); /* Cosmic Glow */
 
   /* Primary & Accent Spectrum */
@@ -24,16 +25,23 @@
   --nebula-accent-highlight: #BB78FF; /* Violetter Highlight-Akzent */
   --nebula-accent-magenta: #E45DC5;   /* Dezenter Magenta-Akzent */
   --nebula-accent-cyan: #69C9FF;      /* Sekundärer Cyan-Akzent */
+  --nebula-accent-text: #8494FF;      /* Akzent als Textfarbe: >= 5:1 auf allen Flaechen */
+  --nebula-focus-ring: #8494FF;       /* Einheitliche Fokusfarbe (>= 3:1 auf allen Flaechen) */
 
   /* Status Colors */
   --nebula-status-live: #F04458;      /* Live-Anzeige (Red) */
   --nebula-status-success: #48D6A2;   /* Erfolgsstatus (Green/Mint) */
   --nebula-status-warning: #F2BC61;   /* Warnung (Amber/Gold) */
+  --nebula-status-live-text: #F2667A; /* Live/Fehler als Text: >= 4.5:1 auf allen Flaechen */
+  --nebula-danger-bg: #D42A40;        /* Danger-Buttons: Weiss darauf 4.99:1 */
+  --nebula-danger-bg-hover: #BC2236;
+  --nebula-accent-primary-hover: #3F55F0;
+  --nebula-text-on-accent: #FFFFFF;   /* Text auf Primaer-/Danger-Flaechen (4.62:1 / 4.99:1) */
 
   /* Typography Colors */
   --nebula-text-main: #F3F5FC;        /* Haupttext (Strahlendes Eisweiß) */
   --nebula-text-secondary: #A2AEC8;   /* Sekundärtext */
-  --nebula-text-muted: #75839D;       /* Dezenter Text / Metadaten */
+  --nebula-text-muted: #8A97B0;       /* Dezenter Text / Metadaten: >= 4.5:1 auf allen Flaechen (vorher #75839D, 3.62:1 auf active) */
   --nebula-text-inverse: #070B14;     /* Kontrasttext auf Akzenten */
 
   /* Typography Stacks */
@@ -41,12 +49,14 @@
   --nebula-font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
 
   /* Gradients & Glows */
-  --nebula-gradient-primary: linear-gradient(135deg, #4D63FF 0%, #9365FF 100%);
+  --nebula-gradient-primary: linear-gradient(135deg, #4D63FF 0%, #4D63FF 100%); /* Vollton: Weiss 4.62:1 (Verlaufsende #9365FF hatte 3.79:1) */
   --nebula-gradient-hero: linear-gradient(180deg, rgba(7, 11, 20, 0) 0%, rgba(7, 11, 20, 0.95) 100%);
   --nebula-gradient-cosmic: radial-gradient(circle at 50% 0%, rgba(147, 101, 255, 0.15) 0%, rgba(7, 11, 20, 0) 70%);
   --nebula-glow-blue: 0 0 20px rgba(77, 99, 255, 0.35);
   --nebula-glow-purple: 0 0 20px rgba(147, 101, 255, 0.35);
   --nebula-glow-live: 0 0 12px rgba(240, 68, 88, 0.55);
+  --nebula-shadow-brand: 0 2px 10px rgba(77, 99, 255, 0.3);
+  --nebula-scrim: rgba(0, 0, 0, 0.85);       /* Badges ueber Thumbnails */
 
   /* Geometry & Rhythm */
   --nebula-radius-xs: 4px;
@@ -54,12 +64,27 @@
   --nebula-radius-md: 12px;
   --nebula-radius-lg: 16px;
   --nebula-radius-full: 9999px;
+  --nebula-radius-xl: 24px;
+  /* Type scale (restyle 2026-11-12): every px font-size in the stylesheets maps here */
+  --sv-text-xs: 12px;
+  --sv-text-sm: 13px;
+  --sv-text-md: 14px;
+  --sv-text-base: 16px;
+  --sv-text-lg: 18px;
+  --sv-text-xl: 20px;
+  --sv-text-2xl: 24px;
+  --sv-text-3xl: 28px;
+  --sv-text-4xl: 32px;
+  --sv-text-5xl: 40px;
+  --sv-text-6xl: 48px;
   --nebula-rail-width: 72px;
+  --sv-bottom-nav-h: 64px;            /* Hoehe der unteren Navigationsleiste ohne safe-area */
+  --sv-min-text: 12px;                /* Mindestschriftgroesse fuer Labels/Metadaten */
 
   /* 2. NAMESPACE MAPPINGS FOR SYSTEM INTEGRATION */
   /* --ns-* mappings */
   --ns-bg-canvas: var(--nebula-bg-root);
-  --ns-bg-sidebar: var(--nebula-bg-root);
+  --ns-bg-sidebar: var(--nebula-bg-deep, #0B1220);
   --ns-bg-surface: var(--nebula-bg-surface);
   --ns-bg-surface-raised: var(--nebula-bg-card);
   --ns-bg-surface-hover: var(--nebula-bg-hover);
@@ -67,7 +92,7 @@
   --ns-border-subtle: var(--nebula-border);
   --ns-border-medium: var(--nebula-border-bright);
   --ns-border-strong: var(--nebula-border-glow);
-  --ns-border-focus: var(--nebula-accent-primary);
+  --ns-border-focus: var(--nebula-focus-ring);
   --ns-text-primary: var(--nebula-text-main);
   --ns-text-secondary: var(--nebula-text-secondary);
   --ns-text-muted: var(--nebula-text-muted);
@@ -77,11 +102,13 @@
   --ns-brand-crimson-subtle: rgba(77, 99, 255, 0.15);
   --ns-live-red: var(--nebula-status-live);
   --ns-recording-amber: var(--nebula-status-warning);
+  --ns-warm: var(--nebula-status-warning);
+  --ns-warm-2: #E8A33D;
   --ns-online-green: var(--nebula-status-success);
   --ns-platform-twitch: var(--nebula-accent-secondary);
   --ns-drive-blue: var(--nebula-accent-cyan);
-  --ns-font-sans: var(--nebula-font-sans);
-  --ns-font-mono: var(--nebula-font-mono);
+  --ns-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --ns-font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
 
   /* --tube-* & generic root */
   --tube-bg: var(--nebula-bg-root);
@@ -127,4 +154,73 @@
   --silo-border-base: var(--nebula-border);
   --silo-text-main: var(--nebula-text-main);
   --silo-text-muted: var(--nebula-text-secondary);
-}
\ No newline at end of file
+
+  /* 3. LEGACY ALIASES (consolidated from the former :root blocks in style.css and
+     tube_design_system.css; effective cascade value kept). New code uses --nebula-*. */
+  --glass-hover: var(--tube-surface-2);
+  --radius: var(--tube-radius);
+  --bg-card: rgba(255, 255, 255, 0.06);
+  --bg-1: #0b0f14;
+  --bg-2: #0a0d12;
+  --ink: #e5e7eb;
+  --sr-surface: rgba(18, 22, 22, 0.94);
+  --sr-surface-2: rgba(24, 29, 29, 0.92);
+  --sr-line: rgba(226, 232, 240, 0.12);
+  --sr-line-strong: rgba(226, 232, 240, 0.2);
+  --sr-text: #f3f4f0;
+  --sr-text-2: #c8d1cc;
+  --sr-muted: #8f9c96;
+  --sr-warm: #f28c28;
+  --sr-warm-2: #ffb15f;
+  --sr-shadow: 0 22px 60px rgba(0, 0, 0, 0.42);
+  --ns-bg: #0b0d10;
+  --ns-panel: rgba(9, 18, 16, 0.82);
+  --ns-line: rgba(188, 224, 210, 0.12);
+  --ns-line-strong: rgba(188, 224, 210, 0.2);
+  --ns-text: #f3fbf8;
+  --ns-text-2: #c8ddd5;
+  --ns-muted: #8ea79e;
+  --ns-purple: var(--tube-accent);
+  --ns-purple-2: var(--tube-accent-hover);
+  --ns-cyan: #26d9d0;
+  --ns-green: #65d8ac;
+  --ns-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
+  --ns-soft: #cbd5e1;
+  --ns-accent: #7c5cff;
+  --ns-accent-2: #22d3ee;
+  --ns-live: #ff3b5f;
+  --ns-good: #22c55e;
+  --ns-radius: 8px;
+  --ns-bg-0: #050909;
+  --ns-bg-1: #07100f;
+  --ns-gold: #e8c060;
+  --tube-radius: 10px;
+  --tube-rail: 76px;
+  --sidebar: #0c0d0f;
+  --surface: #111316;
+  --surface-raised: #17191d;
+  --surface-hover: #1c1f23;
+  --surface-active: #202329;
+  --border-strong: rgba(255, 255, 255, 0.12);
+  --text-primary: #f2f3f5;
+  --text-secondary: #979ba3;
+  --brand: #d8eb72;
+  --brand-hover: #e4f58b;
+  --brand-muted: rgba(216, 235, 114, 0.12);
+  --warning: #efc66b;
+  --offline: #737780;
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+  --radius-card: 10px;
+  --tube-focus: 0 0 0 3px rgba(242, 229, 141, 0.28);
+  --ns-platform-youtube: var(--nebula-status-live);
+  --ns-rail-width: 68px;
+  --ns-radius-xs: 4px;
+  --ns-radius-sm: 6px;
+  --ns-radius-md: 8px;
+  --ns-radius-lg: 12px;
+  --ns-radius-full: 9999px;
+  --ns-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
+  --ns-shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.85);
+}
diff --git a/WEBUI/static/css/tube_design_system.css b/WEBUI/static/css/tube_design_system.css
index a66f19d..94404ef 100644
--- a/WEBUI/static/css/tube_design_system.css
+++ b/WEBUI/static/css/tube_design_system.css
@@ -1,115 +1,38 @@
-@import url('tokens.css');
-
-:root {
-  /* Canvas & Base Surfaces (NEBULA Cosmic Palette) */
-  --ns-bg-canvas: var(--nebula-bg-root, #070B14);
-  --ns-bg-sidebar: var(--nebula-bg-deep, #0B1220);
-  --ns-bg-surface: var(--nebula-bg-surface, #111A2B);
-  --ns-bg-surface-raised: var(--nebula-bg-card, #151F33);
-  --ns-bg-surface-hover: var(--nebula-bg-hover, #1A2740);
-  --ns-bg-surface-active: var(--nebula-bg-active, #202C48);
-
-  /* Precision Borders */
-  --ns-border-subtle: var(--nebula-border, #26344F);
-  --ns-border-medium: var(--nebula-border-bright, #3B4E73);
-  --ns-border-strong: var(--nebula-border-glow, rgba(77, 99, 255, 0.4));
-  --ns-border-focus: var(--nebula-accent-primary, #4D63FF);
-
-  /* Typography */
-  --ns-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  --ns-font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
-  --ns-text-primary: var(--nebula-text-main, #F3F5FC);
-  --ns-text-secondary: var(--nebula-text-secondary, #A2AEC8);
-  --ns-text-muted: var(--nebula-text-muted, #75839D);
-  --ns-text-inverse: var(--nebula-text-inverse, #070B14);
-
-  /* Authentic NEBULA Cosmic Streaming Brand & States */
-  --ns-brand-crimson: var(--nebula-accent-primary, #4D63FF);
-  --ns-brand-crimson-hover: var(--nebula-accent-secondary, #9365FF);
-  --ns-brand-crimson-subtle: rgba(77, 99, 255, 0.15);
-  
-  --ns-live-red: var(--nebula-status-live, #F04458);
-  --ns-recording-amber: var(--nebula-status-warning, #F2BC61);
-  --ns-online-green: var(--nebula-status-success, #48D6A2);
-  --ns-platform-twitch: var(--nebula-accent-secondary, #9365FF);
-  --ns-platform-youtube: #F04458;
-  --ns-drive-blue: var(--nebula-accent-cyan, #69C9FF);
-
-  /* Geometry & Rhythm */
-  --ns-rail-width: 68px;
-  --ns-radius-xs: 4px;
-  --ns-radius-sm: 6px;
-  --ns-radius-md: 8px;
-  --ns-radius-lg: 12px;
-  --ns-radius-full: 9999px;
-
-  /* Elevations & Glow */
-  --ns-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
-  --ns-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.65);
-  --ns-shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.85);
-  --ns-glow-crt: 0 0 16px rgba(77, 99, 255, 0.4);
-  --ns-glow-nebula: 0 0 24px rgba(147, 101, 255, 0.45);
-}
-
 /* Base Reset & Layout Frame */
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
-
 body.ns-platform {
-  margin: 0;
-  padding: 0;
-  background-color: var(--ns-bg-canvas);
   color: var(--ns-text-primary);
   font-family: var(--ns-font-sans);
-  font-size: 14px;
+  font-size: var(--sv-text-md);
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
-  display: flex;
-  min-height: 100vh;
   overflow-x: hidden;
 }
-
 /* =========================================================
    1. COMMAND RAIL (PERSISTENT NAVIGATION)
    ========================================================= */
 .ns-command-rail {
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  width: var(--ns-rail-width);
-  background-color: var(--ns-bg-sidebar);
-  border-right: 1px solid var(--ns-border-subtle);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 16px 0;
-  z-index: 1000;
   user-select: none;
 }
-
 .ns-rail-brand {
   margin-bottom: 24px;
 }
-
 .ns-brand-glyph {
   width: 40px;
   height: 40px;
-  border-radius: var(--ns-radius-md);
-  background: linear-gradient(135deg, #17231C 0%, #111A15 100%);
   border: 1px solid var(--ns-border-medium);
-  color: var(--ns-brand-crimson);
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--ns-font-mono);
   font-weight: 800;
-  font-size: 18px;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  font-size: var(--sv-text-lg);
   text-decoration: none;
 }
-
 .ns-rail-nav {
   display: flex;
   flex-direction: column;
@@ -117,7 +40,6 @@ body.ns-platform {
   width: 100%;
   align-items: center;
 }
-
 .ns-rail-item {
   width: 44px;
   height: 44px;
@@ -130,27 +52,18 @@ body.ns-platform {
   background: transparent;
   border: 1px solid transparent;
   position: relative;
-  transition: all 0.15s ease;
+  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
   cursor: pointer;
 }
-
 .ns-rail-item svg {
   width: 20px;
   height: 20px;
 }
-
 .ns-rail-item:hover {
   color: var(--ns-text-primary);
   background-color: var(--ns-bg-surface-hover);
   border-color: var(--ns-border-subtle);
 }
-
-.ns-rail-item.is-active {
-  color: var(--ns-brand-crimson);
-  background-color: var(--ns-brand-crimson-subtle);
-  border-color: var(--silo-border-glow, rgba(121, 255, 138, 0.35));
-}
-
 .ns-rail-item.is-active::before {
   content: '';
   position: absolute;
@@ -158,14 +71,8 @@ body.ns-platform {
   top: 10px;
   bottom: 10px;
   width: 3px;
-  border-radius: 0 3px 3px 0;
-  background-color: var(--ns-brand-crimson);
+  border-radius: 0 var(--nebula-radius-xs) var(--nebula-radius-xs) 0;
 }
-
-.ns-rail-spacer {
-  flex: 1;
-}
-
 .ns-rail-footer {
   display: flex;
   flex-direction: column;
@@ -173,26 +80,22 @@ body.ns-platform {
   width: 100%;
   align-items: center;
 }
-
 .ns-logout-btn {
   background: transparent;
   border: none;
   padding: 0;
   margin: 0;
 }
-
 /* =========================================================
    2. MAIN APPLICATION WORKSPACE
    ========================================================= */
 .ns-app-main {
   margin-left: var(--ns-rail-width);
   flex: 1;
-  min-width: 0;
   display: flex;
   flex-direction: column;
   background-color: var(--ns-bg-canvas);
 }
-
 .ns-workspace-header {
   height: 64px;
   padding: 0 32px;
@@ -202,28 +105,24 @@ body.ns-platform {
   border-bottom: 1px solid var(--ns-border-subtle);
   background-color: var(--ns-bg-canvas);
 }
-
 .ns-header-title-block h1 {
   margin: 0;
-  font-size: 18px;
+  font-size: var(--sv-text-lg);
   font-weight: 700;
   letter-spacing: -0.01em;
   color: var(--ns-text-primary);
 }
-
 .ns-header-title-block p {
   margin: 0;
-  font-size: 12px;
+  font-size: var(--sv-text-xs);
   color: var(--ns-text-muted);
 }
-
 .ns-workspace-content {
   padding: 28px 32px 64px;
   max-width: 1720px;
   width: 100%;
   margin: 0 auto;
 }
-
 /* =========================================================
    3. HERO TELEMETRY STRIP (DASHBOARD)
    ========================================================= */
@@ -233,25 +132,16 @@ body.ns-platform {
   gap: 20px;
   align-items: center;
   padding: 14px 20px;
-  border-radius: var(--ns-radius-lg);
   background-color: var(--ns-bg-surface);
-  border: 1px solid var(--ns-border-subtle);
   margin-bottom: 24px;
 }
-
-.ns-telemetry-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
 .ns-status-indicator {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 4px 10px;
   border-radius: var(--ns-radius-full);
-  font-size: 11px;
+  font-size: var(--sv-min-text);
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.04em;
@@ -259,37 +149,26 @@ body.ns-platform {
   color: var(--ns-online-green);
   border: 1px solid rgba(16, 185, 129, 0.2);
 }
-
 .ns-status-indicator.is-recording {
   background-color: rgba(225, 29, 72, 0.1);
   color: var(--ns-brand-crimson);
   border-color: rgba(225, 29, 72, 0.25);
 }
-
 .ns-pulse-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background-color: currentColor;
 }
-
 .ns-telemetry-stat {
-  font-size: 12px;
+  font-size: var(--sv-text-xs);
   color: var(--ns-text-secondary);
 }
-
 .ns-telemetry-stat strong {
   color: var(--ns-text-primary);
   font-family: var(--ns-font-mono);
 }
-
 /* Storage Bar In Telemetry */
-.ns-storage-meter {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
 .ns-meter-track {
   flex: 1;
   height: 6px;
@@ -298,13 +177,10 @@ body.ns-platform {
   overflow: hidden;
   position: relative;
 }
-
 .ns-meter-fill {
   height: 100%;
-  background: linear-gradient(90deg, #3b82f6, var(--ns-brand-crimson));
   border-radius: var(--ns-radius-full);
 }
-
 /* =========================================================
    4. DASHBOARD OPERATIONS GRID
    ========================================================= */
@@ -316,7 +192,6 @@ body.ns-platform {
   gap: 24px;
   margin-bottom: 32px;
 }
-
 .ns-card-panel {
   background-color: var(--ns-bg-surface);
   border: 1px solid var(--ns-border-subtle);
@@ -325,29 +200,21 @@ body.ns-platform {
   display: flex;
   flex-direction: column;
 }
-
 .ns-panel-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 16px;
 }
-
 .ns-panel-head h2 {
   margin: 0;
-  font-size: 13px;
+  font-size: var(--sv-text-sm);
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--ns-text-muted);
 }
-
 /* Quick Launch Input */
-.ns-quick-launch-form {
-  display: flex;
-  gap: 8px;
-}
-
 .ns-input-field {
   flex: 1;
   background-color: var(--ns-bg-surface-raised);
@@ -355,16 +222,13 @@ body.ns-platform {
   border-radius: var(--ns-radius-md);
   color: var(--ns-text-primary);
   padding: 10px 14px;
-  font-size: 13px;
+  font-size: var(--sv-text-sm);
   font-family: inherit;
-  outline: none;
   transition: border-color 0.15s ease;
 }
-
 .ns-input-field:focus {
   border-color: var(--ns-brand-crimson);
 }
-
 .ns-btn {
   display: inline-flex;
   align-items: center;
@@ -372,67 +236,24 @@ body.ns-platform {
   gap: 8px;
   padding: 10px 16px;
   border-radius: var(--ns-radius-md);
-  font-size: 13px;
+  font-size: var(--sv-text-sm);
   font-weight: 600;
   cursor: pointer;
   border: 1px solid transparent;
-  transition: all 0.15s ease;
+  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
   text-decoration: none;
   font-family: inherit;
 }
-
 .ns-btn-primary {
   background-color: var(--ns-brand-crimson);
-  color: #fff;
 }
-
 .ns-btn-primary:hover {
   background-color: var(--ns-brand-crimson-hover);
 }
-
 .ns-btn-secondary {
-  background-color: var(--ns-bg-surface-raised);
-  color: var(--ns-text-secondary);
   border-color: var(--ns-border-subtle);
 }
-
-.ns-btn-secondary:hover {
-  background-color: var(--ns-bg-surface-hover);
-  color: var(--ns-text-primary);
-  border-color: var(--ns-border-medium);
-}
-
 /* Live Chips */
-.ns-chips-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 14px;
-}
-
-.ns-channel-chip {
-  padding: 4px 10px;
-  border-radius: var(--ns-radius-sm);
-  background-color: var(--ns-bg-surface-raised);
-  border: 1px solid var(--ns-border-subtle);
-  color: var(--ns-text-secondary);
-  font-size: 12px;
-  font-weight: 500;
-  text-decoration: none;
-  transition: all 0.15s ease;
-}
-
-.ns-channel-chip:hover {
-  border-color: var(--ns-border-medium);
-  color: var(--ns-text-primary);
-}
-
-.ns-channel-chip.is-live {
-  border-color: rgba(239, 68, 68, 0.4);
-  color: #fff;
-  background-color: rgba(239, 68, 68, 0.12);
-}
-
 /* =========================================================
    5. STREAMER DIRECTORY (HYBRID CARDS / LIST)
    ========================================================= */
@@ -442,123 +263,24 @@ body.ns-platform {
   justify-content: space-between;
   margin-bottom: 18px;
 }
-
 .ns-section-header h2 {
-  font-size: 16px;
+  font-size: var(--sv-text-base);
   font-weight: 700;
   margin: 0;
 }
-
-.ns-streamer-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-  gap: 16px;
-}
-
-.ns-streamer-card {
-  background-color: var(--ns-bg-surface);
-  border: 1px solid var(--ns-border-subtle);
-  border-radius: var(--ns-radius-lg);
-  padding: 18px;
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-  transition: all 0.15s ease;
-}
-
-.ns-streamer-card:hover {
-  border-color: var(--ns-border-medium);
-  background-color: var(--ns-bg-surface-raised);
-}
-
-.ns-streamer-card-head {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-}
-
-.ns-streamer-avatar-box {
-  width: 48px;
-  height: 48px;
-  border-radius: var(--ns-radius-md);
-  overflow: hidden;
-  background-color: var(--ns-bg-surface-hover);
-  position: relative;
-  flex-shrink: 0;
-  border: 1px solid var(--ns-border-subtle);
-}
-
-.ns-streamer-avatar-box img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.ns-streamer-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.ns-streamer-name {
-  font-weight: 700;
-  font-size: 15px;
-  color: var(--ns-text-primary);
-  margin-bottom: 2px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.ns-badge-row {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
 .ns-pill {
-  font-size: 10px;
+  font-size: var(--sv-min-text);
   font-weight: 700;
   text-transform: uppercase;
   padding: 2px 6px;
   border-radius: var(--ns-radius-xs);
   letter-spacing: 0.02em;
 }
-
-.ns-pill-offline {
-  background-color: var(--ns-bg-surface-hover);
-  color: var(--ns-text-muted);
-}
-
 .ns-pill-live {
   background-color: rgba(239, 68, 68, 0.15);
   color: var(--ns-live-red);
   border: 1px solid rgba(239, 68, 68, 0.3);
 }
-
-.ns-pill-drive {
-  background-color: rgba(59, 130, 246, 0.15);
-  color: var(--ns-drive-blue);
-}
-
-.ns-streamer-metrics {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  padding-top: 12px;
-  border-top: 1px solid var(--ns-border-subtle);
-  font-size: 12px;
-}
-
-.ns-metric-col span {
-  display: block;
-  color: var(--ns-text-muted);
-  font-size: 11px;
-}
-
-.ns-metric-col strong {
-  font-family: var(--ns-font-mono);
-  color: var(--ns-text-secondary);
-}
-
 /* =========================================================
    6. CINEMATIC VIDEO ARCHIVE GRID
    ========================================================= */
@@ -568,16 +290,14 @@ body.ns-platform {
   gap: 24px 18px;
   margin-top: 24px;
 }
-
 .ns-video-card {
   display: flex;
   flex-direction: column;
   background-color: transparent;
   border-radius: var(--ns-radius-md);
   position: relative;
-  transition: all 0.15s ease;
+  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
 }
-
 .ns-thumb-frame {
   position: relative;
   width: 100%;
@@ -587,7 +307,6 @@ body.ns-platform {
   background-color: #12141c;
   border: 1px solid var(--ns-border-subtle);
 }
-
 .ns-thumb-frame img {
   width: 100%;
   height: 100%;
@@ -595,11 +314,9 @@ body.ns-platform {
   display: block;
   transition: transform 0.25s ease;
 }
-
 .ns-video-card:hover .ns-thumb-frame img {
   transform: scale(1.03);
 }
-
 .ns-card-overlay-top {
   position: absolute;
   top: 8px;
@@ -609,50 +326,31 @@ body.ns-platform {
   justify-content: space-between;
   pointer-events: none;
 }
-
 .ns-card-overlay-bottom {
   position: absolute;
   bottom: 8px;
   right: 8px;
   pointer-events: none;
 }
-
 .ns-overlay-chip {
   padding: 2px 6px;
   border-radius: var(--ns-radius-xs);
-  font-size: 11px;
+  font-size: var(--sv-min-text);
   font-weight: 700;
   background-color: rgba(9, 10, 15, 0.85);
   backdrop-filter: none;
   color: #fff;
   font-family: var(--ns-font-mono);
 }
-
-.ns-watch-bar {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 3px;
-  background-color: rgba(255, 255, 255, 0.2);
-}
-
-.ns-watch-fill {
-  display: block;
-  height: 100%;
-  background-color: var(--ns-brand-crimson);
-}
-
 .ns-video-meta {
   padding: 10px 4px 4px;
   display: flex;
   flex-direction: column;
   gap: 4px;
 }
-
 .ns-video-title {
   margin: 0;
-  font-size: 14px;
+  font-size: var(--sv-text-md);
   font-weight: 600;
   line-height: 1.35;
   color: var(--ns-text-primary);
@@ -662,37 +360,20 @@ body.ns-platform {
   overflow: hidden;
   text-decoration: none;
 }
-
 .ns-video-title:hover {
   color: #fff;
 }
-
 .ns-video-subline {
-  font-size: 12px;
+  font-size: var(--sv-text-xs);
   color: var(--ns-text-muted);
   display: flex;
   align-items: center;
   gap: 6px;
 }
-
 .ns-video-subline strong {
   color: var(--ns-text-secondary);
   font-weight: 500;
 }
-
-.ns-card-actions {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-top: 8px;
-  opacity: 0;
-  transition: opacity 0.15s ease;
-}
-
-.ns-video-card:hover .ns-card-actions {
-  opacity: 1;
-}
-
 .ns-action-btn-mini {
   width: 28px;
   height: 28px;
@@ -706,7 +387,6 @@ body.ns-platform {
   cursor: pointer;
   text-decoration: none;
 }
-
 .ns-action-btn-mini:hover {
   background-color: var(--ns-bg-surface-hover);
   color: var(--ns-text-primary);
@@ -719,102 +399,20 @@ body.ns-platform.page-streamer .main {
   padding: 24px 32px !important;
   background-color: var(--ns-bg-canvas) !important;
 }
-
-body.ns-platform .streamer-hero {
-  background-color: var(--ns-bg-surface) !important;
-  border: 1px solid var(--ns-border-subtle) !important;
-  border-radius: var(--ns-radius-lg) !important;
-  padding: 24px !important;
-  margin-bottom: 24px !important;
-}
-
 /* 16:9 Video Cards Elevation */
-body.ns-platform .video-grid {
-  display: grid !important;
-  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)) !important;
-  gap: 20px 16px !important;
-}
-
 body.ns-platform .video-card {
-  background-color: var(--ns-bg-surface) !important;
-  border: 1px solid var(--ns-border-subtle) !important;
-  border-radius: var(--ns-radius-md) !important;
   overflow: hidden !important;
-  transition: all 0.2s ease !important;
-  box-shadow: none !important;
+  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease !important;
 }
-
 body.ns-platform .video-card:hover {
   border-color: var(--ns-border-medium) !important;
   background-color: var(--ns-bg-surface-raised) !important;
-  transform: translateY(-2px) !important;
-}
-
-body.ns-platform .thumb-wrap {
-  aspect-ratio: 16 / 9 !important;
-  border-radius: 0 !important;
-  border-bottom: 1px solid var(--ns-border-subtle) !important;
-  overflow: hidden !important;
 }
-
-body.ns-platform .thumb-wrap img {
-  width: 100% !important;
-  height: 100% !important;
-  object-fit: cover !important;
-  transition: transform 0.25s ease !important;
-}
-
-body.ns-platform .video-card:hover .thumb-wrap img {
-  transform: scale(1.04) !important;
-}
-
 /* Typography on Archive Cards */
-body.ns-platform .card-body {
-  padding: 12px !important;
-}
-
-body.ns-platform .video-title {
-  font-size: 13px !important;
-  font-weight: 600 !important;
-  color: var(--ns-text-primary) !important;
-  line-height: 1.35 !important;
-  display: -webkit-box !important;
-  -webkit-line-clamp: 2 !important;
-  -webkit-box-orient: vertical !important;
-  overflow: hidden !important;
-  margin-bottom: 6px !important;
-}
-
-body.ns-platform .video-meta {
-  font-size: 11px !important;
-  color: var(--ns-text-muted) !important;
-}
-
 /* Action Buttons Restraint */
-body.ns-platform .card-actions {
-  padding: 8px 12px 12px !important;
-  border-top: 1px solid var(--ns-border-subtle) !important;
-  gap: 6px !important;
-  display: flex !important;
-}
-
-body.ns-platform .card-actions .action-btn {
-  border-radius: var(--ns-radius-sm) !important;
-  background: var(--ns-bg-surface-raised) !important;
-  border: 1px solid var(--ns-border-subtle) !important;
-  color: var(--ns-text-secondary) !important;
-  transition: all 0.15s ease !important;
-}
-
-body.ns-platform .card-actions .action-btn:hover {
-  background: var(--ns-bg-surface-hover) !important;
-  color: #fff !important;
-  border-color: var(--ns-border-medium) !important;
-}
 /* ==========================================================================
    STREAMER DETAIL & VIDEO ARCHIVE COMPLETE REDESIGN ("STREAMVAULT COMMAND")
    ========================================================================== */
-
 /* 1. Viewport & Main Container Fixes */
 body.ns-platform.page-streamer .ns-app-main,
 body.ns-platform.page-streamer .main {
@@ -823,203 +421,16 @@ body.ns-platform.page-streamer .main {
   padding: 0 !important;
   background-color: var(--ns-bg-canvas) !important;
 }
-
 /* Remove legacy sidebar wrapper artifacts if rendered */
 body.ns-platform.page-streamer > .sidebar:not(.ns-command-rail) {
   display: none !important;
 }
-
 /* 2. Streamer Command Header (Hero) */
-body.ns-platform .streamer-command-hero {
-  padding: 32px 40px 24px;
-  background: linear-gradient(180deg, #11131c 0%, var(--ns-bg-canvas) 100%);
-  border-bottom: 1px solid var(--ns-border-subtle);
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-body.ns-platform .hero-top-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 16px;
-}
-
-body.ns-platform .hero-title-group {
-  display: flex;
-  align-items: center;
-  gap: 18px;
-}
-
-body.ns-platform .hero-avatar {
-  width: 56px;
-  height: 56px;
-  border-radius: var(--ns-radius-md);
-  background-color: var(--ns-bg-surface-raised);
-  border: 1px solid var(--ns-border-medium);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 20px;
-  font-weight: 800;
-  color: var(--ns-brand-crimson);
-}
-
-body.ns-platform .hero-title-group h1 {
-  margin: 0 0 4px 0;
-  font-size: 26px;
-  font-weight: 800;
-  letter-spacing: -0.02em;
-  color: var(--ns-text-primary);
-}
-
-body.ns-platform .hero-status-tags {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
 /* 3. High-Density Telemetry & Activity Panel */
-body.ns-platform .analytics-command-strip {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 12px;
-  margin-top: 8px;
-}
-
-body.ns-platform .analytics-stat-card {
-  background-color: var(--ns-bg-surface);
-  border: 1px solid var(--ns-border-subtle);
-  border-radius: var(--ns-radius-md);
-  padding: 14px 18px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-body.ns-platform .analytics-stat-card .label {
-  font-size: 11px;
-  font-weight: 700;
-  text-transform: uppercase;
-  color: var(--ns-text-muted);
-  letter-spacing: 0.04em;
-}
-
-body.ns-platform .analytics-stat-card .value {
-  font-size: 20px;
-  font-weight: 700;
-  font-family: var(--ns-font-mono);
-  color: var(--ns-text-primary);
-}
-
-body.ns-platform .analytics-stat-card .subtext {
-  font-size: 11px;
-  color: var(--ns-text-secondary);
-}
-
 /* 4. Streamer View Content Body */
-body.ns-platform .streamer-body-content {
-  padding: 24px 40px 64px;
-  max-width: 1720px;
-}
-
 /* Redesigned Navigation Tabs */
-body.ns-platform .archive-tabs-dock {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px;
-  border-radius: var(--ns-radius-md);
-  background-color: var(--ns-bg-surface);
-  border: 1px solid var(--ns-border-subtle);
-  width: fit-content;
-  margin-bottom: 24px;
-}
-
-body.ns-platform .archive-tab-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  border-radius: var(--ns-radius-sm);
-  color: var(--ns-text-secondary);
-  font-size: 13px;
-  font-weight: 600;
-  text-decoration: none;
-  transition: all 0.15s ease;
-}
-
-body.ns-platform .archive-tab-link:hover {
-  color: var(--ns-text-primary);
-  background-color: var(--ns-bg-surface-hover);
-}
-
-body.ns-platform .archive-tab-link.is-active {
-  color: #fff;
-  background-color: var(--ns-brand-crimson);
-}
-
-body.ns-platform .archive-tab-link .counter-chip {
-  padding: 2px 6px;
-  border-radius: var(--ns-radius-full);
-  font-size: 10px;
-  font-family: var(--ns-font-mono);
-  background: rgba(0, 0, 0, 0.25);
-}
-
 /* 5. Filter & Search Toolbar */
-body.ns-platform .archive-toolbar-card {
-  padding: 14px 18px;
-  border-radius: var(--ns-radius-lg);
-  background-color: var(--ns-bg-surface);
-  border: 1px solid var(--ns-border-subtle);
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex-wrap: wrap;
-  margin-bottom: 24px;
-}
-
-body.ns-platform .archive-search-box {
-  flex: 1;
-  min-width: 260px;
-  position: relative;
-}
-
-body.ns-platform .archive-search-box input {
-  width: 100%;
-  background-color: var(--ns-bg-surface-raised);
-  border: 1px solid var(--ns-border-subtle);
-  border-radius: var(--ns-radius-md);
-  padding: 9px 12px 9px 36px;
-  font-size: 13px;
-  color: #fff;
-  outline: none;
-}
-
-body.ns-platform .archive-search-box input:focus {
-  border-color: var(--ns-brand-crimson);
-}
-
-body.ns-platform .archive-search-box svg {
-  position: absolute;
-  left: 12px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 15px;
-  height: 15px;
-  color: var(--ns-text-muted);
-}
-
 /* 6. True 16:9 Media Cards (YouTube / Twitch Quality) */
-body.ns-platform .video-grid {
-  display: grid !important;
-  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)) !important;
-  gap: 24px 18px !important;
-}
-
 body.ns-platform .video-card {
   background-color: transparent !important;
   border: none !important;
@@ -1030,157 +441,34 @@ body.ns-platform .video-card {
   position: relative !important;
   box-shadow: none !important;
 }
-
 body.ns-platform .video-card:hover {
   transform: none !important;
 }
-
-body.ns-platform .thumb-wrap {
-  width: 100% !important;
-  aspect-ratio: 16 / 9 !important;
-  border-radius: var(--ns-radius-md) !important;
-  overflow: hidden !important;
-  position: relative !important;
-  background-color: #12141c !important;
-  border: 1px solid var(--ns-border-subtle) !important;
-  display: block !important;
-}
-
-body.ns-platform .thumb-wrap img {
-  width: 100% !important;
-  height: 100% !important;
-  object-fit: cover !important;
-  display: block !important;
-  transition: transform 0.2s ease !important;
-}
-
-body.ns-platform .video-card:hover .thumb-wrap img {
-  transform: scale(1.03) !important;
-}
-
 /* Badges positioned over thumbnail */
-body.ns-platform .duration-badge {
-  position: absolute !important;
-  bottom: 8px !important;
-  right: 8px !important;
-  padding: 3px 6px !important;
-  border-radius: var(--ns-radius-xs) !important;
-  background-color: rgba(9, 10, 15, 0.88) !important;
-  backdrop-filter: none;
-  color: #fff !important;
-  font-family: var(--ns-font-mono) !important;
-  font-size: 11px !important;
-  font-weight: 700 !important;
-  border: 1px solid rgba(255, 255, 255, 0.1) !important;
-}
-
-body.ns-platform .thumb-wrap .platform-badge,
 body.ns-platform .vod-card .platform-badge,
-body.ns-platform .video-card .platform-badge,
-body.ns-platform .card-thumbnail .platform-badge {
+body.ns-platform .video-card .platform-badge {
   position: absolute !important;
   top: 8px !important;
   left: 8px !important;
   padding: 2px 6px !important;
   border-radius: var(--ns-radius-xs) !important;
-  font-size: 10px !important;
+  font-size: var(--sv-min-text) !important;
   font-weight: 800 !important;
   letter-spacing: 0.05em !important;
 }
-
 body.ns-platform .vod-details .platform-badge,
 body.ns-platform .vod-kicker .platform-badge,
-body.ns-platform .related-recording-card .platform-badge,
-body.ns-platform .source-chip .platform-badge {
+body.ns-platform .related-recording-card .platform-badge {
   position: static !important;
   display: inline-flex !important;
   vertical-align: middle !important;
   margin: 0 4px !important;
 }
-
-body.ns-platform .drive-chip {
-  position: absolute !important;
-  top: 8px !important;
-  right: 8px !important;
-  padding: 2px 6px !important;
-  border-radius: var(--ns-radius-xs) !important;
-  font-size: 10px !important;
-  font-weight: 800 !important;
-  background-color: rgba(59, 130, 246, 0.25) !important;
-  color: #93c5fd !important;
-  border: 1px solid rgba(59, 130, 246, 0.4) !important;
-}
-
 /* Media Card Typography & Sublines */
-body.ns-platform .card-body {
-  padding: 0 !important;
-  display: flex !important;
-  flex-direction: column !important;
-  gap: 4px !important;
-}
-
-body.ns-platform .video-title {
-  font-size: 14px !important;
-  font-weight: 600 !important;
-  line-height: 1.35 !important;
-  color: var(--ns-text-primary) !important;
-  display: -webkit-box !important;
-  -webkit-line-clamp: 2 !important;
-  -webkit-box-orient: vertical !important;
-  overflow: hidden !important;
-  text-decoration: none !important;
-}
-
-body.ns-platform .video-title:hover {
-  color: #fff !important;
-}
-
-body.ns-platform .video-meta {
-  font-size: 12px !important;
-  color: var(--ns-text-muted) !important;
-  line-height: 1.4 !important;
-}
-
-body.ns-platform .video-meta strong {
-  color: var(--ns-text-secondary) !important;
-  font-weight: 500 !important;
-}
-
 /* Action Strip on Media Card */
-body.ns-platform .card-actions {
-  display: flex !important;
-  align-items: center !important;
-  gap: 6px !important;
-  margin-top: 4px !important;
-  padding: 0 !important;
-  border-top: none !important;
-}
-
-body.ns-platform .card-actions .btn-icon {
-  width: 28px !important;
-  height: 28px !important;
-  border-radius: var(--ns-radius-sm) !important;
-  background-color: var(--ns-bg-surface) !important;
-  border: 1px solid var(--ns-border-subtle) !important;
-  color: var(--ns-text-muted) !important;
-  display: inline-flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  text-decoration: none !important;
-  font-size: 12px !important;
-  cursor: pointer !important;
-  transition: all 0.15s ease !important;
-}
-
-body.ns-platform .card-actions .btn-icon:hover {
-  background-color: var(--ns-bg-surface-hover) !important;
-  color: var(--ns-text-primary) !important;
-  border-color: var(--ns-border-medium) !important;
-}
 /* ==========================================================================
    STREAMER ARCHIVE HIGH-SPECIFICITY OVERRIDES (COMPLETE VISUAL TRANSFORMATION)
    ========================================================================== */
-
 /* 1. Reset Legacy Panels & Cards */
 body.ns-platform.page-streamer .panel {
   background: var(--ns-bg-surface) !important;
@@ -1190,7 +478,6 @@ body.ns-platform.page-streamer .panel {
   padding: 20px 24px !important;
   margin-bottom: 24px !important;
 }
-
 /* 2. Top Header & Hero Area */
 body.ns-platform.page-streamer .header {
   display: flex !important;
@@ -1200,31 +487,13 @@ body.ns-platform.page-streamer .header {
   border-bottom: 1px solid var(--ns-border-subtle) !important;
   margin-bottom: 24px !important;
 }
-
 body.ns-platform.page-streamer .page-title {
-  font-size: 28px !important;
+  font-size: var(--sv-text-3xl) !important;
   font-weight: 800 !important;
   letter-spacing: -0.02em !important;
   color: var(--ns-text-primary) !important;
   margin: 0 !important;
 }
-
-body.ns-platform.page-streamer .btn-live-watch {
-  background: var(--ns-brand-crimson) !important;
-  color: #fff !important;
-  font-weight: 700 !important;
-  font-size: 12px !important;
-  letter-spacing: 0.05em !important;
-  padding: 8px 16px !important;
-  border-radius: var(--ns-radius-full) !important;
-  display: inline-flex !important;
-  align-items: center !important;
-  gap: 6px !important;
-  box-shadow: 0 2px 10px rgba(225, 29, 72, 0.35) !important;
-  border: none !important;
-  text-decoration: none !important;
-}
-
 /* 3. Navigation Tabs */
 body.ns-platform.page-streamer .tabs {
   display: inline-flex !important;
@@ -1235,88 +504,54 @@ body.ns-platform.page-streamer .tabs {
   border-radius: var(--ns-radius-md) !important;
   margin-bottom: 24px !important;
 }
-
 body.ns-platform.page-streamer .tabs .tab {
   padding: 8px 16px !important;
   border-radius: var(--ns-radius-sm) !important;
-  font-size: 13px !important;
+  font-size: var(--sv-text-sm) !important;
   font-weight: 600 !important;
   color: var(--ns-text-secondary) !important;
   text-decoration: none !important;
   border: none !important;
   background: transparent !important;
-  transition: all 0.15s ease !important;
+  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease !important;
 }
-
 body.ns-platform.page-streamer .tabs .tab:hover {
   color: #fff !important;
   background: var(--ns-bg-surface-hover) !important;
 }
-
 body.ns-platform.page-streamer .tabs .tab.active {
   color: #fff !important;
   background: var(--ns-brand-crimson) !important;
 }
-
 body.ns-platform.page-streamer .tabs .badge {
-  font-size: 11px !important;
+  font-size: var(--sv-min-text) !important;
   font-family: var(--ns-font-mono) !important;
   padding: 2px 6px !important;
   border-radius: var(--ns-radius-full) !important;
   background: rgba(0, 0, 0, 0.3) !important;
   color: inherit !important;
 }
-
 /* 4. Filter Toolbar */
-body.ns-platform.page-streamer .filter-form,
 body.ns-platform.page-streamer .panel form {
   display: flex !important;
   align-items: center !important;
   gap: 12px !important;
   flex-wrap: wrap !important;
 }
-
 body.ns-platform.page-streamer input[type="text"],
 body.ns-platform.page-streamer select {
   background-color: var(--ns-bg-surface-raised) !important;
   border: 1px solid var(--ns-border-subtle) !important;
   border-radius: var(--ns-radius-md) !important;
-  color: var(--ns-text-primary) !important;
-  padding: 8px 12px !important;
-  font-size: 13px !important;
-  outline: none !important;
-}
-
-body.ns-platform.page-streamer input[type="text"]:focus,
-body.ns-platform.page-streamer select:focus {
-  border-color: var(--ns-brand-crimson) !important;
-}
-
-body.ns-platform.page-streamer .btn-action {
-  background-color: var(--ns-brand-crimson) !important;
-  color: #fff !important;
-  border: none !important;
-  padding: 8px 16px !important;
-  border-radius: var(--ns-radius-md) !important;
-  font-weight: 600 !important;
-  font-size: 13px !important;
-  cursor: pointer !important;
-  transition: all 0.15s ease !important;
+  color: var(--ns-text-primary) !important;
+  padding: 8px 12px !important;
+  font-size: var(--sv-text-sm) !important;
 }
-
-body.ns-platform.page-streamer .btn-action:hover {
-  background-color: var(--ns-brand-crimson-hover) !important;
+body.ns-platform.page-streamer input[type="text"]:focus,
+body.ns-platform.page-streamer select:focus {
+  border-color: var(--ns-brand-crimson) !important;
 }
-
 /* 5. Transform Video Cards to YouTube/Twitch Cinema Layout */
-body.ns-platform.page-streamer .video-grid {
-  display: grid !important;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
-  gap: 28px 20px !important;
-  padding: 0 !important;
-  margin-top: 24px !important;
-}
-
 body.ns-platform.page-streamer .video-card {
   background: transparent !important;
   border: none !important;
@@ -1327,144 +562,28 @@ body.ns-platform.page-streamer .video-card {
   gap: 10px !important;
   position: relative !important;
 }
-
 body.ns-platform.page-streamer .video-card:hover {
   background: transparent !important;
   border-color: transparent !important;
 }
-
 /* 16:9 Thumbnail Frame */
-body.ns-platform.page-streamer .thumb-wrap {
-  width: 100% !important;
-  aspect-ratio: 16 / 9 !important;
-  border-radius: var(--ns-radius-md) !important;
-  overflow: hidden !important;
-  position: relative !important;
-  background: #0f1015 !important;
-  border: 1px solid var(--ns-border-subtle) !important;
-  display: block !important;
-}
-
-body.ns-platform.page-streamer .thumb-img {
-  width: 100% !important;
-  height: 100% !important;
-  object-fit: cover !important;
-  display: block !important;
-  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
-}
-
-body.ns-platform.page-streamer .video-card:hover .thumb-img {
-  transform: scale(1.04) !important;
-}
-
 /* Thumbnail Micro Badges */
-body.ns-platform.page-streamer .duration-badge {
-  position: absolute !important;
-  bottom: 8px !important;
-  right: 8px !important;
-  padding: 3px 6px !important;
-  border-radius: var(--ns-radius-xs) !important;
-  background-color: rgba(9, 10, 15, 0.88) !important;
-  backdrop-filter: none;
-  color: #fff !important;
-  font-family: var(--ns-font-mono) !important;
-  font-size: 11px !important;
-  font-weight: 700 !important;
-  border: 1px solid rgba(255, 255, 255, 0.1) !important;
-}
-
 body.ns-platform.page-streamer .platform-badge {
   position: absolute !important;
   top: 8px !important;
   left: 8px !important;
   padding: 2px 6px !important;
   border-radius: var(--ns-radius-xs) !important;
-  font-size: 10px !important;
+  font-size: var(--sv-min-text) !important;
   font-weight: 800 !important;
   letter-spacing: 0.05em !important;
   background: rgba(0, 0, 0, 0.8) !important;
 }
-
-body.ns-platform.page-streamer .drive-chip {
-  position: absolute !important;
-  top: 8px !important;
-  right: 8px !important;
-  padding: 2px 6px !important;
-  border-radius: var(--ns-radius-xs) !important;
-  font-size: 10px !important;
-  font-weight: 800 !important;
-  background-color: rgba(59, 130, 246, 0.25) !important;
-  color: #93c5fd !important;
-  border: 1px solid rgba(59, 130, 246, 0.4) !important;
-}
-
 /* Card Body & Text */
-body.ns-platform.page-streamer .card-body {
-  padding: 0 !important;
-  display: flex !important;
-  flex-direction: column !important;
-  gap: 5px !important;
-}
-
-body.ns-platform.page-streamer .video-title {
-  font-size: 14px !important;
-  font-weight: 600 !important;
-  line-height: 1.35 !important;
-  color: var(--ns-text-primary) !important;
-  display: -webkit-box !important;
-  -webkit-line-clamp: 2 !important;
-  -webkit-box-orient: vertical !important;
-  overflow: hidden !important;
-  text-decoration: none !important;
-}
-
-body.ns-platform.page-streamer .video-title:hover {
-  color: #fff !important;
-}
-
-body.ns-platform.page-streamer .video-meta {
-  font-size: 12px !important;
-  color: var(--ns-text-muted) !important;
-  line-height: 1.4 !important;
-}
-
 /* Card Action Bar (Hover Reveal) */
-body.ns-platform.page-streamer .card-actions {
-  display: flex !important;
-  align-items: center !important;
-  gap: 6px !important;
-  margin-top: 4px !important;
-  padding: 0 !important;
-  border: none !important;
-}
-
-body.ns-platform.page-streamer .card-actions .btn-icon,
-body.ns-platform.page-streamer .card-actions .action-btn {
-  width: 28px !important;
-  height: 28px !important;
-  border-radius: var(--ns-radius-sm) !important;
-  background-color: var(--ns-bg-surface-raised) !important;
-  border: 1px solid var(--ns-border-subtle) !important;
-  color: var(--ns-text-muted) !important;
-  display: inline-flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  text-decoration: none !important;
-  font-size: 12px !important;
-  cursor: pointer !important;
-  transition: all 0.15s ease !important;
-}
-
-body.ns-platform.page-streamer .card-actions .btn-icon:hover,
-body.ns-platform.page-streamer .card-actions .action-btn:hover {
-  background-color: var(--ns-bg-surface-hover) !important;
-  color: var(--ns-text-primary) !important;
-  border-color: var(--ns-border-medium) !important;
-}
 /* ==========================================================================
    GLOBAL VIEWPORT & SIDEBAR UNDERLAP RESOLUTION
    ========================================================================== */
-
 /* Enforce rail margin and full canvas clearance on ALL views */
 body.ns-platform {
   margin: 0 !important;
@@ -1473,7 +592,6 @@ body.ns-platform {
   display: block !important;
   min-height: 100vh !important;
 }
-
 body.ns-platform > .main,
 body.ns-platform .main,
 body.ns-platform .ns-app-main {
@@ -1486,7 +604,6 @@ body.ns-platform .ns-app-main {
   position: relative !important;
   z-index: 1 !important;
 }
-
 /* Ensure Command Rail is fixed and does not hide content */
 .ns-command-rail {
   position: fixed !important;
@@ -1504,20 +621,13 @@ body.ns-platform .ns-app-main {
   flex-direction: column !important;
   align-items: center !important;
 }
-
 /* Fix Logout Button positioning so it never gets clipped */
 .ns-command-rail .ns-rail-footer {
-  margin-top: auto !important;
-  padding-bottom: 8px !important;
-  width: 100% !important;
-  display: flex !important;
   justify-content: center !important;
 }
-
 /* ==========================================================================
    ADMIN PANEL COMPLETE VISUAL OVERHAUL ("STREAMVAULT COMMAND")
    ========================================================================== */
-
 body.ns-platform.page-admin .main,
 body.ns-platform.page-admin-traffic .main,
 body.ns-platform.page-stalk-admin .main {
@@ -1525,7 +635,6 @@ body.ns-platform.page-stalk-admin .main {
   width: calc(100% - var(--ns-rail-width)) !important;
   padding: 28px 36px 64px !important;
 }
-
 /* 1. Header Styling */
 body.ns-platform.page-admin .header,
 body.ns-platform.page-admin-traffic .header,
@@ -1537,17 +646,15 @@ body.ns-platform.page-stalk-admin .header {
   align-items: center !important;
   justify-content: space-between !important;
 }
-
 body.ns-platform.page-admin .page-title,
 body.ns-platform.page-admin-traffic .page-title,
 body.ns-platform.page-stalk-admin .page-title {
-  font-size: 26px !important;
+  font-size: var(--sv-text-2xl) !important;
   font-weight: 800 !important;
   letter-spacing: -0.02em !important;
   color: var(--ns-text-primary) !important;
   margin: 0 !important;
 }
-
 /* 2. Admin Tab Dock */
 body.ns-platform.page-admin .admin-tabs {
   display: inline-flex !important;
@@ -1559,38 +666,33 @@ body.ns-platform.page-admin .admin-tabs {
   margin-bottom: 28px !important;
   width: fit-content !important;
 }
-
 body.ns-platform.page-admin .admin-tab-btn {
   padding: 8px 18px !important;
   border-radius: var(--ns-radius-sm) !important;
-  font-size: 13px !important;
+  font-size: var(--sv-text-sm) !important;
   font-weight: 600 !important;
   color: var(--ns-text-secondary) !important;
   background: transparent !important;
   border: none !important;
   cursor: pointer !important;
-  transition: all 0.15s ease !important;
+  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease !important;
   display: inline-flex !important;
   align-items: center !important;
   gap: 8px !important;
 }
-
 body.ns-platform.page-admin .admin-tab-btn:hover {
   color: var(--ns-text-primary) !important;
   background: var(--ns-bg-surface-hover) !important;
 }
-
 body.ns-platform.page-admin .admin-tab-btn.active {
   color: #fff !important;
   background: var(--ns-brand-crimson) !important;
   box-shadow: 0 2px 10px rgba(225, 29, 72, 0.3) !important;
 }
-
 /* 3. Panel & Card System in Admin & Stalk */
 body.ns-platform.page-admin .panel,
 body.ns-platform.page-admin-traffic .panel,
-body.ns-platform.page-stalk-admin .panel,
-body.ns-platform .stalk-panel {
+body.ns-platform.page-stalk-admin .panel {
   background: var(--ns-bg-surface) !important;
   border: 1px solid var(--ns-border-subtle) !important;
   border-radius: var(--ns-radius-lg) !important;
@@ -1598,10 +700,9 @@ body.ns-platform .stalk-panel {
   box-shadow: var(--ns-shadow-sm) !important;
   margin-bottom: 24px !important;
 }
-
 body.ns-platform.page-admin .panel h3,
 body.ns-platform.page-stalk-admin .panel h3 {
-  font-size: 14px !important;
+  font-size: var(--sv-text-md) !important;
   font-weight: 700 !important;
   text-transform: uppercase !important;
   letter-spacing: 0.04em !important;
@@ -1611,7 +712,6 @@ body.ns-platform.page-stalk-admin .panel h3 {
   padding-bottom: 8px !important;
   border-bottom: 1px solid var(--ns-border-subtle) !important;
 }
-
 /* 4. Form Controls & Buttons in Admin */
 body.ns-platform.page-admin input[type="text"],
 body.ns-platform.page-admin input[type="password"],
@@ -1624,77 +724,60 @@ body.ns-platform.page-stalk-admin select {
   border-radius: var(--ns-radius-md) !important;
   color: var(--ns-text-primary) !important;
   padding: 9px 12px !important;
-  font-size: 13px !important;
-  outline: none !important;
+  font-size: var(--sv-text-sm) !important;
 }
-
 body.ns-platform.page-admin input:focus,
 body.ns-platform.page-stalk-admin input:focus {
   border-color: var(--ns-brand-crimson) !important;
 }
-
-body.ns-platform.page-admin button[type="submit"],
+body.ns-platform.page-admin button:where(:not(.sv-btn))[type="submit"]:where(:not(.sv-btn)),
 body.ns-platform.page-admin .btn-primary,
-body.ns-platform.page-stalk-admin button[type="submit"],
+body.ns-platform.page-stalk-admin button:where(:not(.sv-btn))[type="submit"]:where(:not(.sv-btn)),
 body.ns-platform.page-stalk-admin .btn-primary {
   background: var(--ns-brand-crimson) !important;
   color: #fff !important;
   border: none !important;
   border-radius: var(--ns-radius-md) !important;
   font-weight: 600 !important;
-  font-size: 13px !important;
+  font-size: var(--sv-text-sm) !important;
   padding: 9px 18px !important;
   cursor: pointer !important;
-  transition: all 0.15s ease !important;
+  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease !important;
 }
-
-body.ns-platform.page-admin button[type="submit"]:hover,
-body.ns-platform.page-stalk-admin button[type="submit"]:hover {
+body.ns-platform.page-admin button:where(:not(.sv-btn))[type="submit"]:hover,
+body.ns-platform.page-stalk-admin button:where(:not(.sv-btn))[type="submit"]:hover {
   background: var(--ns-brand-crimson-hover) !important;
 }
-
 /* 5. User Management & Data Tables */
 body.ns-platform.page-admin table,
 body.ns-platform.page-stalk-admin table {
   width: 100% !important;
   border-collapse: collapse !important;
-  font-size: 13px !important;
+  font-size: var(--sv-text-sm) !important;
   margin-top: 12px !important;
 }
-
 body.ns-platform.page-admin th,
 body.ns-platform.page-stalk-admin th {
   padding: 12px 14px !important;
   border-bottom: 1px solid var(--ns-border-subtle) !important;
   color: var(--ns-text-muted) !important;
-  font-size: 11px !important;
+  font-size: var(--sv-min-text) !important;
   font-weight: 700 !important;
   text-transform: uppercase !important;
   letter-spacing: 0.04em !important;
   text-align: left !important;
 }
-
 body.ns-platform.page-admin td,
 body.ns-platform.page-stalk-admin td {
   padding: 12px 14px !important;
   border-bottom: 1px solid var(--ns-border-subtle) !important;
   color: var(--ns-text-secondary) !important;
 }
-
 body.ns-platform.page-admin tr:hover td,
 body.ns-platform.page-stalk-admin tr:hover td {
   background: var(--ns-bg-surface-raised) !important;
   color: var(--ns-text-primary) !important;
 }
-
-/* ==========================================================================
-   STREAMVAULT COMMAND: GLOBAL PLATFORM-WIDE CLEARANCE & RAIL RESILIENCE
-   ========================================================================== */
-
-:root {
-  --ns-rail-width: 68px !important;
-}
-
 /* 1. Reset any style.css nav height overrides on the command rail */
 .ns-command-rail nav,
 .ns-command-rail .ns-rail-nav,
@@ -1716,13 +799,11 @@ body:is(.page-index, .page-channels, .page-streamer, .page-admin, .page-files, .
   align-items: center !important;
   width: 100% !important;
 }
-
 .ns-command-rail nav::-webkit-scrollbar,
 .ns-command-rail .ns-rail-nav::-webkit-scrollbar {
   display: none !important;
   width: 0 !important;
 }
-
 /* 2. Precision Command Rail positioning & dimensions */
 .ns-command-rail,
 aside.ns-command-rail,
@@ -1735,8 +816,8 @@ body .ns-command-rail {
   max-width: var(--ns-rail-width, 68px) !important;
   height: 100vh !important;
   max-height: 100vh !important;
-  background-color: var(--ns-bg-sidebar, #0d0f17) !important;
-  border-right: 1px solid var(--ns-border-subtle, rgba(255, 255, 255, 0.08)) !important;
+  background-color: var(--ns-bg-sidebar) !important;
+  border-right: 1px solid var(--ns-border-subtle) !important;
   z-index: 99999 !important;
   box-sizing: border-box !important;
   padding: 16px 0 16px !important;
@@ -1746,17 +827,10 @@ body .ns-command-rail {
   flex-shrink: 0 !important;
   overflow: hidden !important;
 }
-
 .ns-command-rail .ns-rail-brand {
   margin-bottom: 20px !important;
   flex-shrink: 0 !important;
 }
-
-.ns-command-rail .ns-rail-spacer {
-  flex: 1 1 auto !important;
-  min-height: 16px !important;
-}
-
 .ns-command-rail .ns-rail-footer {
   margin-top: auto !important;
   padding-bottom: 4px !important;
@@ -1766,7 +840,6 @@ body .ns-command-rail {
   align-items: center !important;
   flex-shrink: 0 !important;
 }
-
 .ns-command-rail .ns-logout-btn {
   background: transparent !important;
   border: none !important;
@@ -1777,34 +850,31 @@ body .ns-command-rail {
   justify-content: center !important;
   width: 100% !important;
 }
-
 .ns-command-rail .ns-logout-btn button.ns-rail-item,
-body .ns-command-rail .ns-logout-btn button.ns-rail-item,
-body:is(.page-index, .page-channels, .page-streamer, .page-admin, .page-files, .page-search, .page-discord-tool, .page-vod, .page-live, .page-stalk) .ns-command-rail .ns-logout-btn button {
+body .ns-command-rail .ns-logout-btn button:where(:not(.sv-btn)).ns-rail-item,
+body:is(.page-index, .page-channels, .page-streamer, .page-admin, .page-files, .page-search, .page-discord-tool, .page-vod, .page-live, .page-stalk) .ns-command-rail .ns-logout-btn button:where(:not(.sv-btn)) {
   width: 44px !important;
   height: 44px !important;
   border-radius: var(--ns-radius-md, 10px) !important;
-  color: var(--ns-text-muted, #94a3b8) !important;
+  color: var(--ns-text-muted) !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   background: transparent !important;
   border: 1px solid transparent !important;
   cursor: pointer !important;
-  transition: all 0.15s ease !important;
+  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease !important;
   padding: 0 !important;
   margin: 0 !important;
 }
-
 .ns-command-rail .ns-logout-btn button.ns-rail-item:hover,
-body .ns-command-rail .ns-logout-btn button.ns-rail-item:hover {
+body .ns-command-rail .ns-logout-btn button:where(:not(.sv-btn)).ns-rail-item:hover {
   color: #ef4444 !important;
   background-color: rgba(239, 68, 68, 0.12) !important;
   border-color: rgba(239, 68, 68, 0.3) !important;
   transform: none !important;
   box-shadow: none !important;
 }
-
 /* 3. ABSOLUTE GLOBAL SIDEBAR CLEARANCE (ZERO UNDERLAP) */
 body.ns-platform > .main,
 body.ns-platform .main,
@@ -1840,16 +910,14 @@ body.page-discord-tool .main {
   max-width: calc(100% - var(--ns-rail-width, 68px)) !important;
   box-sizing: border-box !important;
 }
-
 /* 4. VOD Player Viewport & Actions Overrides */
 body.page-vod .content {
   grid-template-columns: minmax(0, 1fr) minmax(320px, 380px) !important;
   gap: 16px !important;
 }
-
 body:is(.page-vod, .page-twitch-watch, .page-live) .vod-details {
-  background: var(--ns-bg-surface, #11131a) !important;
-  border: 1px solid var(--ns-border-subtle, rgba(255, 255, 255, 0.08)) !important;
+  background: var(--ns-bg-surface) !important;
+  border: 1px solid var(--ns-border-subtle) !important;
   border-radius: var(--ns-radius-lg, 12px) !important;
   padding: 18px 24px !important;
   height: auto !important;
@@ -1860,7 +928,6 @@ body:is(.page-vod, .page-twitch-watch, .page-live) .vod-details {
   max-width: 100% !important;
   align-self: stretch !important;
 }
-
 body:is(.page-vod, .page-twitch-watch) .twitch-switcher,
 nav.twitch-switcher {
   display: block !important;
@@ -1876,45 +943,39 @@ nav.twitch-switcher {
   grid-column: 1 / -1 !important;
   width: 100% !important;
 }
-
 body:is(.page-vod, .page-live) #btnOpenEditor,
 body:is(.page-vod, .page-live) .vod-inline-tool {
-  background: var(--ns-brand-crimson, #e11d48) !important;
+  background: var(--ns-brand-crimson) !important;
   color: #fff !important;
-  border: 1px solid var(--ns-brand-crimson, #e11d48) !important;
-  border-radius: 8px !important;
+  border: 1px solid var(--ns-brand-crimson) !important;
+  border-radius: var(--nebula-radius-sm) !important;
   font-weight: 600 !important;
-  transition: all 0.15s ease !important;
+  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease !important;
 }
-
 body:is(.page-vod, .page-live) #btnInstantClip,
 body:is(.page-vod, .page-live) #btnTranscriptToggle,
 body:is(.page-vod, .page-live) .vod-file-action {
-  background: var(--ns-bg-surface-raised, #161922) !important;
-  color: var(--ns-text-primary, #fff) !important;
-  border: 1px solid var(--ns-border-subtle, rgba(255, 255, 255, 0.08)) !important;
-  border-radius: 8px !important;
-  transition: all 0.15s ease !important;
+  background: var(--ns-bg-surface-raised) !important;
+  color: var(--ns-text-primary) !important;
+  border: 1px solid var(--ns-border-subtle) !important;
+  border-radius: var(--nebula-radius-sm) !important;
+  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease !important;
 }
-
 body:is(.page-vod, .page-live) #btnOpenEditor:hover {
-  background: var(--ns-brand-crimson-hover, #f43f5e) !important;
-  border-color: var(--ns-brand-crimson-hover, #f43f5e) !important;
+  background: var(--ns-brand-crimson-hover) !important;
+  border-color: var(--ns-brand-crimson-hover) !important;
 }
-
 body:is(.page-vod, .page-live) #btnInstantClip:hover,
 body:is(.page-vod, .page-live) #btnTranscriptToggle:hover,
 body:is(.page-vod, .page-live) .vod-file-action:hover {
-  background: var(--ns-bg-surface-hover, rgba(255, 255, 255, 0.08)) !important;
-  border-color: var(--ns-border-medium, rgba(255, 255, 255, 0.16)) !important;
+  background: var(--ns-bg-surface-hover) !important;
+  border-color: var(--ns-border-medium) !important;
   color: #fff !important;
 }
-
 /* =========================================================
    MOBILE PLAYER & LIVE WATCH UX UPGRADE (STREAM PROMINENCE,
    NO BOTTOM CHAT CUTOFF, RELIABLE LANDSCAPE CHAT TOGGLE)
    ========================================================= */
-
 /* 1. Viewport Lock: Prevent unwanted body scrolling and cutoffs on mobile */
 body.ns-platform:is(.page-mobile-player, .page-twitch-watch-mobile) {
   height: 100vh !important;
@@ -1929,7 +990,6 @@ body.ns-platform:is(.page-mobile-player, .page-twitch-watch-mobile) {
   flex-direction: column !important;
   background-color: #000 !important;
 }
-
 /* 2. Stream Priority: Clean 16:9 full-width video container without top gaps */
 body:is(.page-mobile-player, .page-twitch-watch-mobile) .video-container {
   width: 100% !important;
@@ -1941,7 +1001,6 @@ body:is(.page-mobile-player, .page-twitch-watch-mobile) .video-container {
   margin: 0 !important;
   overflow: hidden !important;
 }
-
 body:is(.page-mobile-player, .page-twitch-watch-mobile) .overlay-header {
   position: absolute !important;
   top: 0 !important;
@@ -1955,60 +1014,40 @@ body:is(.page-mobile-player, .page-twitch-watch-mobile) .overlay-header {
   align-items: center !important;
   pointer-events: none !important;
 }
-
 body:is(.page-mobile-player, .page-twitch-watch-mobile) .overlay-header > * {
   pointer-events: auto !important;
 }
-
 /* 3. Ultra-Compact Metadata Bar under Video (saves ~90px of space) */
-body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details {
-  flex: 0 0 auto !important;
-  padding: 8px 12px 8px !important;
-  background: var(--ns-bg-surface, #12141c) !important;
-  border-bottom: 1px solid var(--ns-border-subtle, rgba(255, 255, 255, 0.08)) !important;
-  display: flex !important;
-  flex-direction: column !important;
-  gap: 3px !important;
-}
-
 body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-details-main {
-  display: flex !important;
-  align-items: center !important;
-  justify-content: flex-start !important;
-  gap: 8px !important;
   margin: 0 !important;
   min-width: 0 !important;
 }
-
 body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-kicker {
   display: inline-flex !important;
   align-items: center !important;
   margin: 0 !important;
   flex-shrink: 0 !important;
 }
-
 body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .twitch-live-pill {
-  background: var(--ns-brand-crimson, #e11d48) !important;
+  background: var(--ns-brand-crimson) !important;
   color: #fff !important;
-  font-size: 10px !important;
+  font-size: var(--sv-min-text) !important;
   font-weight: 800 !important;
   letter-spacing: 0.05em !important;
   padding: 2px 7px !important;
   border-radius: var(--ns-radius-full, 9999px) !important;
   box-shadow: 0 0 10px rgba(225, 29, 72, 0.4) !important;
 }
-
 body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-display-title {
-  font-size: 14px !important;
+  font-size: var(--sv-text-md) !important;
   font-weight: 700 !important;
   line-height: 1.2 !important;
-  color: var(--ns-text-primary, #f8fafc) !important;
+  color: var(--ns-text-primary) !important;
   margin: 0 !important;
   white-space: nowrap !important;
   overflow: hidden !important;
   text-overflow: ellipsis !important;
 }
-
 body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-details-side {
   display: flex !important;
   align-items: center !important;
@@ -2016,100 +1055,71 @@ body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod
   gap: 8px !important;
   margin: 0 !important;
 }
-
 body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-facts {
   margin: 0 !important;
   display: flex !important;
   align-items: center !important;
   gap: 8px !important;
-  font-size: 11px !important;
-  color: var(--ns-text-muted, #94a3b8) !important;
+  font-size: var(--sv-min-text) !important;
+  color: var(--ns-text-muted) !important;
   min-width: 0 !important;
   flex: 1 1 auto !important;
   white-space: nowrap !important;
   overflow: hidden !important;
   text-overflow: ellipsis !important;
 }
-
 body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-facts div {
   display: inline-flex !important;
   align-items: center !important;
   gap: 4px !important;
 }
-
 body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-facts dt {
-  font-size: 10px !important;
+  font-size: var(--sv-min-text) !important;
   font-weight: 700 !important;
-  text-transform: uppercase !important;
-  color: var(--ns-text-muted, #64748b) !important;
+  color: var(--ns-text-muted) !important;
 }
-
 body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-facts dd {
-  font-size: 11px !important;
+  font-size: var(--sv-min-text) !important;
   font-weight: 600 !important;
-  color: var(--ns-text-secondary, #cbd5e1) !important;
+  color: var(--ns-text-secondary) !important;
 }
-
 body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-file-actions {
   flex-shrink: 0 !important;
 }
-
-body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-inline-tool {
-  min-height: 26px !important;
-  padding: 0 10px !important;
-  font-size: 11px !important;
-  font-weight: 600 !important;
-  border-radius: var(--ns-radius-sm, 6px) !important;
-  background: var(--ns-bg-surface-raised, #181a24) !important;
-  border: 1px solid var(--ns-border-medium, rgba(255, 255, 255, 0.12)) !important;
-  color: var(--ns-text-secondary, #cbd5e1) !important;
-  transition: all 0.15s ease !important;
-}
-
 /* Compact Tabs Header and Toolbar */
 body:is(.page-twitch-watch-mobile, .page-mobile-player) .chat-tabs-head {
   padding: 4px 10px !important;
   min-height: 34px !important;
-  background: var(--ns-bg-surface, #12141c) !important;
-  border-bottom: 1px solid var(--ns-border-subtle, rgba(255, 255, 255, 0.06)) !important;
+  background: var(--ns-bg-surface) !important;
+  border-bottom: 1px solid var(--ns-border-subtle) !important;
 }
-
 body:is(.page-twitch-watch-mobile, .page-mobile-player) .chat-tab {
   padding: 4px 14px !important;
-  font-size: 11px !important;
+  font-size: var(--sv-min-text) !important;
   font-weight: 700 !important;
   letter-spacing: 0.03em !important;
   text-transform: uppercase !important;
   border-radius: var(--ns-radius-sm, 6px) !important;
   background: transparent !important;
   border: 1px solid transparent !important;
-  color: var(--ns-text-muted, #64748b) !important;
+  color: var(--ns-text-muted) !important;
 }
-
 body:is(.page-twitch-watch-mobile, .page-mobile-player) .chat-tab.is-active {
-  background: var(--ns-brand-crimson, #e11d48) !important;
+  background: var(--ns-brand-crimson) !important;
   color: #fff !important;
-  border-color: var(--ns-brand-crimson, #e11d48) !important;
+  border-color: var(--ns-brand-crimson) !important;
   box-shadow: 0 0 12px rgba(225, 29, 72, 0.35) !important;
 }
-
-body:is(.page-twitch-watch-mobile, .page-mobile-player) .chat-pane-toolbar {
-  padding: 3px 10px !important;
-  min-height: 28px !important;
-  border-bottom: 1px solid var(--ns-border-subtle, rgba(255, 255, 255, 0.04)) !important;
-}
-
 body:is(.page-twitch-watch-mobile, .page-mobile-player) .chat-toggle {
   min-height: 24px !important;
   padding: 2px 8px !important;
-  font-size: 10px !important;
+  font-size: var(--sv-min-text) !important;
   font-weight: 700 !important;
   border-radius: var(--ns-radius-xs, 4px) !important;
-  background: var(--ns-bg-surface-raised, #181a24) !important;
-  border: 1px solid var(--ns-border-medium, rgba(255, 255, 255, 0.12)) !important;
-  color: var(--ns-text-secondary, #cbd5e1) !important;
+  background: var(--ns-bg-surface-raised) !important;
+  border: 1px solid var(--ns-border-medium) !important;
+  color: var(--ns-text-secondary) !important;
 }
-
 /* 4. Chat Container & List: ZERO CUTOFF AT BOTTOM */
 body:is(.page-mobile-player, .page-twitch-watch-mobile) .chat-container {
   flex: 1 1 auto !important;
@@ -2117,9 +1127,8 @@ body:is(.page-mobile-player, .page-twitch-watch-mobile) .chat-container {
   display: flex !important;
   flex-direction: column !important;
   overflow: hidden !important;
-  background: var(--ns-bg-canvas, #090a0f) !important;
+  background: var(--ns-bg-canvas) !important;
 }
-
 body:is(.page-mobile-player, .page-twitch-watch-mobile) .chat-tab-pane {
   flex: 1 1 auto !important;
   min-height: 0 !important;
@@ -2127,23 +1136,30 @@ body:is(.page-mobile-player, .page-twitch-watch-mobile) .chat-tab-pane {
   flex-direction: column !important;
   overflow: hidden !important;
 }
-
 body:is(.page-mobile-player, .page-twitch-watch-mobile) .chat-tab-pane[hidden],
 body:is(.page-mobile-player, .page-twitch-watch-mobile) .chat-tab-pane.is-hidden {
   display: none !important;
 }
-
 /* ========================================================================= */
 /* ULTRA-FAST MOBILE PERFORMANCE & INSTANT 0MS TAP RESPONSE                  */
 /* ========================================================================= */
-
 /* 1. Eliminate 300ms mobile tap delay across entire site */
-html, body, button, a, input, textarea, select, [role="button"], [role="tab"],
-.chat-tab, .btn, .ns-command-item, .video-card, .streamer-card, .card, .live-card {
+html,
+body,
+button,
+a,
+input,
+textarea,
+select,
+[role="button"],
+[role="tab"],
+.chat-tab,
+.btn,
+.video-card,
+.card {
   touch-action: manipulation !important;
   -webkit-tap-highlight-color: transparent !important;
 }
-
 /* 2. Instant visual haptic feedback on touch */
 button:active,
 a.btn:active,
@@ -2154,7 +1170,6 @@ a.btn:active,
   transform: scale(0.97) !important;
   transition: transform 0.05s ease !important;
 }
-
 /* 3. GPU-accelerated smooth 120fps scrolling on mobile */
 .chat-list,
 .content,
@@ -2163,7 +1178,6 @@ a.btn:active,
   -webkit-overflow-scrolling: touch !important;
   overscroll-behavior-y: contain !important;
 }
-
 body:is(.page-mobile-player, .page-twitch-watch-mobile) .chat-list {
   flex: 1 1 auto !important;
   min-height: 0 !important;
@@ -2173,7 +1187,6 @@ body:is(.page-mobile-player, .page-twitch-watch-mobile) .chat-list {
   padding: 8px 12px max(44px, calc(env(safe-area-inset-bottom, 20px) + 24px)) 12px !important;
   box-sizing: border-box !important;
 }
-
 /* 5. Landscape Mode & Chat Toggle Button Guaranteed Visibility */
 body:is(.page-mobile-player, .page-twitch-watch-mobile) .mobile-landscape-chat-toggle {
   touch-action: manipulation !important;
@@ -2191,19 +1204,14 @@ body:is(.page-mobile-player, .page-twitch-watch-mobile) .mobile-landscape-chat-t
   white-space: nowrap !important;
   flex-shrink: 0 !important;
 }
-
 /* Hidden by default in portrait */
 @media (orientation: portrait) {
   body:is(.page-mobile-player, .page-twitch-watch-mobile):not(.is-landscape-active) .mobile-landscape-chat-toggle {
     display: none !important;
   }
 }
-
 /* Guaranteed display in landscape */
 @media (orientation: landscape), (min-aspect-ratio: 1/1) {
-  body:is(.page-mobile-player, .page-twitch-watch-mobile) .mobile-force-landscape-toggle {
-    display: none !important;
-  }
   body:is(.page-mobile-player, .page-twitch-watch-mobile) .mobile-landscape-chat-toggle {
     display: inline-flex !important;
     visibility: visible !important;
@@ -2211,17 +1219,12 @@ body:is(.page-mobile-player, .page-twitch-watch-mobile) .mobile-landscape-chat-t
     pointer-events: auto !important;
   }
 }
-
-body:is(.page-mobile-player, .page-twitch-watch-mobile).is-landscape-active .mobile-force-landscape-toggle {
-  display: none !important;
-}
 body:is(.page-mobile-player, .page-twitch-watch-mobile).is-landscape-active .mobile-landscape-chat-toggle {
   display: inline-flex !important;
   visibility: visible !important;
   opacity: 1 !important;
   pointer-events: auto !important;
 }
-
 /* Chat CLOSED in Landscape (100% video): glowing crimson pill pinned top-right */
 body:is(.page-mobile-player, .page-twitch-watch-mobile):not(.landscape-chat-open) .mobile-landscape-chat-toggle {
   position: fixed !important;
@@ -2232,11 +1235,11 @@ body:is(.page-mobile-player, .page-twitch-watch-mobile):not(.landscape-chat-open
   width: auto !important;
   min-width: fit-content !important;
   padding: 0 14px 0 12px !important;
-  border-radius: 20px !important;
+  border-radius: var(--nebula-radius-lg) !important;
   background: rgba(15, 18, 28, 0.94) !important;
-  border: 1.5px solid var(--ns-brand-crimson, #e11d48) !important;
+  border: 1.5px solid var(--ns-brand-crimson) !important;
   color: #ffffff !important;
-  font-size: 13px !important;
+  font-size: var(--sv-text-sm) !important;
   font-weight: 600 !important;
   letter-spacing: 0.02em !important;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.75), 0 0 14px rgba(225, 29, 72, 0.4) !important;
@@ -2245,7 +1248,6 @@ body:is(.page-mobile-player, .page-twitch-watch-mobile):not(.landscape-chat-open
   white-space: nowrap !important;
   gap: 6px !important;
 }
-
 /* Chat OPEN in Landscape: compact collapse button */
 body:is(.page-mobile-player, .page-twitch-watch-mobile).landscape-chat-open .mobile-landscape-chat-toggle {
   position: relative !important;
@@ -2254,19 +1256,18 @@ body:is(.page-mobile-player, .page-twitch-watch-mobile).landscape-chat-open .mob
   width: auto !important;
   min-width: fit-content !important;
   padding: 0 12px 0 10px !important;
-  border-radius: 19px !important;
+  border-radius: var(--nebula-radius-lg) !important;
   background: rgba(22, 26, 38, 0.9) !important;
   border: 1px solid rgba(255, 255, 255, 0.25) !important;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45) !important;
   color: rgba(255, 255, 255, 0.95) !important;
-  font-size: 12px !important;
+  font-size: var(--sv-text-xs) !important;
   font-weight: 500 !important;
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
   white-space: nowrap !important;
   gap: 4px !important;
 }
-
 /* Inner content toggles */
 body:is(.page-mobile-player, .page-twitch-watch-mobile):not(.landscape-chat-open) .landscape-chat-toggle-closed-content {
   display: inline-flex !important;
@@ -2276,7 +1277,6 @@ body:is(.page-mobile-player, .page-twitch-watch-mobile):not(.landscape-chat-open
 body:is(.page-mobile-player, .page-twitch-watch-mobile):not(.landscape-chat-open) .landscape-chat-toggle-open-content {
   display: none !important;
 }
-
 body:is(.page-mobile-player, .page-twitch-watch-mobile).landscape-chat-open .landscape-chat-toggle-closed-content {
   display: none !important;
 }
@@ -2285,7 +1285,6 @@ body:is(.page-mobile-player, .page-twitch-watch-mobile).landscape-chat-open .lan
   align-items: center !important;
   gap: 4px !important;
 }
-
 body:is(.page-mobile-player, .page-twitch-watch-mobile) .mobile-landscape-chat-toggle:active {
   transform: scale(0.95) !important;
 }
@@ -2293,7 +1292,6 @@ body:is(.page-mobile-player, .page-twitch-watch-mobile) .mobile-landscape-chat-t
   border-color: #ffffff !important;
   color: #ffffff !important;
 }
-
 /* Live Tap Unmute Pill */
 .live-tap-unmute {
   position: absolute !important;
@@ -2302,12 +1300,12 @@ body:is(.page-mobile-player, .page-twitch-watch-mobile) .mobile-landscape-chat-t
   z-index: 850 !important;
   height: 36px !important;
   padding: 0 14px !important;
-  border-radius: 18px !important;
+  border-radius: var(--nebula-radius-lg) !important;
   background: rgba(15, 18, 28, 0.92) !important;
   border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
   color: #ffffff !important;
   font-weight: 600 !important;
-  font-size: 13px !important;
+  font-size: var(--sv-text-sm) !important;
   display: inline-flex !important;
   align-items: center !important;
   gap: 8px !important;
@@ -2323,16 +1321,11 @@ body:is(.page-mobile-player, .page-twitch-watch-mobile) .mobile-landscape-chat-t
 .live-tap-unmute:active {
   transform: scale(0.96) !important;
 }
-
 @media (orientation: landscape) {
   body.ns-platform:is(.page-mobile-player, .page-twitch-watch-mobile) {
     flex-direction: row !important;
   }
-  body:is(.page-mobile-player, .page-twitch-watch-mobile) .mobile-vod-details,
-  body:is(.page-mobile-player, .page-twitch-watch-mobile) .mobile-comments:not(.chat-tab-pane *) {
-    display: none !important;
-  }
-  body:is(.page-mobile-player, .page-twitch-watch-mobile) .mobile-force-landscape-toggle {
+  body:is(.page-mobile-player, .page-twitch-watch-mobile) .mobile-vod-details {
     display: none !important;
   }
   body:is(.page-mobile-player, .page-twitch-watch-mobile) .mobile-landscape-chat-toggle {
@@ -2347,7 +1340,6 @@ body:is(.page-mobile-player, .page-twitch-watch-mobile) .mobile-landscape-chat-t
     padding-right: max(16px, env(safe-area-inset-right, 16px)) !important;
     padding-top: max(8px, env(safe-area-inset-top, 8px)) !important;
   }
-
   /* Video inside container in landscape */
   body:is(.page-mobile-player, .page-twitch-watch-mobile) .video-container video {
     position: absolute !important;
@@ -2356,7 +1348,6 @@ body:is(.page-mobile-player, .page-twitch-watch-mobile) .mobile-landscape-chat-t
     height: 100% !important;
     object-fit: contain !important;
   }
-
   /* Landscape layout split: Chat open (2/3 video + 1/3 chat) */
   body:is(.page-mobile-player, .page-twitch-watch-mobile).landscape-chat-open .video-container {
     flex: 1 1 66.666% !important;
@@ -2366,7 +1357,6 @@ body:is(.page-mobile-player, .page-twitch-watch-mobile) .mobile-landscape-chat-t
     aspect-ratio: auto !important;
     position: relative !important;
   }
-
   body:is(.page-mobile-player, .page-twitch-watch-mobile).landscape-chat-open .chat-container {
     display: flex !important;
     flex: 0 0 33.334% !important;
@@ -2375,10 +1365,9 @@ body:is(.page-mobile-player, .page-twitch-watch-mobile) .mobile-landscape-chat-t
     min-width: 260px !important;
     height: 100% !important;
     border-top: none !important;
-    border-left: 1px solid var(--ns-border-medium, rgba(255, 255, 255, 0.12)) !important;
+    border-left: 1px solid var(--ns-border-medium) !important;
     z-index: 20 !important;
   }
-
   /* Landscape layout: Chat closed / Fullscreen video (100% video) */
   body:is(.page-mobile-player, .page-twitch-watch-mobile):not(.landscape-chat-open) .video-container {
     flex: 1 1 100% !important;
@@ -2388,22 +1377,18 @@ body:is(.page-mobile-player, .page-twitch-watch-mobile) .mobile-landscape-chat-t
     aspect-ratio: auto !important;
     position: relative !important;
   }
-
   body:is(.page-mobile-player, .page-twitch-watch-mobile):not(.landscape-chat-open) .chat-container {
     display: none !important;
     width: 0 !important;
     max-width: 0 !important;
   }
 }
-
 /* --------------------------------------------------------------------------
    Mobile Player Top Overlay Quick Controls (Play/Pause, Mute, Clip)
    -------------------------------------------------------------------------- */
-.mobile-force-landscape-toggle,
 #forceLandscapeToggle {
   display: none !important;
 }
-
 body:is(.page-mobile-player, .page-twitch-watch-mobile) .overlay-header-actions {
   display: flex !important;
   align-items: center !important;
@@ -2411,63 +1396,6 @@ body:is(.page-mobile-player, .page-twitch-watch-mobile) .overlay-header-actions
   pointer-events: auto !important;
   z-index: 950 !important;
 }
-
-body:is(.page-mobile-player, .page-twitch-watch-mobile) .mobile-player-control-btn {
-  display: inline-flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  height: 36px !important;
-  min-width: 36px !important;
-  padding: 0 10px !important;
-  border-radius: 18px !important;
-  background: rgba(14, 16, 24, 0.88) !important;
-  border: 1px solid rgba(255, 255, 255, 0.22) !important;
-  color: #ffffff !important;
-  font-size: 13px !important;
-  font-weight: 600 !important;
-  cursor: pointer !important;
-  touch-action: manipulation !important;
-  -webkit-tap-highlight-color: transparent !important;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45) !important;
-  backdrop-filter: none;
-  -webkit-backdrop-filter: none;
-  gap: 6px !important;
-  transition: all 0.15s ease !important;
-  line-height: 1 !important;
-  user-select: none !important;
-  -webkit-user-select: none !important;
-}
-
-body:is(.page-mobile-player, .page-twitch-watch-mobile) .mobile-player-control-btn:active {
-  transform: scale(0.92) !important;
-}
-
-body:is(.page-mobile-player, .page-twitch-watch-mobile) .mobile-player-control-btn:hover {
-  border-color: rgba(255, 255, 255, 0.5) !important;
-  background: rgba(24, 28, 42, 0.95) !important;
-}
-
-body:is(.page-mobile-player, .page-twitch-watch-mobile) .mobile-player-control-btn.mobile-clip-btn {
-  border-color: rgba(225, 29, 72, 0.6) !important;
-  background: rgba(22, 26, 38, 0.92) !important;
-  color: #ffffff !important;
-  padding: 0 12px !important;
-}
-
-body:is(.page-mobile-player, .page-twitch-watch-mobile) .mobile-player-control-btn.mobile-clip-btn:hover,
-body:is(.page-mobile-player, .page-twitch-watch-mobile) .mobile-player-control-btn.mobile-clip-btn:active {
-  border-color: var(--ns-brand-crimson, #e11d48) !important;
-  background: rgba(225, 29, 72, 0.25) !important;
-  box-shadow: 0 0 12px rgba(225, 29, 72, 0.35) !important;
-}
-
-body:is(.page-mobile-player, .page-twitch-watch-mobile) .mobile-player-control-btn.is-muted,
-body:is(.page-mobile-player, .page-twitch-watch-mobile) .mobile-player-control-btn.is-paused {
-  border-color: rgba(245, 158, 11, 0.7) !important;
-  color: #fbbf24 !important;
-}
-
-
 /* --------------------------------------------------------------------------
    Notch / Dynamic Island Safety & Bottom Action Buttons (Desktop VOD Style)
    -------------------------------------------------------------------------- */
@@ -2491,11 +1419,9 @@ body:is(.page-mobile-player, .page-twitch-watch-mobile) .mobile-player-control-b
     display: none !important;
   }
 }
-
 body:is(.page-mobile-player, .page-twitch-watch-mobile).is-portrait-active .overlay-header {
   display: none !important;
 }
-
 .vod-title-cluster {
   display: flex !important;
   align-items: center !important;
@@ -2503,7 +1429,6 @@ body:is(.page-mobile-player, .page-twitch-watch-mobile).is-portrait-active .over
   min-width: 0 !important;
   flex: 1 1 auto !important;
 }
-
 .mobile-portrait-back-btn {
   display: inline-flex !important;
   align-items: center !important;
@@ -2512,42 +1437,35 @@ body:is(.page-mobile-player, .page-twitch-watch-mobile).is-portrait-active .over
   height: 32px !important;
   min-width: 32px !important;
   border-radius: var(--ns-radius-md, 8px) !important;
-  background: var(--ns-bg-surface-raised, rgba(255, 255, 255, 0.08)) !important;
-  border: 1px solid var(--ns-border-subtle, rgba(255, 255, 255, 0.12)) !important;
-  color: var(--ns-text-primary, #f8fafc) !important;
+  background: var(--ns-bg-surface-raised) !important;
+  border: 1px solid var(--ns-border-subtle) !important;
+  color: var(--ns-text-primary) !important;
   text-decoration: none !important;
   flex-shrink: 0 !important;
   transition: background 0.15s ease, transform 0.1s ease !important;
 }
-
 .mobile-portrait-back-btn:hover {
   background: rgba(255, 255, 255, 0.15) !important;
   color: #ffffff !important;
 }
-
 .mobile-portrait-back-btn:active {
   background: rgba(255, 255, 255, 0.25) !important;
   transform: scale(0.92) !important;
 }
-
 /* Rendering performance: content-visibility for list cards */
-body.ns-platform .video-card,
-body.ns-platform .streamer-card {
+body.ns-platform .video-card {
   content-visibility: auto;
   contain-intrinsic-size: 0 280px;
 }
-
-
 body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details {
   flex: 0 0 auto !important;
   padding: 8px 12px 10px !important;
-  background: var(--ns-bg-surface, #12141c) !important;
-  border-bottom: 1px solid var(--ns-border-subtle, rgba(255, 255, 255, 0.08)) !important;
+  background: var(--ns-bg-surface) !important;
+  border-bottom: 1px solid var(--ns-border-subtle) !important;
   display: flex !important;
   flex-direction: column !important;
   gap: 6px !important;
 }
-
 body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-details-main {
   display: flex !important;
   align-items: center !important;
@@ -2555,7 +1473,6 @@ body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod
   flex-wrap: wrap !important;
   gap: 8px !important;
 }
-
 body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-file-actions {
   display: flex !important;
   align-items: center !important;
@@ -2569,7 +1486,6 @@ body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod
 body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-file-actions::-webkit-scrollbar {
   display: none !important;
 }
-
 body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-inline-tool {
   display: inline-flex !important;
   align-items: center !important;
@@ -2577,46 +1493,41 @@ body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod
   height: 32px !important;
   min-height: 32px !important;
   padding: 0 12px !important;
-  font-size: 12px !important;
+  font-size: var(--sv-text-xs) !important;
   font-weight: 600 !important;
   border-radius: var(--ns-radius-md, 8px) !important;
-  background: var(--ns-bg-surface-raised, #181a24) !important;
-  border: 1px solid var(--ns-border-medium, rgba(255, 255, 255, 0.16)) !important;
-  color: var(--ns-text-primary, #f1f5f9) !important;
+  background: var(--ns-bg-surface-raised) !important;
+  border: 1px solid var(--ns-border-medium) !important;
+  color: var(--ns-text-primary) !important;
   gap: 6px !important;
   cursor: pointer !important;
   touch-action: manipulation !important;
   -webkit-tap-highlight-color: transparent !important;
   white-space: nowrap !important;
   flex-shrink: 0 !important;
-  transition: all 0.15s ease !important;
+  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease !important;
 }
-
 body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-inline-tool:active {
   transform: scale(0.95) !important;
 }
-
 body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-inline-tool.mobile-clip-tool {
   border-color: rgba(225, 29, 72, 0.6) !important;
   background: rgba(22, 26, 38, 0.95) !important;
   color: #fff !important;
 }
 body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-inline-tool.mobile-clip-tool:active {
-  border-color: var(--ns-brand-crimson, #e11d48) !important;
+  border-color: var(--ns-brand-crimson) !important;
   background: rgba(225, 29, 72, 0.25) !important;
 }
-
 body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-inline-tool.is-paused,
 body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-inline-tool.is-muted {
   border-color: rgba(245, 158, 11, 0.6) !important;
   color: #fbbf24 !important;
 }
-
 /* Admin Title & Description Modal Overlay */
 .vod-admin-overlay[hidden] {
   display: none !important;
 }
-
 .vod-admin-overlay {
   position: fixed !important;
   inset: 0 !important;
@@ -2625,7 +1536,6 @@ body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod
   align-items: center !important;
   justify-content: center !important;
 }
-
 .vod-admin-scrim {
   position: fixed !important;
   inset: 0 !important;
@@ -2633,15 +1543,14 @@ body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
 }
-
 .vod-admin-dialog {
   position: relative !important;
   z-index: 8501 !important;
   width: min(540px, calc(100vw - 32px)) !important;
   max-height: calc(100vh - 60px) !important;
   overflow-y: auto !important;
-  background: var(--ns-bg-surface, #12141c) !important;
-  border: 1px solid var(--ns-border-medium, rgba(255, 255, 255, 0.16)) !important;
+  background: var(--ns-bg-surface) !important;
+  border: 1px solid var(--ns-border-medium) !important;
   border-radius: var(--ns-radius-lg, 12px) !important;
   padding: 20px 24px !important;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7) !important;
@@ -2650,145 +1559,78 @@ body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod
   gap: 14px !important;
   color: #fff !important;
 }
-
 .vod-admin-dialog-head {
   display: flex !important;
   align-items: flex-start !important;
   justify-content: space-between !important;
   gap: 12px !important;
 }
-
 .vod-admin-dialog-titles {
   display: flex !important;
   flex-direction: column !important;
   gap: 2px !important;
 }
-
 .vod-admin-kicker {
-  font-size: 11px !important;
+  font-size: var(--sv-min-text) !important;
   text-transform: uppercase !important;
   font-weight: 700 !important;
-  color: var(--ns-brand-crimson, #e11d48) !important;
+  color: var(--ns-brand-crimson) !important;
   letter-spacing: 0.05em !important;
 }
-
 .vod-admin-title {
-  font-size: 17px !important;
+  font-size: var(--sv-text-base) !important;
   font-weight: 700 !important;
   color: #fff !important;
   margin: 0 !important;
 }
-
 .vod-admin-meta-form,
 .vod-admin-rename-form {
   display: flex !important;
   flex-direction: column !important;
   gap: 12px !important;
 }
-
 .vod-admin-field {
   display: flex !important;
   flex-direction: column !important;
   gap: 6px !important;
-  font-size: 12px !important;
-  color: #a1a1aa !important;
+  font-size: var(--sv-text-xs) !important;
+  color: var(--nebula-text-secondary) !important;
   font-weight: 600 !important;
 }
-
 .vod-admin-field input,
 .vod-admin-field textarea {
   width: 100% !important;
   box-sizing: border-box !important;
   background: #0d0f16 !important;
   border: 1px solid rgba(255, 255, 255, 0.14) !important;
-  border-radius: 8px !important;
+  border-radius: var(--nebula-radius-sm) !important;
   padding: 9px 12px !important;
   color: #fff !important;
-  font-size: 13px !important;
+  font-size: var(--sv-text-sm) !important;
   font-family: inherit !important;
-  outline: none !important;
   resize: vertical !important;
   transition: border-color 0.15s ease !important;
 }
-
 .vod-admin-field input:focus,
 .vod-admin-field textarea:focus {
-  border-color: var(--ns-brand-crimson, #e11d48) !important;
+  border-color: var(--ns-brand-crimson) !important;
 }
-
 .vod-admin-actions-row {
   display: flex !important;
   align-items: center !important;
   justify-content: flex-end !important;
   gap: 12px !important;
 }
-
 .vod-admin-status-text {
-  font-size: 13px !important;
+  font-size: var(--sv-text-sm) !important;
   font-weight: 600 !important;
 }
-
 .vod-admin-divider {
   height: 1px !important;
   background: rgba(255, 255, 255, 0.08) !important;
   margin: 4px 0 !important;
 }
-
 /* VOD Chat & Comments Split Panel (Matching Live twitch_watch 50/50) */
-body.page-vod .chat-panel.chat-panel-split {
-  display: flex !important;
-  flex-direction: column !important;
-  gap: 0 !important;
-  min-height: 0 !important;
-}
-
-body.page-vod .chat-panel.chat-panel-split .chat-split-col {
-  display: flex !important;
-  flex-direction: column !important;
-  flex: 1 1 50% !important;
-  min-width: 0 !important;
-  min-height: 180px !important;
-  height: 50% !important;
-  overflow: hidden !important;
-  position: relative !important;
-}
-
-body.page-vod .chat-panel.chat-panel-split .chat-split-twitch {
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
-}
-
-body.page-vod .chat-panel.chat-panel-split .chat-split-col .chat-header {
-  display: flex !important;
-  align-items: center !important;
-  justify-content: space-between !important;
-  gap: 8px !important;
-  flex-shrink: 0 !important;
-  min-height: 48px !important;
-  height: 48px !important;
-  padding: 0 16px !important;
-  background: var(--tube-surface, #0d0d0d) !important;
-  border-bottom: 1px solid rgba(206, 232, 255, 0.08) !important;
-  color: var(--tube-text, #fff) !important;
-  font-size: 13px !important;
-  font-weight: 800 !important;
-}
-
-body.page-vod .chat-panel.chat-panel-split .chat-split-col .chat-header span {
-  text-transform: uppercase !important;
-  letter-spacing: 0.04em !important;
-}
-
-body.page-vod .chat-panel.chat-panel-split .chat-split-col .chat-list {
-  flex: 1 1 0 !important;
-  min-height: 0 !important;
-  overflow-y: auto !important;
-  padding: 10px 8px 18px !important;
-}
-
-body.page-vod .chat-panel.chat-panel-split .chat-filter-bar {
-  flex-shrink: 0 !important;
-}
-
 /* Full Viewport Height Desktop Player & Chat (Standard everywhere) */
 @media (min-width: 1024px) {
   html:has(body:is(.page-vod, .page-live, .page-twitch-watch)),
@@ -2806,7 +1648,7 @@ body.page-vod .chat-panel.chat-panel-split .chat-filter-bar {
     top: 0 !important;
     width: 68px !important;
     height: 100vh !important;
-    font-size: 14px !important;
+    font-size: var(--sv-text-md) !important;
   }
   body:is(.page-vod, .page-live, .page-twitch-watch) .main {
     margin-left: 68px !important;
@@ -2819,7 +1661,7 @@ body.page-vod .chat-panel.chat-panel-split .chat-filter-bar {
     overflow: hidden !important;
     display: flex !important;
     flex-direction: column !important;
-    font-size: 14px !important;
+    font-size: var(--sv-text-md) !important;
   }
   body:is(.page-vod, .page-live, .page-twitch-watch) .content {
     flex: 1 1 0% !important;
@@ -2851,7 +1693,7 @@ body.page-vod .chat-panel.chat-panel-split .chat-filter-bar {
     max-width: 100% !important;
     aspect-ratio: auto !important;
     background: #000 !important;
-    border-radius: 12px !important;
+    border-radius: var(--nebula-radius-md) !important;
     overflow: hidden !important;
     display: flex !important;
     align-items: center !important;
@@ -2879,61 +1721,43 @@ body.page-vod .chat-panel.chat-panel-split .chat-filter-bar {
     top: 0 !important;
   }
 }
-.twitch-player-embed-box,
-.twitch-player-embed-box iframe {
-  position: absolute !important;
-  inset: 0 !important;
-  width: 100% !important;
-  height: 100% !important;
-  border: 0 !important;
-  display: block !important;
-}
-
-
 /* ==========================================================================
    Pfeiler 5: App-Shell Dynamic Viewport (100dvh) & Timeline Heatmap Canvas
    ========================================================================== */
-
 @supports (height: 100dvh) {
   body:is(.page-vod, .page-live, .page-twitch-watch),
   .content,
-  .main,
-  .tube-layout {
+  .main {
     min-height: 100dvh !important;
   }
-  
   @media (max-width: 960px) {
     .chat-panel {
       max-height: calc(100dvh - 60px) !important;
     }
   }
 }
-
 .vod-timeline-heatmap-bar {
   position: relative;
   width: 100%;
   height: 14px;
   background: rgba(18, 20, 28, 0.85);
   cursor: pointer;
-  border-radius: 4px;
+  border-radius: var(--nebula-radius-xs);
   margin-top: 6px;
   margin-bottom: 8px;
   overflow: hidden;
   box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
-  border: 1px solid var(--ns-border-subtle, rgba(255, 255, 255, 0.08));
+  border: 1px solid var(--ns-border-subtle);
   transition: opacity 0.2s ease, border-color 0.2s ease;
 }
-
 .vod-timeline-heatmap-bar:hover {
-  border-color: var(--ns-border-medium, rgba(255, 255, 255, 0.2));
+  border-color: var(--ns-border-medium);
 }
-
 .vod-heatmap-canvas {
   width: 100%;
   height: 100%;
   display: block;
 }
-
 .vod-heatmap-pins {
   position: absolute;
   top: 0;
@@ -2942,35 +1766,12 @@ body.page-vod .chat-panel.chat-panel-split .chat-filter-bar {
   height: 100%;
   pointer-events: none;
 }
-
-.vod-heatmap-pin {
-  position: absolute;
-  top: 1px;
-  width: 4px;
-  height: 12px;
-  border-radius: 2px;
-  background: #f59e0b;
-  transform: translateX(-50%);
-  pointer-events: auto;
-  cursor: pointer;
-  transition: transform 0.15s ease, background 0.15s ease;
-}
-
-.vod-heatmap-pin:hover {
-  transform: translateX(-50%) scaleY(1.3);
-  background: #fbbf24;
-  z-index: 2;
-}
-
-
 /* ==========================================================================
    NEBULA: COSMIC STREAMING DESIGN SYSTEM
    ========================================================================== */
-
 /* Buttons: Cosmic Glow & Gradients */
-.ns-btn-primary,
-.nebula-btn-primary {
-  background: linear-gradient(135deg, #4D63FF 0%, #9365FF 100%) !important;
+.ns-btn-primary {
+  background: var(--nebula-gradient-primary) !important;
   color: #FFFFFF !important;
   font-weight: 600 !important;
   border-radius: var(--ns-radius-md) !important;
@@ -2985,172 +1786,120 @@ body.page-vod .chat-panel.chat-panel-split .chat-filter-bar {
   cursor: pointer;
   text-decoration: none !important;
 }
-
-.ns-btn-primary:hover,
-.nebula-btn-primary:hover {
+.ns-btn-primary:hover {
   background: linear-gradient(135deg, #5B70FF 0%, #A276FF 100%) !important;
   box-shadow: 0 6px 24px rgba(77, 99, 255, 0.6), 0 0 12px rgba(187, 120, 255, 0.4) !important;
   transform: translateY(-1px);
   color: #FFFFFF !important;
 }
-
-.ns-btn-secondary,
-.nebula-btn-secondary {
-  background-color: var(--nebula-bg-card, #151F33) !important;
-  border: 1px solid var(--nebula-border, #26344F) !important;
-  color: var(--nebula-text-main, #F3F5FC) !important;
+.ns-btn-secondary {
+  background-color: var(--nebula-bg-card) !important;
+  border: 1px solid var(--nebula-border) !important;
+  color: var(--nebula-text-main) !important;
   border-radius: var(--ns-radius-md) !important;
   font-weight: 500 !important;
-  transition: all 0.2s ease !important;
+  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease !important;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   text-decoration: none !important;
 }
-
-.ns-btn-secondary:hover,
-.nebula-btn-secondary:hover {
-  background-color: var(--nebula-bg-active, #202C48) !important;
-  border-color: var(--nebula-accent-primary, #4D63FF) !important;
+.ns-btn-secondary:hover {
+  background-color: var(--nebula-bg-active) !important;
+  border-color: var(--nebula-accent-primary) !important;
   color: #FFFFFF !important;
   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
 }
-
 /* Command Rail Brand Glyph with Cosmic Glow */
 .ns-brand-glyph {
   color: #FFFFFF !important;
-  background: linear-gradient(135deg, #4D63FF 0%, #9365FF 100%) !important;
+  background: var(--nebula-gradient-primary) !important;
   border-color: rgba(255, 255, 255, 0.2) !important;
   box-shadow: 0 0 16px rgba(77, 99, 255, 0.5) !important;
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
-  border-radius: 10px !important;
+  border-radius: var(--nebula-radius-sm) !important;
 }
-
 .ns-brand-glyph:hover {
   box-shadow: 0 0 24px rgba(147, 101, 255, 0.7) !important;
   transform: scale(1.05);
 }
-
 .ns-rail-item.is-active {
-  color: var(--nebula-accent-primary, #4D63FF) !important;
+  color: var(--nebula-accent-primary) !important;
   background-color: rgba(77, 99, 255, 0.15) !important;
   border-color: rgba(77, 99, 255, 0.4) !important;
   box-shadow: 0 0 12px rgba(77, 99, 255, 0.25) !important;
 }
-
 .ns-rail-item.is-active::before {
-  background-color: var(--nebula-accent-primary, #4D63FF) !important;
-  box-shadow: 0 0 8px var(--nebula-accent-primary, #4D63FF) !important;
+  background-color: var(--nebula-accent-primary) !important;
+  box-shadow: 0 0 8px var(--nebula-accent-primary) !important;
 }
-
 /* NEBULA Cards & Panels */
 .ns-card-panel,
-.ns-streamer-card,
 .vod-details,
-.chat-panel,
-.nebula-panel {
-  background: var(--nebula-bg-surface, #111A2B) !important;
-  border: 1px solid var(--nebula-border, #26344F) !important;
+.chat-panel {
+  background: var(--nebula-bg-surface) !important;
+  border: 1px solid var(--nebula-border) !important;
   border-radius: var(--ns-radius-lg) !important;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
 }
-
-.ns-streamer-card:hover {
-  border-color: var(--nebula-accent-primary, #4D63FF) !important;
-  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 16px rgba(77, 99, 255, 0.2) !important;
-}
-
 /* Telemetry & Metrics */
 .ns-telemetry-bar {
-  background: var(--nebula-bg-surface, #111A2B) !important;
-  border: 1px solid var(--nebula-border, #26344F) !important;
+  background: var(--nebula-bg-surface) !important;
+  border: 1px solid var(--nebula-border) !important;
   border-radius: var(--ns-radius-md) !important;
 }
-
 /* Status Pills */
 .ns-pill-live,
 .nebula-live-badge {
   background: rgba(240, 68, 88, 0.18) !important;
   border: 1px solid rgba(240, 68, 88, 0.45) !important;
-  color: #F04458 !important;
+  color: var(--nebula-status-live) !important;
   font-weight: 700 !important;
   border-radius: var(--ns-radius-full) !important;
   display: inline-flex;
   align-items: center;
   gap: 6px;
 }
-
 .nebula-live-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background-color: #F04458;
-  box-shadow: 0 0 8px #F04458;
+  background-color: var(--nebula-status-live);
+  box-shadow: 0 0 8px var(--nebula-status-live);
   animation: nebula-pulse 1.8s infinite;
 }
-
 @keyframes nebula-pulse {
   0%, 100% { opacity: 1; transform: scale(1); }
   50% { opacity: 0.4; transform: scale(0.85); }
 }
-
-.ns-pill-offline {
-  background: rgba(117, 131, 157, 0.15) !important;
-  border-color: rgba(117, 131, 157, 0.3) !important;
-  color: #A2AEC8 !important;
-}
-
-.ns-pill-drive {
-  background: rgba(105, 201, 255, 0.15) !important;
-  border-color: rgba(105, 201, 255, 0.4) !important;
-  color: #69C9FF !important;
-}
-
 /* Storage Meter Bar */
 .ns-meter-fill {
-  background: linear-gradient(90deg, #4D63FF 0%, #BB78FF 100%) !important;
+  background: linear-gradient(90deg, var(--nebula-accent-primary) 0%, var(--nebula-accent-highlight) 100%) !important;
   box-shadow: 0 0 10px rgba(147, 101, 255, 0.4) !important;
 }
-
 /* Input Fields & Selects */
 .ns-input-field,
 input[type="text"],
 input[type="password"],
 input[type="search"],
 select {
-  background: var(--nebula-bg-surface, #111A2B) !important;
-  border: 1px solid var(--nebula-border, #26344F) !important;
-  color: var(--nebula-text-main, #F3F5FC) !important;
+  background: var(--nebula-bg-surface) !important;
+  border: 1px solid var(--nebula-border) !important;
+  color: var(--nebula-text-main) !important;
   border-radius: var(--ns-radius-md) !important;
 }
-
 .ns-input-field:focus,
 input[type="text"]:focus,
 input[type="password"]:focus,
 input[type="search"]:focus,
 select:focus {
-  border-color: var(--nebula-accent-primary, #4D63FF) !important;
+  border-color: var(--nebula-accent-primary) !important;
   box-shadow: 0 0 12px rgba(77, 99, 255, 0.4) !important;
-  outline: none !important;
 }
-
 /* =========================================================
    NEBULA COMPONENT SPECIFICATIONS
    ========================================================= */
-
 /* Hero Banner */
-.nebula-hero {
-  position: relative;
-  background: linear-gradient(135deg, rgba(17, 26, 43, 0.95) 0%, rgba(11, 18, 32, 0.98) 100%),
-              radial-gradient(circle at 85% 20%, rgba(147, 101, 255, 0.25) 0%, transparent 65%);
-  border: 1px solid var(--nebula-border, #26344F);
-  border-radius: 16px;
-  padding: 32px;
-  margin-bottom: 28px;
-  overflow: hidden;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
-}
-
 .nebula-hero-glow {
   position: absolute;
   top: -60px;
@@ -3160,13 +1909,6 @@ select:focus {
   background: radial-gradient(circle, rgba(77, 99, 255, 0.35) 0%, transparent 70%);
   pointer-events: none;
 }
-
-.nebula-hero-content {
-  position: relative;
-  z-index: 2;
-  max-width: 680px;
-}
-
 .nebula-hero-badge {
   display: inline-flex;
   align-items: center;
@@ -3175,32 +1917,29 @@ select:focus {
   background: rgba(77, 99, 255, 0.15);
   border: 1px solid rgba(77, 99, 255, 0.35);
   border-radius: var(--ns-radius-full);
-  color: #69C9FF;
-  font-size: 12px;
+  color: var(--nebula-accent-cyan);
+  font-size: var(--sv-text-xs);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-bottom: 14px;
 }
-
 .nebula-hero-title {
-  font-size: 28px;
+  font-size: var(--sv-text-3xl);
   font-weight: 700;
   line-height: 1.25;
   color: #FFFFFF;
   margin: 0 0 10px 0;
   letter-spacing: -0.5px;
 }
-
 .nebula-hero-meta {
   display: flex;
   align-items: center;
   gap: 14px;
   margin-bottom: 20px;
-  color: var(--nebula-text-secondary, #A2AEC8);
-  font-size: 14px;
+  color: var(--nebula-text-secondary);
+  font-size: var(--sv-text-md);
 }
-
 .nebula-hero-streamer {
   display: flex;
   align-items: center;
@@ -3208,30 +1947,27 @@ select:focus {
   font-weight: 600;
   color: #FFFFFF;
 }
-
 .nebula-hero-avatar {
   width: 28px;
   height: 28px;
   border-radius: 50%;
-  border: 2px solid var(--nebula-accent-primary, #4D63FF);
-  background: #151F33;
+  border: 2px solid var(--nebula-accent-primary);
+  background: var(--nebula-bg-card);
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 11px;
+  font-size: var(--sv-min-text);
   font-weight: 700;
   color: #FFF;
 }
-
 .nebula-hero-cat {
   padding: 2px 10px;
   background: rgba(255, 255, 255, 0.08);
-  border-radius: 6px;
-  color: #BB78FF;
-  font-size: 13px;
+  border-radius: var(--nebula-radius-xs);
+  color: var(--nebula-accent-highlight);
+  font-size: var(--sv-text-sm);
 }
-
 /* VOD Discovery Grid */
 .nebula-vod-grid {
   display: grid;
@@ -3239,44 +1975,38 @@ select:focus {
   gap: 20px;
   margin-bottom: 32px;
 }
-
 .nebula-vod-card {
   display: flex;
   flex-direction: column;
-  background: var(--nebula-bg-card, #151F33);
-  border: 1px solid var(--nebula-border, #26344F);
-  border-radius: 12px;
+  background: var(--nebula-bg-card);
+  border: 1px solid var(--nebula-border);
+  border-radius: var(--nebula-radius-md);
   overflow: hidden;
   text-decoration: none !important;
   color: inherit !important;
   transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s ease, border-color 0.2s ease;
 }
-
 .nebula-vod-card:hover {
   transform: translateY(-4px);
-  border-color: var(--nebula-accent-primary, #4D63FF);
+  border-color: var(--nebula-accent-primary);
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 16px rgba(77, 99, 255, 0.25);
 }
-
 .nebula-vod-thumb-box {
   position: relative;
   width: 100%;
   aspect-ratio: 16 / 9;
-  background: #0B1220;
+  background: var(--nebula-bg-deep);
   overflow: hidden;
 }
-
 .nebula-vod-thumb-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.3s ease;
 }
-
 .nebula-vod-card:hover .nebula-vod-thumb-img {
   transform: scale(1.04);
 }
-
 .nebula-vod-duration {
   position: absolute;
   bottom: 8px;
@@ -3286,12 +2016,11 @@ select:focus {
   backdrop-filter: none;
   color: #FFFFFF;
   font-family: var(--ns-font-mono);
-  font-size: 11px;
+  font-size: var(--sv-min-text);
   font-weight: 600;
-  border-radius: 4px;
+  border-radius: var(--nebula-radius-xs);
   border: 1px solid rgba(255, 255, 255, 0.1);
 }
-
 .nebula-vod-streamer-badge {
   position: absolute;
   top: 8px;
@@ -3299,13 +2028,12 @@ select:focus {
   padding: 2px 8px;
   background: rgba(17, 26, 43, 0.85);
   backdrop-filter: none;
-  color: #A2AEC8;
-  font-size: 11px;
+  color: var(--nebula-text-secondary);
+  font-size: var(--sv-min-text);
   font-weight: 600;
-  border-radius: 4px;
+  border-radius: var(--nebula-radius-xs);
   border: 1px solid rgba(255, 255, 255, 0.08);
 }
-
 .nebula-vod-play-overlay {
   position: absolute;
   inset: 0;
@@ -3316,51 +2044,45 @@ select:focus {
   opacity: 0;
   transition: opacity 0.2s ease;
 }
-
 .nebula-vod-card:hover .nebula-vod-play-overlay {
   opacity: 1;
 }
-
 .nebula-vod-play-circle {
   width: 44px;
   height: 44px;
   border-radius: 50%;
-  background: var(--nebula-gradient-primary, linear-gradient(135deg, #4D63FF 0%, #9365FF 100%));
+  background: var(--nebula-gradient-primary, var(--nebula-gradient-primary));
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 0 16px rgba(77, 99, 255, 0.6);
   color: #FFFFFF;
 }
-
 .nebula-vod-body {
   padding: 14px;
   display: flex;
   flex-direction: column;
   flex: 1;
 }
-
 .nebula-vod-title {
-  font-size: 14px;
+  font-size: var(--sv-text-md);
   font-weight: 600;
   line-height: 1.4;
-  color: var(--nebula-text-main, #F3F5FC);
+  color: var(--nebula-text-main);
   margin: 0 0 8px 0;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
-
 .nebula-vod-footer {
   margin-top: auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  font-size: 12px;
-  color: var(--nebula-text-muted, #75839D);
+  font-size: var(--sv-text-xs);
+  color: var(--nebula-text-muted);
 }
-
 /* Section Header */
 .nebula-section-header {
   display: flex;
@@ -3368,30 +2090,16 @@ select:focus {
   justify-content: space-between;
   margin: 28px 0 16px 0;
 }
-
 .nebula-section-title {
   display: flex;
   align-items: center;
   gap: 10px;
-  font-size: 18px;
+  font-size: var(--sv-text-lg);
   font-weight: 700;
   color: #FFFFFF;
   margin: 0;
   letter-spacing: -0.3px;
 }
-
-.nebula-section-link {
-  font-size: 13px;
-  color: var(--nebula-accent-primary, #4D63FF);
-  text-decoration: none;
-  font-weight: 500;
-  transition: color 0.15s ease;
-}
-
-.nebula-section-link:hover {
-  color: var(--nebula-accent-highlight, #BB78FF);
-}
-
 /* Two-Column Home Grid: Main content + Community sidebar */
 .nebula-home-layout {
   display: grid;
@@ -3400,22 +2108,19 @@ select:focus {
   min-width: 0;
   gap: 28px;
 }
-
 @media (max-width: 1200px) {
   .nebula-home-layout {
     grid-template-columns: 1fr;
   }
 }
-
 /* Right Rail Widgets */
 .nebula-side-widget {
-  background: var(--nebula-bg-surface, #111A2B);
-  border: 1px solid var(--nebula-border, #26344F);
-  border-radius: 12px;
+  background: var(--nebula-bg-surface);
+  border: 1px solid var(--nebula-border);
+  border-radius: var(--nebula-radius-md);
   padding: 18px;
   margin-bottom: 20px;
 }
-
 .nebula-widget-head {
   display: flex;
   align-items: center;
@@ -3424,92 +2129,82 @@ select:focus {
   padding-bottom: 10px;
   border-bottom: 1px solid rgba(38, 52, 79, 0.6);
 }
-
 .nebula-widget-head h3 {
-  font-size: 14px;
+  font-size: var(--sv-text-md);
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   color: #FFFFFF;
   margin: 0;
 }
-
 .nebula-category-list {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
-
 .nebula-category-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 8px 12px;
-  background: var(--nebula-bg-card, #151F33);
-  border: 1px solid var(--nebula-border, #26344F);
-  border-radius: 8px;
+  background: var(--nebula-bg-card);
+  border: 1px solid var(--nebula-border);
+  border-radius: var(--nebula-radius-sm);
   text-decoration: none;
-  color: var(--nebula-text-main, #F3F5FC);
-  font-size: 13px;
-  transition: all 0.15s ease;
+  color: var(--nebula-text-main);
+  font-size: var(--sv-text-sm);
+  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
 }
-
 .nebula-category-item:hover {
-  background: var(--nebula-bg-active, #202C48);
-  border-color: var(--nebula-accent-primary, #4D63FF);
+  background: var(--nebula-bg-active);
+  border-color: var(--nebula-accent-primary);
   transform: translateX(2px);
 }
-
 .nebula-category-count {
   font-family: var(--ns-font-mono);
-  font-size: 11px;
-  color: #A2AEC8;
+  font-size: var(--sv-min-text);
+  color: var(--nebula-text-secondary);
   background: rgba(255, 255, 255, 0.08);
   padding: 2px 6px;
-  border-radius: 4px;
+  border-radius: var(--nebula-radius-xs);
 }
-
 /* Top Global Search */
 .ns-search-box {
   display: flex;
   align-items: center;
-  background: var(--nebula-bg-surface, #111A2B);
-  border: 1px solid var(--nebula-border, #26344F);
-  border-radius: 10px;
+  background: var(--nebula-bg-surface);
+  border: 1px solid var(--nebula-border);
+  border-radius: var(--nebula-radius-sm);
   padding: 6px 14px;
   width: 100%;
   max-width: 440px;
-  transition: all 0.2s ease;
+  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
 }
-
 .ns-search-box:focus-within {
-  border-color: var(--nebula-accent-primary, #4D63FF);
+  border-color: var(--nebula-accent-primary);
   box-shadow: 0 0 12px rgba(77, 99, 255, 0.35);
 }
-
 .ns-search-box input {
   background: transparent !important;
   border: none !important;
   color: #FFFFFF !important;
-  font-size: 13px;
+  font-size: var(--sv-text-sm);
   width: 100%;
-  outline: none !important;
   box-shadow: none !important;
   padding: 2px 8px;
 }
-
 .ns-search-box svg {
-  color: var(--nebula-text-muted, #75839D);
+  color: var(--nebula-text-muted);
   flex-shrink: 0;
 }
-
-
 /* Strict Protection: Never apply CRT filters or scanlines over video content! */
-video, #vodPlayer, .player-wrapper video, .twitch-embed-wrapper iframe {
+video,
+#vodPlayer,
+.player-wrapper video,
+.twitch-embed-wrapper iframe {
   filter: none !important;
   pointer-events: auto !important;
 }
-
 /* Reduced motion preference */
 @media (prefers-reduced-motion: reduce) {
   * {
@@ -3518,38 +2213,34 @@ video, #vodPlayer, .player-wrapper video, .twitch-embed-wrapper iframe {
     transition-duration: 0.001ms !important;
   }
 }
-
-
 /* =========================================================
    7. RESPONSIVE MOBILE & TABLET LAYOUTS
    ========================================================= */
 /* ==========================================================================
    MOBILE UI/UX OVERHAUL & RESPONSIVE HARDENING (< 768px)
    ========================================================================== */
-
 /* Hide Mobile Global Nav on Desktop */
 .mobile-global-nav {
   display: none !important;
 }
-
 @media (max-width: 768px) {
   :root {
     --ns-rail-width: 0px !important;
   }
-
   /* 1. Global Viewport & Container Containment */
-  html, body {
+  html,
+  body {
     overflow-x: hidden !important;
     max-width: 100vw !important;
     width: 100% !important;
     box-sizing: border-box !important;
     -webkit-text-size-adjust: 100% !important;
   }
-
-  *, *::before, *::after {
+  *,
+  *::before,
+  *::after {
     box-sizing: border-box !important;
   }
-
   /* 2. Desktop Rail Suppression & Content Margin Reset */
   .ns-command-rail,
   aside.ns-command-rail,
@@ -3565,7 +2256,6 @@ video, #vodPlayer, .player-wrapper video, .twitch-embed-wrapper iframe {
     pointer-events: none !important;
     overflow: hidden !important;
   }
-
   body.ns-platform > .main,
   body.ns-platform .main,
   body.ns-platform .ns-app-main,
@@ -3579,7 +2269,6 @@ video, #vodPlayer, .player-wrapper video, .twitch-embed-wrapper iframe {
     padding-right: 12px !important;
     box-sizing: border-box !important;
   }
-
   /* 3. Global Padding Protection against Fixed Bottom Bar Overlap */
   body,
   .ns-workspace-content,
@@ -3590,7 +2279,6 @@ video, #vodPlayer, .player-wrapper video, .twitch-embed-wrapper iframe {
     padding-bottom: calc(76px + env(safe-area-inset-bottom, 16px)) !important;
     box-sizing: border-box !important;
   }
-
   /* 4. Fluid Header & Search Box Stacking */
   .ns-workspace-header {
     padding: 12px 14px !important;
@@ -3607,31 +2295,27 @@ video, #vodPlayer, .player-wrapper video, .twitch-embed-wrapper iframe {
     background: rgba(7, 11, 20, 0.94) !important;
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
-    border-bottom: 1px solid var(--nebula-border, #26344F) !important;
+    border-bottom: 1px solid var(--nebula-border) !important;
     box-sizing: border-box !important;
   }
-
   .ns-header-title-block {
     flex: 1 1 auto !important;
     min-width: 0 !important;
   }
-
   .ns-header-title-block h1 {
-    font-size: 18px !important;
+    font-size: var(--sv-text-lg) !important;
     margin: 0 !important;
     overflow: hidden !important;
     text-overflow: ellipsis !important;
     white-space: nowrap !important;
   }
-
   .ns-header-title-block p {
-    font-size: 12px !important;
+    font-size: var(--sv-text-xs) !important;
     margin: 2px 0 0 0 !important;
     overflow: hidden !important;
     text-overflow: ellipsis !important;
     white-space: nowrap !important;
   }
-
   .ns-search-box {
     order: 3 !important;
     width: 100% !important;
@@ -3639,7 +2323,6 @@ video, #vodPlayer, .player-wrapper video, .twitch-embed-wrapper iframe {
     margin-top: 4px !important;
     box-sizing: border-box !important;
   }
-
   .ns-header-actions {
     flex: 1 1 100% !important;
     display: flex !important;
@@ -3647,7 +2330,6 @@ video, #vodPlayer, .player-wrapper video, .twitch-embed-wrapper iframe {
     gap: 8px !important;
     min-width: 0 !important;
   }
-
   /* 5. Mobile Global Navigation Bar (Pixel-Perfect, Zero-Overlap) */
   .mobile-global-nav {
     display: flex !important;
@@ -3661,7 +2343,7 @@ video, #vodPlayer, .player-wrapper video, .twitch-embed-wrapper iframe {
     background: rgba(7, 11, 20, 0.95) !important;
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
-    border-top: 1px solid var(--nebula-border, #26344F) !important;
+    border-top: 1px solid var(--nebula-border) !important;
     justify-content: space-around !important;
     align-items: center !important;
     z-index: 999999 !important;
@@ -3669,16 +2351,15 @@ video, #vodPlayer, .player-wrapper video, .twitch-embed-wrapper iframe {
     box-sizing: border-box !important;
     box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.6) !important;
   }
-
   .mobile-global-nav a,
   .mobile-global-nav button {
     background: transparent !important;
     border: none !important;
-    color: var(--nebula-text-muted, #75839D) !important;
+    color: var(--nebula-text-muted) !important;
     text-decoration: none !important;
-    font-size: 11px !important;
+    font-size: var(--sv-min-text) !important;
     font-weight: 600 !important;
-    font-family: var(--ns-font-sans, inherit) !important;
+    font-family: var(--ns-font-sans) !important;
     display: flex !important;
     flex-direction: column !important;
     align-items: center !important;
@@ -3690,23 +2371,20 @@ video, #vodPlayer, .player-wrapper video, .twitch-embed-wrapper iframe {
     padding: 4px 6px !important;
     margin: 0 !important;
     cursor: pointer !important;
-    border-radius: 8px !important;
+    border-radius: var(--nebula-radius-sm) !important;
     transition: color 80ms ease, transform 80ms ease !important;
     touch-action: manipulation !important;
     -webkit-tap-highlight-color: transparent !important;
     box-sizing: border-box !important;
   }
-
   .mobile-global-nav a:hover,
   .mobile-global-nav button:hover {
-    color: var(--nebula-text-primary, #F3F5FC) !important;
+    color: var(--nebula-text-primary, var(--nebula-text-main)) !important;
   }
-
   .mobile-global-nav a.active {
-    color: #4D63FF !important;
+    color: var(--nebula-accent-primary) !important;
     font-weight: 700 !important;
   }
-
   .mobile-global-nav svg {
     width: 22px !important;
     height: 22px !important;
@@ -3719,28 +2397,24 @@ video, #vodPlayer, .player-wrapper video, .twitch-embed-wrapper iframe {
     flex-shrink: 0 !important;
     display: block !important;
   }
-
   .mobile-global-nav a.active svg {
     transform: scale(1.1) !important;
-    stroke: #4D63FF !important;
+    stroke: var(--nebula-accent-primary) !important;
     filter: drop-shadow(0 0 6px rgba(77, 99, 255, 0.6)) !important;
   }
-
   .mobile-global-nav a:active,
   .mobile-global-nav button:active {
     transform: scale(0.92) !important;
     transition-duration: 0ms !important;
   }
-
   .mobile-global-nav span {
-    font-size: 11px !important;
+    font-size: var(--sv-min-text) !important;
     line-height: 1.2 !important;
     white-space: nowrap !important;
     overflow: hidden !important;
     text-overflow: ellipsis !important;
     max-width: 100% !important;
   }
-
   /* 6. Form Inputs & Select Auto-Zoom Suppression */
   input[type="text"],
   input[type="search"],
@@ -3750,40 +2424,28 @@ video, #vodPlayer, .player-wrapper video, .twitch-embed-wrapper iframe {
   input[type="url"],
   select,
   textarea {
-    font-size: 16px !important; /* 16px eliminates iOS zoom */
+    font-size: var(--sv-text-base) !important;
     max-width: 100% !important;
     box-sizing: border-box !important;
   }
-
   form {
     max-width: 100% !important;
     box-sizing: border-box !important;
   }
-
   /* 7. Grid & Flexbox Mobile Hardening */
   .ns-ops-grid,
   .nebula-home-layout,
-  .ns-video-grid,
-  .ns-streamer-grid,
-  .channels-grid,
-  .admin-grid,
-  .grid-2,
-  .grid-3,
-  .grid-4 {
+  .ns-video-grid {
     display: flex !important;
     flex-direction: column !important;
     width: 100% !important;
     max-width: 100% !important;
     gap: 16px !important;
   }
-
   /* 8. Card & Container Protection */
   .card,
   .ns-video-card,
-  .nebula-card,
   .vod-card,
-  .streamer-card,
-  .settings-card,
   .nebula-profile-card,
   .nebula-hero,
   .nebula-admin-box,
@@ -3794,27 +2456,18 @@ video, #vodPlayer, .player-wrapper video, .twitch-embed-wrapper iframe {
     box-sizing: border-box !important;
     overflow: hidden !important;
   }
-
   .nebula-profile-body {
-    flex-direction: column !important;
-    align-items: center !important;
-    text-align: center !important;
     padding: 16px !important;
     gap: 16px !important;
   }
-
   .nebula-profile-details {
-    flex-direction: column !important;
-    align-items: center !important;
     text-align: center !important;
     gap: 12px !important;
   }
-
   .nebula-profile-tags {
     justify-content: center !important;
     flex-wrap: wrap !important;
   }
-
   /* 9. VOD Player & Detail Panels (Stacking without side chat crushing) */
   body.page-vod .content,
   body.page-live .content,
@@ -3828,7 +2481,6 @@ video, #vodPlayer, .player-wrapper video, .twitch-embed-wrapper iframe {
     overflow-y: visible !important;
     gap: 16px !important;
   }
-
   body.page-vod .main-col,
   body.page-live .main-col,
   body.page-twitch-watch .main-col {
@@ -3836,7 +2488,6 @@ video, #vodPlayer, .player-wrapper video, .twitch-embed-wrapper iframe {
     max-width: 100% !important;
     min-width: 0 !important;
   }
-
   body.page-vod .player-wrapper,
   body.page-live .player-wrapper,
   body.page-twitch-watch .player-wrapper {
@@ -3845,7 +2496,6 @@ video, #vodPlayer, .player-wrapper video, .twitch-embed-wrapper iframe {
     aspect-ratio: 16 / 9 !important;
     height: auto !important;
   }
-
   body.page-vod .vod-details,
   body.page-live .vod-details,
   body.page-twitch-watch .vod-details {
@@ -3854,7 +2504,6 @@ video, #vodPlayer, .player-wrapper video, .twitch-embed-wrapper iframe {
     box-sizing: border-box !important;
     padding: 14px 16px !important;
   }
-
   body.page-vod .vod-file-actions,
   body.page-live .vod-file-actions {
     display: flex !important;
@@ -3863,7 +2512,6 @@ video, #vodPlayer, .player-wrapper video, .twitch-embed-wrapper iframe {
     max-width: 100% !important;
     width: 100% !important;
   }
-
   body.page-vod .chat-panel,
   body.page-live .chat-panel,
   body.page-twitch-watch .chat-panel {
@@ -3874,7 +2522,6 @@ video, #vodPlayer, .player-wrapper video, .twitch-embed-wrapper iframe {
     min-height: 350px !important;
     box-sizing: border-box !important;
   }
-
   /* 10. Login Modal Mobile Hardening */
   body.page-login .nebula-login-wrapper {
     padding: 16px 12px !important;
@@ -3882,33 +2529,26 @@ video, #vodPlayer, .player-wrapper video, .twitch-embed-wrapper iframe {
     max-width: 100% !important;
     box-sizing: border-box !important;
   }
-
   body.page-login .nebula-login-modal {
     padding: 28px 18px 24px !important;
     width: 100% !important;
     max-width: 100% !important;
     box-sizing: border-box !important;
-    border-radius: 16px !important;
+    border-radius: var(--nebula-radius-lg) !important;
   }
-
   /* 11. Text Truncation & Ellipsis Protection */
   .vod-title,
-  .streamer-title,
-  .card-title,
-  .video-title,
   .nebula-profile-name,
   .ns-video-card h3,
   .ns-video-card h4,
-  .nebula-vod-card h4 {
+  .nebula-vod-card :is(h3, h4) {
     overflow: hidden !important;
     text-overflow: ellipsis !important;
     white-space: nowrap !important;
     max-width: 100% !important;
   }
-
   /* 12. Tables & Code Blocks Horizontal Scrolling */
   table,
-  .table-responsive,
   pre,
   code {
     max-width: 100% !important;
@@ -3916,96 +2556,73 @@ video, #vodPlayer, .player-wrapper video, .twitch-embed-wrapper iframe {
     -webkit-overflow-scrolling: touch !important;
   }
 }
-
 /* =========================================================
    NEBULA LOGIN PORTAL STYLING
    ========================================================= */
 body.page-login {
-  background: var(--nebula-bg-root, #070B14) !important;
-  color: var(--nebula-text-main, #F3F5FC) !important;
+  background: var(--nebula-bg-root) !important;
+  color: var(--nebula-text-main) !important;
 }
-
 body.page-login .login-shell {
   max-width: 960px;
 }
-
 body.page-login .eyebrow {
-  color: var(--nebula-accent-highlight, #BB78FF) !important;
+  color: var(--nebula-accent-highlight) !important;
   font-weight: 700 !important;
   text-transform: uppercase;
   letter-spacing: 1px;
 }
-
 body.page-login h1 {
   color: #FFFFFF !important;
   text-shadow: 0 0 30px rgba(77, 99, 255, 0.4);
 }
-
 body.page-login .subtitle {
-  color: var(--nebula-text-secondary, #A2AEC8) !important;
+  color: var(--nebula-text-secondary) !important;
 }
-
 body.page-login .login-panel {
-  background: var(--nebula-bg-surface, #111A2B) !important;
-  border: 1px solid var(--nebula-border, #26344F) !important;
-  border-radius: 16px !important;
+  background: var(--nebula-bg-surface) !important;
+  border: 1px solid var(--nebula-border) !important;
+  border-radius: var(--nebula-radius-lg) !important;
   box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7), 0 0 24px rgba(77, 99, 255, 0.2) !important;
 }
-
 body.page-login .login-form label {
-  color: var(--nebula-text-secondary, #A2AEC8) !important;
+  color: var(--nebula-text-secondary) !important;
   font-weight: 600;
-  font-size: 12px;
+  font-size: var(--sv-text-xs);
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
-
 body.page-login input {
-  background: var(--nebula-bg-card, #151F33) !important;
-  border: 1px solid var(--nebula-border, #26344F) !important;
+  background: var(--nebula-bg-card) !important;
+  border: 1px solid var(--nebula-border) !important;
   color: #FFFFFF !important;
-  border-radius: 8px !important;
+  border-radius: var(--nebula-radius-sm) !important;
 }
-
 body.page-login input:focus {
-  border-color: var(--nebula-accent-primary, #4D63FF) !important;
+  border-color: var(--nebula-accent-primary) !important;
   box-shadow: 0 0 12px rgba(77, 99, 255, 0.4) !important;
 }
-
-body.page-login button#login-submit,
-body.page-login button[type="submit"] {
-  background: linear-gradient(135deg, #4D63FF 0%, #9365FF 100%) !important;
+body.page-login button:where(:not(.sv-btn))#login-submit,
+body.page-login button:where(:not(.sv-btn))[type="submit"] {
+  background: var(--nebula-gradient-primary) !important;
   color: #FFFFFF !important;
   font-weight: 700 !important;
   border: 1px solid rgba(255, 255, 255, 0.2) !important;
-  border-radius: 8px !important;
+  border-radius: var(--nebula-radius-sm) !important;
   box-shadow: 0 4px 20px rgba(77, 99, 255, 0.5) !important;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
-  transition: all 0.2s ease !important;
+  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease !important;
   cursor: pointer;
 }
-
-body.page-login button#login-submit:hover,
-body.page-login button[type="submit"]:hover {
+body.page-login button:where(:not(.sv-btn))#login-submit:hover,
+body.page-login button:where(:not(.sv-btn))[type="submit"]:hover {
   background: linear-gradient(135deg, #5B70FF 0%, #A276FF 100%) !important;
   box-shadow: 0 6px 28px rgba(77, 99, 255, 0.7), 0 0 16px rgba(187, 120, 255, 0.4) !important;
   transform: translateY(-1px);
 }
-
-body.page-login .login-register {
-  background: rgba(11, 18, 32, 0.6) !important;
-  border: 1px solid var(--nebula-border, #26344F) !important;
-  border-radius: 10px !important;
-}
-
-body.page-login .login-register-kicker {
-  color: var(--nebula-accent-highlight, #BB78FF) !important;
-  font-weight: 700 !important;
-}
 /* ==========================================================================
    NEBULA REBUILD V2 - CORE ENHANCEMENTS
    ========================================================================== */
-
 /* 1. Ghost Pseudo-Element Suppression on Command Rail */
 /* 1. Ghost Pseudo-Element & Icon Duplicate Suppression on Command Rail */
 .ns-command-rail *::before,
@@ -4016,12 +2633,8 @@ aside.ns-command-rail *::after,
 .ns-command-rail a::after,
 .ns-command-rail button::before,
 .ns-command-rail button::after,
-.ns-command-rail .nav-item::before,
-.ns-command-rail .nav-item::after,
 .ns-command-rail .ns-rail-item::before,
-.ns-command-rail .ns-rail-item::after,
-.ns-command-rail .logout-button::before,
-.ns-command-rail .logout-button::after {
+.ns-command-rail .ns-rail-item::after {
   content: none !important;
   display: none !important;
   width: 0 !important;
@@ -4030,13 +2643,12 @@ aside.ns-command-rail *::after,
   -webkit-mask: none !important;
   background: transparent !important;
 }
-
 /* 2. Enhanced Cinematic Hero Banner (Panel 01) */
 .nebula-hero {
   position: relative;
-  background: var(--nebula-bg-surface, #111A2B);
-  border: 1px solid var(--nebula-border, #26344F);
-  border-radius: 16px;
+  background: var(--nebula-bg-surface);
+  border: 1px solid var(--nebula-border);
+  border-radius: var(--nebula-radius-lg);
   padding: 28px 32px;
   margin-bottom: 24px;
   overflow: hidden;
@@ -4047,7 +2659,6 @@ aside.ns-command-rail *::after,
   gap: 32px;
   min-height: 260px;
 }
-
 .nebula-hero-backdrop {
   position: absolute;
   inset: 0;
@@ -4058,22 +2669,19 @@ aside.ns-command-rail *::after,
   z-index: 1;
   pointer-events: none;
 }
-
 .nebula-hero-overlay {
   position: absolute;
   inset: 0;
-  background: linear-gradient(90deg, #070B14 0%, rgba(7, 11, 20, 0.9) 45%, rgba(7, 11, 20, 0.4) 100%);
+  background: linear-gradient(90deg, var(--nebula-bg-root) 0%, rgba(7, 11, 20, 0.9) 45%, rgba(7, 11, 20, 0.4) 100%);
   z-index: 1;
   pointer-events: none;
 }
-
 .nebula-hero-content {
   position: relative;
   z-index: 2;
   flex: 1;
   max-width: 620px;
 }
-
 .nebula-hero-preview-col {
   position: relative;
   z-index: 2;
@@ -4081,24 +2689,21 @@ aside.ns-command-rail *::after,
   width: 360px;
   max-width: 42%;
 }
-
 .nebula-hero-preview-frame {
   position: relative;
   aspect-ratio: 16 / 9;
-  border-radius: 12px;
+  border-radius: var(--nebula-radius-md);
   overflow: hidden;
   border: 1px solid rgba(77, 99, 255, 0.45);
   box-shadow: 0 12px 32px rgba(0, 0, 0, 0.75), 0 0 20px rgba(77, 99, 255, 0.25);
-  background: #0B1220;
+  background: var(--nebula-bg-deep);
 }
-
 .nebula-hero-preview-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 }
-
 .nebula-hero-play-icon {
   position: absolute;
   top: 50%;
@@ -4116,29 +2721,25 @@ aside.ns-command-rail *::after,
   pointer-events: none;
   transition: transform 0.2s ease;
 }
-
 .nebula-hero-preview-frame:hover .nebula-hero-play-icon {
   transform: translate(-50%, -50%) scale(1.1);
 }
-
 /* 3. Streamer Profile (Panel 04) */
 .nebula-profile-card {
   position: relative;
-  background: var(--nebula-bg-surface, #111A2B);
-  border: 1px solid var(--nebula-border, #26344F);
-  border-radius: 16px;
+  background: var(--nebula-bg-surface);
+  border: 1px solid var(--nebula-border);
+  border-radius: var(--nebula-radius-lg);
   overflow: hidden;
   margin-bottom: 24px;
   box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
 }
-
 .nebula-profile-banner {
   height: 140px;
   background: linear-gradient(135deg, rgba(77, 99, 255, 0.35) 0%, rgba(147, 101, 255, 0.3) 50%, rgba(11, 18, 32, 0.95) 100%),
               radial-gradient(circle at 80% 20%, rgba(105, 201, 255, 0.25) 0%, transparent 65%);
   position: relative;
 }
-
 .nebula-profile-body {
   padding: 0 28px 24px;
   margin-top: -46px;
@@ -4150,66 +2751,59 @@ aside.ns-command-rail *::after,
   position: relative;
   z-index: 2;
 }
-
 .nebula-profile-avatar {
   width: 92px;
   height: 92px;
   border-radius: 50%;
-  border: 3px solid #9365FF;
+  border: 3px solid var(--nebula-accent-secondary);
   box-shadow: 0 0 24px rgba(147, 101, 255, 0.5);
-  background: #151F33;
+  background: var(--nebula-bg-card);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 32px;
+  font-size: var(--sv-text-4xl);
   font-weight: 800;
   color: #FFF;
   overflow: hidden;
   flex-shrink: 0;
 }
-
 .nebula-profile-details {
   display: flex;
   align-items: center;
   gap: 20px;
   flex-wrap: wrap;
 }
-
 .nebula-profile-name {
-  font-size: 26px;
+  font-size: var(--sv-text-2xl);
   font-weight: 700;
   color: #FFFFFF;
   margin: 0 0 6px 0;
   letter-spacing: -0.5px;
 }
-
 .nebula-profile-tags {
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: 13px;
-  color: var(--nebula-text-secondary, #A2AEC8);
+  font-size: var(--sv-text-sm);
+  color: var(--nebula-text-secondary);
 }
-
 .nebula-admin-box {
   background: rgba(11, 18, 32, 0.7);
-  border: 1px solid var(--nebula-border, #26344F);
-  border-radius: 12px;
+  border: 1px solid var(--nebula-border);
+  border-radius: var(--nebula-radius-md);
   padding: 16px 20px;
   margin-bottom: 24px;
 }
-
 .nebula-btn-danger {
   background: rgba(240, 68, 88, 0.15) !important;
-  color: #F04458 !important;
+  color: var(--nebula-status-live-text) !important;
   border: 1px solid rgba(240, 68, 88, 0.4) !important;
 }
 .nebula-btn-danger:hover {
   background: rgba(240, 68, 88, 0.3) !important;
-  border-color: #F04458 !important;
+  border-color: var(--nebula-status-live) !important;
   box-shadow: 0 0 12px rgba(240, 68, 88, 0.4) !important;
 }
-
 /* 4. VOD Player Fallback & Chat Initial State (Panel 03) */
 .vod-player-error-overlay {
   position: absolute;
@@ -4221,11 +2815,10 @@ aside.ns-command-rail *::after,
   justify-content: center;
   gap: 16px;
   z-index: 10;
-  color: #F3F5FC;
+  color: var(--nebula-text-main);
   text-align: center;
   padding: 24px;
 }
-
 .vod-chat-empty-state {
   display: flex;
   flex-direction: column;
@@ -4235,18 +2828,17 @@ aside.ns-command-rail *::after,
   min-height: 200px;
   padding: 32px 20px;
   text-align: center;
-  color: #75839D;
-  font-size: 13px;
+  color: var(--nebula-text-muted);
+  font-size: var(--sv-text-sm);
   line-height: 1.5;
 }
-
 /* 5. Centered NEBULA Login Portal (Panel 10) */
 .nebula-login-wrapper {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #070B14;
+  background: var(--nebula-bg-root);
   background-image: radial-gradient(circle at 50% 25%, rgba(147, 101, 255, 0.18) 0%, transparent 60%),
                     radial-gradient(circle at 80% 80%, rgba(77, 99, 255, 0.14) 0%, transparent 55%);
   padding: 24px;
@@ -4254,40 +2846,37 @@ aside.ns-command-rail *::after,
   position: relative;
   z-index: 10;
 }
-
 .nebula-login-modal {
   width: 100%;
   max-width: 440px;
   background: rgba(17, 26, 43, 0.9);
   backdrop-filter: none;
-  border: 1px solid var(--nebula-border, #26344F);
-  border-radius: 20px;
+  border: 1px solid var(--nebula-border);
+  border-radius: var(--nebula-radius-lg);
   padding: 40px 32px 32px;
   box-shadow: 0 24px 64px rgba(0, 0, 0, 0.8), 0 0 32px rgba(77, 99, 255, 0.15);
   text-align: center;
   position: relative;
   box-sizing: border-box;
 }
-
 .nebula-login-logo {
   width: 56px;
   height: 56px;
-  border-radius: 14px;
-  background: linear-gradient(135deg, #4D63FF 0%, #9365FF 100%);
+  border-radius: var(--nebula-radius-md);
+  background: var(--nebula-gradient-primary);
   box-shadow: 0 0 24px rgba(147, 101, 255, 0.5);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: 26px;
+  font-size: var(--sv-text-2xl);
   font-weight: 800;
   color: #FFF;
   margin-bottom: 14px;
 }
-
 /* Legacy `body.page-login h1` rules in style.css force 42–78px with !important;
    the card heading must stay inside the 440px login card. */
 body.page-login .nebula-login-h1 {
-  font-size: 28px !important;
+  font-size: var(--sv-text-3xl) !important;
   font-weight: 700 !important;
   line-height: 1.2 !important;
   color: #FFF !important;
@@ -4296,68 +2885,20 @@ body.page-login .nebula-login-h1 {
   text-shadow: none !important;
   overflow-wrap: anywhere;
 }
-
 body.page-login .nebula-login-h1::after {
   content: none !important;
 }
-
 .nebula-login-sub {
-  font-size: 13px;
-  color: var(--nebula-text-secondary, #A2AEC8);
+  font-size: var(--sv-text-sm);
+  color: var(--nebula-text-secondary);
   margin: 0 0 24px 0;
   line-height: 1.45;
 }
-
-.nebula-btn-discord {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  padding: 13px 20px;
-  background: #5865F2;
-  color: #FFFFFF !important;
-  font-size: 15px;
-  font-weight: 600;
-  border-radius: 10px;
-  text-decoration: none;
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  transition: all 0.2s ease;
-  box-shadow: 0 6px 20px rgba(88, 101, 242, 0.35);
-  cursor: pointer;
-  box-sizing: border-box;
-}
-
-.nebula-btn-discord:hover {
-  background: #4752C4;
-  transform: translateY(-2px);
-  box-shadow: 0 8px 25px rgba(88, 101, 242, 0.5);
-}
-
-.nebula-login-sep {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin: 22px 0 18px;
-  color: #75839D;
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-.nebula-login-sep::before,
-.nebula-login-sep::after {
-  content: "";
-  flex: 1;
-  height: 1px;
-  background: #26344F;
-}
-
 .nebula-login-footer-tag {
   margin-top: 24px;
-  font-size: 12px;
-  color: #75839D;
+  font-size: var(--sv-text-xs);
+  color: var(--nebula-text-muted);
 }
-
 /* 6. Mobile Optimization (Panel 07) */
 @media (max-width: 768px) {
   .nebula-hero {
@@ -4380,14 +2921,12 @@ body.page-login .nebula-login-h1::after {
     align-items: center !important;
   }
 }
-
-.vod-player-error-overlay[hidden] { display: none !important; }
-
-
+.vod-player-error-overlay[hidden] {
+  display: none !important;
+}
 /* ==========================================================================
    ULTRA-LOW-LATENCY & INSTANT-FEEDBACK ENGINE (< 16ms Reaction)
    ========================================================================== */
-
 /* 1. Global Touch & Tap Latency Elimination */
 button,
 input[type="button"],
@@ -4400,17 +2939,13 @@ input[type="reset"],
 .btn-danger,
 .ns-btn,
 .nebula-btn,
-.action-btn,
 .tab-btn,
 a.button,
-.nav-btn,
 .nebula-streamer-card,
 .nebula-vod-card,
 .vod-card,
-.nebula-card,
 .sidebar-link,
-.channel-item,
-.chip-filter {
+.channel-item {
   touch-action: manipulation;
   -webkit-tap-highlight-color: transparent;
   will-change: transform;
@@ -4421,7 +2956,6 @@ a.button,
               box-shadow 80ms ease,
               filter 80ms ease;
 }
-
 /* 2. Instant Zero-Latency Active States (< 16ms Frame Time) */
 button:active,
 input[type="button"]:active,
@@ -4433,49 +2967,37 @@ input[type="submit"]:active,
 .btn-danger:active,
 .ns-btn:active,
 .nebula-btn:active,
-.action-btn:active,
 .tab-btn:active,
 a.button:active,
-.nav-btn:active,
 .sidebar-link:active,
-.chip-filter:active,
 .is-active-press {
   transform: scale(0.97) translateY(1px) !important;
   transition-duration: 0ms !important;
   filter: brightness(1.15) !important;
 }
-
 /* Card Press Instant Feedback */
 .nebula-streamer-card:active,
 .nebula-vod-card:active,
 .vod-card:active,
-.nebula-card:active,
 .card:active {
   transform: scale(0.985) translateY(1px) !important;
   transition-duration: 0ms !important;
   filter: brightness(1.08) !important;
 }
-
 /* GPU Rendering Hint for Backdrop Filters */
-.nebula-glass-card,
 .nebula-profile-card,
-.nebula-sidebar,
 .ns-workspace-header {
   transform: translateZ(0);
   backface-visibility: hidden;
 }
-
-
 /* Direct In-Place Interaction for Banner and Avatar */
 .nebula-profile-banner.is-editable {
   cursor: pointer;
   transition: filter 0.15s ease;
 }
-
 .nebula-profile-banner.is-editable:hover {
   filter: brightness(1.08);
 }
-
 .nebula-banner-edit-badge {
   position: absolute;
   top: 14px;
@@ -4484,36 +3006,32 @@ a.button:active,
   border: 1px solid rgba(187, 120, 255, 0.5);
   backdrop-filter: none;
   color: #FFF;
-  font-size: 12px;
+  font-size: var(--sv-text-xs);
   font-weight: 700;
   padding: 6px 14px;
-  border-radius: 9999px;
+  border-radius: var(--nebula-radius-full);
   display: flex;
   align-items: center;
   gap: 6px;
-  transition: all 0.15s ease;
+  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
   z-index: 5;
   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
 }
-
 .nebula-profile-banner.is-editable:hover .nebula-banner-edit-badge {
   background: rgba(187, 120, 255, 0.35);
-  border-color: #BB78FF;
+  border-color: var(--nebula-accent-highlight);
   box-shadow: 0 0 16px rgba(187, 120, 255, 0.55);
   transform: translateY(-1px);
 }
-
 .nebula-profile-avatar.is-editable {
   cursor: pointer;
   position: relative;
   transition: transform 0.15s ease, box-shadow 0.15s ease;
 }
-
 .nebula-profile-avatar.is-editable:hover {
   transform: scale(1.04);
   box-shadow: 0 0 28px rgba(187, 120, 255, 0.75);
 }
-
 .nebula-avatar-edit-overlay {
   position: absolute;
   inset: 0;
@@ -4530,11 +3048,9 @@ a.button:active,
   transition: opacity 0.15s ease;
   z-index: 4;
 }
-
 .nebula-profile-avatar.is-editable:hover .nebula-avatar-edit-overlay {
   opacity: 1;
 }
-
 /* Modal Dialogs */
 .nebula-modal-backdrop {
   position: fixed;
@@ -4547,43 +3063,33 @@ a.button:active,
   justify-content: center;
   padding: 16px;
 }
-
 .nebula-modal-card {
   width: 100%;
   max-width: 520px;
-  background: var(--nebula-bg-surface, #111A2B);
-  border: 1px solid var(--nebula-border, #26344F);
-  border-radius: 16px;
+  background: var(--nebula-bg-surface);
+  border: 1px solid var(--nebula-border);
+  border-radius: var(--nebula-radius-lg);
   box-shadow: 0 24px 64px rgba(0, 0, 0, 0.8), 0 0 32px rgba(187, 120, 255, 0.15);
   padding: 24px;
   position: relative;
   animation: nebulaModalFadeIn 0.15s ease;
 }
-
 @keyframes nebulaModalFadeIn {
   from { opacity: 0; transform: scale(0.96); }
   to { opacity: 1; transform: scale(1); }
 }
-
-
 /* === NS-PERF-AND-PARITY-2026 === */
-html, body.ns-platform {
+html,
+body.ns-platform {
   overflow-x: hidden !important;
   max-width: 100vw !important;
 }
-
-.ns-app-shell {
-  max-width: 100vw !important;
-  overflow-x: hidden !important;
-}
-
 .ns-app-main {
   min-width: 0 !important;
   max-width: calc(100vw - var(--ns-rail-width, 0px)) !important;
   overflow-x: hidden !important;
   box-sizing: border-box !important;
 }
-
 .ns-workspace-content,
 .nebula-home-layout,
 .nebula-main-col,
@@ -4592,25 +3098,21 @@ html, body.ns-platform {
   max-width: 100% !important;
   box-sizing: border-box !important;
 }
-
 details.streamer-menu:not([open]) > .streamer-menu-popover {
   display: none !important;
 }
 details.streamer-menu[open] > .streamer-menu-popover {
   display: flex !important;
 }
-
 body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-facts dt {
   text-transform: none !important;
 }
-
 @media (max-width: 1024px) {
   .ns-app-main {
     max-width: 100vw !important;
     margin-left: 0 !important;
   }
 }
-
 /* Global Dialog/Modal Reachability (PC WebUI & PC App 1280x720 / 1366x768) */
 .nebula-modal-card,
 .rbac-modal,
@@ -4621,17 +3123,14 @@ body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod
   overflow-y: auto !important;
   box-sizing: border-box !important;
 }
-
 /* Mobile-UI Parity with TV View (Breakpoints <= 768px & .is-mobile-view) */
 @media (max-width: 768px) {
   .ns-command-rail,
-  .ns-top-bar,
   .nebula-page-title,
   .nebula-hero-play-icon,
   .nebula-empty-live-banner,
   .nebula-vod-play-overlay,
   .nebula-side-rail,
-  .vod-header-titles .kicker-type,
   .vod-description,
   .mobile-vod-description,
   #btnAdminMetaToggle,
@@ -4649,7 +3148,6 @@ body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod
     display: none !important;
   }
 }
-
 /* Compact Side-Rail Streamer Rows (Overrides legacy style.css 4-column grid) */
 body.page-index .nebula-side-rail .ns-compact-streamer-list {
   display: flex !important;
@@ -4666,7 +3164,7 @@ body.page-index .nebula-side-rail .streamer-row {
   padding: 0 10px !important;
   gap: 8px !important;
   border: 1px solid rgba(38, 52, 79, 0.55) !important;
-  border-radius: 8px !important;
+  border-radius: var(--nebula-radius-sm) !important;
   background: rgba(11, 18, 32, 0.55) !important;
   width: 100% !important;
   max-width: 100% !important;
@@ -4679,7 +3177,7 @@ body.page-index .nebula-side-rail .streamer-row:hover {
 }
 body.page-index .nebula-side-rail .ns-compact-streamer-link {
   color: #F3F6FF !important;
-  font-size: 12px !important;
+  font-size: var(--sv-text-xs) !important;
   font-weight: 600 !important;
   text-decoration: none !important;
   overflow: hidden !important;
@@ -4701,9 +3199,9 @@ body.page-index .nebula-side-rail .streamer-menu summary {
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
-  border-radius: 6px !important;
-  color: #A2AEC8 !important;
-  font-size: 14px !important;
+  border-radius: var(--nebula-radius-xs) !important;
+  color: var(--nebula-text-secondary) !important;
+  font-size: var(--sv-text-md) !important;
   cursor: pointer !important;
   user-select: none !important;
   list-style: none !important;
@@ -4728,12 +3226,11 @@ body.page-index .nebula-side-rail details.streamer-menu[open] > .streamer-menu-p
   min-width: 140px !important;
   max-width: 180px !important;
   background: #0E1626 !important;
-  border: 1px solid #26344F !important;
-  border-radius: 8px !important;
+  border: 1px solid var(--nebula-border) !important;
+  border-radius: var(--nebula-radius-sm) !important;
   padding: 5px !important;
   box-shadow: 0 10px 24px rgba(0, 0, 0, 0.75) !important;
 }
-
 body.page-index .nebula-side-rail .nebula-side-widget {
   overflow: visible !important;
   position: relative !important;
@@ -4747,7 +3244,6 @@ body.page-index .nebula-side-rail .streamer-row {
 body.page-index .nebula-side-rail .streamer-row:has(.streamer-menu[open]) {
   z-index: 1500 !important;
 }
-
 /* =========================================================
    NEBULA PAGINATION (SEITEN-NAVIGATION) - ALL VIEWPORTS
    ========================================================= */
@@ -4762,7 +3258,7 @@ body.page-index .nebula-side-rail .streamer-row:has(.streamer-menu[open]) {
   margin: 20px 0 !important;
   background: rgba(17, 26, 43, 0.85) !important;
   border: 1px solid rgba(38, 52, 79, 0.85) !important;
-  border-radius: 12px !important;
+  border-radius: var(--nebula-radius-md) !important;
   box-sizing: border-box !important;
   width: 100% !important;
   max-width: 100% !important;
@@ -4772,8 +3268,8 @@ body.page-index .nebula-side-rail .streamer-row:has(.streamer-menu[open]) {
   margin: 0 0 18px 0 !important;
 }
 .ns-pagination-info {
-  font-size: 13px !important;
-  color: #A2AEC8 !important;
+  font-size: var(--sv-text-sm) !important;
+  color: var(--nebula-text-secondary) !important;
   white-space: nowrap !important;
 }
 .ns-pagination-info strong {
@@ -4800,11 +3296,11 @@ body.page-mobile-streamer .ns-pagination .pagination-page {
   min-width: 36px !important;
   height: 34px !important;
   padding: 0 11px !important;
-  border-radius: 8px !important;
+  border-radius: var(--nebula-radius-sm) !important;
   background: rgba(11, 18, 32, 0.85) !important;
-  border: 1px solid #26344F !important;
+  border: 1px solid var(--nebula-border) !important;
   color: #D2DCF0 !important;
-  font-size: 13px !important;
+  font-size: var(--sv-text-sm) !important;
   font-weight: 600 !important;
   text-decoration: none !important;
   transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease !important;
@@ -4816,23 +3312,23 @@ body.page-streamer .ns-pagination .pagination-page:hover,
 body.page-streamer .ns-pagination .pagination-nav:hover,
 body.page-mobile-streamer .ns-pagination .pagination-page:hover {
   background: rgba(77, 99, 255, 0.22) !important;
-  border-color: #4D63FF !important;
+  border-color: var(--nebula-accent-primary) !important;
   color: #FFFFFF !important;
 }
 .ns-page-btn.is-active,
 .ns-page-btn.is-current,
 body.page-streamer .ns-pagination .pagination-page.is-current,
 body.page-mobile-streamer .ns-pagination .pagination-page.is-current {
-  background: linear-gradient(135deg, #4D63FF 0%, #7C4DFF 100%) !important;
-  border-color: #69C9FF !important;
+  background: linear-gradient(135deg, var(--nebula-accent-primary) 0%, #7C4DFF 100%) !important;
+  border-color: var(--nebula-accent-cyan) !important;
   color: #FFFFFF !important;
   box-shadow: 0 2px 10px rgba(77, 99, 255, 0.4) !important;
   cursor: default !important;
 }
 .ns-page-ellipsis {
-  color: #75839D !important;
+  color: var(--nebula-text-muted) !important;
   padding: 0 4px !important;
-  font-size: 13px !important;
+  font-size: var(--sv-text-sm) !important;
 }
 .ns-page-jump {
   display: inline-flex !important;
@@ -4855,44 +3351,37 @@ body.page-mobile-streamer .ns-pagination .pagination-page.is-current {
     justify-content: center !important;
   }
 }
-
 /* Dashboard Realtime VOD Sync Glow */
 @keyframes vodCardPulse {
   0% { transform: scale(0.97); box-shadow: 0 0 0 rgba(77, 99, 255, 0.6); }
   50% { transform: scale(1.02); box-shadow: 0 0 24px rgba(77, 99, 255, 0.45); }
   100% { transform: scale(1); box-shadow: none; }
 }
-
 .ns-vod-fresh-enter {
   animation: vodCardPulse 1.2s ease-out;
   border-color: rgba(77, 99, 255, 0.7) !important;
 }
-
-
 /* Language switcher (login page, sidebar footer) */
 .ns-lang-switch {
   display: flex;
   justify-content: center;
   margin: 0;
 }
-
 .ns-lang-switch select {
   min-height: 44px;
   max-width: 100%;
   padding: 0 32px 0 12px;
-  border: 1px solid var(--nebula-border, #26344F);
-  border-radius: 8px;
+  border: 1px solid var(--nebula-border);
+  border-radius: var(--nebula-radius-sm);
   background: rgba(11, 18, 32, 0.8);
-  color: var(--nebula-text-secondary, #A2AEC8);
-  font-size: 13px;
+  color: var(--nebula-text-secondary);
+  font-size: var(--sv-text-sm);
   cursor: pointer;
 }
-
 .ns-lang-switch select:focus-visible {
-  outline: 2px solid #4D63FF;
+  outline: 2px solid var(--nebula-accent-primary);
   outline-offset: 2px;
 }
-
 body.page-login .nebula-login-lang {
   margin-top: 16px;
-}
\ No newline at end of file
+}
diff --git a/WEBUI/static/css/ui-polish.css b/WEBUI/static/css/ui-polish.css
deleted file mode 100644
index 5c84ad1..0000000
--- a/WEBUI/static/css/ui-polish.css
+++ /dev/null
@@ -1,212 +0,0 @@
-/* StreamVault — safe visual polish (tokens + grid + action tools).
- * Loaded last via style.css append. No JS/ID/route changes.
- */
-
-:root {
-  --tube-bg: #050505;
-  --tube-surface: #121212;
-  --tube-surface-2: #1a1a1a;
-  --tube-surface-3: #242424;
-  --tube-line: #2e2e2e;
-  --tube-line-soft: #222222;
-  --tube-text: #f5f5f5;
-  --tube-text-2: #cfcfcf;
-  --tube-muted: #8f8f8f;
-  --tube-accent: #f2e58d;
-  --tube-accent-hover: #fff3a9;
-  --tube-live: #ff5c66;
-  --tube-success: #6ed9a2;
-  --tube-radius: 10px;
-  --tube-focus: 0 0 0 3px rgba(242, 229, 141, 0.28);
-  --radius: var(--tube-radius);
-  --text-muted: var(--tube-muted);
-  --muted: var(--tube-muted);
-  --border: var(--tube-line);
-  --primary: var(--tube-accent);
-  --accent: var(--tube-accent);
-}
-
-/* --- Video grid / cards (streamer + search + index-like grids) --- */
-body.page-streamer .video-grid,
-body.page-search .video-grid,
-body.page-index .video-grid {
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
-  gap: 16px 12px !important;
-}
-
-body.page-streamer .video-card,
-body.page-search .video-card {
-  border-radius: var(--tube-radius) !important;
-  transition: background-color 0.15s ease, transform 0.15s ease !important;
-}
-
-body.page-streamer .video-card:hover,
-body.page-search .video-card:hover {
-  background: var(--tube-surface) !important;
-}
-
-body.page-streamer .thumb-wrap,
-body.page-search .thumb-wrap,
-.video-card .thumb-wrap,
-.vod-card .thumb-wrap {
-  aspect-ratio: 16 / 9 !important;
-  border-radius: 10px !important;
-  border: 1px solid var(--tube-line-soft) !important;
-  background: #0a0a0a !important;
-  overflow: hidden !important;
-}
-
-body.page-streamer .thumb-img,
-body.page-search .thumb-img,
-.video-card .thumb-img {
-  transition: transform 0.2s ease !important;
-}
-
-@media (hover: hover) and (pointer: fine) {
-  body.page-streamer .video-card:hover .thumb-img,
-  body.page-search .video-card:hover .thumb-img {
-    transform: scale(1.02) !important;
-  }
-}
-
-body.page-streamer .video-title,
-body.page-search .video-title {
-  color: var(--tube-text) !important;
-  font-size: 13px !important;
-  font-weight: 650 !important;
-  line-height: 1.35 !important;
-}
-
-body.page-streamer .card-body,
-body.page-search .card-body {
-  padding: 10px 2px 2px !important;
-}
-
-body.page-streamer .video-meta,
-body.page-search .video-meta,
-body.page-streamer .meta,
-body.page-search .meta {
-  color: var(--tube-muted) !important;
-  font-size: 12px !important;
-}
-
-/* --- Action tool strip (Clip / Zuschneiden / …) --- */
-body:is(.page-vod, .page-live, .page-twitch-watch) .vod-file-actions {
-  display: flex !important;
-  flex-wrap: wrap !important;
-  align-items: center !important;
-  gap: 6px !important;
-}
-
-body:is(.page-vod, .page-live, .page-twitch-watch) .vod-inline-tool {
-  min-height: 34px !important;
-  padding: 0 12px !important;
-  display: inline-flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  gap: 6px !important;
-  border: 1px solid var(--tube-line) !important;
-  border-radius: 8px !important;
-  color: var(--tube-text-2) !important;
-  background: var(--tube-surface-2) !important;
-  font-size: 12px !important;
-  font-weight: 700 !important;
-  letter-spacing: 0.01em !important;
-  line-height: 1 !important;
-  text-decoration: none !important;
-  cursor: pointer !important;
-  box-shadow: none !important;
-  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease !important;
-}
-
-body:is(.page-vod, .page-live, .page-twitch-watch) .vod-inline-tool::after {
-  display: none !important;
-}
-
-body:is(.page-vod, .page-live, .page-twitch-watch) .vod-inline-tool:hover {
-  color: var(--tube-text) !important;
-  border-color: #3f3f3f !important;
-  background: var(--tube-surface-3) !important;
-  transform: none !important;
-}
-
-body:is(.page-vod, .page-live, .page-twitch-watch) .vod-inline-tool:focus-visible {
-  outline: none !important;
-  box-shadow: var(--tube-focus) !important;
-}
-
-/* Primary clip actions stand out slightly */
-body:is(.page-vod, .page-live, .page-twitch-watch) #btnInstantClip,
-body:is(.page-vod, .page-live, .page-twitch-watch) #btnOpenEditor {
-  color: #161616 !important;
-  border-color: rgba(242, 229, 141, 0.55) !important;
-  background: var(--tube-accent) !important;
-}
-
-body:is(.page-vod, .page-live, .page-twitch-watch) #btnInstantClip:hover,
-body:is(.page-vod, .page-live, .page-twitch-watch) #btnOpenEditor:hover {
-  color: #111 !important;
-  border-color: rgba(255, 243, 169, 0.75) !important;
-  background: var(--tube-accent-hover) !important;
-}
-
-body:is(.page-vod, .page-live, .page-twitch-watch) .vod-inline-tool-warning {
-  color: #ffe082 !important;
-  border-color: rgba(255, 224, 130, 0.28) !important;
-  background: rgba(255, 224, 130, 0.08) !important;
-}
-
-/* --- Mobile streamer cards: align radius/contrast --- */
-body.page-mobile-streamer .video-card {
-  border-radius: 10px !important;
-  border-color: var(--tube-line) !important;
-  background: var(--tube-surface) !important;
-}
-
-body.page-mobile-streamer .thumb-area {
-  aspect-ratio: 16 / 9 !important;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  body.page-streamer .video-card,
-  body.page-search .video-card,
-  body.page-streamer .thumb-img,
-  body.page-search .thumb-img,
-  body:is(.page-vod, .page-live, .page-twitch-watch) .vod-inline-tool {
-    transition: none !important;
-  }
-
-  body.page-streamer .video-card:hover .thumb-img,
-  body.page-search .video-card:hover .thumb-img {
-    transform: none !important;
-  }
-}
-
-/* --- Mobile Player Info Box (similar to desktop .vod-details) ---
- * Canonical rules live in style.css (page-twitch-watch-mobile). Kept here as mirror. */
-body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details {
-  flex: 0 0 auto;
-  padding: 10px 12px 12px;
-  background: var(--tube-surface, #0e0e10);
-  border-bottom: 1px solid var(--tube-line, #27272a);
-}
-
-body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-display-title {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 700;
-  line-height: 1.25;
-  color: var(--tube-text, #f5f5f5);
-}
-
-body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-facts div {
-  display: flex;
-  flex-direction: row;
-  align-items: baseline;
-  gap: 6px;
-}
-
-body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-facts dt,
-body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-facts dd {
-  margin: 0;
-}
diff --git a/WEBUI/static/dashboard_live.js b/WEBUI/static/dashboard_live.js
index 868ce63..1227cc9 100644
--- a/WEBUI/static/dashboard_live.js
+++ b/WEBUI/static/dashboard_live.js
@@ -45,7 +45,7 @@
         playOverlay +
       '</div>' +
       '<div class="nebula-vod-body">' +
-        '<h4 class="nebula-vod-title">' + escapeHtml(vod.title || vod.name) + '</h4>' +
+        '<h3 class="nebula-vod-title">' + escapeHtml(vod.title || vod.name) + '</h3>' +
         '<div class="nebula-vod-footer">' +
           '<span>' + escapeHtml(vod.category || "VOD") + '</span>' +
           '<span>' + escapeHtml(vod.date_str || "") + '</span>' +
@@ -57,23 +57,23 @@
   function renderMobileCard(vod, isFresh) {
     var thumbHtml = vod.thumb_url
       ? '<img src="' + escapeHtml(vod.thumb_url) + '" loading="lazy" decoding="async" alt="' + escapeHtml(vod.title || vod.name) + '" style="width: 100%; height: 100%; object-fit: cover;">'
-      : '<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #A2AEC8; font-weight: 700;">VOD</div>';
+      : '<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: var(--sv-text-xs); color: var(--nebula-text-secondary); font-weight: 700;">VOD</div>';
 
     var durHtml = vod.duration_str
-      ? '<span style="position: absolute; bottom: 4px; right: 4px; background: rgba(0,0,0,0.85); color: #FFF; font-size: 10px; padding: 1px 4px; border-radius: 3px; font-family: var(--ns-font-mono);">' + escapeHtml(vod.duration_str) + '</span>'
+      ? '<span style="position: absolute; bottom: 4px; right: 4px; background: var(--nebula-scrim); color: var(--nebula-text-main); font-size: var(--sv-text-xs); padding: 1px 4px; border-radius: 3px; font-family: var(--ns-font-mono);">' + escapeHtml(vod.duration_str) + '</span>'
       : '';
 
-    var freshBorder = isFresh ? 'border-color: #4D63FF; animation: vodCardPulse 1.2s ease-out;' : '';
+    var freshBorder = isFresh ? 'border-color: var(--nebula-accent-primary); animation: vodCardPulse 1.2s ease-out;' : '';
 
-    return '<a href="' + escapeHtml(vod.url) + '" data-vod-name="' + escapeHtml(vod.name) + '" style="display: flex; gap: 12px; background: var(--nebula-bg-surface, #111A2B); border: 1px solid var(--nebula-border, #26344F); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; padding: 10px; box-sizing: border-box; ' + freshBorder + '">' +
-      '<div style="position: relative; width: 120px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #0B1220; flex-shrink: 0;">' +
+    return '<a href="' + escapeHtml(vod.url) + '" data-vod-name="' + escapeHtml(vod.name) + '" style="display: flex; gap: 12px; background: var(--nebula-bg-surface); border: 1px solid var(--nebula-border); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; padding: 10px; box-sizing: border-box; ' + freshBorder + '">' +
+      '<div style="position: relative; width: 120px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--nebula-bg-deep); flex-shrink: 0;">' +
         thumbHtml +
         durHtml +
       '</div>' +
       '<div style="flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center;">' +
-        '<h4 style="font-size: 13px; font-weight: 600; color: #FFF; margin: 0 0 4px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">' + escapeHtml(vod.title || vod.name) + '</h4>' +
-        '<div style="font-size: 11px; color: #BB78FF; margin-bottom: 2px;">' + escapeHtml(vod.streamer_name) + '</div>' +
-        '<div style="font-size: 10px; color: #75839D;">' + escapeHtml(vod.date_str || '') + '</div>' +
+        '<h3 style="font-size: var(--sv-text-sm); font-weight: 600; color: var(--nebula-text-main); margin: 0 0 4px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">' + escapeHtml(vod.title || vod.name) + '</h3>' +
+        '<div style="font-size: var(--sv-text-xs); color: var(--nebula-accent-highlight); margin-bottom: 2px;">' + escapeHtml(vod.streamer_name) + '</div>' +
+        '<div style="font-size: var(--sv-text-xs); color: var(--nebula-text-muted);">' + escapeHtml(vod.date_str || '') + '</div>' +
       '</div>' +
     '</a>';
   }
diff --git a/WEBUI/static/overlay_common.js b/WEBUI/static/overlay_common.js
new file mode 100644
index 0000000..495a741
--- /dev/null
+++ b/WEBUI/static/overlay_common.js
@@ -0,0 +1,137 @@
+/* Shared helpers for the OBS overlays (tts_overlay.js, alerts_overlay.js).
+ *
+ * - readToken(): token from #token= (preferred, never sent to the server) or a legacy
+ *   ?token=; a query token is moved into the fragment with history.replaceState.
+ * - createAudio(): <audio src> cannot send headers, so audio is fetched with the overlay
+ *   token header and played from a blob URL that is revoked after playback.
+ * - createPoller(): polls a task; 401 stops polling, errors back off exponentially.
+ *
+ * Plain functions without DOM access at load time, so tests can require() this file in node.
+ */
+(function (root) {
+  "use strict";
+
+  const QUERY_TOKEN_WARNING =
+    "[overlay] ?token= in the URL reaches server and proxy logs; the address was rewritten to #token=. " +
+    "Use the #token= URL in OBS.";
+
+  /**
+   * @param {string} href  full URL of the overlay page
+   * @returns {{token: string, fromQuery: boolean, cleanUrl: string, params: URLSearchParams}}
+   *   cleanUrl: same URL with the token moved from the query into the fragment
+   *   params:   query and fragment parameters merged (fragment wins), token removed
+   */
+  function parseToken(href) {
+    const url = new URL(href);
+    const hash = new URLSearchParams(url.hash.replace(/^#/, ""));
+    const query = url.searchParams;
+    let token = (hash.get("token") || "").trim();
+    let fromQuery = false;
+    if (!token && (query.get("token") || "").trim()) {
+      token = query.get("token").trim();
+      fromQuery = true;
+    }
+    if (query.has("token")) {
+      query.delete("token");
+      if (token) hash.set("token", token);
+    }
+    const fragment = hash.toString();
+    const cleanUrl = url.origin + url.pathname + (query.toString() ? "?" + query.toString() : "") +
+      (fragment ? "#" + fragment : "");
+    const params = new URLSearchParams(query);
+    hash.forEach(function (value, key) { if (key !== "token") params.set(key, value); });
+    params.delete("token");
+    return { token: token, fromQuery: fromQuery, cleanUrl: cleanUrl, params: params };
+  }
+
+  /** Browser side of parseToken(): rewrites the visible URL and warns once about ?token=. */
+  function readToken() {
+    const parsed = parseToken(root.location.href);
+    if (parsed.cleanUrl !== root.location.href && root.history && root.history.replaceState) {
+      root.history.replaceState(null, "", parsed.cleanUrl);
+    }
+    if (parsed.fromQuery) root.console.warn(QUERY_TOKEN_WARNING);
+    return parsed;
+  }
+
+  function createAudio(player, headers) {
+    let objectUrl = null;
+
+    function release() {
+      if (objectUrl) {
+        URL.revokeObjectURL(objectUrl);
+        objectUrl = null;
+      }
+    }
+
+    async function load(audioUrl) {
+      const u = new URL(audioUrl, root.location.origin);
+      u.searchParams.delete("token");
+      const res = await root.fetch(u.pathname + u.search, { headers: headers });
+      if (!res.ok) throw new Error("audio http " + res.status + " for " + u.pathname);
+      release();
+      objectUrl = URL.createObjectURL(await res.blob());
+      player.src = objectUrl;
+    }
+
+    return { load: load, release: release };
+  }
+
+  /**
+   * @param {() => Promise<"ok"|"unauthorized"|"error">} task
+   * @param {{interval: number, maxInterval?: number, onUnauthorized?: Function,
+   *          schedule?: Function, cancel?: Function, label?: string}} opts
+   */
+  function createPoller(task, opts) {
+    const base = opts.interval;
+    const max = opts.maxInterval || 30000;
+    const schedule = opts.schedule || function (fn, ms) { return setTimeout(fn, ms); };
+    const cancel = opts.cancel || function (id) { clearTimeout(id); };
+    let delay = base;
+    let timer = null;
+    let stopped = true;
+    let running = false;
+
+    async function run() {
+      if (stopped || running) return;
+      running = true;
+      let result;
+      try {
+        result = await task();
+      } catch (e) {
+        root.console.error("[overlay] " + (opts.label || "poll") + " failed", e);
+        result = "error";
+      }
+      running = false;
+      if (stopped) return;
+      if (result === "unauthorized") {
+        stopped = true;
+        if (opts.onUnauthorized) opts.onUnauthorized();
+        return;
+      }
+      delay = result === "error" ? Math.min(delay * 2, max) : base;
+      timer = schedule(run, delay);
+    }
+
+    return {
+      start: function () { stopped = false; run(); },
+      stop: function () { stopped = true; if (timer !== null) cancel(timer); },
+      now: function () { if (timer !== null) cancel(timer); run(); },
+      get delay() { return delay; },
+      get stopped() { return stopped; },
+    };
+  }
+
+  const api = {
+    parseToken: parseToken,
+    readToken: readToken,
+    createAudio: createAudio,
+    createPoller: createPoller,
+    QUERY_TOKEN_WARNING: QUERY_TOKEN_WARNING,
+  };
+  if (typeof module !== "undefined" && module.exports) {
+    module.exports = api;
+  } else {
+    root.SVOverlay = api;
+  }
+})(typeof window !== "undefined" ? window : globalThis);
diff --git a/WEBUI/static/style.css b/WEBUI/static/style.css
index cce1314..2d0ca61 100644
--- a/WEBUI/static/style.css
+++ b/WEBUI/static/style.css
@@ -1,49 +1,16 @@
-@import url('css/tokens.css');
-@import url('css/reduced-motion.css');
-@import url('css/a11y.css');
-@import url('css/mobile.css');
-:root {
-  --bg: #0b0f14;
-  --bg-deep: #0b0f14;
-  --card: rgba(255, 255, 255, 0.03);
-  --glass: rgba(255, 255, 255, 0.02);
-  --glass-hover: rgba(255, 255, 255, 0.05);
-  --border: rgba(255, 255, 255, 0.08);
-  --primary: #f59e0b;
-  --primary-hover: #d97706;
-  --accent: #0ea5e9;
-  --accent-2: #2bb3ff;
-  --text: #f8fafc;
-  --text-main: #e2e8f0;
-  --text-muted: #94a3b8;
-  --muted: #94a3b8;
-  --danger: #ef4444;
-  --success: #22c55e;
-  --radius: 10px;
-  --bg-body: #0b0f14;
-  --bg-card: rgba(255, 255, 255, 0.06);
-  --bg-sidebar: rgba(8, 10, 14, 0.75);
-  --bg-1: #0b0f14;
-  --bg-2: #0a0d12;
-  --ink: #e5e7eb;
-}
-
 /* Archive insights and recording health */
-body:is(.page-admin,.page-index) .recording-health-panel,
-body.page-streamer .streamer-insights {
+body:is(.page-admin,.page-index) .recording-health-panel {
   margin-bottom: 24px;
   padding: 18px;
   border: 1px solid var(--tube-line);
-  border-radius: 8px;
+  border-radius: var(--nebula-radius-sm);
   background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015)), var(--tube-surface);
   box-shadow: 0 1px 0 rgba(255,255,255,0.035), 0 18px 48px rgba(0,0,0,0.28);
 }
-
 body:is(.page-admin,.page-index) .recording-health-list {
   display: grid;
   gap: 8px;
 }
-
 body:is(.page-admin,.page-index) .recording-health-row {
   display: grid;
   grid-template-columns: 96px minmax(110px, .9fr) minmax(180px, 2fr) 86px 104px 92px 104px;
@@ -52,35 +19,49 @@ body:is(.page-admin,.page-index) .recording-health-row {
   min-height: 44px;
   padding: 9px 10px;
   border: 1px solid rgba(255,255,255,0.08);
-  border-radius: 8px;
+  border-radius: var(--nebula-radius-sm);
   color: var(--tube-text-2);
   text-decoration: none;
   background: rgba(255,255,255,0.025);
 }
-
 body:is(.page-admin,.page-index) .recording-health-row:hover {
   border-color: rgba(242,229,141,0.34);
   background: rgba(255,255,255,0.05);
 }
-
 body:is(.page-admin,.page-index) .health-status {
   display: inline-flex;
   justify-content: center;
   padding: 4px 7px;
-  border-radius: 999px;
+  border-radius: var(--nebula-radius-full);
   color: #050505;
   background: var(--tube-muted);
-  font-size: 11px;
+  font-size: var(--sv-min-text);
   font-weight: 900;
 }
-
-body:is(.page-admin,.page-index) .recording-health-row.recording .health-status { background: var(--tube-live); color: #fff; }
-body:is(.page-admin,.page-index) .recording-health-row.watching .health-status { background: #77c8ff; color: #061018; }
-body:is(.page-admin,.page-index) .recording-health-row.stale .health-status { background: #ffcf6e; color: #161000; }
-body:is(.page-admin,.page-index) .recording-health-row.starting .health-status { background: #b6f08f; color: #071107; }
-body:is(.page-admin,.page-index) .recording-health-row.offline .health-status { background: #4d5661; color: #f0f3f5; }
-body:is(.page-admin,.page-index) .recording-health-row.error .health-status { background: #ff6b6b; color: #160303; }
-
+body:is(.page-admin,.page-index) .recording-health-row.recording .health-status {
+  background: var(--tube-live);
+  color: #fff;
+}
+body:is(.page-admin,.page-index) .recording-health-row.watching .health-status {
+  background: #77c8ff;
+  color: #061018;
+}
+body:is(.page-admin,.page-index) .recording-health-row.stale .health-status {
+  background: #ffcf6e;
+  color: #161000;
+}
+body:is(.page-admin,.page-index) .recording-health-row.starting .health-status {
+  background: #b6f08f;
+  color: #071107;
+}
+body:is(.page-admin,.page-index) .recording-health-row.offline .health-status {
+  background: #4d5661;
+  color: #f0f3f5;
+}
+body:is(.page-admin,.page-index) .recording-health-row.error .health-status {
+  background: #ff6b6b;
+  color: #160303;
+}
 body:is(.page-admin,.page-index) .health-name {
   color: #fff;
   font-weight: 850;
@@ -88,7 +69,6 @@ body:is(.page-admin,.page-index) .health-name {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
 body:is(.page-admin,.page-index) .health-file,
 body:is(.page-admin,.page-index) .health-metric,
 body:is(.page-admin,.page-index) .health-chat {
@@ -96,165 +76,11 @@ body:is(.page-admin,.page-index) .health-chat {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 12px;
+  font-size: var(--sv-text-xs);
 }
-
 body:is(.page-admin,.page-index) .health-chat.ok {
   color: var(--tube-success);
 }
-
-body.page-streamer .insight-grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 10px;
-}
-
-body.page-streamer .insight-card {
-  min-height: 92px;
-  padding: 13px;
-  border: 1px solid rgba(255,255,255,0.08);
-  border-radius: 8px;
-  background: rgba(255,255,255,0.025);
-}
-
-body.page-streamer .insight-card span,
-body.page-streamer .mini-head span {
-  display: block;
-  color: var(--tube-muted);
-  font-size: 11px;
-  font-weight: 850;
-  text-transform: uppercase;
-}
-
-body.page-streamer .insight-card strong {
-  display: block;
-  margin-top: 7px;
-  color: #fff;
-  font-size: 24px;
-  line-height: 1;
-  font-weight: 950;
-}
-
-body.page-streamer .insight-card small {
-  display: block;
-  margin-top: 8px;
-  color: var(--tube-text-2);
-  font-size: 12px;
-}
-
-body.page-streamer .archive-insight-layout {
-  display: grid;
-  grid-template-columns: minmax(0, 1.7fr) minmax(220px, .7fr);
-  gap: 12px;
-  margin-top: 12px;
-}
-
-body.page-streamer .activity-panel,
-body.page-streamer .insight-side {
-  padding: 13px;
-  border: 1px solid rgba(255,255,255,0.08);
-  border-radius: 8px;
-  background: rgba(0,0,0,0.18);
-}
-
-body.page-streamer .mini-head {
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-  align-items: baseline;
-  margin-bottom: 12px;
-}
-
-body.page-streamer .mini-head strong {
-  color: #fff;
-  font-size: 13px;
-  font-weight: 900;
-}
-
-body.page-streamer .activity-calendar {
-  display: grid;
-  grid-template-columns: repeat(30, minmax(8px, 1fr));
-  gap: 4px;
-}
-
-body.page-streamer .activity-day {
-  aspect-ratio: 1 / 1;
-  min-height: 9px;
-  border-radius: 3px;
-  background: rgba(255,255,255,0.055);
-  outline: 1px solid rgba(255,255,255,0.035);
-}
-
-body.page-streamer .activity-day:hover {
-  outline-color: var(--tube-accent);
-}
-
-body.page-streamer .activity-day.level-1 { background: rgba(110,217,162,0.28); }
-body.page-streamer .activity-day.level-2 { background: rgba(110,217,162,0.45); }
-body.page-streamer .activity-day.level-3 { background: rgba(242,229,141,0.62); }
-body.page-streamer .activity-day.level-4 { background: rgba(255,92,102,0.82); }
-
-body.page-streamer .top-day-list {
-  display: grid;
-  gap: 7px;
-}
-
-body.page-streamer .top-day-list a {
-  display: flex;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 8px 9px;
-  border-radius: 7px;
-  color: var(--tube-text-2);
-  text-decoration: none;
-  background: rgba(255,255,255,0.04);
-}
-
-body.page-streamer .top-day-list a:hover {
-  color: #fff;
-  background: rgba(255,255,255,0.07);
-}
-
-body.page-streamer .top-day-list strong {
-  color: #fff;
-  font-size: 12px;
-  white-space: nowrap;
-}
-
-body.page-streamer .metadata-chip-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 12px;
-}
-
-body.page-streamer .metadata-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  min-height: 30px;
-  padding: 5px 9px;
-  border: 1px solid rgba(255,255,255,0.1);
-  border-radius: 999px;
-  color: var(--tube-text-2);
-  text-decoration: none;
-  font-size: 12px;
-  font-weight: 750;
-  background: rgba(255,255,255,0.035);
-}
-
-body.page-streamer .metadata-chip:hover,
-body.page-streamer .metadata-chip.active {
-  color: #050505;
-  border-color: var(--tube-accent);
-  background: var(--tube-accent);
-}
-
-body.page-streamer .metadata-chip span {
-  color: inherit;
-  opacity: .72;
-}
-
 @media (max-width: 1100px) {
   body:is(.page-admin,.page-index) .recording-health-row {
     grid-template-columns: 86px minmax(120px, 1fr) minmax(120px, 1.3fr) 76px;
@@ -263,14 +89,7 @@ body.page-streamer .metadata-chip span {
   body:is(.page-admin,.page-index) .health-chat {
     display: none;
   }
-  body.page-streamer .insight-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-  body.page-streamer .archive-insight-layout {
-    grid-template-columns: 1fr;
-  }
 }
-
 @media (max-width: 720px) {
   body:is(.page-admin,.page-index) .recording-health-row {
     grid-template-columns: 82px minmax(0, 1fr);
@@ -280,129 +99,49 @@ body.page-streamer .metadata-chip span {
   body:is(.page-admin,.page-index) .health-chat {
     display: none;
   }
-  body.page-streamer .insight-grid {
-    grid-template-columns: 1fr;
-  }
-  body.page-streamer .activity-calendar {
-    grid-template-columns: repeat(15, minmax(9px, 1fr));
-  }
 }
-
 /* Search, queue, watch progress and chat filters */
-.global-search-bar,
-.global-search-form {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-}
-
-.global-search-bar {
-  margin: 0 0 20px;
-  padding: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 10px;
-  background: rgba(12, 12, 14, 0.72);
-}
-
-.global-search-bar input,
-.global-search-form input {
-  min-width: 0;
-  flex: 1;
-}
-
-.global-results-head,
 .task-queue-head {
   display: flex;
   justify-content: space-between;
   gap: 16px;
   align-items: center;
 }
-
-.global-results-head h3,
 .task-queue-head h3 {
   margin: 0;
 }
-
-.global-results-head span,
 .task-queue-head span {
   color: var(--text-muted);
-  font-size: 12px;
-  white-space: nowrap;
-}
-
-.global-results-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 14px;
-  margin-top: 16px;
-}
-
-.global-results-grid h4 {
-  margin: 0 0 8px;
-  color: var(--text-muted);
-  font-size: 12px;
-  text-transform: uppercase;
-}
-
-.global-result-row {
-  display: grid;
-  gap: 3px;
-  padding: 10px 0;
-  border-top: 1px solid rgba(255, 255, 255, 0.06);
-  color: inherit;
-  text-decoration: none;
-}
-
-.global-result-row:hover {
-  color: #fff;
-}
-
-.global-result-row strong {
-  overflow: hidden;
-  text-overflow: ellipsis;
+  font-size: var(--sv-text-xs);
   white-space: nowrap;
 }
-
-.global-result-row span,
-.global-result-empty {
-  color: var(--text-muted);
-  font-size: 12px;
-  line-height: 1.35;
-}
-
 body.page-admin .task-queue-panel {
   min-height: 100%;
 }
-
 .task-queue-stats {
   display: grid;
-  /* Four across where they fit; long translated labels wrap to two rows on phones. */
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 96px), 1fr));
   gap: 8px;
   margin: 16px 0;
 }
-
 .task-queue-stats span {
   display: grid;
   gap: 4px;
   padding: 10px;
   border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 8px;
+  border-radius: var(--nebula-radius-sm);
   color: var(--text-muted);
-  font-size: 11px;
+  font-size: var(--sv-min-text);
   background: rgba(0, 0, 0, 0.18);
 }
-
 .task-queue-stats strong {
   color: #fff;
-  font-size: 18px;
+  font-size: var(--sv-text-lg);
 }
-
 .task-queue-list {
   display: grid;
   gap: 6px;
 }
-
 .task-queue-row {
   display: grid;
   grid-template-columns: 82px minmax(80px, 120px) minmax(0, 1fr) 42px;
@@ -410,28 +149,24 @@ body.page-admin .task-queue-panel {
   align-items: center;
   padding: 8px 0;
   border-top: 1px solid rgba(255, 255, 255, 0.06);
-  font-size: 12px;
+  font-size: var(--sv-text-xs);
 }
-
 .task-status {
   display: inline-flex;
   justify-content: center;
   padding: 3px 7px;
-  border-radius: 999px;
+  border-radius: var(--nebula-radius-full);
   color: #d7d7d7;
   background: rgba(255, 255, 255, 0.08);
 }
-
 .task-queue-row.running .task-status {
   color: #a7f3d0;
   background: rgba(16, 185, 129, 0.18);
 }
-
 .task-queue-row.failed .task-status {
   color: #fecaca;
   background: rgba(239, 68, 68, 0.2);
 }
-
 .task-label {
   min-width: 0;
   overflow: hidden;
@@ -439,51 +174,22 @@ body.page-admin .task-queue-panel {
   white-space: nowrap;
   color: var(--text-muted);
 }
-
 .task-label small {
   display: block;
   margin-top: 2px;
   overflow: hidden;
   text-overflow: ellipsis;
   color: #fecaca;
-  font-size: 11px;
+  font-size: var(--sv-min-text);
   line-height: 1.2;
 }
-
 .task-age {
   color: var(--text-muted);
   text-align: right;
 }
-
-.watch-state {
-  display: grid;
-  grid-template-columns: auto minmax(70px, 1fr);
-  gap: 8px;
-  align-items: center;
-  margin-top: 8px;
-  color: var(--text-muted);
-  font-size: 11px;
-}
-
-.watch-track {
-  height: 4px;
-  overflow: hidden;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.1);
-}
-
-.watch-track span {
-  display: block;
-  height: 100%;
-  border-radius: inherit;
-  background: linear-gradient(90deg, #f2e58d, #22c55e);
-}
-
-.video-card.is-watched .thumb-img,
 .page-mobile-streamer .video-card.is-watched .thumb {
   opacity: 0.72;
 }
-
 body.page-vod .chat-filter-bar {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto auto auto 32px;
@@ -492,507 +198,471 @@ body.page-vod .chat-filter-bar {
   padding: 8px 10px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 }
-
 body.page-vod .chat-filter-bar input[type="search"] {
   min-width: 0;
   height: 32px;
   padding: 0 10px;
-  border-radius: 8px;
-  font-size: 12px;
+  border-radius: var(--nebula-radius-sm);
+  font-size: var(--sv-text-xs);
 }
-
 body.page-vod .chat-filter-bar label {
   display: inline-flex;
   gap: 5px;
   align-items: center;
   color: var(--text-muted);
-  font-size: 11px;
+  font-size: var(--sv-min-text);
   white-space: nowrap;
 }
-
-body.page-vod .chat-filter-bar button {
+body.page-vod .chat-filter-bar button:where(:not(.sv-btn)) {
   width: 32px;
   height: 32px;
   padding: 0;
-  border-radius: 8px;
+  border-radius: var(--nebula-radius-sm);
 }
-
-body.page-mobile-streamer .watch-state {
-  grid-template-columns: 74px minmax(0, 1fr);
-  margin: 7px 0 0;
-}
-
 @media (max-width: 980px) {
-  .global-results-grid {
-    grid-template-columns: 1fr;
-  }
-
   body.page-vod .chat-filter-bar {
     grid-template-columns: 1fr 1fr 1fr 1fr 32px;
   }
-
   body.page-vod .chat-filter-bar input[type="search"] {
     grid-column: 1 / -1;
   }
 }
-
 /* LOGIN */
-body.page-login{
-        margin: 0;
-        font-family: 'Sora', sans-serif;
-        color: var(--text);
-        min-height: 100vh;
-        overflow: hidden;
-        background:
-          radial-gradient(circle at 50% 78%, rgba(255, 88, 20, 0.26), transparent 18%),
-          radial-gradient(circle at 50% 44%, rgba(255, 122, 33, 0.12), transparent 24%),
-          linear-gradient(180deg, #040405 0%, #100707 32%, #1a0c0a 62%, #050505 100%);
-      }
-      body.page-login *{ box-sizing: border-box; }
-      body.page-login .inferno-stage{
-        position: fixed;
-        inset: 0;
-        overflow: hidden;
-        pointer-events: none;
-      }
-      body.page-login .inferno-stage::before{
-        content: "";
-        position: absolute;
-        inset: 0;
-        background:
-          linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.05) 26%, rgba(0,0,0,0.42) 100%),
+body.page-login {
+  margin: 0;
+  font-family: 'Sora', sans-serif;
+}
+body.page-login * {
+  box-sizing: border-box;
+}
+body.page-login .inferno-stage {
+  position: fixed;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+body.page-login .inferno-stage::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.05) 26%, rgba(0,0,0,0.42) 100%),
           radial-gradient(circle at 50% 92%, rgba(255, 133, 45, 0.12), transparent 30%);
-      }
-      body.page-login .inferno-stage::after{
-        content: "";
-        position: absolute;
-        left: -6%;
-        right: -6%;
-        bottom: -2vh;
-        height: 24vh;
-        background:
-          radial-gradient(circle at 50% 0%, rgba(255, 137, 44, 0.12), transparent 24%),
+}
+body.page-login .inferno-stage::after {
+  content: "";
+  position: absolute;
+  left: -6%;
+  right: -6%;
+  bottom: -2vh;
+  height: 24vh;
+  background: radial-gradient(circle at 50% 0%, rgba(255, 137, 44, 0.12), transparent 24%),
           linear-gradient(180deg, rgba(18,10,8,0) 0%, rgba(10,8,8,0.86) 32%, #040404 100%);
-        clip-path: ellipse(62% 88% at 50% 100%);
-      }
-      body.page-login .ash{
-        position: absolute;
-        inset: 0;
-        opacity: .42;
-        animation: drift-smoke 16s linear infinite;
-      }
-      body.page-login .ash::before,
-      body.page-login .ash::after{
-        content: "";
-        position: absolute;
-        inset: auto;
-        width: 34vmax;
-        height: 34vmax;
-        border-radius: 50%;
-        filter: blur(84px);
-        background: radial-gradient(circle, rgba(255, 118, 26, 0.12) 0%, rgba(61, 17, 9, 0.11) 44%, transparent 74%);
-      }
-      body.page-login .ash-a::before{ top: -10vmax; left: -6vmax; }
-      body.page-login .ash-a::after{ right: -8vmax; top: 10vmax; animation: pulse-haze 9s ease-in-out infinite; }
-      body.page-login .ash-b{ animation-duration: 20s; animation-direction: reverse; opacity: .28; }
-      body.page-login .ash-b::before{ right: 2vmax; top: -14vmax; }
-      body.page-login .ash-b::after{ left: 10vmax; bottom: 14vmax; }
-      body.page-login .portal-backglow{
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        width: min(62vw, 760px);
-        aspect-ratio: 1 / 1;
-        transform: translate(-50%, -50%);
-        border-radius: 50%;
-        background: radial-gradient(circle, rgba(255, 133, 22, 0.5) 0%, rgba(255, 80, 18, 0.24) 32%, rgba(44, 7, 4, 0.08) 58%, transparent 74%);
-        filter: blur(34px);
-        animation: gate-breathe 4.2s ease-in-out infinite;
-      }
-      body.page-login .portal-frame{
-        position: absolute;
-        left: 50%;
-        bottom: 18vh;
-        width: min(46vw, 520px);
-        min-width: 290px;
-        aspect-ratio: 0.9 / 1;
-        transform: translateX(-50%);
-        display: grid;
-        place-items: end center;
-      }
-      body.page-login .portal-arch{
-        position: relative;
-        width: 100%;
-        height: 100%;
-        border-radius: 46% 46% 4% 4% / 18% 18% 3% 3%;
-        background:
-          linear-gradient(180deg, #4c433f 0%, #2e2828 22%, #191617 66%, #0a0a0b 100%);
-        box-shadow:
-          0 0 0 2px rgba(255, 187, 120, 0.1),
+  clip-path: ellipse(62% 88% at 50% 100%);
+}
+body.page-login .ash {
+  position: absolute;
+  inset: 0;
+  opacity: .42;
+  animation: drift-smoke 16s linear infinite;
+}
+body.page-login .ash::before,
+body.page-login .ash::after {
+  content: "";
+  position: absolute;
+  inset: auto;
+  width: 34vmax;
+  height: 34vmax;
+  border-radius: 50%;
+  filter: blur(84px);
+  background: radial-gradient(circle, rgba(255, 118, 26, 0.12) 0%, rgba(61, 17, 9, 0.11) 44%, transparent 74%);
+}
+body.page-login .ash-a::before {
+  top: -10vmax;
+  left: -6vmax;
+}
+body.page-login .ash-a::after {
+  right: -8vmax;
+  top: 10vmax;
+  animation: pulse-haze 9s ease-in-out infinite;
+}
+body.page-login .ash-b {
+  animation-duration: 20s;
+  animation-direction: reverse;
+  opacity: .28;
+}
+body.page-login .ash-b::before {
+  right: 2vmax;
+  top: -14vmax;
+}
+body.page-login .ash-b::after {
+  left: 10vmax;
+  bottom: 14vmax;
+}
+body.page-login .portal-backglow {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: min(62vw, 760px);
+  aspect-ratio: 1 / 1;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(255, 133, 22, 0.5) 0%, rgba(255, 80, 18, 0.24) 32%, rgba(44, 7, 4, 0.08) 58%, transparent 74%);
+  filter: blur(34px);
+  animation: gate-breathe 4.2s ease-in-out infinite;
+}
+body.page-login .portal-frame {
+  position: absolute;
+  bottom: 18vh;
+  width: min(46vw, 520px);
+  min-width: 290px;
+  aspect-ratio: 0.9 / 1;
+  transform: translateX(-50%);
+  display: grid;
+  place-items: end center;
+}
+body.page-login .portal-arch {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: 46% 46% 4% 4% / 18% 18% 3% 3%;
+  background: linear-gradient(180deg, #4c433f 0%, #2e2828 22%, #191617 66%, #0a0a0b 100%);
+  box-shadow: 0 0 0 2px rgba(255, 187, 120, 0.1),
           0 34px 80px rgba(0, 0, 0, 0.58),
           inset 0 10px 18px rgba(255,255,255,0.08),
           inset 0 -26px 34px rgba(0, 0, 0, 0.48);
-        overflow: hidden;
-      }
-      body.page-login .portal-arch::before{
-        content: "";
-        position: absolute;
-        inset: 5% 11% 3%;
-        border-radius: 44% 44% 2% 2% / 14% 14% 2% 2%;
-        background:
-          linear-gradient(180deg, rgba(255,255,255,0.08), transparent 16%),
+  overflow: hidden;
+}
+body.page-login .portal-arch::before {
+  content: "";
+  position: absolute;
+  inset: 5% 11% 3%;
+  border-radius: 44% 44% 2% 2% / 14% 14% 2% 2%;
+  background: linear-gradient(180deg, rgba(255,255,255,0.08), transparent 16%),
           linear-gradient(90deg, rgba(0,0,0,0.48) 0 4%, transparent 4% 96%, rgba(0,0,0,0.48) 96% 100%);
-        box-shadow: inset 0 0 0 2px rgba(255, 170, 105, 0.16);
-      }
-      body.page-login .portal-lintel{
-        position: absolute;
-        top: 10%;
-        left: 16%;
-        right: 16%;
-        height: 9%;
-        border-radius: 999px;
-        background:
-          linear-gradient(180deg, rgba(130, 117, 109, 0.96) 0%, rgba(70, 63, 59, 0.98) 48%, rgba(19, 17, 18, 1) 100%);
-        box-shadow: inset 0 2px 3px rgba(255,255,255,0.1);
-      }
-      body.page-login .portal-fire{
-        position: absolute;
-        inset: 15% 17% 8%;
-        border-radius: 42% 42% 2% 2% / 13% 13% 2% 2%;
-        background:
-          radial-gradient(circle at 50% 22%, rgba(255, 245, 195, 0.82) 0%, rgba(255, 174, 60, 0.72) 14%, rgba(255, 88, 25, 0.9) 34%, rgba(128, 16, 4, 0.9) 64%, rgba(19, 3, 2, 1) 100%);
-        filter: saturate(1.22);
-        animation: inferno-roll 2.8s ease-in-out infinite;
-      }
-      body.page-login .portal-fire::before{
-        content: "";
-        position: absolute;
-        inset: 10% 18% 0;
-        background:
-          radial-gradient(circle at 50% 100%, rgba(255, 247, 216, 0.7), rgba(255, 165, 58, 0.54) 18%, rgba(255, 82, 18, 0) 46%);
-        animation: core-flicker 1.6s linear infinite;
-      }
-      body.page-login .portal-door{
-        position: absolute;
-        top: 18%;
-        bottom: 8%;
-        width: 31%;
-        border-radius: 22px 22px 10px 10px;
-        background:
-          linear-gradient(180deg, rgba(122, 104, 92, 0.98) 0%, rgba(76, 61, 55, 0.98) 18%, rgba(41, 31, 31, 1) 62%, rgba(13, 12, 13, 1) 100%);
-        box-shadow:
-          inset 0 0 0 2px rgba(238, 199, 159, 0.08),
+  box-shadow: inset 0 0 0 2px rgba(255, 170, 105, 0.16);
+}
+body.page-login .portal-lintel {
+  position: absolute;
+  top: 10%;
+  left: 16%;
+  right: 16%;
+  height: 9%;
+  border-radius: var(--nebula-radius-full);
+  background: linear-gradient(180deg, rgba(130, 117, 109, 0.96) 0%, rgba(70, 63, 59, 0.98) 48%, rgba(19, 17, 18, 1) 100%);
+  box-shadow: inset 0 2px 3px rgba(255,255,255,0.1);
+}
+body.page-login .portal-fire {
+  position: absolute;
+  inset: 15% 17% 8%;
+  border-radius: 42% 42% 2% 2% / 13% 13% 2% 2%;
+  background: radial-gradient(circle at 50% 22%, rgba(255, 245, 195, 0.82) 0%, rgba(255, 174, 60, 0.72) 14%, rgba(255, 88, 25, 0.9) 34%, rgba(128, 16, 4, 0.9) 64%, rgba(19, 3, 2, 1) 100%);
+  filter: saturate(1.22);
+  animation: inferno-roll 2.8s ease-in-out infinite;
+}
+body.page-login .portal-fire::before {
+  content: "";
+  position: absolute;
+  inset: 10% 18% 0;
+  background: radial-gradient(circle at 50% 100%, rgba(255, 247, 216, 0.7), rgba(255, 165, 58, 0.54) 18%, rgba(255, 82, 18, 0) 46%);
+  animation: core-flicker 1.6s linear infinite;
+}
+body.page-login .portal-door {
+  position: absolute;
+  top: 18%;
+  bottom: 8%;
+  width: 31%;
+  border-radius: var(--nebula-radius-xl) var(--nebula-radius-xl) var(--nebula-radius-sm) var(--nebula-radius-sm);
+  background: linear-gradient(180deg, rgba(122, 104, 92, 0.98) 0%, rgba(76, 61, 55, 0.98) 18%, rgba(41, 31, 31, 1) 62%, rgba(13, 12, 13, 1) 100%);
+  box-shadow: inset 0 0 0 2px rgba(238, 199, 159, 0.08),
           inset 0 0 0 12px rgba(22, 16, 16, 0.72),
           inset 0 0 28px rgba(0,0,0,0.38),
           0 16px 26px rgba(0,0,0,0.28);
-      }
-      body.page-login .portal-door::before{
-        content: "";
-        position: absolute;
-        inset: 14% 18%;
-        border-radius: 12px;
-        background:
-          linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0) 18%),
+}
+body.page-login .portal-door::before {
+  content: "";
+  position: absolute;
+  inset: 14% 18%;
+  border-radius: var(--nebula-radius-md);
+  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0) 18%),
           repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 8px, rgba(0,0,0,0.04) 8px 16px),
           linear-gradient(180deg, rgba(56, 43, 39, 0.64), rgba(13, 11, 12, 0.2));
-        box-shadow: inset 0 0 0 1px rgba(255, 173, 118, 0.08);
-      }
-      body.page-login .portal-door-left{
-        left: 18%;
-        transform: perspective(900px) rotateY(26deg);
-        transform-origin: left center;
-      }
-      body.page-login .portal-door-right{
-        right: 18%;
-        transform: perspective(900px) rotateY(-26deg);
-        transform-origin: right center;
-      }
-      body.page-login .portal-seam{
-        position: absolute;
-        top: 18%;
-        bottom: 8%;
-        left: 50%;
-        width: 10px;
-        transform: translateX(-50%);
-        background: linear-gradient(180deg, rgba(243, 198, 145, 0.24) 0%, rgba(255, 112, 46, 0.34) 38%, rgba(24, 5, 5, 0.8) 100%);
-        filter: blur(.2px);
-      }
-      body.page-login .portal-floorglow{
-        position: absolute;
-        left: 26%;
-        right: 26%;
-        bottom: 8%;
-        height: 12%;
-        border-radius: 50%;
-        background: radial-gradient(circle, rgba(255, 184, 74, 0.7) 0%, rgba(255, 85, 28, 0.44) 34%, rgba(0,0,0,0) 72%);
-        filter: blur(10px);
-      }
-      body.page-login .portal-runes{
-        position: absolute;
-        top: 6%;
-        left: 50%;
-        display: flex;
-        gap: 16px;
-        transform: translateX(-50%);
-      }
-      body.page-login .portal-runes span{
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        background: #ffd18a;
-        box-shadow: 0 0 12px rgba(255, 178, 92, 0.9);
-        animation: rune-pulse 2.4s ease-in-out infinite;
-      }
-      body.page-login .portal-runes span:nth-child(2){ animation-delay: -.4s; }
-      body.page-login .portal-runes span:nth-child(3){ animation-delay: -.8s; }
-      body.page-login .portal-runes span:nth-child(4){ animation-delay: -1.2s; }
-      body.page-login .portal-embers{
-        position: absolute;
-        inset: 0;
-      }
-      body.page-login .portal-embers span{
-        position: absolute;
-        bottom: 12%;
-        width: 8px;
-        aspect-ratio: 1;
-        border-radius: 50%;
-        background: radial-gradient(circle, rgba(255, 246, 202, 0.92) 0%, rgba(255, 154, 67, 0.95) 44%, rgba(255, 96, 34, 0) 76%);
-        filter: blur(.3px);
-        animation: ember-rise 4.2s linear infinite;
-      }
-      body.page-login .portal-embers span:nth-child(1){ left: 24%; animation-delay: -.8s; }
-      body.page-login .portal-embers span:nth-child(2){ left: 34%; animation-delay: -2.2s; width: 7px; }
-      body.page-login .portal-embers span:nth-child(3){ left: 42%; animation-delay: -1.2s; width: 8px; }
-      body.page-login .portal-embers span:nth-child(4){ left: 56%; animation-delay: -.2s; width: 6px; }
-      body.page-login .portal-embers span:nth-child(5){ left: 64%; animation-delay: -3.3s; }
-      body.page-login .portal-embers span:nth-child(6){ left: 74%; animation-delay: -2.8s; width: 7px; }
-      body.page-login .portal-embers span:nth-child(7){ left: 50%; animation-delay: -1.7s; width: 9px; }
-      body.page-login .portal-steps{
-        position: absolute;
-        left: 50%;
-        bottom: 0;
-        width: min(74vw, 900px);
-        height: 23vh;
-        transform: translateX(-50%);
-        background:
-          linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(8,7,9,0.26) 24%, rgba(4,4,5,0.9) 100%);
-        clip-path: polygon(18% 100%, 28% 70%, 38% 70%, 44% 44%, 56% 44%, 62% 70%, 72% 70%, 82% 100%);
-      }
-      body.page-login .login-shell{
-        position: relative;
-        min-height: 100vh;
-        padding: 28px 18px 22px;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        align-items: center;
-        gap: 18px;
-        z-index: 1;
-      }
-      body.page-login .login-copy{
-        max-width: 700px;
-        padding-top: 3vh;
-        text-align: center;
-        animation: login-rise .9s ease-out both;
-      }
-      body.page-login .eyebrow{
-        display: inline-block;
-        align-items: center;
-        padding: 8px 14px;
-        border: 1px solid rgba(255, 155, 79, 0.32);
-        border-radius: 999px;
-        color: #ffba7a;
-        font-size: 12px;
-        font-weight: 600;
-        letter-spacing: .14em;
-        text-transform: uppercase;
-        background: rgba(38, 12, 9, 0.56);
-        box-shadow: inset 0 0 18px rgba(255, 120, 48, 0.08);
-      }
-      body.page-login h1{
-        margin: 16px 0 12px;
-        font-family: 'Fraunces', serif;
-        font-size: clamp(42px, 7vw, 78px);
-        line-height: .96;
-        color: #fff2dc;
-        text-shadow: 0 0 18px rgba(255, 117, 44, 0.24), 0 14px 38px rgba(0, 0, 0, 0.7);
-      }
-      body.page-login .subtitle{
-        margin: 0;
-        max-width: 46ch;
-        color: #d8c0b5;
-        font-size: 15px;
-        line-height: 1.6;
-      }
-      body.page-login .login-panel{
-        position: relative;
-        width: min(100%, 420px);
-        margin-bottom: 2vh;
-        padding: 24px;
-        border-radius: 20px;
-        background: linear-gradient(180deg, rgba(22, 13, 13, 0.86) 0%, rgba(10, 8, 10, 0.94) 100%);
-        border: 1px solid rgba(255, 154, 79, 0.16);
-        box-shadow:
-          0 22px 50px rgba(0, 0, 0, 0.5),
-          inset 0 1px 0 rgba(255,255,255,0.05),
-          inset 0 0 28px rgba(255, 95, 28, 0.06);
-        backdrop-filter: none;
-        animation: login-rise 1.05s ease-out both;
-      }
-      body.page-login .panel-glow{
-        position: absolute;
-        inset: -1px;
-        border-radius: inherit;
-        background: linear-gradient(135deg, rgba(255, 162, 91, 0.16), rgba(255, 98, 36, 0.03) 38%, rgba(255,255,255,0.02) 68%, rgba(255, 176, 93, 0.12) 100%);
-        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-        padding: 1px;
-        -webkit-mask-composite: xor;
-        mask-composite: exclude;
-        pointer-events: none;
-      }
-      body.page-login .login-form{
-        position: relative;
-        z-index: 1;
-        display: grid;
-        gap: 10px;
-      }
-      body.page-login .login-form label{
-        color: #f2d5bc;
-        font-size: 12px;
-        font-weight: 600;
-        letter-spacing: .08em;
-        text-transform: uppercase;
-      }
-      body.page-login input{
-        width: 100%;
-        min-height: 50px;
-        padding: 14px 16px;
-        border-radius: 14px;
-        border: 1px solid rgba(255,255,255,0.08);
-        background: rgba(12, 10, 11, 0.72);
-        color: #fff8f2;
-        outline: none;
-        transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
-      }
-      body.page-login input::placeholder{ color: #8f7b74; }
-      body.page-login input:focus{
-        border-color: rgba(255, 156, 72, 0.68);
-        box-shadow: 0 0 0 4px rgba(255, 111, 36, 0.14);
-        transform: translateY(-1px);
-      }
-      body.page-login button{
-        width: 100%;
-        min-height: 52px;
-        margin-top: 10px;
-        border: 0;
-        border-radius: 16px;
-        background:
-          linear-gradient(180deg, rgba(255, 230, 182, 0.18), rgba(255,255,255,0) 24%),
-          linear-gradient(135deg, #ff7a2f 0%, #ff521f 46%, #ffbe55 100%);
-        color: #2f0d05;
-        font-size: 15px;
-        font-weight: 700;
-        letter-spacing: .04em;
-        cursor: pointer;
-        box-shadow: 0 18px 34px rgba(255, 83, 23, 0.24);
-        transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
-      }
-      body.page-login button:hover{
-        transform: translateY(-2px);
-        box-shadow: 0 24px 46px rgba(255, 83, 23, 0.34);
-        filter: brightness(1.04);
-      }
-      body.page-login .error{
-        position: relative;
-        z-index: 1;
-        margin-top: 14px;
-        padding: 12px 14px;
-        border-radius: 14px;
-        border: 1px solid rgba(239, 68, 68, 0.22);
-        background: rgba(71, 13, 13, 0.42);
-        color: #ffb4b4;
-        font-size: 13px;
-        line-height: 1.45;
-      }
-      @keyframes drift-smoke{
-        0%{ transform: translate3d(0, 0, 0) scale(1); }
-        50%{ transform: translate3d(1.6%, -1.2%, 0) scale(1.04); }
-        100%{ transform: translate3d(0, 0, 0) scale(1); }
-      }
-      @keyframes pulse-haze{
-        0%, 100%{ transform: scale(1); opacity: .7; }
-        50%{ transform: scale(1.08); opacity: 1; }
-      }
-      @keyframes gate-breathe{
-        0%, 100%{ transform: translate(-50%, -50%) scale(1); opacity: .8; }
-        50%{ transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
-      }
-      @keyframes inferno-roll{
-        0%, 100%{ transform: scale(1) translateY(0); filter: saturate(1.12); }
-        50%{ transform: scale(1.04) translateY(-1.5%); filter: saturate(1.24); }
-      }
-      @keyframes ember-rise{
-        0%{ transform: translate3d(0, 0, 0) scale(.7); opacity: 0; }
-        12%{ opacity: .95; }
-        100%{ transform: translate3d(24px, -220px, 0) scale(.18); opacity: 0; }
-      }
-      @keyframes core-flicker{
-        0%, 100%{ opacity: .7; }
-        35%{ opacity: .94; }
-        58%{ opacity: .52; }
-        82%{ opacity: .86; }
-      }
-      @keyframes login-rise{
-        from{ opacity: 0; transform: translateY(18px); }
-        to{ opacity: 1; transform: translateY(0); }
-      }
-      @keyframes rune-pulse{
-        0%, 100%{ opacity: .56; transform: scale(.88); }
-        50%{ opacity: 1; transform: scale(1.15); }
+  box-shadow: inset 0 0 0 1px rgba(255, 173, 118, 0.08);
+}
+body.page-login .portal-door-left {
+  left: 18%;
+  transform: perspective(900px) rotateY(26deg);
+  transform-origin: left center;
+}
+body.page-login .portal-door-right {
+  right: 18%;
+  transform: perspective(900px) rotateY(-26deg);
+  transform-origin: right center;
+}
+body.page-login .portal-seam {
+  position: absolute;
+  top: 18%;
+  bottom: 8%;
+  left: 50%;
+  width: 10px;
+  transform: translateX(-50%);
+  background: linear-gradient(180deg, rgba(243, 198, 145, 0.24) 0%, rgba(255, 112, 46, 0.34) 38%, rgba(24, 5, 5, 0.8) 100%);
+  filter: blur(.2px);
+}
+body.page-login .portal-floorglow {
+  position: absolute;
+  left: 26%;
+  right: 26%;
+  bottom: 8%;
+  height: 12%;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(255, 184, 74, 0.7) 0%, rgba(255, 85, 28, 0.44) 34%, rgba(0,0,0,0) 72%);
+  filter: blur(10px);
+}
+body.page-login .portal-runes {
+  position: absolute;
+  top: 6%;
+  left: 50%;
+  display: flex;
+  gap: 16px;
+  transform: translateX(-50%);
+}
+body.page-login .portal-runes span {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #ffd18a;
+  box-shadow: 0 0 12px rgba(255, 178, 92, 0.9);
+  animation: rune-pulse 2.4s ease-in-out infinite;
+}
+body.page-login .portal-runes span:nth-child(2) {
+  animation-delay: -.4s;
+}
+body.page-login .portal-runes span:nth-child(3) {
+  animation-delay: -.8s;
+}
+body.page-login .portal-runes span:nth-child(4) {
+  animation-delay: -1.2s;
+}
+body.page-login .portal-embers {
+  position: absolute;
+  inset: 0;
+}
+body.page-login .portal-embers span {
+  position: absolute;
+  bottom: 12%;
+  width: 8px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(255, 246, 202, 0.92) 0%, rgba(255, 154, 67, 0.95) 44%, rgba(255, 96, 34, 0) 76%);
+  filter: blur(.3px);
+  animation: ember-rise 4.2s linear infinite;
+}
+body.page-login .portal-embers span:nth-child(1) {
+  left: 24%;
+  animation-delay: -.8s;
+}
+body.page-login .portal-embers span:nth-child(2) {
+  left: 34%;
+  animation-delay: -2.2s;
+  width: 7px;
+}
+body.page-login .portal-embers span:nth-child(3) {
+  left: 42%;
+  animation-delay: -1.2s;
+  width: 8px;
+}
+body.page-login .portal-embers span:nth-child(4) {
+  left: 56%;
+  animation-delay: -.2s;
+  width: 6px;
+}
+body.page-login .portal-embers span:nth-child(5) {
+  left: 64%;
+  animation-delay: -3.3s;
+}
+body.page-login .portal-embers span:nth-child(6) {
+  left: 74%;
+  animation-delay: -2.8s;
+  width: 7px;
+}
+body.page-login .portal-embers span:nth-child(7) {
+  left: 50%;
+  animation-delay: -1.7s;
+  width: 9px;
+}
+body.page-login .portal-steps {
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  width: min(74vw, 900px);
+  height: 23vh;
+  transform: translateX(-50%);
+  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(8,7,9,0.26) 24%, rgba(4,4,5,0.9) 100%);
+  clip-path: polygon(18% 100%, 28% 70%, 38% 70%, 44% 44%, 56% 44%, 62% 70%, 72% 70%, 82% 100%);
+}
+body.page-login .login-shell {
+  flex-direction: column;
+  justify-content: space-between;
+}
+body.page-login .login-copy {
+  animation: login-rise .9s ease-out both;
+}
+body.page-login .eyebrow {
+  display: inline-block;
+  align-items: center;
+  border-radius: var(--nebula-radius-full);
+  box-shadow: inset 0 0 18px rgba(255, 120, 48, 0.08);
+}
+body.page-login .subtitle {
+  margin: 0;
+}
+body.page-login .login-panel {
+  position: relative;
+  width: min(100%, 420px);
+  margin-bottom: 2vh;
+  animation: login-rise 1.05s ease-out both;
+}
+body.page-login .panel-glow {
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  background: linear-gradient(135deg, rgba(255, 162, 91, 0.16), rgba(255, 98, 36, 0.03) 38%, rgba(255,255,255,0.02) 68%, rgba(255, 176, 93, 0.12) 100%);
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  padding: 1px;
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+}
+body.page-login .login-form {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  gap: 10px;
+}
+body.page-login input {
+  width: 100%;
+  padding: 14px 16px;
+  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
+}
+body.page-login input::placeholder {
+  color: #8f7b74;
+}
+body.page-login input:focus {
+  transform: translateY(-1px);
+}
+body.page-login button:where(:not(.sv-btn)) {
+  width: 100%;
+  margin-top: 10px;
+  font-size: var(--sv-text-md);
+  font-weight: 700;
+  letter-spacing: .04em;
+  cursor: pointer;
+  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
+}
+body.page-login button:where(:not(.sv-btn)):hover {
+  transform: translateY(-2px);
+  box-shadow: 0 24px 46px rgba(255, 83, 23, 0.34);
+  filter: brightness(1.04);
+}
+body.page-login .error {
+  position: relative;
+  z-index: 1;
+  margin-top: 14px;
+  padding: 12px 14px;
+  border-radius: var(--nebula-radius-md);
+  font-size: var(--sv-text-sm);
+  line-height: 1.45;
+}
+@keyframes drift-smoke{
+        0%{ transform: translate3d(0, 0, 0) scale(1); }
+        50%{ transform: translate3d(1.6%, -1.2%, 0) scale(1.04); }
+        100%{ transform: translate3d(0, 0, 0) scale(1); }
+      }
+@keyframes pulse-haze{
+        0%, 100%{ transform: scale(1); opacity: .7; }
+        50%{ transform: scale(1.08); opacity: 1; }
+      }
+@keyframes gate-breathe{
+        0%, 100%{ transform: translate(-50%, -50%) scale(1); opacity: .8; }
+        50%{ transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
+      }
+@keyframes inferno-roll{
+        0%, 100%{ transform: scale(1) translateY(0); filter: saturate(1.12); }
+        50%{ transform: scale(1.04) translateY(-1.5%); filter: saturate(1.24); }
+      }
+@keyframes ember-rise{
+        0%{ transform: translate3d(0, 0, 0) scale(.7); opacity: 0; }
+        12%{ opacity: .95; }
+        100%{ transform: translate3d(24px, -220px, 0) scale(.18); opacity: 0; }
       }
-      @media (max-width: 640px){
-        body.page-login .portal-frame{
-          width: min(78vw, 360px);
-          min-width: 230px;
-          bottom: 26vh;
-        }
-        body.page-login .portal-backglow{
-          width: min(100vw, 560px);
-          top: 48%;
-        }
-        body.page-login .portal-steps{ width: min(100vw, 700px); height: 18vh; }
-        body.page-login .login-shell{
-          padding: 18px 14px 16px;
-          gap: 16px;
-        }
-        body.page-login h1{ font-size: clamp(34px, 14vw, 56px); }
-        body.page-login .subtitle{ font-size: 14px; line-height: 1.55; }
-        body.page-login .login-panel{ padding: 18px; border-radius: 18px; }
-        body.page-login input,
-        body.page-login button{ min-height: 48px; }
+@keyframes core-flicker{
+        0%, 100%{ opacity: .7; }
+        35%{ opacity: .94; }
+        58%{ opacity: .52; }
+        82%{ opacity: .86; }
+      }
+@keyframes login-rise{
+        from{ opacity: 0; transform: translateY(18px); }
+        to{ opacity: 1; transform: translateY(0); }
+      }
+@keyframes rune-pulse{
+        0%, 100%{ opacity: .56; transform: scale(.88); }
+        50%{ opacity: 1; transform: scale(1.15); }
       }
-
+@media (max-width: 640px) {
+  body.page-login .portal-frame {
+    width: min(78vw, 360px);
+    min-width: 230px;
+    bottom: 26vh;
+  }
+  body.page-login .portal-backglow {
+    width: min(100vw, 560px);
+    top: 48%;
+  }
+  body.page-login .portal-steps {
+    width: min(100vw, 700px);
+    height: 18vh;
+  }
+  body.page-login .login-shell {
+    gap: 16px;
+  }
+  body.page-login h1 {
+    font-size: clamp(34px, 14vw, 56px);
+  }
+  body.page-login .subtitle {
+    font-size: var(--sv-text-md);
+    line-height: 1.55;
+  }
+  body.page-login .login-panel {
+    padding: 18px;
+    border-radius: var(--nebula-radius-lg);
+  }
+  body.page-login input,
+  body.page-login button {
+    min-height: 48px;
+  }
+}
 /* MAINTENANCE / WIP */
-body.page-maintenance .maintenance-panel{
+body.page-maintenance .maintenance-panel {
   display: grid;
   gap: 12px;
   align-content: start;
 }
-body.page-maintenance .maintenance-badge{
+body.page-maintenance .maintenance-badge {
   margin: 0;
   width: fit-content;
   padding: 4px 10px;
-  border-radius: 999px;
+  border-radius: var(--nebula-radius-full);
   border: 1px solid rgba(255, 140, 64, 0.35);
   background: rgba(255, 96, 24, 0.14);
   color: #ffc089;
-  font-size: 11px;
+  font-size: var(--sv-min-text);
   font-weight: 700;
   letter-spacing: 0.14em;
   text-transform: uppercase;
 }
-body.page-maintenance .maintenance-title{
+body.page-maintenance .maintenance-title {
   margin: 0;
   font-family: "Syne", "Sora", sans-serif;
   font-size: clamp(26px, 4vw, 34px);
@@ -1001,1753 +671,2217 @@ body.page-maintenance .maintenance-title{
   color: #fff6ee;
 }
 body.page-maintenance .maintenance-text,
-body.page-maintenance .maintenance-note{
+body.page-maintenance .maintenance-note {
   margin: 0;
   color: rgba(255, 236, 220, 0.78);
-  font-size: 14px;
+  font-size: var(--sv-text-md);
   line-height: 1.6;
 }
-body.page-maintenance .maintenance-note{
+body.page-maintenance .maintenance-note {
   color: rgba(255, 214, 186, 0.62);
-  font-size: 13px;
+  font-size: var(--sv-text-sm);
 }
-body.page-maintenance .maintenance-actions{
+body.page-maintenance .maintenance-actions {
   margin: 8px 0 0;
 }
-body.page-maintenance .maintenance-login-link{
+body.page-maintenance .maintenance-login-link {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 44px;
   padding: 0 18px;
-  border-radius: 12px;
+  border-radius: var(--nebula-radius-md);
   border: 1px solid rgba(255, 140, 64, 0.28);
   background: rgba(255, 255, 255, 0.04);
   color: #ffd7b8;
   text-decoration: none;
-  font-size: 13px;
+  font-size: var(--sv-text-sm);
   font-weight: 600;
 }
-body.page-maintenance .maintenance-login-link:hover{
+body.page-maintenance .maintenance-login-link:hover {
   border-color: rgba(255, 160, 80, 0.5);
   background: rgba(255, 96, 24, 0.12);
   color: #fff;
 }
-
 /* ADMIN */
-body.page-admin .tabs{ display: flex; gap: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--border); }
-      body.page-admin .tab{
-        padding: 12px 0;
-        color: var(--text-muted);
-        text-decoration: none;
-        font-weight: 500;
-        font-size: 15px;
-        border-bottom: 2px solid transparent;
-        transition: 0.2s;
-        display: flex; align-items: center; gap: 8px;
-        cursor: pointer;
-        margin-bottom: -1px;
-      }
-      body.page-admin *{ box-sizing: border-box; }
-      body.page-admin{
-        margin: 0;
-        font-family: 'Sora', sans-serif;
-        background-color: var(--bg-deep);
-        background-image: 
-            radial-gradient(circle at 15% 50%, rgba(245, 158, 11, 0.1), transparent 25%),
-            radial-gradient(circle at 85% 30%, rgba(14, 165, 233, 0.1), transparent 25%);
-        background-size: 200% 200%;
-        animation: none;
-        color: var(--text);
-        min-height: 100vh;
-        display: flex;
-      }
-      @keyframes bg-pulse{ 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
-      
-      body.page-admin ::-webkit-scrollbar{ width: 6px; height: 6px; }
-      body.page-admin ::-webkit-scrollbar-track{ background: transparent; }
-      body.page-admin ::-webkit-scrollbar-thumb{ background: rgba(255, 255, 255, 0.1); border-radius: 3px; }
-      body.page-admin ::-webkit-scrollbar-thumb:hover{ background: rgba(255, 255, 255, 0.2); }
-      
-      body.page-admin .tab:hover{ color: var(--text); }
-      body.page-admin .tab.active{ color: var(--primary); border-bottom-color: var(--primary); }
-      body.page-admin .badge{ background: rgba(255,255,255,0.1); padding: 2px 8px; border-radius: 10px; font-size: 11px; }
-      body.page-admin .tab.active .badge{ background: var(--primary); color: white; }
-      
-      
-      body.page-admin .sidebar{ width: 280px; background: rgba(3,3,5,0.6); backdrop-filter: none; border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 32px; flex-shrink: 0; }
-      body.page-admin .brand{ font-family: 'Fraunces', serif; font-size: 24px; font-weight: 700; color: white; margin-bottom: 48px; display: flex; align-items: center; gap: 10px; letter-spacing: -0.02em; }
-      body.page-admin .nav-item{ display: flex; align-items: center; gap: 14px; padding: 14px 18px; color: var(--text-muted); text-decoration: none; border-radius: 14px; margin-bottom: 6px; transition: all 0.3s ease; font-weight: 500; }
-      body.page-admin .nav-item:hover{ background: var(--glass-hover); color: white; transform: translateX(4px); }
-      body.page-admin .nav-item.active{ background: rgba(245, 158, 11, 0.15); color: white; border: 1px solid rgba(245, 158, 11, 0.2); }
-      
-      body.page-admin .main{ flex: 1; padding: 40px 60px; overflow-y: auto; animation: fade-in 0.5s ease-out; }
-      @keyframes fade-in{ from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
-      body.page-admin .header{ margin-bottom: 48px; }
-      body.page-admin .page-title{ font-family: 'Fraunces', serif; font-size: 36px; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
-      
-      body.page-admin .grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
-      body.page-admin .panel{ background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; backdrop-filter: none; }
-      body.page-admin h3{ margin: 0 0 20px; font-size: 18px; font-weight: 600; color: white; }
-      body.page-admin table{ width: 100%; border-collapse: collapse; font-size: 14px; }
-      body.page-admin th, body.page-admin td{ padding: 12px 8px; text-align: left; border-bottom: 1px solid var(--border); }
-      body.page-admin th{ color: var(--text-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
-      body.page-admin .success{ color: var(--success); }
-      body.page-admin .fail{ color: var(--danger); }
-      body.page-admin .ban-item{ display: flex; justify-content: space-between; align-items: center; padding: 12px; background: rgba(0,0,0,0.3); border-radius: 8px; margin-bottom: 8px; }
-      body.page-admin button{ background: none; border: none; cursor: pointer; color: var(--danger); font-size: 16px; }
-      body.page-admin .btn-primary{ background: linear-gradient(135deg, var(--primary), var(--accent)); color: white; padding: 10px 20px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: 0.3s; }
-      body.page-admin .btn-primary:hover{ transform: scale(1.02); box-shadow: 0 0 20px rgba(245, 158, 11, 0.3); }
-      body.page-admin input{ background: rgba(0,0,0,0.3); border: 1px solid var(--border); color: white; padding: 10px 16px; border-radius: 12px; outline: none; width: 100%; transition: 0.2s; }
-      body.page-admin input:focus{ border-color: var(--primary); box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2); }
-      body.page-admin .full-width{ grid-column: 1 / -1; }
-      body.page-admin .login-box{ max-width: 400px; margin: 100px auto; text-align: center; }
-      body.page-admin .login-box input{ width: 100%; margin-bottom: 10px; padding: 12px; }
-      body.page-admin .login-box button{ width: 100%; background: var(--primary); color: white; padding: 12px; border-radius: 6px; font-weight: bold; }
-      body.page-admin .alert{ padding: 12px; border-radius: 8px; margin-bottom: 20px; font-size: 14px; }
-      body.page-admin .alert-error{ background: rgba(239, 68, 68, 0.1); color: var(--danger); border: 1px solid rgba(239, 68, 68, 0.2); }
-      body.page-admin .alert-success{ background: rgba(34, 197, 94, 0.1); color: var(--success); border: 1px solid rgba(34, 197, 94, 0.2); }
-      body.page-admin .stat-row{ display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 14px; }
-      body.page-admin .stat-val{ font-weight: 600; color: white; }
-      @media (max-width: 900px){ body.page-admin .grid{ grid-template-columns: 1fr; } }
-      @media (max-width: 768px){ body.page-admin{ flex-direction: column; } body.page-admin .sidebar{ width: 100%; padding: 16px; } body.page-admin .main{ padding: 20px; } }
-      
-      
-      body.page-admin .input-sm{ padding: 6px 10px; font-size: 13px; border-radius: 8px; width: 100%; background: rgba(0,0,0,0.2); border: 1px solid var(--border); color: white; }
-      body.page-admin .input-sm:focus{ border-color: var(--primary); }
-      body.page-admin .btn-icon{ padding: 6px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; }
-      body.page-admin .btn-icon.save{ background: rgba(34, 197, 94, 0.1); color: var(--success); border-color: rgba(34, 197, 94, 0.2); }
-      body.page-admin .btn-icon.save:hover{ background: rgba(34, 197, 94, 0.2); }
-      body.page-admin .btn-icon.delete{ background: rgba(239, 68, 68, 0.1); color: var(--danger); border-color: rgba(239, 68, 68, 0.2); }
-      body.page-admin .btn-icon.delete:hover{ background: rgba(239, 68, 68, 0.2); }
-      body.page-admin select.input-sm{ appearance: none; background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23a1a1aa%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 10px; padding-right: 24px; }
-
-body.page-mail .mail-header{ display:flex; justify-content:space-between; align-items:flex-start; gap:18px; }
-body.page-mail .mail-webmail-btn{ text-decoration:none; white-space:nowrap; }
-body.page-mail .mail-overview{ display:grid; grid-template-columns: minmax(260px, .8fr) minmax(320px, 1.2fr); gap:24px; margin-bottom:24px; }
-body.page-mail .mail-grid{ grid-template-columns: 1fr 1fr; }
-body.page-mail .mail-panel-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; }
-body.page-mail .mail-panel-head h3{ margin:0; }
-body.page-mail .mail-status-line{ display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid var(--border); font-size:14px; }
-body.page-mail .mail-status-line span{ color:var(--text-muted); }
-body.page-mail .mail-note{ margin-top:14px; color:var(--text-muted); font-size:13px; line-height:1.5; }
-body.page-mail .mail-note-warning{ color:#fbbf24; }
-body.page-mail .mail-queue-form{ margin-top:14px; }
-body.page-mail .mail-test-form{ display:grid; gap:10px; margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
-body.page-mail .mail-test-form input,
-body.page-mail .mail-test-form select{ width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:rgba(0,0,0,.28); color:var(--text); outline:none; }
-body.page-mail .mail-test-form input:focus,
-body.page-mail .mail-test-form select:focus{ border-color:var(--primary); box-shadow:0 0 0 2px rgba(245,158,11,.2); }
-body.page-mail .btn-secondary{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 13px; border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,.08); color:var(--text); font-weight:700; cursor:pointer; }
-body.page-mail .btn-secondary:hover{ background:rgba(255,255,255,.13); border-color:rgba(245,158,11,.35); }
-body.page-mail .mail-config-list{ display:grid; gap:8px; }
-body.page-mail .mail-config-list code{ display:block; padding:9px 11px; border-radius:8px; background:rgba(0,0,0,.28); border:1px solid var(--border); color:#dbeafe; font-size:12px; overflow-wrap:anywhere; }
-body.page-mail .mail-create-form{ display:grid; gap:16px; }
-body.page-mail .mail-form-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px; }
-body.page-mail label span{ display:block; margin-bottom:7px; color:var(--text-muted); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
-body.page-mail .mail-address-field{ display:flex; align-items:center; min-width:0; border:1px solid var(--border); border-radius:12px; background:rgba(0,0,0,.3); overflow:hidden; }
-body.page-mail .mail-address-field:focus-within{ border-color:var(--primary); box-shadow:0 0 0 2px rgba(245,158,11,.2); }
-body.page-mail .mail-address-field input{ border:0; background:transparent; border-radius:0; min-width:0; }
-body.page-mail .mail-address-field em{ padding:0 12px; color:var(--text-muted); font-style:normal; font-size:13px; white-space:nowrap; border-left:1px solid var(--border); }
-body.page-mail .mail-check-row{ display:flex; flex-wrap:wrap; gap:14px 22px; color:var(--text-muted); font-size:13px; }
-body.page-mail .mail-check-row label,
-body.page-mail .mail-inline-check{ display:flex; align-items:center; gap:7px; color:var(--text-muted); font-size:13px; text-transform:none; letter-spacing:0; margin:0; }
-body.page-mail .mail-check-row input,
-body.page-mail .mail-inline-check input{ width:auto; padding:0; }
-body.page-mail .mail-table-wrap{ overflow-x:auto; }
-body.page-mail .mail-row-actions{ display:flex; align-items:center; gap:8px; }
-body.page-mail .mail-empty{ padding:28px; border:1px dashed var(--border); border-radius:12px; color:var(--text-muted); text-align:center; background:rgba(0,0,0,.16); }
-body.page-admin .btn-primary:disabled,
-body.page-admin input:disabled,
-body.page-admin button:disabled{ opacity:.48; cursor:not-allowed; transform:none; box-shadow:none; }
-
-@media (max-width: 1100px){
-  body.page-mail .mail-overview,
-  body.page-mail .mail-grid,
-  body.page-mail .mail-form-grid{ grid-template-columns:1fr; }
-}
-@media (max-width: 640px){
-  body.page-mail .mail-header{ flex-direction:column; }
-  body.page-mail .mail-webmail-btn{ width:100%; text-align:center; }
-  body.page-mail .mail-address-field{ flex-direction:column; align-items:stretch; }
-  body.page-mail .mail-address-field em{ border-left:0; border-top:1px solid var(--border); padding:8px 12px; }
+body.page-admin .tabs {
+  display: flex;
+  gap: 24px;
+  margin-bottom: 24px;
+  border-bottom: 1px solid var(--border);
 }
-/* CLIP_EDITOR */
-body.page-clip-editor *{ box-sizing: border-box; }
-      body.page-clip-editor{
-        margin: 0;
-        font-family: 'Sora', sans-serif;
-        color: var(--text);
-        background: var(--bg);
-        height: 100vh;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-      }
-      
-      body.page-clip-editor header{
-        padding: 0 20px;
-        height: 60px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        background: var(--card);
-        border-bottom: 1px solid var(--border);
-        flex-shrink: 0;
-      }
-      body.page-clip-editor .brand{ font-family: 'Fraunces', serif; font-weight: 700; font-size: 18px; display: flex; align-items: center; gap: 10px; }
-      body.page-clip-editor .close-btn{ color: var(--text-muted); text-decoration: none; font-size: 24px; padding: 10px; transition: color 0.2s; }
-      body.page-clip-editor .close-btn:hover{ color: var(--text); }
-      
-      body.page-clip-editor .main-area{
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-      }
-      
-      body.page-clip-editor .player-container{
-        flex: 1;
-        background: #000;
-        position: relative;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        min-height: 0;
-      }
-      body.page-clip-editor video{ width: 100%; height: 100%; object-fit: contain; max-height: 100%; }
-      
-      body.page-clip-editor .editor-panel{
-        background: var(--card);
-        border-top: 1px solid var(--border);
-        padding: 20px;
-        flex-shrink: 0;
-        display: flex;
-        flex-direction: column;
-        gap: 20px;
-      }
-      
-      
-      body.page-clip-editor .slider-container{ padding: 0 10px; margin-bottom: 10px; }
-      body.page-clip-editor .noUi-target{ background: #3f3f46; border: none; box-shadow: none; height: 10px; }
-      body.page-clip-editor .noUi-connect{ background: var(--primary); }
-      body.page-clip-editor .noUi-handle{ 
-        background: #fff; border: none; box-shadow: 0 0 5px rgba(0,0,0,0.5); 
-        width: 18px; height: 18px; border-radius: 50%; top: -4px; cursor: grab;
-      }
-      body.page-clip-editor .noUi-handle:active{ cursor: grabbing; }
-      body.page-clip-editor .noUi-handle::before, body.page-clip-editor .noUi-handle::after{ display: none; }
-      
-      body.page-clip-editor .controls-grid{
-        display: grid;
-        grid-template-columns: 1fr auto 1fr;
-        gap: 20px;
-        align-items: center;
-      }
-      
-      body.page-clip-editor .time-controls{ display: flex; gap: 10px; align-items: center; }
-      body.page-clip-editor .time-label{ font-family: monospace; font-size: 14px; color: var(--text-muted); width: 60px; text-align: center; }
-      body.page-clip-editor .btn-icon{
-        background: #27272a; border: 1px solid #3f3f46; color: var(--text);
-        width: 32px; height: 32px; border-radius: 6px; cursor: pointer;
-        display: flex; align-items: center; justify-content: center; font-size: 14px;
-        transition: 0.2s;
-      }
-      body.page-clip-editor .btn-icon:hover{ background: #3f3f46; }
-      
-      body.page-clip-editor .main-controls{ display: flex; gap: 10px; justify-content: center; }
-      body.page-clip-editor .btn-main{
-        background: #27272a; border: 1px solid #3f3f46; color: var(--text);
-        padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 14px;
-        display: flex; align-items: center; gap: 8px; transition: 0.2s;
-      }
-      body.page-clip-editor .btn-main:hover{ background: #3f3f46; }
-      body.page-clip-editor .btn-primary{ background: var(--primary); border-color: var(--primary); color: #fff; }
-      body.page-clip-editor .btn-primary:hover{ background: #9146ff; }
-      
-      body.page-clip-editor .meta-row{ display: flex; gap: 10px; }
-      body.page-clip-editor input[type="text"]{
-        flex: 1;
-        background: #0e0e10; border: 1px solid #3f3f46; color: var(--text);
-        padding: 10px; border-radius: 6px; outline: none; transition: border-color 0.2s;
-      }
-      body.page-clip-editor input[type="text"]:focus{ border-color: var(--primary); }
-      
-      body.page-clip-editor .msg{ padding: 10px; border-radius: 6px; margin-bottom: 10px; font-size: 14px; text-align: center; }
-      body.page-clip-editor .msg.error{ background: rgba(255, 82, 82, 0.1); color: #ff8b8b; border: 1px solid rgba(255, 82, 82, 0.2); }
-      body.page-clip-editor .msg.success{ background: rgba(34, 197, 94, 0.1); color: #86efac; border: 1px solid rgba(34, 197, 94, 0.2); }
-      
-      @media (max-width: 768px){
-        body.page-clip-editor .controls-grid{ grid-template-columns: 1fr; gap: 15px; }
-        body.page-clip-editor .time-controls{ justify-content: center; }
-        body.page-clip-editor .editor-panel{ padding: 15px; }
-      }
-/* DISCORD_TOOL */
-body.page-discord-tool *{ box-sizing: border-box; }
-      body.page-discord-tool{
-        margin: 0;
-        font-family: 'Sora', sans-serif;
-        color: var(--text-main);
-        background: var(--bg-body);
-        min-height: 100vh;
-        display: flex;
-      }
-      body.page-discord-tool .sidebar{ width: 260px; background: var(--bg-sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 24px; flex-shrink: 0; }
-      body.page-discord-tool .brand{ font-size: 20px; font-weight: 700; color: white; margin-bottom: 40px; display: flex; align-items: center; gap: 10px; }
-      body.page-discord-tool .nav-item{ display: flex; align-items: center; gap: 12px; padding: 12px; color: var(--text-muted); text-decoration: none; border-radius: 12px; margin-bottom: 4px; transition: 0.2s; font-weight: 500; }
-      body.page-discord-tool .nav-item:hover, body.page-discord-tool .nav-item.active{ background: var(--bg-card); color: white; }
-      body.page-discord-tool .nav-item.active{ color: var(--primary); }
-      body.page-discord-tool .main{ flex: 1; padding: 40px; overflow-y: auto; }
-      body.page-discord-tool .header{ margin-bottom: 30px; }
-      body.page-discord-tool .page-title{ font-size: 28px; font-weight: 700; margin: 0; }
-      body.page-discord-tool .panel{ background: var(--bg-sidebar); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 24px; }
-      body.page-discord-tool input{ width: 100%; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: #000; color: var(--text-main); outline: none; transition: border-color 0.2s; margin-bottom: 16px; }
-      body.page-discord-tool input:focus{ border-color: var(--primary); }
-      body.page-discord-tool select{ width: 100%; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: #000; color: var(--text-main); outline: none; margin-bottom: 16px; appearance: none; }
-      body.page-discord-tool button{ width: 100%; padding: 12px; border: 0; border-radius: 12px; background: var(--primary); color: white; font-weight: 600; cursor: pointer; transition: background 0.2s; }
-      body.page-discord-tool button:hover{ background: var(--primary-hover); }
-      body.page-discord-tool .btn-danger{ background: var(--danger); }
-      body.page-discord-tool .btn-danger:hover{ background: #dc2626; }
-      
-      body.page-discord-tool .profile-card{ display: flex; align-items: center; gap: 20px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
-      body.page-discord-tool .avatar{ width: 80px; height: 80px; border-radius: 50%; background: #000; object-fit: cover; }
-      body.page-discord-tool .info{ flex: 1; }
-      body.page-discord-tool .username{ font-size: 20px; font-weight: 700; color: white; }
-      body.page-discord-tool .discriminator{ color: var(--text-muted); font-size: 16px; }
-      body.page-discord-tool .detail{ font-size: 14px; color: var(--text-muted); margin-top: 4px; }
-      
-      body.page-discord-tool .grid-list{ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 20px; }
-      body.page-discord-tool .grid-item{ background: rgba(0,0,0,0.2); padding: 12px; border-radius: 12px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); }
-      body.page-discord-tool .item-icon{ width: 40px; height: 40px; border-radius: 12px; background: #000; object-fit: cover; }
-      body.page-discord-tool .item-name{ font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-      
-      body.page-discord-tool .error{ color: var(--danger); margin-top: 16px; padding: 12px; background: rgba(239, 68, 68, 0.1); border-radius: 8px; }
-      body.page-discord-tool .success{ color: var(--success); margin-top: 16px; padding: 12px; background: rgba(34, 197, 94, 0.1); border-radius: 8px; }
-      
-      body.page-discord-tool .tabs{ display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
-      body.page-discord-tool .tab{ padding: 8px 16px; cursor: pointer; color: var(--text-muted); font-weight: 600; border-radius: 8px; }
-      body.page-discord-tool .tab.active{ background: var(--bg-card); color: white; }
-      
-      body.page-discord-tool .token-list{ margin-top: 20px; }
-      body.page-discord-tool .token-item{ display: flex; justify-content: space-between; align-items: center; padding: 12px; background: rgba(0,0,0,0.2); border-radius: 8px; margin-bottom: 8px; border: 1px solid var(--border); }
-      @media (max-width: 768px){ body.page-discord-tool{ flex-direction: column; } body.page-discord-tool .sidebar{ width: 100%; padding: 16px; } body.page-discord-tool .main{ padding: 20px; } }
-      
-      body.page-discord-tool .script-box{ background: #000; padding: 12px; border-radius: 8px; font-family: monospace; font-size: 12px; color: var(--success); word-break: break-all; margin-top: 10px; cursor: pointer; border: 1px solid var(--border); position: relative; }
-      body.page-discord-tool .script-box:hover{ border-color: var(--primary); }
-      body.page-discord-tool .script-box::after{ content: 'Klicken zum Kopieren'; position: absolute; top: 0; right: 0; background: var(--primary); color: white; padding: 2px 6px; font-size: 10px; border-bottom-left-radius: 8px; }
-      
-      body.page-discord-tool .chat-input{ display: flex; gap: 10px; margin-top: 10px; }
-      body.page-discord-tool .chat-input input{ margin-bottom: 0; }
-/* INDEX */
-body.page-index *{ box-sizing: border-box; }
-      body.page-index{
-        margin: 0;
-        font-family: 'Sora', sans-serif;
-        background-color: var(--bg-deep);
-        background-image: 
-            radial-gradient(circle at 15% 50%, rgba(245, 158, 11, 0.1), transparent 25%),
-            radial-gradient(circle at 85% 30%, rgba(14, 165, 233, 0.1), transparent 25%);
-        background-size: 200% 200%;
-        animation: none;
-        color: var(--text);
-        min-height: 100vh;
-        display: flex;
-        overflow: hidden;
-      }
-      @keyframes bg-pulse{ 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
-      
-      body.page-index ::-webkit-scrollbar{ width: 6px; height: 6px; }
-      body.page-index ::-webkit-scrollbar-track{ background: transparent; }
-      body.page-index ::-webkit-scrollbar-thumb{ background: rgba(255, 255, 255, 0.1); border-radius: 3px; }
-      body.page-index ::-webkit-scrollbar-thumb:hover{ background: rgba(255, 255, 255, 0.2); }
-      
-      body.page-index a{ text-decoration: none; color: inherit; transition: 0.2s; }
-      
-      
-body.page-index .sidebar{ width: 280px; background: var(--bg-sidebar); backdrop-filter: none; border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 32px; flex-shrink: 0; }
-      body.page-index .brand{ font-family: 'Fraunces', serif; font-size: 24px; font-weight: 700; color: white; margin-bottom: 48px; display: flex; align-items: center; gap: 10px; letter-spacing: -0.02em; }
-      body.page-index .nav-item{ display: flex; align-items: center; gap: 14px; padding: 14px 18px; color: var(--text-muted); text-decoration: none; border-radius: 14px; margin-bottom: 6px; transition: all 0.3s ease; font-weight: 500; }
-      body.page-index .nav-item:hover{ background: var(--glass-hover); color: white; transform: translateX(4px); }
-      body.page-index .nav-item.active{ background: rgba(245, 158, 11, 0.15); color: white; border: 1px solid rgba(245, 158, 11, 0.2); }
-      
-      body.page-index .main{ flex: 1; padding: 40px 60px; overflow-y: auto; animation: fade-in 0.5s ease-out; }
-      @keyframes fade-in{ from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
-body.page-index .header{ margin-bottom: 40px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
-body.page-index .page-title{ font-family: 'Fraunces', serif; font-size: 36px; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
-body.page-index .page-subtitle{ margin-top: 8px; color: var(--text-muted); font-size: 14px; max-width: 640px; line-height: 1.5; }
-
-      
-      body.page-index .stats-grid{
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-        gap: 20px;
-        margin-bottom: 40px;
-      }
-body.page-index .stat-card{
-        background: var(--glass);
-        border: 1px solid var(--border);
-        border-radius: var(--radius);
-        padding: 28px;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
-        backdrop-filter: none;
-        min-height: 180px;
-        position: relative;
-        overflow: hidden;
-      }
-body.page-index .stat-card::before{
-        content: "";
-        position: absolute;
-        inset: 0;
-        border-radius: inherit;
-        background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(14, 165, 233, 0.12));
-        opacity: 0;
-        transition: opacity 0.25s ease;
-        pointer-events: none;
-      }
-body.page-index .stat-card > *{ position: relative; z-index: 1; }
-body.page-index .stat-card:hover{
-        transform: translateY(-6px);
-        border-color: rgba(245, 158, 11, 0.35);
-        box-shadow: 0 26px 50px -18px rgba(245, 158, 11, 0.28);
-      }
-body.page-index .stat-card:hover::before{ opacity: 1; }
-      body.page-index .stat-head{ display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
-      body.page-index .stat-label{ font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
-      body.page-index .stat-icon{ font-size: 20px; opacity: 0.5; }
-      body.page-index .stat-value{ font-size: 24px; font-weight: 700; color: white; line-height: 1.1; }
-      body.page-index .stat-sub{ font-size: 13px; color: var(--text-muted); margin-top: 6px; }
-      
-      body.page-index .progress-track{
-        height: 6px;
-        background: rgba(0,0,0,0.3);
-        border-radius: 3px;
-        margin-top: 16px;
-        overflow: hidden;
-      }
-      body.page-index .progress-fill{ height: 100%; border-radius: 3px; transition: width 0.5s ease; }
-
-      
-      body.page-index .res-row{ display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 13px; }
-      body.page-index .res-label{ width: 40px; color: var(--text-muted); font-weight: 600; }
-      body.page-index .res-bar{ flex: 1; height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
-      body.page-index .res-fill{ height: 100%; background: var(--primary); transition: width 0.5s; }
-      body.page-index .res-val{ width: 50px; text-align: right; font-family: monospace; color: white; font-size: 12px; }
-      
-      
-      body.page-index .live-input-group{ display: flex; gap: 8px; margin-top: auto; }
-      body.page-index .live-input-group input{ flex: 1; background: rgba(0,0,0,0.3); border: 1px solid var(--border); color: white; padding: 10px; border-radius: 8px; width: 100%; outline:none; transition:0.2s; }
-      body.page-index .live-input-group input:focus{ border-color: var(--primary); }
-      body.page-index .live-input-group button{ background: var(--primary); color: white; border: none; border-radius: 8px; width: 40px; cursor: pointer; font-size: 16px; display:flex; align-items:center; justify-content:center; transition:0.2s; }
-      body.page-index .live-input-group button:hover{ background: var(--accent); }
-
-      
-      body.page-index .mgmt-section{
-        background: var(--glass);
-        border: 1px solid var(--border);
-        border-radius: var(--radius);
-        margin-bottom: 40px;
-        overflow: hidden;
-        backdrop-filter: none;
-        scroll-margin-top: 20px;
-      }
-      body.page-index .mgmt-header{
-        padding: 24px 32px;
-        background: rgba(255,255,255,0.02);
-        border-bottom: 1px solid var(--border);
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        flex-wrap: wrap;
-        gap: 16px;
-      }
-      body.page-index .mgmt-title{ font-family: 'Fraunces', serif; font-size: 18px; font-weight: 600; color: white; display: flex; align-items: center; gap: 12px; }
-      body.page-index .mgmt-body{ padding: 32px; }
-      
-      body.page-index .mgmt-controls{ display: flex; gap: 12px; align-items: center; flex-wrap: wrap; width: 100%; }
-      
-      body.page-index .channel-input-group{
-        display: flex;
-        background: rgba(0,0,0,0.3);
-        border: 1px solid var(--border);
-        border-radius: 12px;
-        padding: 6px;
-        transition: border-color 0.2s;
-        flex: 1;
-        max-width: 600px;
-      }
-      body.page-index .channel-input-group:focus-within{ border-color: var(--primary); box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2); }
-      body.page-index .channel-input-group input{
-        border: none;
-        background: transparent;
-        padding: 10px 16px;
-        outline: none;
-        color: white;
-        width: 100%;
-        font-size: 16px;
-      }
-      body.page-index .channel-input-group button{
-        border: none;
-        background: linear-gradient(135deg, var(--primary), var(--accent));
-        color: #fff;
-        padding: 8px 24px;
-        border-radius: 8px;
-        font-weight: 600;
-        cursor: pointer;
-        font-size: 14px;
-        transition: 0.2s;
-        white-space: nowrap;
-      }
-      body.page-index .channel-input-group button{ position: relative; overflow: hidden; }
-      body.page-index .channel-input-group button::after{
-        content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
-        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: 0.5s;
-      }
-      body.page-index .channel-input-group button:hover{ transform: scale(1.05); box-shadow: 0 0 15px rgba(245, 158, 11, 0.4); }
-      body.page-index .channel-input-group button:hover::after{ left: 100%; }
-      
-      body.page-index .btn-restart{
-        background: rgba(255,255,255,0.05);
-        color: var(--text-muted);
-        border: 1px solid var(--border);
-        padding: 12px 24px;
-        border-radius: 12px;
-        font-weight: 600;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        transition: 0.2s;
-        font-size: 14px;
-      }
-      body.page-index .btn-restart:hover{ background: rgba(255,255,255,0.1); color: white; }
-      
-      body.page-index .channel-grid{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
-      body.page-index .channel-chip{
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        background: rgba(0,0,0,0.3);
-        border: 1px solid var(--border);
-        padding: 8px 12px 8px 16px;
-        border-radius: 100px;
-        font-size: 14px;
-        font-weight: 500;
-        color: #fff;
-        transition: 0.2s;
-      }
-      body.page-index .channel-chip:hover{
-        border-color: var(--primary);
-        transform: translateY(-1px);
-        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
-      }
-      body.page-index .channel-chip button{
-        background: transparent;
-        border: none;
-        color: var(--muted);
-        cursor: pointer;
-        padding: 0;
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: 0.2s;
-        font-size: 16px;
-        width: 24px; height: 24px;
-      }
-      body.page-index .channel-chip button:hover{
-        background: rgba(255, 82, 82, 0.2);
-        color: var(--danger);
-      }
-
-      
-      body.page-index .grid-title{ font-family: 'Fraunces', serif; font-size: 24px; font-weight: 700; margin-bottom: 32px; display: flex; align-items: center; gap: 12px; color: white; }
-      body.page-index .live-pulse{ width: 10px; height: 10px; background: var(--danger); border-radius: 50%; box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7); animation: pulse-red 2s infinite; }
-      
-      body.page-index .streamer-grid{
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
-        gap: 24px;
-      }
-      
-      body.page-index .card{
-        background: var(--glass);
-        border: 1px solid var(--border);
-        border-radius: var(--radius);
-        overflow: hidden;
-        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        backdrop-filter: none;
-      }
-      body.page-index .card:hover{
-        transform: translateY(-10px);
-        box-shadow: 0 20px 40px -10px rgba(245, 158, 11, 0.15);
-        border-color: rgba(245, 158, 11, 0.3);
-      }
-      
-      body.page-index .card-header{
-        padding: 24px;
-        display: flex;
-        align-items: center;
-        gap: 16px;
-        background: linear-gradient(to bottom, rgba(255,255,255,0.03), transparent);
-      }
-      
-      body.page-index .avatar{
-        width: 56px;
-        height: 56px;
-        border-radius: 18px;
-        background: linear-gradient(135deg, #3d4554, #2b303b);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 20px;
-        font-weight: 700;
-        color: var(--text-muted);
-        box-shadow: 0 8px 16px rgba(0,0,0,0.2);
-        position: relative;
-        overflow: hidden;
-      }
-      body.page-index .avatar.online{ background: linear-gradient(135deg, var(--success), #27ae60); color: #fff; }
-      body.page-index .avatar.recording{ background: linear-gradient(135deg, var(--danger), #c0392b); color: #fff; }
-      body.page-index .avatar img{ width: 100%; height: 100%; object-fit: cover; display: block; }
-      
-      body.page-index .card-meta{ flex: 1; min-width: 0; }
-      body.page-index .streamer-name{ font-family: 'Fraunces', serif; font-size: 18px; font-weight: 700; margin: 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: white; }
-      body.page-index .status-badge{
-        display: inline-flex;
-        align-items: center;
-        gap: 6px;
-        font-size: 11px;
-        font-weight: 600;
-        padding: 4px 10px;
-        border-radius: 12px;
-        background: rgba(0,0,0,0.4);
-        color: var(--text-muted);
-      }
-      body.page-index .status-badge.live{ background: rgba(255, 82, 82, 0.15); color: var(--danger); }
-      body.page-index .status-badge.online{ background: rgba(46, 204, 113, 0.15); color: var(--success); }
-      
-      body.page-index .card-stats{
-        padding: 0 24px 24px;
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 12px;
-      }
-      body.page-index .stat-box{
-        background: rgba(0,0,0,0.2);
-        padding: 12px;
-        border-radius: 12px;
-        text-align: center;
-      }
-      body.page-index .stat-box-label{ font-size: 10px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; letter-spacing: 0.5px; }
-      body.page-index .stat-box-val{ font-size: 14px; font-weight: 600; color: white; }
-      
-      body.page-index .card-actions{
-        margin-top: auto;
-        padding: 16px 24px;
-        border-top: 1px solid var(--border);
-        background: rgba(0,0,0,0.1);
-        display: flex;
-        gap: 10px;
-      }
-      body.page-index .action-btn{
-        flex: 1;
-        text-align: center;
-        padding: 10px;
-        border-radius: 12px;
-        font-size: 13px;
-        font-weight: 600;
-        background: rgba(255,255,255,0.05);
-        transition: 0.2s;
-      }
-      body.page-index .action-btn:hover{ background: rgba(255,255,255,0.1); color: #fff; transform: translateY(-2px); }
-      body.page-index .action-btn.primary{ background: linear-gradient(135deg, var(--primary), var(--accent)); color: white; position: relative; overflow: hidden; }
-      body.page-index .action-btn.primary::after{
-        content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
-        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: 0.5s;
-      }
-      body.page-index .action-btn.primary:hover{ box-shadow: 0 0 15px rgba(245, 158, 11, 0.3); }
-      body.page-index .action-btn.primary:hover::after{ left: 100%; }
-      
-      body.page-index .empty-state{
-        text-align: center;
-        padding: 60px;
-        color: var(--text-muted);
-        background: var(--glass);
-        border-radius: 20px;
-        border: 1px dashed var(--border);
-      }
-
-      @keyframes pulse-red{ 0% { box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(255, 82, 82, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 82, 82, 0); } }
-      @media (max-width: 768px){ body.page-index{ flex-direction: column; overflow: auto; } body.page-index .sidebar{ width: 100%; padding: 16px; } body.page-index .main{ padding: 20px; overflow: visible; } }
-/* CHANNELS */
-body.page-channels *{ box-sizing: border-box; }
-      body.page-channels{
-        margin: 0;
-        font-family: 'Sora', sans-serif;
-        background-color: var(--bg-deep);
-        background-image: 
-            radial-gradient(circle at 15% 50%, rgba(245, 158, 11, 0.1), transparent 25%),
-            radial-gradient(circle at 85% 30%, rgba(14, 165, 233, 0.1), transparent 25%);
-        background-size: 200% 200%;
-        animation: none;
-        color: var(--text);
-        min-height: 100vh;
-        display: flex;
-      }
-      @keyframes bg-pulse{ 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
-      
-      body.page-channels ::-webkit-scrollbar{ width: 6px; height: 6px; }
-      body.page-channels ::-webkit-scrollbar-track{ background: transparent; }
-      body.page-channels ::-webkit-scrollbar-thumb{ background: rgba(255, 255, 255, 0.1); border-radius: 3px; }
-      body.page-channels ::-webkit-scrollbar-thumb:hover{ background: rgba(255, 255, 255, 0.2); }
-      
-      body.page-channels a{ text-decoration: none; color: inherit; transition: 0.2s; }
-      
-      
-      body.page-channels .sidebar{ width: 280px; background: rgba(3,3,5,0.6); backdrop-filter: none; border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 32px; flex-shrink: 0; }
-      body.page-channels .brand{ font-family: 'Fraunces', serif; font-size: 24px; font-weight: 700; color: white; margin-bottom: 48px; display: flex; align-items: center; gap: 10px; letter-spacing: -0.02em; }
-      body.page-channels .nav-item{ display: flex; align-items: center; gap: 14px; padding: 14px 18px; color: var(--text-muted); text-decoration: none; border-radius: 14px; margin-bottom: 6px; transition: all 0.3s ease; font-weight: 500; }
-      body.page-channels .nav-item:hover{ background: var(--glass-hover); color: white; transform: translateX(4px); }
-      body.page-channels .nav-item.active{ background: rgba(245, 158, 11, 0.15); color: white; border: 1px solid rgba(245, 158, 11, 0.2); }
-      
-      body.page-channels .main{ flex: 1; padding: 40px 60px; overflow-y: auto; animation: fade-in 0.5s ease-out; }
-      @keyframes fade-in{ from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
-      body.page-channels .header{ margin-bottom: 48px; display: flex; justify-content: space-between; align-items: center; }
-      body.page-channels .page-title{ font-family: 'Fraunces', serif; font-size: 36px; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
-
-      
-      body.page-channels .mgmt-section{
-        background: var(--glass);
-        border: 1px solid var(--border);
-        border-radius: var(--radius);
-        margin-bottom: 40px;
-        overflow: hidden;
-        backdrop-filter: none;
-      }
-      body.page-channels .mgmt-body{ padding: 32px; }
-      
-      body.page-channels .mgmt-controls{ display: flex; gap: 12px; align-items: center; flex-wrap: wrap; width: 100%; }
-      
-      body.page-channels .channel-input-group{
-        display: flex;
-        background: rgba(0,0,0,0.3);
-        border: 1px solid var(--border);
-        border-radius: 12px;
-        padding: 6px;
-        transition: border-color 0.2s;
-        flex: 1;
-        max-width: 600px;
-      }
-      body.page-channels .channel-input-group:focus-within{ border-color: var(--primary); box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2); }
-      body.page-channels .channel-input-group input{
-        border: none;
-        background: transparent;
-        padding: 10px 16px;
-        outline: none;
-        color: white;
-        width: 100%;
-        font-size: 16px;
-      }
-      body.page-channels .channel-input-group button{
-        border: none;
-        background: linear-gradient(135deg, var(--primary), var(--accent));
-        color: #fff;
-        padding: 8px 24px;
-        border-radius: 8px;
-        font-weight: 600;
-        cursor: pointer;
-        font-size: 14px;
-        transition: 0.2s;
-        white-space: nowrap;
-      }
-      body.page-channels .channel-input-group button{ position: relative; overflow: hidden; }
-      body.page-channels .channel-input-group button::after{
-        content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
-        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: 0.5s;
-      }
-      body.page-channels .channel-input-group button:hover{ transform: scale(1.05); box-shadow: 0 0 15px rgba(245, 158, 11, 0.4); }
-      body.page-channels .channel-input-group button:hover::after{ left: 100%; }
-      
-      body.page-channels .btn-restart{
-        background: rgba(255,255,255,0.05);
-        color: var(--text-muted);
-        border: 1px solid var(--border);
-        padding: 12px 24px;
-        border-radius: 12px;
-        font-weight: 600;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        transition: 0.2s;
-        font-size: 14px;
-      }
-      body.page-channels .btn-restart:hover{ background: rgba(255,255,255,0.1); color: white; }
-      
-      body.page-channels .channel-grid{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
-      body.page-channels .channel-chip{
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        background: rgba(0,0,0,0.3);
-        border: 1px solid var(--border);
-        padding: 8px 12px 8px 16px;
-        border-radius: 100px;
-        font-size: 14px;
-        font-weight: 500;
-        color: #fff;
-        transition: 0.2s;
-      }
-      body.page-channels .channel-chip:hover{
-        border-color: var(--primary);
-        transform: translateY(-1px);
-        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
-      }
-      body.page-channels .channel-chip button{
-        background: transparent;
-        border: none;
-        color: var(--muted);
-        cursor: pointer;
-        padding: 0;
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: 0.2s;
-        font-size: 16px;
-        width: 24px; height: 24px;
-      }
-      body.page-channels .channel-chip button:hover{
-        background: rgba(255, 82, 82, 0.2);
-        color: var(--danger);
-      }
-      @media (max-width: 768px){ body.page-channels{ flex-direction: column; overflow: auto; } body.page-channels .sidebar{ width: 100%; padding: 16px; } body.page-channels .main{ padding: 20px; overflow: visible; } }
-/* STREAMER */
-body.page-streamer *{ box-sizing: border-box; }
-      body.page-streamer{
-        margin: 0;
-        font-family: 'Sora', sans-serif;
-        background-color: var(--bg-deep);
-        background-image: 
-            radial-gradient(circle at 15% 50%, rgba(245, 158, 11, 0.1), transparent 25%),
-            radial-gradient(circle at 85% 30%, rgba(14, 165, 233, 0.1), transparent 25%);
-        background-size: 200% 200%;
-        animation: none;
-        color: var(--text);
-        min-height: 100vh;
-        display: flex;
-      }
-      @keyframes bg-pulse{ 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
-      
-      body.page-streamer ::-webkit-scrollbar{ width: 6px; height: 6px; }
-      body.page-streamer ::-webkit-scrollbar-track{ background: transparent; }
-      body.page-streamer ::-webkit-scrollbar-thumb{ background: rgba(255, 255, 255, 0.1); border-radius: 3px; }
-      body.page-streamer ::-webkit-scrollbar-thumb:hover{ background: rgba(255, 255, 255, 0.2); }
-      
-      
-      body.page-streamer .sidebar{ width: 280px; background: rgba(3,3,5,0.6); backdrop-filter: none; border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 32px; flex-shrink: 0; }
-      body.page-streamer .brand{ font-family: 'Fraunces', serif; font-size: 24px; font-weight: 700; color: white; margin-bottom: 48px; display: flex; align-items: center; gap: 10px; letter-spacing: -0.02em; }
-      body.page-streamer .nav-item{ display: flex; align-items: center; gap: 14px; padding: 14px 18px; color: var(--text-muted); text-decoration: none; border-radius: 14px; margin-bottom: 6px; transition: all 0.3s ease; font-weight: 500; }
-      body.page-streamer .nav-item:hover{ background: var(--glass-hover); color: white; transform: translateX(4px); }
-      body.page-streamer .nav-item.active{ background: rgba(245, 158, 11, 0.15); color: white; border: 1px solid rgba(245, 158, 11, 0.2); }
-      
-      body.page-streamer .main{ flex: 1; padding: 40px 60px; overflow-y: auto; animation: fade-in 0.5s ease-out; }
-      @keyframes fade-in{ from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
-      body.page-streamer .header{ margin-bottom: 48px; display: flex; justify-content: space-between; align-items: center; }
-      body.page-streamer .page-title{ font-family: 'Fraunces', serif; font-size: 36px; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
-      
-      
-      body.page-streamer .video-grid{
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
-        gap: 20px;
-      }
-      body.page-streamer .video-card{
-        background: var(--glass);
-        border: 1px solid var(--border);
-        border-radius: var(--radius);
-        overflow: hidden;
-        transition: transform 0.2s, box-shadow 0.2s;
-        display: flex;
-        flex-direction: column;
-        backdrop-filter: none;
-      }
-      body.page-streamer .video-card:hover{
-        transform: translateY(-10px);
-        box-shadow: 0 20px 40px -10px rgba(245, 158, 11, 0.15);
-        border-color: rgba(245, 158, 11, 0.3);
-      }
-      body.page-streamer .thumb-wrap{
-        aspect-ratio: 16/9;
-        background: #000;
-        position: relative;
-      }
-      body.page-streamer .thumb-img{ width: 100%; height: 100%; object-fit: cover; }
-      body.page-streamer .duration-badge{
-        position: absolute;
-        bottom: 8px; right: 8px;
-        background: rgba(0,0,0,0.8);
-        color: #fff;
-        font-size: 11px;
-        padding: 2px 6px;
-        border-radius: 4px;
-        font-weight: 600;
-      }
-      body.page-streamer .card-body{ padding: 20px; flex: 1; display: flex; flex-direction: column; }
-      body.page-streamer .video-title{
-        font-weight: 600; font-size: 16px; margin-bottom: 8px; color: white;
-        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4;
-      }
-      body.page-streamer .video-meta{ font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
-      body.page-streamer .card-actions{
-        margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
-      }
-      body.page-streamer button{
-        background: none; border: none; cursor: pointer; color: var(--text-muted);
-      }
-      body.page-streamer form{ margin: 0; }
-      body.page-streamer .tag{
-        font-size: 11px;
-        padding: 2px 8px;
-        border-radius: 999px;
-        border: 1px solid rgba(255,255,255,0.14);
-        color: var(--muted);
-      }
-      body.page-streamer .clip{ border-color: var(--primary); color: var(--primary); }
-      body.page-streamer .empty-badge{ position: absolute; top: 8px; left: 8px; background: rgba(255,82,82,0.9); color: white; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: bold; }
-      body.page-streamer .row{ display: flex; align-items: center; gap: 8px; }
-      body.page-streamer .muted{ color: var(--text-muted); font-size: 13px; white-space: nowrap; }
-      body.page-streamer .btn-icon{
-        padding: 6px 10px;
-        border-radius: 999px;
-        border: 1px solid var(--border);
-        background: rgba(255,255,255,0.05);
-        color: var(--text-muted);
-        font-size: 12px;
-        cursor: pointer;
-        transition: 0.2s;
-      }
-      body.page-streamer .btn-icon:hover{ background: rgba(255,255,255,0.1); color: #fff; transform: scale(1.1); }
-      body.page-streamer .btn-icon.share{
-        padding: 6px 10px;
-        border-radius: 999px;
-        border: 1px solid var(--border);
-        background: rgba(255,255,255,0.05);
-        color: var(--text-muted);
-        font-size: 12px;
-        cursor: pointer;
-      }
-      body.page-streamer .btn-icon.download{
-        padding: 6px 10px;
-        border-radius: 999px;
-        border: 1px solid var(--border);
-        background: rgba(255,255,255,0.05);
-        color: var(--text-muted);
-      }
-      body.page-streamer .panel{ margin-bottom: 32px; padding: 24px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--glass); backdrop-filter: none; }
-      body.page-streamer .share-box{
-        margin-bottom: 20px;
-        padding: 12px 16px;
-        border-radius: 12px;
-        border: 1px solid var(--border);
-        background: var(--glass);
-        display: flex;
-        gap: 8px;
-        align-items: center;
-        flex-wrap: wrap;
-      }
-      body.page-streamer .share-box input{
-        flex: 1;
-        min-width: 240px;
-        background: rgba(0,0,0,0.3);
-        border: 1px solid var(--border);
-        color: white;
-        padding: 8px;
-        border-radius: 6px;
-      }
-      
-      body.page-streamer .btn-action{
-        background: linear-gradient(135deg, var(--primary), var(--accent));
-        color: white;
-        padding: 8px 16px;
-        border-radius: 8px;
-        font-weight: 600;
-        font-size: 13px;
-        transition: 0.3s;
-      }
-      body.page-streamer .btn-action:hover{ transform: scale(1.05); box-shadow: 0 0 15px rgba(245, 158, 11, 0.3); }
-      body.page-streamer .btn-action{ position: relative; overflow: hidden; }
-      body.page-streamer .btn-action::after{
-        content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
-        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: 0.5s;
-      }
-      body.page-streamer .btn-action:hover{ transform: scale(1.05); box-shadow: 0 0 15px rgba(245, 158, 11, 0.3); }
-      body.page-streamer .btn-action:hover::after{ left: 100%; }
-      
-      body.page-streamer select, body.page-streamer input[name="q"]{
-        background: rgba(0,0,0,0.3);
-        border: 1px solid var(--border);
-        color: #fff;
-        padding: 8px 12px;
-        border-radius: 8px;
-        outline: none;
-      }
-      
-      
-      body.page-streamer .tabs{ display: inline-flex; background: rgba(0,0,0,0.3); padding: 4px; border-radius: 12px; border: 1px solid var(--border); margin-bottom: 24px; }
-      body.page-streamer .tab{ padding: 8px 20px; color: var(--text-muted); text-decoration: none; font-weight: 600; font-size: 14px; border-radius: 8px; transition: 0.2s; display: flex; align-items: center; gap: 8px; cursor: pointer; }
-      body.page-streamer .tab:hover{ color: var(--text); background: rgba(255,255,255,0.05); }
-      body.page-streamer .tab.active{ background: var(--primary); color: white; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3); }
-      body.page-streamer .badge{ background: rgba(255,255,255,0.15); padding: 2px 8px; border-radius: 6px; font-size: 11px; }
-      body.page-streamer .tab.active .badge{ background: rgba(255,255,255,0.2); color: white; }
-/* VOD */
-body.page-vod *{ box-sizing: border-box; }
-      body.page-vod{
-        margin: 0;
-        font-family: 'Sora', sans-serif;
-        background-color: var(--bg-deep);
-        background-image: 
-            radial-gradient(circle at 15% 50%, rgba(245, 158, 11, 0.1), transparent 25%),
+body.page-admin .tab {
+  padding: 12px 0;
+  color: var(--text-muted);
+  text-decoration: none;
+  font-weight: 500;
+  font-size: var(--sv-text-md);
+  border-bottom: 2px solid transparent;
+  transition: 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  margin-bottom: -1px;
+}
+body.page-admin * {
+  box-sizing: border-box;
+}
+body.page-admin {
+  margin: 0;
+  font-family: 'Sora', sans-serif;
+  background-color: var(--bg-deep);
+  background-image: radial-gradient(circle at 15% 50%, rgba(245, 158, 11, 0.1), transparent 25%),
             radial-gradient(circle at 85% 30%, rgba(14, 165, 233, 0.1), transparent 25%);
-        background-size: 200% 200%;
-        animation: none;
-        color: var(--text);
-        height: 100vh;
-        display: flex;
-        overflow: hidden;
-      }
-      @keyframes bg-pulse{ 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
-      
-      body.page-vod ::-webkit-scrollbar{ width: 6px; height: 6px; }
-      body.page-vod ::-webkit-scrollbar-track{ background: transparent; }
-      body.page-vod ::-webkit-scrollbar-thumb{ background: rgba(255, 255, 255, 0.1); border-radius: 3px; }
-      body.page-vod ::-webkit-scrollbar-thumb:hover{ background: rgba(255, 255, 255, 0.2); }
-      
-      
-      body.page-vod .sidebar{ width: 280px; background: rgba(3,3,5,0.6); backdrop-filter: none; border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 32px; flex-shrink: 0; }
-      body.page-vod .brand{ font-family: 'Fraunces', serif; font-size: 24px; font-weight: 700; color: white; margin-bottom: 48px; display: flex; align-items: center; gap: 10px; letter-spacing: -0.02em; }
-      body.page-vod .nav-item{ display: flex; align-items: center; gap: 14px; padding: 14px 18px; color: var(--text-muted); text-decoration: none; border-radius: 14px; margin-bottom: 6px; transition: all 0.3s ease; font-weight: 500; }
-      body.page-vod .nav-item:hover{ background: var(--glass-hover); color: white; transform: translateX(4px); }
-      body.page-vod .nav-item.active{ background: rgba(245, 158, 11, 0.15); color: white; border: 1px solid rgba(245, 158, 11, 0.2); }
-
-      body.page-vod .main{ flex: 1; display: flex; flex-direction: column; overflow: hidden; animation: fade-in 0.5s ease-out; }
-      @keyframes fade-in{ from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
-      body.page-vod header{ padding: 24px 40px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
-      body.page-vod .page-title{ font-family: 'Fraunces', serif; font-size: 24px; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
-
-      body.page-vod .content{ flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 20px; padding: 20px; min-height: 0; }
-      body.page-vod .content.solo{ grid-template-columns: 1fr; }
-      
-      body.page-vod .main-col{ display: flex; flex-direction: column; gap: 16px; min-height: 0; }
-      
-      body.page-vod .player-wrapper{ flex: 1; min-height: 0; display: flex; flex-direction: column; background: #000; border-radius: 12px; position: relative; box-shadow: 0 16px 40px rgba(0,0,0,0.4); }
-      body.page-vod video{ width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }
-      
-      body.page-vod .chat-panel{
-        height: 100%;
-        border-radius: 12px;
-        border: 1px solid var(--border);
-        background: var(--glass);
-        backdrop-filter: none;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-      }
-      body.page-vod .chat-header{
-        padding: 16px;
-        border-bottom: 1px solid var(--border);
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        font-size: 12px;
-        text-transform: uppercase;
-        letter-spacing: 0.12em;
-        color: var(--text-muted);
-      }
-      body.page-vod .chat-list{
-        padding: 16px;
-        flex: 1;
-        overflow-y: auto;
-      }
-      body.page-vod .chat-line{ display: grid; grid-template-columns: 44px auto; gap: 8px; align-items: baseline; }
-      body.page-vod .chat-time{ color: var(--text-muted); font-size: 11px; }
-      body.page-vod .chat-user{ color: var(--primary); font-weight: 700; margin-right: 6px; }
-      body.page-vod .chat-msg{ color: #fff; }
-      body.page-vod .chat-text{ display: inline; }
-      body.page-vod .chat-toggle{
-        padding: 4px 10px;
-        border-radius: 999px;
-        border: 1px solid var(--border);
-        background: rgba(255,255,255,0.05);
-        color: var(--text-muted);
-        font-size: 11px;
-        cursor: pointer;
-      }
-      @media (max-width: 960px){
-        body.page-vod{ height: auto; overflow: auto; display: block; }
-        body.page-vod .content{ display: flex; flex-direction: column; height: auto; }
-        body.page-vod .player-wrapper{ height: auto; aspect-ratio: 16/9; }
-        body.page-vod .chat-panel{ height: 400px; }
-      }
-      
-      body.page-vod .controls-panel{ flex-shrink: 0; padding: 20px; border-radius: 12px; border: 1px solid var(--border); background: var(--glass); backdrop-filter: none; }
-      
-      body.page-vod .row{ display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
-      body.page-vod input{
-        padding: 8px 10px;
-        border-radius: 10px;
-        border: 1px solid var(--border);
-        background: rgba(0,0,0,0.3);
-        color: white;
-      }
-      body.page-vod button{
-        padding: 10px 20px;
-        border: 0;
-        border-radius: 12px;
-        background: linear-gradient(135deg, var(--primary), var(--accent));
-        color: white;
-        font-weight: 600;
-        cursor: pointer;
-        transition: 0.3s;
-        position: relative; overflow: hidden;
-      }
-      body.page-vod button::after{
-        content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
-        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: 0.5s;
-      }
-      body.page-vod button:hover{ transform: scale(1.05); box-shadow: 0 0 15px rgba(245, 158, 11, 0.3); }
-      body.page-vod button:hover::after{ left: 100%; }
-      body.page-vod .note{ color: var(--text-muted); font-size: 12px; margin-top: 8px; }
-      body.page-vod .error{ color: #ff8b8b; font-size: 13px; margin-top: 8px; }
-      body.page-vod .quick{ border-radius: 999px; background: rgba(99, 102, 241, 0.1); color: var(--primary); border: 1px solid rgba(99, 102, 241, 0.2); font-weight: 600; }
-      body.page-vod .dl-card{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; background: rgba(0,0,0,0.3); border-radius: 12px; text-align: center; padding: 20px; }
-/* HLS */
-body.page-hls *{ box-sizing: border-box; }
-      body.page-hls{
-        margin: 0;
-        font-family: 'Fraunces', serif;
-        color: var(--ink);
-        background:
-          radial-gradient(900px 400px at 10% -10%, rgba(255,138,61,0.18), transparent 60%),
-          radial-gradient(700px 500px at 110% 0%, rgba(43,179,255,0.16), transparent 60%),
-          linear-gradient(180deg, var(--bg-1), var(--bg-2));
-        min-height: 100vh;
-      }
-      body.page-hls header{ padding: 22px 28px; display: flex; justify-content: space-between; align-items: center; }
-      body.page-hls a{ color: var(--accent-2); text-decoration: none; }
-      body.page-hls .content{ display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; padding: 0 28px 28px; }
-      body.page-hls .player{ padding: 0; }
-      body.page-hls video{ width: 100%; max-height: 80vh; background: #000; border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,0.4); }
-      body.page-hls .chat-panel{
-        border-radius: 12px;
-        border: 1px solid rgba(255,255,255,0.08);
-        background: rgba(255,255,255,0.03);
-        display: flex;
-        flex-direction: column;
-        min-height: 240px;
-        max-height: 80vh;
-      }
-      body.page-hls .chat-header{
-        padding: 10px 12px;
-        border-bottom: 1px solid rgba(255,255,255,0.08);
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        font-size: 12px;
-        text-transform: uppercase;
-        letter-spacing: 0.12em;
-        color: var(--muted);
-      }
-      body.page-hls .chat-list{
-        padding: 10px 12px;
-        overflow-y: auto;
-        display: flex;
-        flex-direction: column;
-        gap: 6px;
-        font-size: 13px;
-      }
-      body.page-hls .chat-line{ display: flex; gap: 8px; align-items: baseline; }
-      body.page-hls .chat-time{ color: var(--muted); font-size: 11px; min-width: 44px; }
-      body.page-hls .chat-user{ color: var(--accent-2); font-weight: 600; }
-      body.page-hls .chat-msg{ color: var(--ink); }
-      body.page-hls .chat-toggle{
-        padding: 4px 10px;
-        border-radius: 999px;
-        border: 1px solid rgba(43,179,255,0.35);
-        background: rgba(43,179,255,0.18);
-        color: var(--accent-2);
-        font-size: 11px;
-        cursor: pointer;
-      }
-      @media (max-width: 960px){
-        body.page-hls .content{ grid-template-columns: 1fr; }
-        body.page-hls .chat-panel{ max-height: 320px; }
-      }
-      body.page-hls .note{ padding: 0 28px 16px; color: var(--muted); }
-      body.page-hls button{
-        padding: 10px 14px;
-        border: 0;
-        border-radius: 10px;
-        background: linear-gradient(90deg, var(--accent), #ffb05a);
-        color: #141414;
-        font-weight: 700;
-        cursor: pointer;
-      }
-/* LIVE */
-body.page-live *{ box-sizing: border-box; }
-      body.page-live{
-        margin: 0;
-        font-family: 'Fraunces', serif;
-        color: var(--ink);
-        background:
-          radial-gradient(900px 400px at 10% -10%, rgba(255,138,61,0.18), transparent 60%),
-          radial-gradient(700px 500px at 110% 0%, rgba(43,179,255,0.16), transparent 60%),
-          linear-gradient(180deg, var(--bg-1), var(--bg-2));
-        height: 100vh;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-      }
-      body.page-live header{ padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; background: rgba(0,0,0,0.2); border-bottom: 1px solid rgba(255,255,255,0.05); }
-      body.page-live a{ color: var(--accent-2); text-decoration: none; }
-      body.page-live .content{ flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 20px; padding: 20px; min-height: 0; }
-      
-      body.page-live .main-col{ display: flex; flex-direction: column; gap: 16px; min-height: 0; }
-      
-      body.page-live .player-wrapper{ flex: 1; min-height: 0; display: flex; flex-direction: column; background: #000; border-radius: 12px; position: relative; box-shadow: 0 16px 40px rgba(0,0,0,0.4); }
-      body.page-live video{ width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }
-      
-      body.page-live .note{ color: var(--muted); font-size: 13px; }
-      body.page-live .badge{ color: #ff8b8b; font-weight: 600; }
-      
-      body.page-live .controls-panel{ flex-shrink: 0; padding: 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); }
-      body.page-live .controls-panel h3{ margin: 0 0 10px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
-      
-      body.page-live .row{ display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
-      body.page-live input{
-        padding: 8px 10px;
-        border-radius: 10px;
-        border: 1px solid rgba(255,255,255,0.1);
-        background: #0f1218;
-        color: var(--ink);
-      }
-      body.page-live button{
-        padding: 8px 12px;
-        border: 0;
-        border-radius: 10px;
-        background: linear-gradient(90deg, var(--accent), #ffb05a);
-        color: #141414;
-        font-weight: 700;
-        cursor: pointer;
-      }
-      body.page-live .status{ color: var(--muted); font-size: 12px; margin-bottom: 8px; }
-      
-      body.page-live .chat-panel{
-        height: 100%;
-        border-radius: 12px;
-        border: 1px solid rgba(255,255,255,0.08);
-        background: rgba(15, 18, 24, 0.92);
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-      }
-      body.page-live .chat-header{
-        padding: 10px 12px;
-        border-bottom: 1px solid rgba(255,255,255,0.08);
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        font-size: 12px;
-        text-transform: uppercase;
-        letter-spacing: 0.12em;
-        color: var(--muted);
-      }
-      body.page-live .chat-list{
-        padding: 10px;
-        flex: 1;
-        overflow-y: auto;
-      }
-      body.page-live .chat-line{ display: grid; grid-template-columns: 44px auto; gap: 8px; align-items: baseline; }
-      body.page-live .chat-time{ color: var(--muted); font-size: 11px; }
-      body.page-live .chat-user{ color: #ff9d4a; font-weight: 700; margin-right: 6px; }
-      body.page-live .chat-msg{ color: var(--ink); }
-      body.page-live .chat-toggle{
-        padding: 4px 10px;
-        border-radius: 999px;
-        border: 1px solid rgba(43,179,255,0.35);
-        background: rgba(43,179,255,0.18);
-        color: var(--accent-2);
-        font-size: 11px;
-        cursor: pointer;
-      }
-      body.page-live .hls-link{
-        padding: 6px 10px;
-        border-radius: 999px;
-        border: 1px solid rgba(255,255,255,0.14);
-        color: var(--muted);
-        font-size: 12px;
-      }
-      @media (max-width: 1000px){
-        
-        html.page-live, body.page-live{ height: 100%; overflow: hidden; }
-        body.page-live{ display: flex; flex-direction: column; }
-        body.page-live header{ padding: 8px 12px; flex-shrink: 0; background: #000; border-bottom: 1px solid rgba(255,255,255,0.1); }
-        
-        body.page-live .content{ display: flex; flex-direction: column; height: 100%; padding: 0; gap: 0; overflow: hidden; }
-        
-        body.page-live .main-col{ flex: 2; min-height: 0; background: #000; gap: 0; justify-content: center; }
-        body.page-live .player-wrapper{ height: 100%; width: 100%; border-radius: 0; box-shadow: none; aspect-ratio: auto; }
-        body.page-live video{ border-radius: 0; }
-        body.page-live .controls-panel{ display: none; }
-        
-        body.page-live .chat-panel{ flex: 1; min-height: 0; border-radius: 0; border: none; border-top: 1px solid rgba(255,255,255,0.1); }
-        body.page-live .chat-header{ padding: 8px 12px; font-size: 11px; }
-        body.page-live .chat-list{ padding: 8px 12px; font-size: 12px; }
-        
-        @media (orientation: landscape){
-            body.page-live .content{ flex-direction: row; }
-            body.page-live .main-col{ flex: 3; }
-            body.page-live .chat-panel{ flex: 1; border-top: none; border-left: 1px solid rgba(255,255,255,0.1); }
-            body.page-live header{ padding: 4px 12px; }
-        }
-      }
-      body.page-live .viewer-badge{
-        padding: 6px 10px;
-        border-radius: 999px;
-        border: 1px solid rgba(255, 82, 82, 0.35);
-        background: rgba(255, 82, 82, 0.18);
-        color: #ff8b8b;
-        font-size: 12px;
-        cursor: pointer;
-        font-weight: 600;
-        display: flex;
-        align-items: center;
-        gap: 6px;
-      }
-      body.page-live .viewer-panel{
-        margin-top: 16px;
-        background: rgba(255,255,255,0.03);
-        border: 1px solid rgba(255,255,255,0.08);
-        border-radius: 12px;
-        padding: 20px;
-        display: none;
-      }
-      body.page-live .viewer-panel.open{ display: block; animation: rise 300ms ease-out; }
-      body.page-live .chart-wrap{ position: relative; height: 200px; width: 100%; margin-bottom: 16px; }
-      body.page-live .stat-row{ display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 4px; }
-      body.page-live .stat-val{ font-weight: bold; color: var(--accent); }
+  background-size: 200% 200%;
+  animation: none;
+  color: var(--text);
+  min-height: 100vh;
+  display: flex;
+}
+@keyframes bg-pulse{ 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
+body.page-admin ::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+body.page-admin ::-webkit-scrollbar-track {
+  background: transparent;
+}
+body.page-admin ::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: var(--nebula-radius-xs);
+}
+body.page-admin ::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+body.page-admin .tab:hover {
+  color: var(--text);
+}
+body.page-admin .tab.active {
+  color: var(--primary);
+  border-bottom-color: var(--primary);
+}
+body.page-admin .badge {
+  background: rgba(255,255,255,0.1);
+  padding: 2px 8px;
+  border-radius: var(--nebula-radius-sm);
+  font-size: var(--sv-min-text);
+}
+body.page-admin .tab.active .badge {
+  background: var(--primary);
+  color: white;
+}
+body.page-admin .sidebar {
+  width: 280px;
+  background: rgba(3,3,5,0.6);
+  backdrop-filter: none;
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  padding: 32px;
+  flex-shrink: 0;
+}
+body.page-admin .brand {
+  font-family: 'Fraunces', serif;
+  font-size: var(--sv-text-2xl);
+  font-weight: 700;
+  color: white;
+  margin-bottom: 48px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  letter-spacing: -0.02em;
+}
+body.page-admin .main {
+  flex: 1;
+  padding: 40px 60px;
+  overflow-y: auto;
+  animation: fade-in 0.5s ease-out;
+}
+@keyframes fade-in{ from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+body.page-admin .header {
+  margin-bottom: 48px;
+}
+body.page-admin .page-title {
+  font-family: 'Fraunces', serif;
+  font-size: var(--sv-text-4xl);
+  font-weight: 700;
+  margin: 0;
+  letter-spacing: -0.02em;
+}
+body.page-admin .grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 24px;
+  align-items: start;
+}
+body.page-admin .panel {
+  background: var(--glass);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 32px;
+  backdrop-filter: none;
+}
+body.page-admin h3 {
+  margin: 0 0 20px;
+  font-size: var(--sv-text-lg);
+  font-weight: 600;
+  color: white;
+}
+body.page-admin table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--sv-text-md);
+}
+body.page-admin th,
+body.page-admin td {
+  padding: 12px 8px;
+  text-align: left;
+  border-bottom: 1px solid var(--border);
+}
+body.page-admin th {
+  color: var(--text-muted);
+  font-weight: 600;
+  font-size: var(--sv-text-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+body.page-admin .success {
+  color: var(--success);
+}
+body.page-admin .fail {
+  color: var(--danger);
+}
+body.page-admin button:where(:not(.sv-btn)) {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--danger);
+  font-size: var(--sv-text-base);
+}
+body.page-admin .btn-primary {
+  background: linear-gradient(135deg, var(--primary), var(--accent));
+  color: white;
+  padding: 10px 20px;
+  border-radius: var(--nebula-radius-md);
+  font-size: var(--sv-text-md);
+  font-weight: 600;
+  cursor: pointer;
+  border: none;
+  transition: 0.3s;
+}
+body.page-admin .btn-primary:hover {
+  transform: scale(1.02);
+  box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
+}
+body.page-admin input {
+  background: rgba(0,0,0,0.3);
+  border: 1px solid var(--border);
+  color: white;
+  padding: 10px 16px;
+  border-radius: var(--nebula-radius-md);
+  width: 100%;
+  transition: 0.2s;
+}
+body.page-admin input:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
+}
+body.page-admin .full-width {
+  grid-column: 1 / -1;
+}
+body.page-admin .alert {
+  padding: 12px;
+  border-radius: var(--nebula-radius-sm);
+  margin-bottom: 20px;
+  font-size: var(--sv-text-md);
+}
+body.page-admin .alert-error {
+  background: rgba(239, 68, 68, 0.1);
+  color: var(--danger);
+  border: 1px solid rgba(239, 68, 68, 0.2);
+}
+body.page-admin .alert-success {
+  background: rgba(34, 197, 94, 0.1);
+  color: var(--success);
+  border: 1px solid rgba(34, 197, 94, 0.2);
+}
+body.page-admin .stat-row {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  font-size: var(--sv-text-md);
+}
+body.page-admin .stat-val {
+  font-weight: 600;
+  color: white;
+}
+@media (max-width: 900px) {
+  body.page-admin .grid {
+    grid-template-columns: 1fr;
+  }
+}
+@media (max-width: 768px) {
+  body.page-admin {
+    flex-direction: column;
+  }
+  body.page-admin .sidebar {
+    width: 100%;
+    padding: 16px;
+  }
+  body.page-admin .main {
+    padding: 20px;
+  }
+}
+body.page-admin .btn-icon {
+  padding: 6px;
+  border-radius: var(--nebula-radius-xs);
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+body.page-admin .btn-icon.save {
+  background: rgba(34, 197, 94, 0.1);
+  color: var(--success);
+  border-color: rgba(34, 197, 94, 0.2);
+}
+body.page-admin .btn-icon.save:hover {
+  background: rgba(34, 197, 94, 0.2);
+}
+body.page-admin .btn-icon.delete {
+  background: rgba(239, 68, 68, 0.1);
+  color: var(--danger);
+  border-color: rgba(239, 68, 68, 0.2);
+}
+body.page-admin .btn-icon.delete:hover {
+  background: rgba(239, 68, 68, 0.2);
+}
+body.page-mail .btn-secondary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 9px 13px;
+  border-radius: var(--nebula-radius-sm);
+  border: 1px solid var(--border);
+  background: rgba(255,255,255,.08);
+  color: var(--text);
+  font-weight: 700;
+  cursor: pointer;
+}
+body.page-mail .btn-secondary:hover {
+  background: rgba(255,255,255,.13);
+  border-color: rgba(245,158,11,.35);
+}
+body.page-mail label span {
+  display: block;
+  margin-bottom: 7px;
+  color: var(--text-muted);
+  font-size: var(--sv-text-xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+}
+body.page-admin .btn-primary:disabled,
+body.page-admin input:disabled,
+body.page-admin button:where(:not(.sv-btn)):disabled {
+  opacity: .48;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+/* CLIP_EDITOR */
+body.page-clip-editor * {
+  box-sizing: border-box;
+}
+body.page-clip-editor {
+  margin: 0;
+  font-family: 'Sora', sans-serif;
+  color: var(--text);
+  background: var(--bg);
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+body.page-clip-editor header {
+  height: 60px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+}
+body.page-clip-editor .brand {
+  font-family: 'Fraunces', serif;
+  font-weight: 700;
+  font-size: var(--sv-text-lg);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+body.page-clip-editor .close-btn {
+  color: var(--text-muted);
+  text-decoration: none;
+  font-size: var(--sv-text-2xl);
+  padding: 10px;
+  transition: color 0.2s;
+}
+body.page-clip-editor .close-btn:hover {
+  color: var(--text);
+}
+body.page-clip-editor .main-area {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+body.page-clip-editor .player-container {
+  flex: 1;
+  background: #000;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 0;
+}
+body.page-clip-editor video {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  max-height: 100%;
+}
+body.page-clip-editor .editor-panel {
+  background: var(--card);
+  border-top: 1px solid var(--border);
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+body.page-clip-editor .slider-container {
+  padding: 0 10px;
+  margin-bottom: 10px;
+}
+body.page-clip-editor .controls-grid {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 20px;
+  align-items: center;
+}
+body.page-clip-editor .time-controls {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+body.page-clip-editor .time-label {
+  font-family: monospace;
+  font-size: var(--sv-text-md);
+  color: var(--text-muted);
+  width: 60px;
+  text-align: center;
+}
+body.page-clip-editor .btn-icon {
+  background: var(--nebula-border);
+  border: 1px solid var(--nebula-border-bright);
+  color: var(--text);
+  width: 32px;
+  height: 32px;
+  border-radius: var(--nebula-radius-xs);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--sv-text-md);
+  transition: 0.2s;
+}
+body.page-clip-editor .btn-icon:hover {
+  background: var(--nebula-border-bright);
+}
+body.page-clip-editor .main-controls {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+}
+body.page-clip-editor .btn-main {
+  background: var(--nebula-border);
+  border: 1px solid var(--nebula-border-bright);
+  color: var(--text);
+  padding: 8px 16px;
+  border-radius: var(--nebula-radius-xs);
+  cursor: pointer;
+  font-weight: 600;
+  font-size: var(--sv-text-md);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: 0.2s;
+}
+body.page-clip-editor .btn-main:hover {
+  background: var(--nebula-border-bright);
+}
+body.page-clip-editor .btn-primary {
+  background: var(--primary);
+  border-color: var(--primary);
+  color: #fff;
+}
+body.page-clip-editor .btn-primary:hover {
+  background: #9146ff;
+}
+body.page-clip-editor .meta-row {
+  display: flex;
+  gap: 10px;
+}
+body.page-clip-editor input[type="text"] {
+  flex: 1;
+  background: #0e0e10;
+  border: 1px solid var(--nebula-border-bright);
+  color: var(--text);
+  padding: 10px;
+  border-radius: var(--nebula-radius-xs);
+  transition: border-color 0.2s;
+}
+body.page-clip-editor input[type="text"]:focus {
+  border-color: var(--primary);
+}
+body.page-clip-editor .msg {
+  padding: 10px;
+  border-radius: var(--nebula-radius-xs);
+  margin-bottom: 10px;
+  font-size: var(--sv-text-md);
+  text-align: center;
+}
+body.page-clip-editor .msg.error {
+  background: rgba(255, 82, 82, 0.1);
+  color: #ff8b8b;
+  border: 1px solid rgba(255, 82, 82, 0.2);
+}
+body.page-clip-editor .msg.success {
+  background: rgba(34, 197, 94, 0.1);
+  color: #86efac;
+  border: 1px solid rgba(34, 197, 94, 0.2);
+}
+@media (max-width: 768px) {
+  body.page-clip-editor .controls-grid {
+    grid-template-columns: 1fr;
+    gap: 15px;
+  }
+  body.page-clip-editor .time-controls {
+    justify-content: center;
+  }
+  body.page-clip-editor .editor-panel {
+    padding: 15px;
+  }
+}
+/* DISCORD_TOOL */
+body.page-discord-tool * {
+  box-sizing: border-box;
+}
+body.page-discord-tool {
+  margin: 0;
+  font-family: 'Sora', sans-serif;
+  color: var(--text-main);
+  background: var(--bg-body);
+  min-height: 100vh;
+  display: flex;
+}
+body.page-discord-tool .sidebar {
+  width: 260px;
+  background: var(--bg-sidebar);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+  flex-shrink: 0;
+}
+body.page-discord-tool .brand {
+  font-size: var(--sv-text-xl);
+  font-weight: 700;
+  color: white;
+  margin-bottom: 40px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+body.page-discord-tool .main {
+  flex: 1;
+  padding: 40px;
+  overflow-y: auto;
+}
+body.page-discord-tool .header {
+  margin-bottom: 30px;
+}
+body.page-discord-tool .page-title {
+  font-size: var(--sv-text-3xl);
+  font-weight: 700;
+  margin: 0;
+}
+body.page-discord-tool .panel {
+  background: var(--bg-sidebar);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 24px;
+  margin-bottom: 24px;
+}
+body.page-discord-tool input {
+  width: 100%;
+  padding: 12px;
+  border-radius: var(--nebula-radius-md);
+  border: 1px solid var(--border);
+  background: #000;
+  color: var(--text-main);
+  transition: border-color 0.2s;
+  margin-bottom: 16px;
+}
+body.page-discord-tool input:focus {
+  border-color: var(--primary);
+}
+body.page-discord-tool select {
+  width: 100%;
+  padding: 12px;
+  border-radius: var(--nebula-radius-md);
+  border: 1px solid var(--border);
+  background: #000;
+  color: var(--text-main);
+  margin-bottom: 16px;
+  appearance: none;
+}
+body.page-discord-tool button:where(:not(.sv-btn)) {
+  width: 100%;
+  padding: 12px;
+  border: 0;
+  border-radius: var(--nebula-radius-md);
+  background: var(--primary);
+  color: white;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+body.page-discord-tool button:where(:not(.sv-btn)):hover {
+  background: var(--primary-hover);
+}
+body.page-discord-tool .btn-danger {
+  background: var(--danger);
+}
+body.page-discord-tool .btn-danger:hover {
+  background: #dc2626;
+}
+body.page-discord-tool .avatar {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background: #000;
+  object-fit: cover;
+}
+body.page-discord-tool .info {
+  flex: 1;
+}
+body.page-discord-tool .username {
+  font-size: var(--sv-text-xl);
+  font-weight: 700;
+  color: white;
+}
+body.page-discord-tool .detail {
+  font-size: var(--sv-text-md);
+  color: var(--text-muted);
+  margin-top: 4px;
+}
+body.page-discord-tool .error {
+  color: var(--danger);
+  margin-top: 16px;
+  padding: 12px;
+  background: rgba(239, 68, 68, 0.1);
+  border-radius: var(--nebula-radius-sm);
+}
+body.page-discord-tool .success {
+  color: var(--success);
+  margin-top: 16px;
+  padding: 12px;
+  background: rgba(34, 197, 94, 0.1);
+  border-radius: var(--nebula-radius-sm);
+}
+body.page-discord-tool .tabs {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 10px;
+}
+body.page-discord-tool .tab {
+  padding: 8px 16px;
+  cursor: pointer;
+  color: var(--text-muted);
+  font-weight: 600;
+  border-radius: var(--nebula-radius-sm);
+}
+body.page-discord-tool .tab.active {
+  background: var(--bg-card);
+  color: white;
+}
+@media (max-width: 768px) {
+  body.page-discord-tool {
+    flex-direction: column;
+  }
+  body.page-discord-tool .sidebar {
+    width: 100%;
+    padding: 16px;
+  }
+  body.page-discord-tool .main {
+    padding: 20px;
+  }
+}
+/* INDEX */
+body.page-index * {
+  box-sizing: border-box;
+}
+body.page-index {
+  margin: 0;
+  background-color: var(--bg-deep);
+  background-image: radial-gradient(circle at 15% 50%, rgba(245, 158, 11, 0.1), transparent 25%),
+            radial-gradient(circle at 85% 30%, rgba(14, 165, 233, 0.1), transparent 25%);
+  background-size: 200% 200%;
+  animation: none;
+  display: flex;
+  overflow: hidden;
+}
+@keyframes bg-pulse{ 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
+body.page-index ::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+body.page-index ::-webkit-scrollbar-track {
+  background: transparent;
+}
+body.page-index ::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: var(--nebula-radius-xs);
+}
+body.page-index ::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+body.page-index a {
+  text-decoration: none;
+  color: inherit;
+  transition: 0.2s;
+}
+body.page-index .sidebar {
+  backdrop-filter: none;
+  display: flex;
+  flex-direction: column;
+  padding: 32px;
+  flex-shrink: 0;
+}
+body.page-index .brand {
+  font-family: 'Fraunces', serif;
+  font-size: var(--sv-text-2xl);
+  font-weight: 700;
+  color: white;
+  margin-bottom: 48px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  letter-spacing: -0.02em;
+}
+body.page-index .main {
+  flex: 1;
+  overflow-y: auto;
+  animation: fade-in 0.5s ease-out;
+}
+@keyframes fade-in{ from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+body.page-index .header {
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+}
+body.page-index .page-title {
+  font-family: 'Fraunces', serif;
+  margin: 0;
+}
+body.page-index .page-subtitle {
+  line-height: 1.5;
+}
+body.page-index .card {
+  background: var(--glass);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  backdrop-filter: none;
+}
+body.page-index .card:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 20px 40px -10px rgba(245, 158, 11, 0.15);
+  border-color: rgba(245, 158, 11, 0.3);
+}
+body.page-index .avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--sv-text-xl);
+  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
+  position: relative;
+}
+body.page-index .avatar.online {
+  background: linear-gradient(135deg, var(--success), #27ae60);
+  color: #fff;
+}
+body.page-index .avatar.recording {
+  background: linear-gradient(135deg, var(--danger), #c0392b);
+  color: #fff;
+}
+body.page-index .avatar img {
+  display: block;
+}
+@keyframes pulse-red{ 0% { box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(255, 82, 82, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 82, 82, 0); } }
+@media (max-width: 768px) {
+  body.page-index {
+    flex-direction: column;
+    overflow: auto;
+  }
+  body.page-index .sidebar {
+    width: 100%;
+    padding: 16px;
+  }
+  body.page-index .main {
+    padding: 20px;
+    overflow: visible;
+  }
+}
+/* CHANNELS */
+body.page-channels * {
+  box-sizing: border-box;
+}
+body.page-channels {
+  margin: 0;
+  font-family: 'Sora', sans-serif;
+  background-color: var(--bg-deep);
+  background-image: radial-gradient(circle at 15% 50%, rgba(245, 158, 11, 0.1), transparent 25%),
+            radial-gradient(circle at 85% 30%, rgba(14, 165, 233, 0.1), transparent 25%);
+  background-size: 200% 200%;
+  animation: none;
+  color: var(--text);
+  min-height: 100vh;
+  display: flex;
+}
+@keyframes bg-pulse{ 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
+body.page-channels ::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+body.page-channels ::-webkit-scrollbar-track {
+  background: transparent;
+}
+body.page-channels ::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: var(--nebula-radius-xs);
+}
+body.page-channels ::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+body.page-channels a {
+  text-decoration: none;
+  color: inherit;
+  transition: 0.2s;
+}
+body.page-channels .sidebar {
+  width: 280px;
+  background: rgba(3,3,5,0.6);
+  backdrop-filter: none;
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  padding: 32px;
+  flex-shrink: 0;
+}
+body.page-channels .brand {
+  font-family: 'Fraunces', serif;
+  font-size: var(--sv-text-2xl);
+  font-weight: 700;
+  color: white;
+  margin-bottom: 48px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  letter-spacing: -0.02em;
+}
+body.page-channels .main {
+  flex: 1;
+  padding: 40px 60px;
+  overflow-y: auto;
+  animation: fade-in 0.5s ease-out;
+}
+@keyframes fade-in{ from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+body.page-channels .header {
+  margin-bottom: 48px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+body.page-channels .page-title {
+  font-family: 'Fraunces', serif;
+  font-size: var(--sv-text-4xl);
+  font-weight: 700;
+  margin: 0;
+  letter-spacing: -0.02em;
+}
+@media (max-width: 768px) {
+  body.page-channels {
+    flex-direction: column;
+    overflow: auto;
+  }
+  body.page-channels .sidebar {
+    width: 100%;
+    padding: 16px;
+  }
+  body.page-channels .main {
+    padding: 20px;
+    overflow: visible;
+  }
+}
+/* STREAMER */
+body.page-streamer * {
+  box-sizing: border-box;
+}
+body.page-streamer {
+  margin: 0;
+  font-family: 'Sora', sans-serif;
+  background-color: var(--bg-deep);
+  background-image: radial-gradient(circle at 15% 50%, rgba(245, 158, 11, 0.1), transparent 25%),
+            radial-gradient(circle at 85% 30%, rgba(14, 165, 233, 0.1), transparent 25%);
+  background-size: 200% 200%;
+  animation: none;
+  color: var(--text);
+  min-height: 100vh;
+  display: flex;
+}
+@keyframes bg-pulse{ 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
+body.page-streamer ::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+body.page-streamer ::-webkit-scrollbar-track {
+  background: transparent;
+}
+body.page-streamer ::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: var(--nebula-radius-xs);
+}
+body.page-streamer ::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+body.page-streamer .sidebar {
+  width: 280px;
+  background: rgba(3,3,5,0.6);
+  backdrop-filter: none;
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  padding: 32px;
+  flex-shrink: 0;
+}
+body.page-streamer .brand {
+  font-family: 'Fraunces', serif;
+  font-size: var(--sv-text-2xl);
+  font-weight: 700;
+  color: white;
+  margin-bottom: 48px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  letter-spacing: -0.02em;
+}
+body.page-streamer .main {
+  flex: 1;
+  padding: 40px 60px;
+  overflow-y: auto;
+  animation: fade-in 0.5s ease-out;
+}
+@keyframes fade-in{ from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+body.page-streamer .header {
+  margin-bottom: 48px;
+  display: flex;
+  justify-content: space-between;
+}
+body.page-streamer .page-title {
+  font-family: 'Fraunces', serif;
+  font-size: var(--sv-text-4xl);
+  font-weight: 700;
+  margin: 0;
+  letter-spacing: -0.02em;
+}
+body.page-streamer .video-card {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  transition: transform 0.2s, box-shadow 0.2s;
+  display: flex;
+  flex-direction: column;
+  backdrop-filter: none;
+}
+body.page-streamer .video-card:hover {
+  box-shadow: 0 20px 40px -10px rgba(245, 158, 11, 0.15);
+}
+body.page-streamer button:where(:not(.sv-btn)) {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--text-muted);
+}
+body.page-streamer form {
+  margin: 0;
+}
+body.page-streamer .tag {
+  font-size: var(--sv-min-text);
+  padding: 2px 8px;
+  border-radius: var(--nebula-radius-full);
+  border: 1px solid rgba(255,255,255,0.14);
+  color: var(--muted);
+}
+body.page-streamer .clip {
+  border-color: var(--primary);
+  color: var(--primary);
+}
+body.page-streamer .row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+body.page-streamer .muted {
+  color: var(--text-muted);
+  font-size: var(--sv-text-sm);
+  white-space: nowrap;
+}
+body.page-streamer .btn-icon {
+  padding: 6px 10px;
+  border-radius: var(--nebula-radius-full);
+  border: 1px solid var(--border);
+  background: rgba(255,255,255,0.05);
+  color: var(--text-muted);
+  font-size: var(--sv-text-xs);
+  cursor: pointer;
+  transition: 0.2s;
+}
+body.page-streamer .btn-icon:hover {
+  background: rgba(255,255,255,0.1);
+  color: #fff;
+  transform: scale(1.1);
+}
+body.page-streamer .btn-icon.share {
+  padding: 6px 10px;
+  border-radius: var(--nebula-radius-full);
+  border: 1px solid var(--border);
+  background: rgba(255,255,255,0.05);
+  color: var(--text-muted);
+  font-size: var(--sv-text-xs);
+  cursor: pointer;
+}
+body.page-streamer .btn-icon.download {
+  padding: 6px 10px;
+  border-radius: var(--nebula-radius-full);
+  border: 1px solid var(--border);
+  background: rgba(255,255,255,0.05);
+  color: var(--text-muted);
+}
+body.page-streamer .panel {
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background: var(--glass);
+  backdrop-filter: none;
+}
+body.page-streamer select,
+body.page-streamer input[name="q"] {
+  background: rgba(0,0,0,0.3);
+  border: 1px solid var(--border);
+  color: #fff;
+  padding: 8px 12px;
+  border-radius: var(--nebula-radius-sm);
+}
+body.page-streamer .tabs {
+  border-radius: var(--nebula-radius-md);
+}
+body.page-streamer .tab {
+  transition: 0.2s;
+  gap: 8px;
+  cursor: pointer;
+}
+body.page-streamer .tab:hover {
+  color: var(--text);
+  background: rgba(255,255,255,0.05);
+}
+body.page-streamer .tab.active {
+  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
+}
+body.page-streamer .badge {
+  background: rgba(255,255,255,0.15);
+  padding: 2px 8px;
+  border-radius: var(--nebula-radius-xs);
+  font-size: var(--sv-min-text);
+}
+body.page-streamer .tab.active .badge {
+  background: rgba(255,255,255,0.2);
+  color: white;
+}
+/* VOD */
+body.page-vod * {
+  box-sizing: border-box;
+}
+body.page-vod {
+  margin: 0;
+  font-family: 'Sora', sans-serif;
+  background-color: var(--bg-deep);
+  background-image: radial-gradient(circle at 15% 50%, rgba(245, 158, 11, 0.1), transparent 25%),
+            radial-gradient(circle at 85% 30%, rgba(14, 165, 233, 0.1), transparent 25%);
+  background-size: 200% 200%;
+  animation: none;
+  color: var(--text);
+  height: 100vh;
+  display: flex;
+  overflow: hidden;
+}
+@keyframes bg-pulse{ 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
+body.page-vod ::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+body.page-vod ::-webkit-scrollbar-track {
+  background: transparent;
+}
+body.page-vod ::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: var(--nebula-radius-xs);
+}
+body.page-vod ::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+body.page-vod .sidebar {
+  width: 280px;
+  background: rgba(3,3,5,0.6);
+  backdrop-filter: none;
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  padding: 32px;
+  flex-shrink: 0;
+}
+body.page-vod .brand {
+  font-family: 'Fraunces', serif;
+  font-size: var(--sv-text-2xl);
+  font-weight: 700;
+  color: white;
+  margin-bottom: 48px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  letter-spacing: -0.02em;
+}
+body.page-vod .main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: fade-in 0.5s ease-out;
+}
+@keyframes fade-in{ from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+body.page-vod header {
+  padding: 24px 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+}
+body.page-vod .page-title {
+  font-family: 'Fraunces', serif;
+  font-weight: 700;
+  margin: 0;
+  letter-spacing: -0.02em;
+}
+body.page-vod .content {
+  flex: 1;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 350px;
+  min-height: 0;
+}
+body.page-vod .content.solo {
+  grid-template-columns: 1fr;
+}
+body.page-vod .main-col {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+body.page-vod .player-wrapper {
+  display: flex;
+  flex-direction: column;
+  background: #000;
+  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
+}
+body.page-vod video {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  border-radius: var(--nebula-radius-md);
+}
+body.page-vod .chat-panel {
+  border: 1px solid var(--border);
+  backdrop-filter: none;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+body.page-vod .chat-header {
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: var(--sv-text-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--text-muted);
+}
+body.page-vod .chat-list {
+  flex: 1;
+  overflow-y: auto;
+}
+body.page-vod .chat-line {
+  display: grid;
+  grid-template-columns: 44px auto;
+  gap: 8px;
+}
+body.page-vod .chat-time {
+  color: var(--text-muted);
+}
+body.page-vod .chat-user {
+  color: var(--primary);
+}
+body.page-vod .chat-msg {
+  color: #fff;
+}
+body.page-vod .chat-text {
+  display: inline;
+}
+body.page-vod .chat-toggle {
+  padding: 4px 10px;
+  border-radius: var(--nebula-radius-full);
+  border: 1px solid var(--border);
+  background: rgba(255,255,255,0.05);
+  color: var(--text-muted);
+  font-size: var(--sv-min-text);
+  cursor: pointer;
+}
+@media (max-width: 960px) {
+  body.page-vod {
+    height: auto;
+    overflow: auto;
+    display: block;
+  }
+  body.page-vod .content {
+    display: flex;
+    flex-direction: column;
+    height: auto;
+  }
+  body.page-vod .player-wrapper {
+    height: auto;
+    aspect-ratio: 16/9;
+  }
+  body.page-vod .chat-panel {
+    height: 400px;
+  }
+}
+body.page-vod .controls-panel {
+  flex-shrink: 0;
+  padding: 20px;
+  border-radius: var(--nebula-radius-md);
+  border: 1px solid var(--border);
+  background: var(--glass);
+  backdrop-filter: none;
+}
+body.page-vod .row {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+body.page-vod input {
+  padding: 8px 10px;
+  border-radius: var(--nebula-radius-sm);
+  border: 1px solid var(--border);
+  background: rgba(0,0,0,0.3);
+  color: white;
+}
+body.page-vod button:where(:not(.sv-btn)) {
+  padding: 10px 20px;
+  border: 0;
+  border-radius: var(--nebula-radius-md);
+  background: linear-gradient(135deg, var(--primary), var(--accent));
+  color: white;
+  font-weight: 600;
+  cursor: pointer;
+  transition: 0.3s;
+  position: relative;
+  overflow: hidden;
+}
+body.page-vod button:where(:not(.sv-btn))::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+  transition: 0.5s;
+}
+body.page-vod button:where(:not(.sv-btn)):hover {
+  transform: scale(1.05);
+  box-shadow: 0 0 15px rgba(245, 158, 11, 0.3);
+}
+body.page-vod button:where(:not(.sv-btn)):hover::after {
+  left: 100%;
+}
+body.page-vod .note {
+  color: var(--text-muted);
+  font-size: var(--sv-text-xs);
+  margin-top: 8px;
+}
+body.page-vod .error {
+  color: #ff8b8b;
+  font-size: var(--sv-text-sm);
+  margin-top: 8px;
+}
+body.page-vod .quick {
+  border-radius: var(--nebula-radius-full);
+  background: rgba(99, 102, 241, 0.1);
+  color: var(--primary);
+  border: 1px solid rgba(99, 102, 241, 0.2);
+  font-weight: 600;
+}
+body.page-vod .dl-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.3);
+  border-radius: var(--nebula-radius-md);
+  text-align: center;
+  padding: 20px;
+}
+/* HLS */
+body.page-hls * {
+  box-sizing: border-box;
+}
+body.page-hls {
+  margin: 0;
+  font-family: 'Fraunces', serif;
+  color: var(--ink);
+  background: radial-gradient(900px 400px at 10% -10%, rgba(255,138,61,0.18), transparent 60%),
+          radial-gradient(700px 500px at 110% 0%, rgba(43,179,255,0.16), transparent 60%),
+          linear-gradient(180deg, var(--bg-1), var(--bg-2));
+  min-height: 100vh;
+}
+body.page-hls header {
+  padding: 22px 28px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+body.page-hls a {
+  color: var(--accent-2);
+  text-decoration: none;
+}
+body.page-hls .content {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 320px;
+  gap: 16px;
+  padding: 0 28px 28px;
+}
+body.page-hls .player {
+  padding: 0;
+}
+body.page-hls video {
+  width: 100%;
+  max-height: 80vh;
+  background: #000;
+  border-radius: var(--nebula-radius-md);
+  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
+}
+body.page-hls .chat-panel {
+  border-radius: var(--nebula-radius-md);
+  border: 1px solid rgba(255,255,255,0.08);
+  background: rgba(255,255,255,0.03);
+  display: flex;
+  flex-direction: column;
+  min-height: 240px;
+  max-height: 80vh;
+}
+body.page-hls .chat-header {
+  padding: 10px 12px;
+  border-bottom: 1px solid rgba(255,255,255,0.08);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: var(--sv-text-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--muted);
+}
+body.page-hls .chat-list {
+  padding: 10px 12px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: var(--sv-text-sm);
+}
+body.page-hls .chat-line {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+}
+body.page-hls .chat-time {
+  color: var(--muted);
+  font-size: var(--sv-min-text);
+  min-width: 44px;
+}
+body.page-hls .chat-user {
+  color: var(--accent-2);
+  font-weight: 600;
+}
+body.page-hls .chat-msg {
+  color: var(--ink);
+}
+body.page-hls .chat-toggle {
+  padding: 4px 10px;
+  border-radius: var(--nebula-radius-full);
+  border: 1px solid rgba(43,179,255,0.35);
+  background: rgba(43,179,255,0.18);
+  color: var(--accent-2);
+  font-size: var(--sv-min-text);
+  cursor: pointer;
+}
+@media (max-width: 960px) {
+  body.page-hls .content {
+    grid-template-columns: 1fr;
+  }
+  body.page-hls .chat-panel {
+    max-height: 320px;
+  }
+}
+body.page-hls .note {
+  padding: 0 28px 16px;
+  color: var(--muted);
+}
+body.page-hls button:where(:not(.sv-btn)) {
+  padding: 10px 14px;
+  border: 0;
+  border-radius: var(--nebula-radius-sm);
+  background: linear-gradient(90deg, var(--accent), #ffb05a);
+  color: #141414;
+  font-weight: 700;
+  cursor: pointer;
+}
+/* LIVE */
+body.page-live * {
+  box-sizing: border-box;
+}
+body.page-live {
+  margin: 0;
+  font-family: 'Fraunces', serif;
+  color: var(--ink);
+  background: radial-gradient(900px 400px at 10% -10%, rgba(255,138,61,0.18), transparent 60%),
+          radial-gradient(700px 500px at 110% 0%, rgba(43,179,255,0.16), transparent 60%),
+          linear-gradient(180deg, var(--bg-1), var(--bg-2));
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+body.page-live header {
+  padding: 16px 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+  background: rgba(0,0,0,0.2);
+  border-bottom: 1px solid rgba(255,255,255,0.05);
+}
+body.page-live a {
+  color: var(--accent-2);
+  text-decoration: none;
+}
+body.page-live .content {
+  flex: 1;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 350px;
+  padding: 20px;
+  min-height: 0;
+}
+body.page-live .main-col {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-height: 0;
+}
+body.page-live .player-wrapper {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  background: #000;
+  border-radius: var(--nebula-radius-md);
+  position: relative;
+  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
+}
+body.page-live video {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  border-radius: var(--nebula-radius-md);
+}
+body.page-live .note {
+  color: var(--muted);
+  font-size: var(--sv-text-sm);
+}
+body.page-live .badge {
+  color: #ff8b8b;
+  font-weight: 600;
+}
+body.page-live .controls-panel {
+  flex-shrink: 0;
+  padding: 16px;
+  border-radius: var(--nebula-radius-md);
+  border: 1px solid rgba(255,255,255,0.08);
+  background: rgba(255,255,255,0.03);
+}
+body.page-live .controls-panel h3 {
+  margin: 0 0 10px;
+  font-size: var(--sv-text-md);
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--muted);
+}
+body.page-live .row {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+body.page-live input {
+  padding: 8px 10px;
+  border-radius: var(--nebula-radius-sm);
+  border: 1px solid rgba(255,255,255,0.1);
+  background: #0f1218;
+  color: var(--ink);
+}
+body.page-live button:where(:not(.sv-btn)) {
+  padding: 8px 12px;
+  border: 0;
+  border-radius: var(--nebula-radius-sm);
+  background: linear-gradient(90deg, var(--accent), #ffb05a);
+  color: #141414;
+  font-weight: 700;
+  cursor: pointer;
+}
+body.page-live .status {
+  color: var(--muted);
+  font-size: var(--sv-text-xs);
+  margin-bottom: 8px;
+}
+body.page-live .chat-panel {
+  height: 100%;
+  border-radius: var(--nebula-radius-md);
+  border: 1px solid rgba(255,255,255,0.08);
+  background: rgba(15, 18, 24, 0.92);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+body.page-live .chat-header {
+  padding: 10px 12px;
+  border-bottom: 1px solid rgba(255,255,255,0.08);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: var(--sv-text-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--muted);
+}
+body.page-live .chat-list {
+  padding: 10px;
+  flex: 1;
+  overflow-y: auto;
+}
+body.page-live .chat-line {
+  display: grid;
+  grid-template-columns: 44px auto;
+  gap: 8px;
+  align-items: baseline;
+}
+body.page-live .chat-time {
+  color: var(--muted);
+  font-size: var(--sv-min-text);
+}
+body.page-live .chat-user {
+  color: #ff9d4a;
+  font-weight: 700;
+  margin-right: 6px;
+}
+body.page-live .chat-msg {
+  color: var(--ink);
+}
+body.page-live .chat-toggle {
+  padding: 4px 10px;
+  border-radius: var(--nebula-radius-full);
+  border: 1px solid rgba(43,179,255,0.35);
+  background: rgba(43,179,255,0.18);
+  color: var(--accent-2);
+  font-size: var(--sv-min-text);
+  cursor: pointer;
+}
+@media (max-width: 1000px) {
+  html.page-live,
+  body.page-live {
+    height: 100%;
+    overflow: hidden;
+  }
+  body.page-live {
+    display: flex;
+    flex-direction: column;
+  }
+  body.page-live header {
+    padding: 8px 12px;
+    flex-shrink: 0;
+    background: #000;
+    border-bottom: 1px solid rgba(255,255,255,0.1);
+  }
+  body.page-live .content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 0;
+    gap: 0;
+    overflow: hidden;
+  }
+  body.page-live .main-col {
+    flex: 2;
+    min-height: 0;
+    background: #000;
+    gap: 0;
+    justify-content: center;
+  }
+  body.page-live .player-wrapper {
+    height: 100%;
+    width: 100%;
+    border-radius: 0;
+    box-shadow: none;
+    aspect-ratio: auto;
+  }
+  body.page-live video {
+    border-radius: 0;
+  }
+  body.page-live .controls-panel {
+    display: none;
+  }
+  body.page-live .chat-panel {
+    flex: 1;
+    min-height: 0;
+    border-radius: 0;
+    border: none;
+    border-top: 1px solid rgba(255,255,255,0.1);
+  }
+  body.page-live .chat-header {
+    padding: 8px 12px;
+    font-size: var(--sv-min-text);
+  }
+  body.page-live .chat-list {
+    padding: 8px 12px;
+    font-size: var(--sv-text-xs);
+  }
+  @media (orientation: landscape) {
+    body.page-live .content {
+      flex-direction: row;
+    }
+    body.page-live .main-col {
+      flex: 3;
+    }
+    body.page-live .chat-panel {
+      flex: 1;
+      border-top: none;
+      border-left: 1px solid rgba(255,255,255,0.1);
+    }
+    body.page-live header {
+      padding: 4px 12px;
+    }
+  }
+}
+body.page-live .stat-row {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  font-size: var(--sv-text-sm);
+  border-bottom: 1px solid rgba(255,255,255,0.05);
+  padding-bottom: 4px;
+}
+body.page-live .stat-val {
+  font-weight: bold;
+  color: var(--accent);
+}
 /* FILES */
-body.page-files *{ box-sizing: border-box; }
-      body.page-files{
-        margin: 0;
-        font-family: 'Sora', sans-serif;
-        background-color: var(--bg-deep);
-        background-image: 
-            radial-gradient(circle at 15% 50%, rgba(245, 158, 11, 0.1), transparent 25%),
+body.page-files * {
+  box-sizing: border-box;
+}
+body.page-files {
+  margin: 0;
+  font-family: 'Sora', sans-serif;
+  background-color: var(--bg-deep);
+  background-image: radial-gradient(circle at 15% 50%, rgba(245, 158, 11, 0.1), transparent 25%),
             radial-gradient(circle at 85% 30%, rgba(14, 165, 233, 0.1), transparent 25%);
-        background-size: 200% 200%;
-        animation: none;
-        color: var(--text);
-        min-height: 100vh;
-        display: flex;
-      }
-      @keyframes bg-pulse{ 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
-      
-      body.page-files ::-webkit-scrollbar{ width: 6px; height: 6px; }
-      body.page-files ::-webkit-scrollbar-track{ background: transparent; }
-      body.page-files ::-webkit-scrollbar-thumb{ background: rgba(255, 255, 255, 0.1); border-radius: 3px; }
-      body.page-files ::-webkit-scrollbar-thumb:hover{ background: rgba(255, 255, 255, 0.2); }
-      
-      
-      body.page-files .sidebar{ width: 280px; background: rgba(3,3,5,0.6); backdrop-filter: none; border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 32px; flex-shrink: 0; }
-      body.page-files .brand{ font-family: 'Fraunces', serif; font-size: 24px; font-weight: 700; color: white; margin-bottom: 48px; display: flex; align-items: center; gap: 10px; letter-spacing: -0.02em; }
-      body.page-files .nav-item{ display: flex; align-items: center; gap: 14px; padding: 14px 18px; color: var(--text-muted); text-decoration: none; border-radius: 14px; margin-bottom: 6px; transition: all 0.3s ease; font-weight: 500; }
-      body.page-files .nav-item:hover{ background: var(--glass-hover); color: white; transform: translateX(4px); }
-      body.page-files .nav-item.active{ background: rgba(245, 158, 11, 0.15); color: white; border: 1px solid rgba(245, 158, 11, 0.2); }
-      
-      body.page-files .main{ flex: 1; padding: 40px 60px; overflow-y: auto; animation: fade-in 0.5s ease-out; }
-      @keyframes fade-in{ from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
-      body.page-files .header{ margin-bottom: 48px; }
-      body.page-files .page-title{ font-family: 'Fraunces', serif; font-size: 36px; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
-      body.page-files .files-alert{ padding:12px 14px; border-radius:10px; margin:-28px 0 24px; font-size:14px; font-weight:600; }
-      body.page-files .files-alert-error{ background:rgba(239,68,68,.12); color:#fecaca; border:1px solid rgba(239,68,68,.28); }
-      body.page-files .files-alert-success{ background:rgba(34,197,94,.12); color:#bbf7d0; border:1px solid rgba(34,197,94,.28); }
-
-      
-      body.page-files .upload-section{
-        background: var(--glass);
-        border: 1px solid var(--border);
-        border-radius: 12px;
-        padding: 24px;
-        margin-bottom: 40px;
-        backdrop-filter: none;
-      }
-      body.page-files .upload-title{ font-size: 18px; font-weight: 600; margin-bottom: 16px; color: white; }
-      
-      body.page-files .upload-dropzone{
-        border: 2px dashed var(--border);
-        border-radius: 8px;
-        padding: 40px;
-        text-align: center;
-        background: rgba(0,0,0,0.1);
-        transition: 0.2s;
-        cursor: pointer;
-        position: relative;
-      }
-      body.page-files .upload-dropzone:hover{ border-color: var(--primary); background: rgba(88, 166, 255, 0.05); }
-      body.page-files .upload-dropzone input[type="file"]{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
-      body.page-files .upload-icon{ font-size: 32px; color: var(--text-muted); margin-bottom: 10px; display: block; }
-      body.page-files .upload-text{ color: var(--text-muted); font-size: 14px; }
-      body.page-files .file-selected{ color: var(--success); font-weight: 500; margin-top: 10px; display: none; }
-
-      body.page-files .upload-meta{ display: grid; grid-template-columns: 1fr 2fr auto; gap: 12px; margin-top: 16px; }
-      body.page-files .input-field{
-        background: rgba(0,0,0,0.3);
-        border: 1px solid var(--border);
-        color: white;
-        padding: 10px 12px;
-        border-radius: 6px;
-        font-size: 14px;
-        outline: none;
-        transition: 0.2s;
-      }
-      body.page-files .input-field:focus{ border-color: var(--primary); box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2); }
-      
-      body.page-files .btn{
-        padding: 10px 20px;
-        border-radius: 6px;
-        font-weight: 600;
-        font-size: 14px;
-        border: 1px solid transparent;
-        cursor: pointer;
-        transition: 0.2s;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        gap: 8px;
-        text-decoration: none;
-      }
-      body.page-files .btn-primary{ background: linear-gradient(135deg, var(--primary), var(--accent)); color: white; position: relative; overflow: hidden; }
-      body.page-files .btn-primary::after{
-        content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
-        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: 0.5s;
-      }
-      body.page-files .btn-primary:hover{ transform: scale(1.05); box-shadow: 0 0 15px rgba(245, 158, 11, 0.3); }
-      body.page-files .btn-primary:hover::after{ left: 100%; }
-      
-      
-      body.page-files .files-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 20px; }
-      
-      body.page-files .file-card{
-        background: var(--glass);
-        border: 1px solid var(--border);
-        border-radius: 12px;
-        padding: 20px;
-        transition: 0.2s;
-        display: flex;
-        flex-direction: column;
-        position: relative;
-        backdrop-filter: none;
-      }
-      body.page-files .file-card:hover{
-        transform: translateY(-6px); border-color: rgba(245, 158, 11, 0.3);
-        box-shadow: 0 20px 40px -10px rgba(245, 158, 11, 0.15);
-      }
-      
-      body.page-files .file-header{ display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
-      body.page-files .file-icon{ font-size: 24px; background: rgba(255,255,255,0.05); padding: 10px; border-radius: 8px; }
-      body.page-files .file-size{ font-size: 12px; color: var(--text-muted); font-family: monospace; background: rgba(0,0,0,0.2); padding: 4px 8px; border-radius: 4px; height: fit-content; }
-      
-      body.page-files .file-info{ flex: 1; margin-bottom: 16px; }
-      body.page-files .file-name{ font-size: 16px; font-weight: 600; color: white; margin-bottom: 4px; word-break: break-all; }
-      body.page-files .file-desc{ font-size: 13px; color: var(--text-muted); line-height: 1.5; }
-      
-      body.page-files .file-actions{ display: flex; gap: 8px; margin-top: auto; border-top: 1px solid var(--border); padding-top: 16px; }
-      body.page-files .btn-sm{ padding: 6px 12px; font-size: 12px; border-radius: 6px; background: rgba(255,255,255,0.05); color: white; border: 1px solid var(--border); }
-      body.page-files .btn-sm:hover{ background: var(--border); }
-      body.page-files .btn-icon{ padding: 6px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: transparent; border: 1px solid transparent; color: var(--text-muted); cursor: pointer; transition: 0.2s; }
-      body.page-files .btn-icon:hover{ background: rgba(255,255,255,0.1); color: white; transform: scale(1.1); }
-      body.page-files .btn-icon.danger:hover{ color: var(--danger); background: rgba(248, 81, 73, 0.1); }
-      
-      body.page-files .edit-form{ display: none; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
-      body.page-files .file-card.editing .edit-form{ display: block; }
-      body.page-files .file-card.editing .file-info{ display: none; }
-      
-      body.page-files .share-box{
-        margin-top: 10px;
-        background: rgba(56, 139, 253, 0.1);
-        border: 1px solid rgba(56, 139, 253, 0.4);
-        border-radius: 6px;
-        padding: 8px 12px;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-      }
-      body.page-files .share-url{
-        background: transparent;
-        border: none;
-        color: var(--primary);
-        font-size: 12px;
-        flex: 1;
-        outline: none;
-        font-family: monospace;
-      }
-      
-      body.page-files .empty-state{
-        text-align: center;
-        padding: 60px;
-        color: var(--text-muted);
-        grid-column: 1 / -1;
-      }
-      @media (max-width: 768px){
-        body.page-files{ flex-direction: column; }
-        body.page-files .sidebar{ width: 100%; padding: 12px; border-right: none; border-bottom: 1px solid var(--border); flex-direction: row; align-items: center; justify-content: space-between; flex-shrink: 0; }
-        body.page-files .brand{ margin-bottom: 0; font-size: 18px; }
-        body.page-files nav{ display: flex; gap: 8px; overflow-x: auto; padding-bottom: 0; }
-        body.page-files .nav-item{ margin-bottom: 0; padding: 6px 10px; font-size: 12px; white-space: nowrap; }
-        body.page-files .nav-item[style*="margin-top:auto"]{ margin-top: 0 !important; }
-        body.page-files .main{ padding: 16px; }
-        body.page-files .files-grid{ grid-template-columns: 1fr; }
-      }
+  background-size: 200% 200%;
+  animation: none;
+  color: var(--text);
+  min-height: 100vh;
+  display: flex;
+}
+@keyframes bg-pulse{ 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
+body.page-files ::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+body.page-files ::-webkit-scrollbar-track {
+  background: transparent;
+}
+body.page-files ::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: var(--nebula-radius-xs);
+}
+body.page-files ::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+body.page-files .sidebar {
+  width: 280px;
+  background: rgba(3,3,5,0.6);
+  backdrop-filter: none;
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  padding: 32px;
+  flex-shrink: 0;
+}
+body.page-files .brand {
+  font-family: 'Fraunces', serif;
+  font-size: var(--sv-text-2xl);
+  font-weight: 700;
+  color: white;
+  margin-bottom: 48px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  letter-spacing: -0.02em;
+}
+body.page-files .main {
+  flex: 1;
+  padding: 40px 60px;
+  overflow-y: auto;
+  animation: fade-in 0.5s ease-out;
+}
+@keyframes fade-in{ from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+body.page-files .header {
+  margin-bottom: 48px;
+}
+body.page-files .page-title {
+  font-family: 'Fraunces', serif;
+  font-size: var(--sv-text-4xl);
+  font-weight: 700;
+  margin: 0;
+  letter-spacing: -0.02em;
+}
+body.page-files .btn {
+  padding: 10px 20px;
+  border-radius: var(--nebula-radius-xs);
+  font-weight: 600;
+  font-size: var(--sv-text-md);
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: 0.2s;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  text-decoration: none;
+}
+body.page-files .btn-primary {
+  background: linear-gradient(135deg, var(--primary), var(--accent));
+  color: white;
+  position: relative;
+  overflow: hidden;
+}
+body.page-files .btn-primary::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+  transition: 0.5s;
+}
+body.page-files .btn-primary:hover {
+  transform: scale(1.05);
+  box-shadow: 0 0 15px rgba(245, 158, 11, 0.3);
+}
+body.page-files .btn-primary:hover::after {
+  left: 100%;
+}
+body.page-files .btn-icon {
+  padding: 6px;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--nebula-radius-xs);
+  background: transparent;
+  border: 1px solid transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: 0.2s;
+}
+body.page-files .btn-icon:hover {
+  background: rgba(255,255,255,0.1);
+  color: white;
+  transform: scale(1.1);
+}
+body.page-files .btn-icon.danger:hover {
+  color: var(--danger);
+  background: rgba(248, 81, 73, 0.1);
+}
+@media (max-width: 768px) {
+  body.page-files {
+    flex-direction: column;
+  }
+  body.page-files .sidebar {
+    width: 100%;
+    padding: 12px;
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    flex-shrink: 0;
+  }
+  body.page-files .brand {
+    margin-bottom: 0;
+    font-size: var(--sv-text-lg);
+  }
+  body.page-files nav {
+    display: flex;
+    gap: 8px;
+    overflow-x: auto;
+    padding-bottom: 0;
+  }
+  body.page-files .main {
+    padding: 16px;
+  }
+}
 /* MOBILE_INDEX */
-body.page-mobile-index{ margin:0; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background:#0b0d11; color:#fff; padding-bottom:80px; -webkit-tap-highlight-color: transparent; }
-body.page-mobile-index .header{ padding:16px; background:#18181b; border-bottom:1px solid #27272a; font-weight:800; font-size:20px; display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:10; }
-body.page-mobile-index .section{ padding:16px; }
-body.page-mobile-index .section-title{ font-size:13px; color:#a1a1aa; margin-bottom:12px; text-transform:uppercase; letter-spacing:0.05em; font-weight:600; }
-body.page-mobile-index .card{ background:#1f1f23; padding:16px; border-radius:12px; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; text-decoration:none; color:#fff; border:1px solid #27272a; transition:0.2s; }
-body.page-mobile-index .card:active{ transform:scale(0.98); background:#27272a; }
-body.page-mobile-index .live-card{ border-color:rgba(239,68,68,0.3); background:rgba(239,68,68,0.05); }
-body.page-mobile-index .badge{ background:#27272a; padding:4px 8px; border-radius:6px; font-size:12px; color:#a1a1aa; }
-body.page-mobile-index .live-badge, body.page-mobile-streamer .live-badge { background:#ef4444; color:white; padding:4px 8px; border-radius:6px; font-size:12px; font-weight:bold; box-shadow:0 0 10px rgba(239,68,68,0.4); position:relative; overflow:hidden; }
-body.page-mobile-index .live-badge::after, body.page-mobile-streamer .live-badge::after { content:""; position:absolute; inset:0; background:rgba(255,255,255,0.2); animation:live-pulse 2s infinite ease-in-out; border-radius:inherit; }
-@keyframes live-pulse { 0% { opacity:0.8; transform:scale(1); } 50% { opacity:0; transform:scale(1.5); } 100% { opacity:0; transform:scale(1.5); } }
-body.page-mobile-index .mobile-live-start{
-  display:flex;
-  gap:8px;
-  margin-bottom:12px;
-}
-body.page-mobile-index .mobile-live-start input{
-  flex:1;
-  min-width:0;
-  background:#1f1f23;
-  border:1px solid #27272a;
-  color:#fff;
-  padding:12px;
-  border-radius:8px;
-  outline:none;
-}
-body.page-mobile-index .mobile-live-start input:focus{ border-color:#ef4444; }
-body.page-mobile-index .mobile-live-start button{
-  flex-shrink:0;
-  width:48px;
-  border:none;
-  border-radius:8px;
-  background:#ef4444;
-  color:#fff;
-  font-size:14px;
-  cursor:pointer;
+body.page-mobile-index {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  background: #0b0d11;
+  color: #fff;
+  padding-bottom: 80px;
+  -webkit-tap-highlight-color: transparent;
+}
+body.page-mobile-index .header {
+  padding: 16px;
+  background: var(--nebula-bg-surface);
+  border-bottom: 1px solid var(--nebula-border);
+  font-weight: 800;
+  font-size: var(--sv-text-xl);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+body.page-mobile-index .section {
+  padding: 16px;
+}
+body.page-mobile-index .section-title {
+  font-size: var(--sv-text-sm);
+  color: var(--nebula-text-secondary);
+  margin-bottom: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: 600;
+}
+body.page-mobile-index .card {
+  background: #1f1f23;
+  padding: 16px;
+  border-radius: var(--nebula-radius-md);
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  text-decoration: none;
+  color: #fff;
+  border: 1px solid var(--nebula-border);
+  transition: 0.2s;
+}
+body.page-mobile-index .card:active {
+  transform: scale(0.98);
+  background: var(--nebula-border);
 }
+body.page-mobile-index .badge {
+  background: var(--nebula-border);
+  padding: 4px 8px;
+  border-radius: var(--nebula-radius-xs);
+  font-size: var(--sv-text-xs);
+  color: var(--nebula-text-secondary);
+}
+@keyframes live-pulse { 0% { opacity:0.8; transform:scale(1); } 50% { opacity:0; transform:scale(1.5); } 100% { opacity:0; transform:scale(1.5); } }
 @media (max-width: 768px) {
-  .mobile-global-nav { position:fixed; bottom:0; left:0; right:0; height:64px; background:rgba(24,24,27,0.85); backdrop-filter: none; -webkit-backdrop-filter: none; border-top:1px solid rgba(255,255,255,0.05); display:flex; justify-content:space-around; align-items:center; z-index:9000; padding-bottom:env(safe-area-inset-bottom); }
-  .mobile-global-nav a, .mobile-global-nav button { background:none; border:none; color:#71717a; text-decoration:none; font-size:10px; display:flex; flex-direction:column; align-items:center; gap:4px; width:100%; padding:10px 0; cursor:pointer; font-family:inherit; }
-  .mobile-global-nav a.active { color:#f59e0b; }
-  .mobile-global-nav svg { width:24px; height:24px; fill:currentColor; transition:0.2s; }
-  .mobile-global-nav a.active svg { transform:scale(1.1); }
+  .mobile-global-nav {
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+  .mobile-global-nav a,
+  .mobile-global-nav button {
+    width: 100%;
+  }
 }
 /* MOBILE_STREAMER */
-body.page-mobile-streamer{ margin:0; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background:#0b0d11; color:#fff; padding-bottom:80px; }
-body.page-mobile-streamer .header{ padding:12px 16px; background:#18181b; border-bottom:1px solid #27272a; display:flex; align-items:center; gap:16px; position:sticky; top:0; z-index:100; }
-body.page-mobile-streamer .back-btn{ font-size:24px; text-decoration:none; color:#fff; padding:4px; }
-body.page-mobile-streamer .page-title{ font-weight:800; font-size:18px; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
-body.page-mobile-streamer .controls{ padding:16px; background:#121214; border-bottom:1px solid #27272a; }
-body.page-mobile-streamer .btn-row{ display:flex; gap:8px; margin-bottom:12px; overflow-x:auto; padding-bottom:4px; }
-body.page-mobile-streamer .btn{ background:#27272a; color:#fff; border:1px solid #3f3f46; padding:8px 12px; border-radius:8px; font-size:13px; font-weight:600; white-space:nowrap; text-decoration:none; cursor:pointer; display:flex; align-items:center; gap:6px; }
-body.page-mobile-streamer .btn-primary{ background:#f59e0b; border-color:#d97706; }
-body.page-mobile-streamer .btn-danger{ background:rgba(239,68,68,0.2); color:#fca5a5; border-color:rgba(239,68,68,0.4); }
-body.page-mobile-streamer .search-row{ display:flex; gap:8px; }
-body.page-mobile-streamer .search-input{ flex:1; background:#000; border:1px solid #3f3f46; padding:8px 12px; border-radius:8px; color:#fff; outline:none; }
-body.page-mobile-streamer .tabs{ display:flex; padding:12px 16px; gap:10px; overflow-x:auto; border-bottom:1px solid #27272a; scrollbar-width:none; }
-body.page-mobile-streamer .tabs::-webkit-scrollbar{ display:none; }
-body.page-mobile-streamer .tab{ padding:8px 16px; background:rgba(255,255,255,0.05); border-radius:20px; color:#a1a1aa; text-decoration:none; font-size:14px; font-weight:600; white-space:nowrap; display:flex; align-items:center; gap:6px; transition:0.2s; border:1px solid transparent; }
-body.page-mobile-streamer .tab.active{ background:rgba(245,158,11,0.15); color:#f59e0b; border-color:rgba(245,158,11,0.3); }
-body.page-mobile-streamer .badge{ background:rgba(255,255,255,0.2); padding:2px 6px; border-radius:4px; font-size:10px; }
-body.page-mobile-streamer .list{ padding:16px; display:grid; gap:16px; }
-body.page-mobile-streamer .video-card{ background:#18181b; border-radius:12px; overflow:hidden; border:1px solid #27272a; }
-body.page-mobile-streamer .thumb-area{ position:relative; aspect-ratio:16/9; display:block; }
-body.page-mobile-streamer .thumb{ width:100%; height:100%; object-fit:cover; }
-body.page-mobile-streamer .dur{ position:absolute; bottom:6px; right:6px; background:rgba(0,0,0,0.8); padding:2px 6px; border-radius:4px; font-size:11px; font-weight:600; }
-body.page-mobile-streamer .meta{ padding:12px; }
-body.page-mobile-streamer .title{ font-weight:600; font-size:14px; margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:#fff; text-decoration:none; }
-body.page-mobile-streamer .info{ font-size:12px; color:#a1a1aa; margin-bottom:12px; }
-body.page-mobile-streamer .actions{ display:flex; gap:8px; border-top:1px solid #27272a; padding-top:12px; }
-body.page-mobile-streamer .act-btn{ flex:1; text-align:center; padding:6px; background:#27272a; border-radius:6px; font-size:12px; color:#a1a1aa; text-decoration:none; border:1px solid #3f3f46; }
-body.page-mobile-streamer .pagination{
-  display:flex !important;
-  flex-direction:column !important;
-  justify-content:center !important;
-  gap:12px !important;
-  padding:16px 12px 24px !important;
-  align-items:stretch !important;
-  width:100% !important;
+body.page-mobile-streamer {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  background: #0b0d11;
+  color: #fff;
+  padding-bottom: 80px;
+}
+body.page-mobile-streamer .header {
+  padding: 12px 16px;
+  background: var(--nebula-bg-surface);
+  border-bottom: 1px solid var(--nebula-border);
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+body.page-mobile-streamer .back-btn {
+  font-size: var(--sv-text-2xl);
+  text-decoration: none;
+  color: #fff;
+  padding: 4px;
+}
+body.page-mobile-streamer .page-title {
+  font-weight: 800;
+  font-size: var(--sv-text-lg);
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+body.page-mobile-streamer .controls {
+  padding: 16px;
+  background: #121214;
+  border-bottom: 1px solid var(--nebula-border);
+}
+body.page-mobile-streamer .btn-row {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+  overflow-x: auto;
+  padding-bottom: 4px;
+}
+body.page-mobile-streamer .btn {
+  background: var(--nebula-border);
+  color: #fff;
+  border: 1px solid var(--nebula-border-bright);
+  padding: 8px 12px;
+  border-radius: var(--nebula-radius-sm);
+  font-size: var(--sv-text-sm);
+  font-weight: 600;
+  white-space: nowrap;
+  text-decoration: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+body.page-mobile-streamer .btn-primary {
+  background: #f59e0b;
+  border-color: #d97706;
+}
+body.page-mobile-streamer .btn-danger {
+  background: rgba(239,68,68,0.2);
+  color: #fca5a5;
+  border-color: rgba(239,68,68,0.4);
+}
+body.page-mobile-streamer .tabs {
+  display: flex;
+  padding: 12px 16px;
+  gap: 10px;
+  overflow-x: auto;
+  border-bottom: 1px solid var(--nebula-border);
+  scrollbar-width: none;
+}
+body.page-mobile-streamer .tabs::-webkit-scrollbar {
+  display: none;
+}
+body.page-mobile-streamer .tab {
+  padding: 8px 16px;
+  background: rgba(255,255,255,0.05);
+  border-radius: var(--nebula-radius-lg);
+  color: var(--nebula-text-secondary);
+  text-decoration: none;
+  font-size: var(--sv-text-md);
+  font-weight: 600;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  transition: 0.2s;
+  border: 1px solid transparent;
+}
+body.page-mobile-streamer .tab.active {
+  background: rgba(245,158,11,0.15);
+  color: #f59e0b;
+  border-color: rgba(245,158,11,0.3);
+}
+body.page-mobile-streamer .badge {
+  background: rgba(255,255,255,0.2);
+  padding: 2px 6px;
+  border-radius: var(--nebula-radius-xs);
+  font-size: var(--sv-min-text);
+}
+body.page-mobile-streamer .list {
+  padding: 16px;
+  display: grid;
+  gap: 16px;
+}
+body.page-mobile-streamer .video-card {
+  overflow: hidden;
+  border: 1px solid var(--nebula-border);
+}
+body.page-mobile-streamer .thumb {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+body.page-mobile-streamer .dur {
+  position: absolute;
+  bottom: 6px;
+  right: 6px;
+  padding: 2px 6px;
+  font-size: var(--sv-min-text);
+  font-weight: 600;
+}
+body.page-mobile-streamer .meta {
+  padding: 12px;
+}
+body.page-mobile-streamer .title {
+  font-weight: 600;
+  font-size: var(--sv-text-md);
+  margin-bottom: 6px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  color: #fff;
+  text-decoration: none;
+}
+body.page-mobile-streamer .info {
+  font-size: var(--sv-text-xs);
+  color: var(--nebula-text-secondary);
+  margin-bottom: 12px;
+}
+body.page-mobile-streamer .actions {
+  display: flex;
+  gap: 8px;
+  border-top: 1px solid var(--nebula-border);
+  padding-top: 12px;
+}
+body.page-mobile-streamer .pagination {
+  display: flex !important;
+  flex-direction: column !important;
+  justify-content: center !important;
+  gap: 12px !important;
+  padding: 16px 12px 24px !important;
+  align-items: stretch !important;
+  width: 100% !important;
 }
 body.page-mobile-streamer .pagination-pages,
-body.page-streamer .pagination-pages{
-  display:flex !important;
-  flex-direction:row !important;
-  flex-wrap:wrap !important;
-  justify-content:center !important;
-  align-items:center !important;
-  gap:8px !important;
-  width:100% !important;
-  max-width:100% !important;
-}
-body.page-mobile-streamer .pagination-nav-row,
-body.page-streamer .pagination-nav-row{
-  display:flex !important;
-  flex-direction:row !important;
-  flex-wrap:wrap !important;
-  justify-content:center !important;
-  align-items:center !important;
-  gap:10px !important;
-  width:100% !important;
+body.page-streamer .pagination-pages {
+  display: flex !important;
+  flex-direction: row !important;
+  flex-wrap: wrap !important;
+  justify-content: center !important;
+  align-items: center !important;
+  gap: 8px !important;
+  width: 100% !important;
+  max-width: 100% !important;
 }
 body.page-mobile-streamer .pagination-page,
-body.page-streamer .pagination-page{
-  display:inline-flex !important;
-  align-items:center !important;
-  justify-content:center !important;
-  min-width:44px !important;
-  width:auto !important;
-  height:44px !important;
-  padding:0 12px !important;
-  border-radius:10px !important;
-  border:1px solid rgba(255,255,255,0.14) !important;
-  background:rgba(255,255,255,0.06) !important;
-  color:#f5f5f5 !important;
-  font-size:15px !important;
-  font-weight:700 !important;
-  text-decoration:none !important;
-  line-height:1 !important;
-  box-sizing:border-box !important;
-  flex:0 0 auto !important;
+body.page-streamer .pagination-page {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  min-width: 44px !important;
+  width: auto !important;
+  height: 44px !important;
+  padding: 0 12px !important;
+  border-radius: var(--nebula-radius-sm) !important;
+  border: 1px solid rgba(255,255,255,0.14) !important;
+  background: rgba(255,255,255,0.06) !important;
+  color: var(--nebula-text-main) !important;
+  font-size: var(--sv-text-md) !important;
+  font-weight: 700 !important;
+  text-decoration: none !important;
+  line-height: 1 !important;
+  box-sizing: border-box !important;
+  flex: 0 0 auto !important;
 }
 body.page-mobile-streamer .pagination-page:hover,
-body.page-streamer .pagination-page:hover{
-  background:rgba(255,255,255,0.12) !important;
-  border-color:rgba(255,255,255,0.28) !important;
+body.page-streamer .pagination-page:hover {
+  background: rgba(255,255,255,0.12) !important;
+  border-color: rgba(255,255,255,0.28) !important;
 }
 body.page-mobile-streamer .pagination-page.is-current,
-body.page-streamer .pagination-page.is-current{
-  background:rgba(242,229,141,0.18) !important;
-  border-color:rgba(242,229,141,0.55) !important;
-  color:#fff3a9 !important;
-  cursor:default !important;
-}
-body.page-streamer .streamer-pagination{
-  display:flex !important;
-  flex-direction:column !important;
-  align-items:stretch !important;
-  justify-content:center !important;
-  gap:12px !important;
-  width:100% !important;
-  min-height:0 !important;
-  padding:4px 0 !important;
-}
-body.page-streamer .pagination-nav{
-  color:var(--text-muted);
-  text-decoration:none;
-  font-size:13px;
-  font-weight:600;
-  padding:8px 12px;
-  border-radius:10px;
-  border:1px solid transparent;
-}
-body.page-streamer .pagination-nav:hover{
-  color:#fff;
-  background:rgba(255,255,255,0.08);
-  border-color:rgba(255,255,255,0.12);
-}
-body.page-streamer .streamer-pagination-panel{
-  width:100% !important;
-}
-body.page-mobile-streamer .empty{ text-align:center; padding:40px; color:#52525b; }
+body.page-streamer .pagination-page.is-current {
+  background: rgba(242,229,141,0.18) !important;
+  border-color: rgba(242,229,141,0.55) !important;
+  color: #fff3a9 !important;
+  cursor: default !important;
+}
+body.page-streamer .pagination-nav {
+  color: var(--text-muted);
+  text-decoration: none;
+  font-size: var(--sv-text-sm);
+  font-weight: 600;
+  padding: 8px 12px;
+  border-radius: var(--nebula-radius-sm);
+  border: 1px solid transparent;
+}
+body.page-streamer .pagination-nav:hover {
+  color: #fff;
+  background: rgba(255,255,255,0.08);
+  border-color: rgba(255,255,255,0.12);
+}
+body.page-streamer .streamer-pagination-panel {
+  width: 100% !important;
+}
+body.page-mobile-streamer .empty {
+  text-align: center;
+  padding: 40px;
+  color: var(--nebula-text-muted);
+}
 /* MOBILE_PLAYER */
-body.page-mobile-player{ margin:0; background:#000; color:#fff; height:100vh; height:100dvh; display:flex; flex-direction:column; overflow:hidden; font-family:-apple-system, sans-serif; }
-
-
-body.page-mobile-player .video-container{ flex:none; width:100%; aspect-ratio:16/9; position:relative; background:#000; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
-body.page-mobile-player .chat-container{
+body.page-mobile-player {
+  margin: 0;
+  background: #000;
+  color: #fff;
+  height: 100vh;
+  height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  font-family: -apple-system, sans-serif;
+}
+body.page-mobile-player .video-container {
+  flex: none;
+  width: 100%;
+  aspect-ratio: 16/9;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+body.page-mobile-player .chat-container {
   flex: 1;
-  background:#0e0e10;
-  border-top:1px solid #333;
-  display:flex;
-  flex-direction:column;
-  min-height:0;
-  overflow:hidden;
-}
-body.page-mobile-player .chat-list{
-  flex:1 1 auto;
-  min-height:0;
-  overflow-x:hidden;
-  overflow-y:auto;
-  -webkit-overflow-scrolling:touch;
-  overscroll-behavior:contain;
-  padding:10px 10px 40px 10px;
-  font-size:13px;
-  line-height:1.4;
-}
-body.page-twitch-watch-mobile .chat-container{
-  flex:1 1 auto;
-  min-height:0;
-  overflow:hidden;
-}
-body.page-twitch-watch-mobile .chat-list{
-  flex:1 1 auto;
-  min-height:0;
-  overflow-x:hidden;
-  overflow-y:auto;
-  -webkit-overflow-scrolling:touch;
-  overscroll-behavior:contain;
-  padding:8px 12px 24px;
-}
-body.page-mobile-player video{ width:100%; height:100%; object-fit:contain; }
-body.page-mobile-player iframe{ width:100%; height:100%; border:none; }
-body.page-mobile-player .overlay-header{
-  position:absolute;
-  top:0; left:0; right:0;
-  padding:10px;
-  padding-top:max(10px, env(safe-area-inset-top));
-  background:linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
-  z-index:50;
-  display:flex;
-  justify-content:space-between;
-  align-items:flex-start;
-  pointer-events:none;
-}
-body.page-mobile-player .back-btn{
-  pointer-events:auto;
-  color:white;
-  text-decoration:none;
-  font-size:24px;
-  text-shadow:0 1px 3px rgba(0,0,0,0.8);
-  padding:5px;
-}
-body.page-mobile-player .chat-line{ margin-bottom:4px; word-wrap:break-word; }
-body.page-mobile-player .u{ font-weight:700; color:#a970ff; margin-right:4px; }
-body.page-mobile-player .m{ color:#efeff1; }
-body.page-mobile-player .t{ color:#555; font-size:10px; margin-right:4px; }
-
+  border-top: 1px solid #333;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+body.page-mobile-player .chat-list {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+  padding: 10px 10px 40px 10px;
+  font-size: var(--sv-text-sm);
+  line-height: 1.4;
+}
+body.page-twitch-watch-mobile .chat-container {
+  overflow: hidden;
+}
+body.page-twitch-watch-mobile .chat-list {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+}
+body.page-mobile-player iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+body.page-mobile-player .overlay-header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 10px;
+  padding-top: max(10px, env(safe-area-inset-top));
+  background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
+  z-index: 50;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  pointer-events: none;
+}
+body.page-mobile-player .back-btn {
+  pointer-events: auto;
+  color: white;
+  text-decoration: none;
+  font-size: var(--sv-text-2xl);
+  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
+  padding: 5px;
+}
+body.page-mobile-player .chat-line {
+  margin-bottom: 4px;
+  word-wrap: break-word;
+}
+body.page-mobile-player .u {
+  font-weight: 700;
+  color: #a970ff;
+  margin-right: 4px;
+}
+body.page-mobile-player .m {
+  color: #efeff1;
+}
+body.page-mobile-player .t {
+  font-size: var(--sv-min-text);
+  margin-right: 4px;
+}
 /* Landscape layout: physical rotate OR forced via Vollbild button */
-body.page-mobile-player.is-landscape-active{
+body.page-mobile-player.is-landscape-active {
   flex-direction: row !important;
 }
-body.page-mobile-player.is-landscape-active .video-container{
+body.page-mobile-player.is-landscape-active .video-container {
   flex: 1 1 100% !important;
   width: auto !important;
   max-width: none !important;
@@ -2755,14 +2889,12 @@ body.page-mobile-player.is-landscape-active .video-container{
   height: 100% !important;
   min-width: 0 !important;
 }
-body.page-mobile-player.is-landscape-active .mobile-vod-details,
-body.page-mobile-player.is-landscape-active .mobile-comments{
+body.page-mobile-player.is-landscape-active .mobile-vod-details {
   display: none !important;
 }
 /* Closed = fullscreen video, chat fully gone (override chat-panel-tabs display:flex) */
 body.page-mobile-player.is-landscape-active .chat-container,
-body.page-mobile-player.is-landscape-active .chat-container.chat-panel-tabs,
-body.page-mobile-player.is-landscape-active .chat-container.chat-panel-split{
+body.page-mobile-player.is-landscape-active .chat-container.chat-panel-tabs {
   display: none !important;
   flex: 0 0 0 !important;
   width: 0 !important;
@@ -2772,14 +2904,13 @@ body.page-mobile-player.is-landscape-active .chat-container.chat-panel-split{
   overflow: hidden !important;
 }
 /* Open = exactly 2/3 video + 1/3 chat */
-body.page-mobile-player.is-landscape-active.landscape-chat-open .video-container{
+body.page-mobile-player.is-landscape-active.landscape-chat-open .video-container {
   flex: 1 1 66.666% !important;
   width: 66.666% !important;
   max-width: 66.666% !important;
 }
 body.page-mobile-player.is-landscape-active.landscape-chat-open .chat-container,
-body.page-mobile-player.is-landscape-active.landscape-chat-open .chat-container.chat-panel-tabs,
-body.page-mobile-player.is-landscape-active.landscape-chat-open .chat-container.chat-panel-split{
+body.page-mobile-player.is-landscape-active.landscape-chat-open .chat-container.chat-panel-tabs {
   display: flex !important;
   flex: 0 0 33.334% !important;
   width: 33.334% !important;
@@ -2790,18 +2921,16 @@ body.page-mobile-player.is-landscape-active.landscape-chat-open .chat-container.
   border-left: 1px solid #333 !important;
   overflow: hidden !important;
 }
-
 /* Overlay action buttons */
-body.page-mobile-player .overlay-header-actions{
-  display:flex;
-  align-items:center;
-  gap:8px;
-  pointer-events:auto;
+body.page-mobile-player .overlay-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  pointer-events: auto;
   position: relative;
   z-index: 2;
 }
-body.page-mobile-player .mobile-force-landscape-toggle,
-body.page-mobile-player .mobile-landscape-chat-toggle{
+body.page-mobile-player .mobile-landscape-chat-toggle {
   display: none;
   pointer-events: auto;
   touch-action: manipulation;
@@ -2813,7 +2942,7 @@ body.page-mobile-player .mobile-landscape-chat-toggle{
   margin: 0;
   padding: 0;
   border: 1px solid rgba(255,255,255,0.22);
-  border-radius: 10px;
+  border-radius: var(--nebula-radius-sm);
   background: rgba(12,12,14,0.82);
   color: #f3f3f3;
   cursor: pointer;
@@ -2821,150 +2950,240 @@ body.page-mobile-player .mobile-landscape-chat-toggle{
   position: relative;
   z-index: 3;
 }
-body.page-mobile-player .mobile-force-landscape-toggle:focus-visible,
-body.page-mobile-player .mobile-landscape-chat-toggle:focus-visible{
-  outline: 2px solid #7dd3fc;
-  outline-offset: 2px;
+body.page-mobile-player .mobile-landscape-chat-toggle:focus-visible {
+  outline: 2px solid #7dd3fc;
+  outline-offset: 2px;
+}
+body.page-mobile-player .landscape-chat-icon {
+  display: none;
+  pointer-events: none;
+}
+body.page-mobile-player .landscape-chat-icon-expand {
+  display: block;
+}
+body.page-mobile-player.landscape-chat-open .landscape-chat-icon-expand {
+  display: none;
+}
+body.page-mobile-player.landscape-chat-open .landscape-chat-icon-collapse {
+  display: block;
+}
+/* Portrait: Vollbild-Toggle. Landscape: Chat-Toggle. */
+body.page-mobile-player.is-landscape-active .mobile-landscape-chat-toggle,
+body.page-mobile-player .mobile-landscape-chat-toggle.is-visible {
+  display: inline-flex;
+}
+/* CHAT_EXPORT */
+body.page-chat-export {
+  background: #0e0e10;
+  font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
+  margin: 0;
+}
+body.page-chat-export .container {
+  max-width: 800px;
+  margin: 0 auto;
+}
+body.page-chat-export h1 {
+  color: #fff;
+  border-bottom: 1px solid #333;
+  padding-bottom: 20px;
+}
+body.page-chat-export .vod-group {
+  margin-bottom: 40px;
+  background: var(--nebula-bg-surface);
+  border-radius: var(--nebula-radius-sm);
+  overflow: hidden;
+  border: 1px solid #333;
+}
+body.page-chat-export .vod-header {
+  background: #1f1f23;
+  padding: 15px 20px;
+  font-weight: bold;
+  color: #a970ff;
+  border-bottom: 1px solid #333;
+  display: flex;
+  justify-content: space-between;
+}
+body.page-chat-export .chat-list {
+  padding: 10px 0;
+}
+body.page-chat-export .chat-line {
+  padding: 4px 20px;
+  display: flex;
+  gap: 10px;
+  line-height: 1.5;
+  font-size: var(--sv-text-md);
+}
+body.page-chat-export .chat-line:hover {
+  background: #1f1f23;
+}
+body.page-chat-export .time {
+  color: #adadb8;
+  font-family: monospace;
+  font-size: var(--sv-text-xs);
+  min-width: 60px;
+}
+body.page-chat-export .user {
+  font-weight: 700;
+  color: #efeff1;
+}
+body.page-chat-export .msg {
+  color: #efeff1;
+  word-break: break-word;
+}
+body.page-chat-export .footer {
+  margin-top: 50px;
+  color: #555;
+  font-size: var(--sv-text-xs);
+  text-align: center;
+}
+/* SEARCH */
+body.page-search * {
+  box-sizing: border-box;
+}
+body.page-search {
+  margin: 0;
+  font-family: 'Sora', sans-serif;
+  background-color: var(--bg-deep);
+  background-image: radial-gradient(circle at 15% 50%, rgba(245, 158, 11, 0.1), transparent 25%),
+            radial-gradient(circle at 85% 30%, rgba(14, 165, 233, 0.1), transparent 25%);
+  background-size: 200% 200%;
+  animation: none;
+  color: var(--text);
+  min-height: 100vh;
+  display: flex;
+}
+@keyframes bg-pulse{ 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
+body.page-search ::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+body.page-search ::-webkit-scrollbar-track {
+  background: transparent;
+}
+body.page-search ::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: var(--nebula-radius-xs);
+}
+body.page-search ::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+body.page-search a {
+  text-decoration: none;
+  color: inherit;
+  transition: 0.2s;
+}
+body.page-search .sidebar {
+  width: 280px;
+  background: rgba(3,3,5,0.6);
+  backdrop-filter: none;
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  padding: 32px;
+  flex-shrink: 0;
+}
+body.page-search .brand {
+  font-family: 'Fraunces', serif;
+  font-size: var(--sv-text-2xl);
+  font-weight: 700;
+  color: white;
+  margin-bottom: 48px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  letter-spacing: -0.02em;
 }
-body.page-mobile-player .mobile-force-landscape-toggle.is-active{
-  border-color: rgba(125, 211, 252, 0.55);
-  background: rgba(14, 40, 56, 0.9);
+body.page-search .main {
+  flex: 1;
+  padding: 40px 60px;
+  overflow-y: auto;
+  animation: fade-in 0.5s ease-out;
 }
-body.page-mobile-player .force-landscape-icon,
-body.page-mobile-player .landscape-chat-icon{
-  display: none;
-  pointer-events: none;
+@keyframes fade-in{ from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+body.page-search .header {
+  margin-bottom: 48px;
 }
-body.page-mobile-player .force-landscape-icon-enter{
-  display: block;
+body.page-search .page-title {
+  font-family: 'Fraunces', serif;
+  font-size: var(--sv-text-4xl);
+  font-weight: 700;
+  margin: 0;
+  letter-spacing: -0.02em;
 }
-body.page-mobile-player.is-landscape-layout .force-landscape-icon-enter{
-  display: none;
+body.page-search .panel {
+  background: var(--glass);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  backdrop-filter: none;
+  margin-bottom: 24px;
 }
-body.page-mobile-player.is-landscape-layout .force-landscape-icon-exit{
-  display: block;
+body.page-search input {
+  background: rgba(0,0,0,0.3);
+  border: 1px solid var(--border);
+  color: white;
+  padding: 12px 16px;
+  border-radius: var(--nebula-radius-md);
+  width: 100%;
+  transition: 0.2s;
+  font-size: var(--sv-text-base);
 }
-body.page-mobile-player .landscape-chat-icon-expand{
-  display: block;
+body.page-search input:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
 }
-body.page-mobile-player.landscape-chat-open .landscape-chat-icon-expand{
-  display: none;
+body.page-search button:where(:not(.sv-btn)) {
+  background: linear-gradient(135deg, var(--primary), var(--accent));
+  color: white;
+  padding: 12px 24px;
+  border-radius: var(--nebula-radius-md);
+  font-size: var(--sv-text-base);
+  font-weight: 600;
+  cursor: pointer;
+  border: none;
+  transition: 0.3s;
+  margin-top: 16px;
 }
-body.page-mobile-player.landscape-chat-open .landscape-chat-icon-collapse{
-  display: block;
+body.page-search button:where(:not(.sv-btn)):hover {
+  transform: scale(1.02);
+  box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
 }
-/* Portrait: Vollbild-Toggle. Landscape: Chat-Toggle. */
-body.page-mobile-player:not(.is-landscape-active) .mobile-force-landscape-toggle,
-body.page-mobile-player.is-landscape-layout .mobile-force-landscape-toggle{
-  display: inline-flex;
+body.page-search table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--sv-text-md);
+  margin-top: 20px;
 }
-body.page-mobile-player.is-landscape-active .mobile-landscape-chat-toggle,
-body.page-mobile-player .mobile-landscape-chat-toggle.is-visible{
-  display: inline-flex;
+body.page-search th,
+body.page-search td {
+  padding: 12px 8px;
+  text-align: left;
+  border-bottom: 1px solid var(--border);
+}
+body.page-search th {
+  color: var(--text-muted);
+  font-weight: 600;
+  font-size: var(--sv-text-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+body.page-search tr:hover {
+  background: rgba(255,255,255,0.02);
+}
+@media (max-width: 768px) {
+  body.page-search {
+    flex-direction: column;
+  }
+  body.page-search .sidebar {
+    width: 100%;
+    padding: 16px;
+  }
+  body.page-search .main {
+    padding: 20px;
+  }
 }
-
-/* CHAT_EXPORT */
-body.page-chat-export{ background: #0e0e10; color: #efeff1; font-family: 'Segoe UI', Helvetica, Arial, sans-serif; padding: 40px; margin: 0; }
-  body.page-chat-export .container{ max-width: 800px; margin: 0 auto; }
-  body.page-chat-export h1{ color: #fff; border-bottom: 1px solid #333; padding-bottom: 20px; }
-  body.page-chat-export .vod-group{ margin-bottom: 40px; background: #18181b; border-radius: 8px; overflow: hidden; border: 1px solid #333; }
-  body.page-chat-export .vod-header{ background: #1f1f23; padding: 15px 20px; font-weight: bold; color: #a970ff; border-bottom: 1px solid #333; display: flex; justify-content: space-between; }
-  body.page-chat-export .chat-list{ padding: 10px 0; }
-  body.page-chat-export .chat-line{ padding: 4px 20px; display: flex; gap: 10px; line-height: 1.5; font-size: 14px; }
-  body.page-chat-export .chat-line:hover{ background: #1f1f23; }
-  body.page-chat-export .time{ color: #adadb8; font-family: monospace; font-size: 12px; min-width: 60px; }
-  body.page-chat-export .user{ font-weight: 700; color: #efeff1; }
-  body.page-chat-export .msg{ color: #efeff1; word-break: break-word; }
-  body.page-chat-export .footer{ margin-top: 50px; color: #555; font-size: 12px; text-align: center; }
-/* SEARCH */
-body.page-search *{ box-sizing: border-box; }
-      body.page-search{
-        margin: 0;
-        font-family: 'Sora', sans-serif;
-        background-color: var(--bg-deep);
-        background-image: 
-            radial-gradient(circle at 15% 50%, rgba(245, 158, 11, 0.1), transparent 25%),
-            radial-gradient(circle at 85% 30%, rgba(14, 165, 233, 0.1), transparent 25%);
-        background-size: 200% 200%;
-        animation: none;
-        color: var(--text);
-        min-height: 100vh;
-        display: flex;
-      }
-      @keyframes bg-pulse{ 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
-      
-      body.page-search ::-webkit-scrollbar{ width: 6px; height: 6px; }
-      body.page-search ::-webkit-scrollbar-track{ background: transparent; }
-      body.page-search ::-webkit-scrollbar-thumb{ background: rgba(255, 255, 255, 0.1); border-radius: 3px; }
-      body.page-search ::-webkit-scrollbar-thumb:hover{ background: rgba(255, 255, 255, 0.2); }
-      
-      body.page-search a{ text-decoration: none; color: inherit; transition: 0.2s; }
-      
-      body.page-search .sidebar{ width: 280px; background: rgba(3,3,5,0.6); backdrop-filter: none; border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 32px; flex-shrink: 0; }
-      body.page-search .brand{ font-family: 'Fraunces', serif; font-size: 24px; font-weight: 700; color: white; margin-bottom: 48px; display: flex; align-items: center; gap: 10px; letter-spacing: -0.02em; }
-      body.page-search .nav-item{ display: flex; align-items: center; gap: 14px; padding: 14px 18px; color: var(--text-muted); text-decoration: none; border-radius: 14px; margin-bottom: 6px; transition: all 0.3s ease; font-weight: 500; }
-      body.page-search .nav-item:hover{ background: var(--glass-hover); color: white; transform: translateX(4px); }
-      body.page-search .nav-item.active{ background: rgba(245, 158, 11, 0.15); color: white; border: 1px solid rgba(245, 158, 11, 0.2); }
-      
-      body.page-search .main{ flex: 1; padding: 40px 60px; overflow-y: auto; animation: fade-in 0.5s ease-out; }
-      @keyframes fade-in{ from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
-      body.page-search .header{ margin-bottom: 48px; }
-      body.page-search .page-title{ font-family: 'Fraunces', serif; font-size: 36px; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
-      
-      body.page-search .panel{ background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; backdrop-filter: none; margin-bottom: 24px; }
-      
-      body.page-search input{ background: rgba(0,0,0,0.3); border: 1px solid var(--border); color: white; padding: 12px 16px; border-radius: 12px; outline: none; width: 100%; transition: 0.2s; font-size: 16px; }
-      body.page-search input:focus{ border-color: var(--primary); box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2); }
-      
-      body.page-search button{ background: linear-gradient(135deg, var(--primary), var(--accent)); color: white; padding: 12px 24px; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; border: none; transition: 0.3s; margin-top: 16px; }
-      body.page-search button:hover{ transform: scale(1.02); box-shadow: 0 0 20px rgba(245, 158, 11, 0.3); }
-      
-      body.page-search table{ width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 20px; }
-      body.page-search th, body.page-search td{ padding: 12px 8px; text-align: left; border-bottom: 1px solid var(--border); }
-      body.page-search th{ color: var(--text-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
-      body.page-search tr:hover{ background: rgba(255,255,255,0.02); }
-      
-      body.page-search .link-btn{ color: var(--accent); font-weight: 600; }
-      body.page-search .link-btn:hover{ text-decoration: underline; }
-      
-      @media (max-width: 768px){ body.page-search{ flex-direction: column; } body.page-search .sidebar{ width: 100%; padding: 16px; } body.page-search .main{ padding: 20px; } }
-
 @keyframes spin { 100% { transform: rotate(360deg); } }
-
-/* APP REDESIGN 2026 */
-:root {
-  --sr-bg: #070808;
-  --sr-bg-soft: #0d1010;
-  --sr-surface: rgba(18, 22, 22, 0.94);
-  --sr-surface-2: rgba(24, 29, 29, 0.92);
-  --sr-line: rgba(226, 232, 240, 0.12);
-  --sr-line-strong: rgba(226, 232, 240, 0.2);
-  --sr-text: #f3f4f0;
-  --sr-text-2: #c8d1cc;
-  --sr-muted: #8f9c96;
-  --sr-warm: #f28c28;
-  --sr-warm-2: #ffb15f;
-  --sr-cyan: #49c7c0;
-  --sr-green: #5bd39a;
-  --sr-red: #ff6b5f;
-  --sr-radius: 8px;
-  --sr-shadow: 0 22px 60px rgba(0, 0, 0, 0.42);
-  --primary: var(--sr-warm);
-  --primary-hover: #d96f19;
-  --accent: var(--sr-cyan);
-  --text: var(--sr-text);
-  --text-main: var(--sr-text);
-  --text-muted: var(--sr-muted);
-  --border: var(--sr-line);
-  --card: var(--sr-surface);
-  --glass: var(--sr-surface);
-  --glass-hover: rgba(255, 255, 255, 0.06);
-  --radius: var(--sr-radius);
-}
-
 body:is(.page-index,.page-channels,.page-streamer,.page-vod,.page-live,.page-admin,.page-files,.page-search,.page-discord-tool,.page-hls) {
-  background:
-    linear-gradient(135deg, rgba(242, 140, 40, 0.06), transparent 26%),
+  background: linear-gradient(135deg, rgba(242, 140, 40, 0.06), transparent 26%),
     linear-gradient(215deg, rgba(73, 199, 192, 0.055), transparent 30%),
     repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 42px),
     repeating-linear-gradient(90deg, rgba(255,255,255,0.014) 0 1px, transparent 1px 42px),
@@ -2973,382 +3192,101 @@ body:is(.page-index,.page-channels,.page-streamer,.page-vod,.page-live,.page-adm
   font-family: 'Sora', sans-serif !important;
   min-height: 100vh;
 }
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .sidebar {
-  width: 252px !important;
-  padding: 18px 14px !important;
-  background: linear-gradient(180deg, rgba(10, 12, 12, 0.98), rgba(10, 12, 12, 0.9)) !important;
-  border-right: 1px solid var(--sr-line) !important;
-  box-shadow: 18px 0 42px rgba(0, 0, 0, 0.22);
-  backdrop-filter: none !important;
-}
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .brand {
-  margin: 0 0 22px !important;
-  padding: 10px 10px 18px !important;
-  border-bottom: 1px solid var(--sr-line);
-  color: var(--sr-text) !important;
-  font-family: 'Fraunces', serif !important;
-  font-size: 22px !important;
-  font-weight: 700 !important;
-  letter-spacing: 0 !important;
-}
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) nav {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .nav-item {
-  min-height: 42px !important;
-  padding: 10px 12px !important;
-  border-radius: 8px !important;
-  border: 1px solid transparent !important;
-  color: var(--sr-text-2) !important;
-  background: transparent !important;
-  font-size: 13px !important;
-  font-weight: 600 !important;
-  transform: none !important;
-}
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .nav-item:hover {
-  color: var(--sr-text) !important;
-  background: rgba(255,255,255,0.055) !important;
-  border-color: var(--sr-line) !important;
-  transform: none !important;
-}
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .nav-item.active {
-  color: #11100d !important;
-  background: linear-gradient(135deg, var(--sr-warm), var(--sr-warm-2)) !important;
-  border-color: rgba(255, 207, 151, 0.35) !important;
-  box-shadow: 0 12px 24px rgba(242, 140, 40, 0.16);
-}
-
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .main {
-  padding: 28px 34px !important;
   background: transparent !important;
 }
-
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .header {
-  margin: 0 0 22px !important;
   padding: 0 0 18px;
   border-bottom: 1px solid var(--sr-line);
 }
-
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .page-title {
-  color: var(--sr-text) !important;
-  font-family: 'Fraunces', serif !important;
-  font-size: 34px !important;
-  line-height: 1.08 !important;
-  letter-spacing: 0 !important;
+  font-size: var(--sv-text-4xl) !important;
 }
-
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .page-subtitle,
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .muted {
   color: var(--sr-muted) !important;
 }
-
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .panel,
-body.page-index .stat-card,
 body.page-index .card,
 body.page-streamer .panel,
 body.page-streamer .video-card,
-body.page-files .upload-section,
-body.page-files .file-card,
 body.page-live .controls-panel,
 body.page-live .chat-panel,
 body.page-vod .controls-panel,
-body.page-vod .chat-panel,
-body.page-discord-tool .profile-card,
-body.page-discord-tool .grid-item,
-body.page-discord-tool .token-item {
+body.page-vod .chat-panel {
   background: linear-gradient(180deg, rgba(22, 27, 27, 0.96), rgba(14, 17, 17, 0.96)) !important;
   border: 1px solid var(--sr-line) !important;
-  border-radius: 8px !important;
+  border-radius: var(--nebula-radius-sm) !important;
   box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24) !important;
   backdrop-filter: none !important;
 }
-
-body:is(.page-index,.page-channels,.page-admin,.page-files,.page-search,.page-discord-tool) .panel,
-body.page-files .upload-section {
+body:is(.page-index,.page-channels,.page-admin,.page-files,.page-search,.page-discord-tool) .panel {
   padding: 22px !important;
 }
-
-body.page-index .stats-grid {
-  grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
-  gap: 14px !important;
-  margin-bottom: 26px !important;
-}
-
-body.page-index .stat-card {
-  min-height: 150px !important;
-  padding: 18px !important;
-  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
-}
-
-body.page-index .stat-card:hover,
 body.page-index .card:hover,
-body.page-streamer .video-card:hover,
-body.page-files .file-card:hover {
+body.page-streamer .video-card:hover {
   border-color: rgba(242, 140, 40, 0.38) !important;
   transform: translateY(-2px) !important;
   box-shadow: 0 24px 48px rgba(0, 0, 0, 0.34) !important;
 }
-
-body.page-index .stat-head,
-body.page-index .card-header {
-  gap: 12px;
-}
-
-body.page-index .stat-label,
-body.page-index .stat-sub,
-body.page-index .stat-box-label,
-body.page-streamer .video-meta,
-body.page-files .file-desc,
-body.page-files .upload-text {
-  color: var(--sr-muted) !important;
-}
-
-body.page-index .stat-value,
-body.page-index .stat-box-val,
-body.page-streamer .video-title,
-body.page-files .file-name {
-  color: var(--sr-text) !important;
-}
-
-body.page-index .streamer-grid,
-body.page-streamer .video-grid,
-body.page-files .files-grid,
-body.page-discord-tool .grid-list {
-  gap: 16px !important;
-}
-
 body.page-index .card,
-body.page-streamer .video-card,
-body.page-files .file-card {
+body.page-streamer .video-card {
   overflow: hidden;
 }
-
 body.page-index .avatar,
-body.page-index .avatar img,
-body.page-discord-tool .item-icon,
-body.page-files .file-icon {
-  border-radius: 8px !important;
-}
-
-body.page-index .avatar {
-  background: linear-gradient(135deg, rgba(242, 140, 40, 0.28), rgba(73, 199, 192, 0.2)) !important;
-}
-
-body.page-index .status-badge,
-body.page-streamer .status-badge,
-body.page-index .badge,
-body.page-streamer .badge,
-body.page-files .file-size {
-  border-radius: 999px !important;
-  border: 1px solid var(--sr-line) !important;
-  background: rgba(255,255,255,0.06) !important;
-  color: var(--sr-text-2) !important;
-}
-
-body.page-index .status-badge.live,
-body.page-streamer .status-badge.live,
-body.page-mobile-index .live-badge {
-  background: rgba(255, 107, 95, 0.18) !important;
-  border-color: rgba(255, 107, 95, 0.36) !important;
-  color: #ffb6ad !important;
-}
-
-body.page-index .status-badge.online,
-body.page-streamer .status-badge.online {
-  background: rgba(91, 211, 154, 0.14) !important;
-  border-color: rgba(91, 211, 154, 0.28) !important;
-  color: #9df0c3 !important;
-}
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) input,
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) select,
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) textarea,
-body.page-files .input-field {
-  min-height: 40px !important;
-  border-radius: 8px !important;
-  border: 1px solid var(--sr-line) !important;
-  background: rgba(5, 7, 7, 0.78) !important;
-  color: var(--sr-text) !important;
-  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
-}
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) input:focus,
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) select:focus,
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) textarea:focus,
-body.page-files .input-field:focus {
-  border-color: rgba(73, 199, 192, 0.72) !important;
-  box-shadow: 0 0 0 3px rgba(73, 199, 192, 0.12) !important;
+body.page-index .avatar img {
+  border-radius: var(--nebula-radius-sm) !important;
 }
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) button,
+body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) button:where(:not(.sv-btn)),
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .btn,
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .btn-action,
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .action-btn,
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .btn-primary {
-  border-radius: 8px !important;
-  border: 1px solid var(--sr-line) !important;
-  background: rgba(255,255,255,0.06) !important;
-  color: var(--sr-text) !important;
-  box-shadow: none !important;
   transform: none !important;
   transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease !important;
 }
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) button:hover,
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .btn:hover,
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .btn-action:hover,
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .action-btn:hover {
-  background: rgba(255,255,255,0.1) !important;
-  border-color: var(--sr-line-strong) !important;
+body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) button:where(:not(.sv-btn)):hover,
+body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .btn:hover {
   transform: translateY(-1px) !important;
 }
-
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .btn-primary,
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .action-btn.primary,
 body.page-files .btn-primary {
-  background: linear-gradient(135deg, var(--sr-warm), var(--sr-warm-2)) !important;
-  border-color: rgba(255, 207, 151, 0.36) !important;
-  color: #15100a !important;
   font-weight: 800 !important;
 }
-
-body.page-streamer .tabs,
-body.page-admin .tabs,
-body.page-discord-tool .tabs {
-  gap: 6px !important;
-  padding: 4px !important;
-  border: 1px solid var(--sr-line) !important;
-  border-radius: 8px !important;
-  background: rgba(255,255,255,0.035) !important;
-  width: fit-content;
-}
-
-body.page-streamer .tab,
-body.page-admin .tab,
-body.page-discord-tool .tab {
-  border-radius: 6px !important;
-  border: 0 !important;
-  padding: 9px 13px !important;
-  color: var(--sr-muted) !important;
-  margin: 0 !important;
-}
-
-body.page-streamer .tab.active,
-body.page-admin .tab.active,
-body.page-discord-tool .tab.active {
-  background: var(--sr-surface-2) !important;
-  color: var(--sr-text) !important;
-}
-
-body.page-streamer .thumb-wrap {
-  background: #020303 !important;
-  border-bottom: 1px solid var(--sr-line);
-}
-
-body.page-streamer .thumb-img {
-  filter: saturate(1.04) contrast(1.04);
-}
-
-body.page-streamer .duration-badge,
 body.page-mobile-streamer .dur {
-  border-radius: 6px !important;
+  border-radius: var(--nebula-radius-xs) !important;
   background: rgba(0, 0, 0, 0.78) !important;
   border: 1px solid rgba(255,255,255,0.12);
 }
-
-body.page-streamer .card-body {
-  padding: 14px !important;
-}
-
 body.page-vod,
 body.page-live,
 body.page-hls,
 body.page-clip-editor {
-  background:
-    linear-gradient(180deg, #050606 0%, #0a0d0d 100%) !important;
+  background: linear-gradient(180deg, #050606 0%, #0a0d0d 100%) !important;
   color: var(--sr-text) !important;
 }
-
 body.page-vod header,
 body.page-live header,
 body.page-clip-editor header {
   background: rgba(8, 10, 10, 0.96) !important;
   border-bottom: 1px solid var(--sr-line) !important;
 }
-
-body.page-vod .player-wrapper,
-body.page-live .player-wrapper,
-body.page-hls video,
-body.page-clip-editor .player-container {
-  border-radius: 8px !important;
-  background: #000 !important;
-  border: 1px solid var(--sr-line) !important;
-  box-shadow: var(--sr-shadow) !important;
-}
-
-body.page-vod .chat-header,
-body.page-live .chat-header {
-  background: rgba(255,255,255,0.035) !important;
-  border-bottom: 1px solid var(--sr-line) !important;
-}
-
 body.page-vod .chat-line,
 body.page-live .chat-line {
-  border-radius: 6px;
+  border-radius: var(--nebula-radius-xs);
 }
-
 body.page-vod .chat-line:hover,
 body.page-live .chat-line:hover {
   background: rgba(255,255,255,0.045);
 }
-
 body.page-admin table,
 body.page-search table {
-  border-collapse: separate !important;
-  border-spacing: 0 !important;
   overflow: hidden;
 }
-
-body.page-admin th,
-body.page-search th {
-  color: var(--sr-muted) !important;
-  background: rgba(255,255,255,0.035);
-  letter-spacing: 0 !important;
-}
-
-body.page-admin td,
-body.page-admin th,
-body.page-search td,
-body.page-search th {
-  border-bottom: 1px solid var(--sr-line) !important;
-}
-
-body.page-files .upload-dropzone {
-  border-radius: 8px !important;
-  border-color: var(--sr-line) !important;
-  background: rgba(255,255,255,0.035) !important;
-}
-
-body.page-files .upload-dropzone:hover {
-  border-color: rgba(73, 199, 192, 0.5) !important;
-  background: rgba(73, 199, 192, 0.06) !important;
-}
-
 body.page-mobile-index,
 body.page-mobile-streamer {
   background: #080a0a !important;
   color: var(--sr-text) !important;
   font-family: 'Sora', sans-serif !important;
 }
-
 body.page-mobile-index .header,
 body.page-mobile-streamer .header,
 body.page-mobile-streamer .controls,
@@ -3356,21 +3294,18 @@ body.page-mobile-index .nav {
   background: rgba(12, 15, 15, 0.96) !important;
   border-color: var(--sr-line) !important;
 }
-
 body.page-mobile-index .card,
 body.page-mobile-streamer .video-card,
 body.page-mobile-streamer .tab {
   background: var(--sr-surface) !important;
   border-color: var(--sr-line) !important;
-  border-radius: 8px !important;
+  border-radius: var(--nebula-radius-sm) !important;
 }
-
 body.page-mobile-streamer .tab.active,
 body.page-mobile-streamer .btn-primary,
 body.page-mobile-index .nav a.active {
   color: var(--sr-warm-2) !important;
 }
-
 @media (max-width: 900px) {
   body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) {
     flex-direction: column !important;
@@ -3390,68 +3325,22 @@ body.page-mobile-index .nav a.active {
     overflow-x: auto;
     padding-bottom: 4px;
   }
-  body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .nav-item {
-    white-space: nowrap;
-    min-height: 38px !important;
-  }
   body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .main {
     padding: 18px !important;
   }
-  body.page-index .stats-grid {
-    grid-template-columns: 1fr !important;
-  }
 }
-
-/* STREAMVAULT TWITCH CONTROL - 2026-06 */
-:root {
-  --ns-bg: #08070d;
-  --ns-bg-2: #0e0b17;
-  --ns-panel: #14101f;
-  --ns-panel-2: #191329;
-  --ns-panel-3: #211837;
-  --ns-line: rgba(255, 255, 255, 0.105);
-  --ns-line-strong: rgba(255, 255, 255, 0.18);
-  --ns-text: #f7f4ff;
-  --ns-text-2: #c9c2dc;
-  --ns-muted: #8d84a4;
-  --ns-purple: #9147ff;
-  --ns-purple-2: #b46cff;
-  --ns-fire: #ff6a2a;
-  --ns-fire-2: #ffb04f;
-  --ns-cyan: #26d9d0;
-  --ns-green: #3ee58d;
-  --ns-red: #ff4f69;
-  --ns-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
-  --primary: var(--ns-purple);
-  --primary-hover: #772ce8;
-  --accent: var(--ns-cyan);
-  --danger: var(--ns-red);
-  --success: var(--ns-green);
-  --text: var(--ns-text);
-  --text-main: var(--ns-text);
-  --text-muted: var(--ns-muted);
-  --muted: var(--ns-muted);
-  --border: var(--ns-line);
-  --card: var(--ns-panel);
-  --glass: var(--ns-panel);
-  --radius: 8px;
-}
-
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live,.page-hls,.page-clip-editor) {
   font-family: Inter, "Sora", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
   color: var(--ns-text) !important;
-  background:
-    radial-gradient(circle at 18% 0%, rgba(145, 71, 255, 0.18), transparent 28%),
+  background: radial-gradient(circle at 18% 0%, rgba(145, 71, 255, 0.18), transparent 28%),
     radial-gradient(circle at 90% 12%, rgba(38, 217, 208, 0.08), transparent 24%),
     linear-gradient(180deg, #090711 0%, #0d0a15 42%, #08070d 100%) !important;
   letter-spacing: 0 !important;
 }
-
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) {
   min-height: 100vh;
   display: flex;
 }
-
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .sidebar {
   width: 252px !important;
   padding: 18px 14px !important;
@@ -3460,7 +3349,6 @@ body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-
   box-shadow: 10px 0 34px rgba(0, 0, 0, 0.24) !important;
   backdrop-filter: none !important;
 }
-
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .brand {
   margin: 0 0 22px !important;
   min-height: 52px;
@@ -3472,65 +3360,34 @@ body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-
   font-weight: 900 !important;
   letter-spacing: 0 !important;
 }
-
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .brand::before {
   content: "StreamVault";
   display: block;
-  font-size: 22px;
+  font-size: var(--sv-text-xl);
   line-height: 1;
   letter-spacing: 0;
   color: #fff;
 }
-
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .brand::after {
   content: "Stream Vault";
   display: block;
   margin-top: 6px;
   color: var(--ns-muted);
-  font-size: 11px;
+  font-size: var(--sv-min-text);
   font-weight: 700;
   text-transform: uppercase;
 }
-
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) nav {
   display: flex !important;
   flex-direction: column !important;
   gap: 4px !important;
   min-height: calc(100vh - 110px);
 }
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .nav-item {
-  min-height: 42px !important;
-  padding: 10px 12px !important;
-  border-radius: 6px !important;
-  color: var(--ns-text-2) !important;
-  background: transparent !important;
-  border: 1px solid transparent !important;
-  font-size: 14px !important;
-  font-weight: 700 !important;
-  text-decoration: none !important;
-  transform: none !important;
-}
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .nav-item:hover {
-  color: #fff !important;
-  background: rgba(255,255,255,0.07) !important;
-  transform: none !important;
-}
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .nav-item.active {
-  color: #fff !important;
-  background: linear-gradient(90deg, rgba(145, 71, 255, 0.32), rgba(145, 71, 255, 0.10)) !important;
-  border-color: rgba(145, 71, 255, 0.34) !important;
-  box-shadow: inset 3px 0 0 var(--ns-purple) !important;
-}
-
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .main {
   flex: 1 !important;
   padding: 26px 30px 44px !important;
   overflow-y: auto !important;
 }
-
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .header {
   min-height: 70px;
   margin: 0 0 22px !important;
@@ -3539,285 +3396,106 @@ body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-
   justify-content: space-between !important;
   gap: 18px !important;
 }
-
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .page-title {
   margin: 0 !important;
   font-family: Inter, "Sora", sans-serif !important;
   font-size: clamp(28px, 3vw, 44px) !important;
   line-height: 1.02 !important;
   font-weight: 950 !important;
-  letter-spacing: 0 !important;
-  color: #fff !important;
-}
-
-body.page-index .page-title::after {
-  content: "StreamVault Control";
-}
-
-body.page-index .page-title {
-  font-size: 0 !important;
-}
-
-body.page-index .page-title::after {
-  font-size: clamp(30px, 3.6vw, 48px);
-}
-
-body.page-index .page-subtitle {
-  margin-top: 9px;
-  max-width: 720px;
-  color: var(--ns-text-2) !important;
-  font-size: 14px !important;
-}
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .panel,
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .stat-card,
-body:is(.page-index,.page-streamer) .card,
-body.page-streamer .video-card,
-body.page-files .file-card,
-body.page-files .upload-dropzone {
-  border-radius: 8px !important;
-  border: 1px solid var(--ns-line) !important;
-  background:
-    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015)),
-    var(--ns-panel) !important;
-  box-shadow: 0 1px 0 rgba(255,255,255,0.035), var(--ns-shadow) !important;
-  backdrop-filter: none !important;
-}
-
-body:is(.page-index,.page-streamer) .card:hover,
-body.page-streamer .video-card:hover,
-body.page-files .file-card:hover,
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .stat-card:hover {
-  border-color: rgba(145, 71, 255, 0.42) !important;
-  transform: translateY(-2px) !important;
-}
-
-body.page-index .stats-grid {
-  display: grid !important;
-  grid-template-columns: minmax(260px, 1.15fr) minmax(260px, 1fr) minmax(220px, .75fr) !important;
-  gap: 14px !important;
-  margin-bottom: 28px !important;
-}
-
-body.page-index .stat-card {
-  min-height: 156px !important;
-  padding: 18px !important;
-  overflow: hidden;
-  position: relative;
-}
-
-body.page-index .stat-card::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  background: radial-gradient(circle at 85% 18%, rgba(145, 71, 255, 0.18), transparent 34%);
-}
-
-body.page-index .stat-label,
-body:is(.page-index,.page-streamer) .stat-box-label {
-  color: var(--ns-muted) !important;
-  font-size: 11px !important;
-  font-weight: 900 !important;
-  text-transform: uppercase !important;
-}
-
-body.page-index .stat-value,
-body:is(.page-index,.page-streamer) .stat-box-val {
-  color: #fff !important;
-  font-weight: 900 !important;
-}
-
-body.page-index .res-row {
-  display: grid !important;
-  grid-template-columns: 42px 1fr 48px !important;
-  gap: 10px !important;
-  align-items: center !important;
+  letter-spacing: 0 !important;
+  color: #fff !important;
 }
-
-body.page-index .res-bar,
-body.page-index .progress-track {
-  height: 7px !important;
-  border-radius: 999px !important;
-  background: rgba(255,255,255,0.08) !important;
-  overflow: hidden;
+body.page-index .page-title::after {
+  content: "StreamVault Control";
 }
-
-body.page-index .res-fill,
-body.page-index .progress-fill {
-  background: linear-gradient(90deg, var(--ns-purple), var(--ns-cyan)) !important;
+body.page-index .page-title::after {
+  font-size: clamp(30px, 3.6vw, 48px);
 }
-
-body.page-index .grid-title {
-  margin: 28px 0 14px !important;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  color: #fff !important;
-  font-size: 20px !important;
-  font-weight: 950 !important;
+body.page-index .page-subtitle {
+  margin-top: 9px;
+  max-width: 720px;
 }
-
-body.page-index .grid-title::after {
-  content: "Channels";
-  padding: 4px 8px;
-  border: 1px solid var(--ns-line);
-  border-radius: 999px;
-  color: var(--ns-muted);
-  font-size: 11px;
-  font-weight: 800;
+body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .panel,
+body:is(.page-index,.page-streamer) .card,
+body.page-streamer .video-card {
+  border-radius: var(--nebula-radius-sm) !important;
+  border: 1px solid var(--ns-line) !important;
+  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015)),
+    var(--ns-panel) !important;
+  box-shadow: 0 1px 0 rgba(255,255,255,0.035), var(--ns-shadow) !important;
+  backdrop-filter: none !important;
 }
-
-body.page-index .streamer-grid {
-  display: grid !important;
-  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)) !important;
-  gap: 14px !important;
+body:is(.page-index,.page-streamer) .card:hover,
+body.page-streamer .video-card:hover {
+  border-color: rgba(145, 71, 255, 0.42) !important;
+  transform: translateY(-2px) !important;
 }
-
 body.page-index .card {
   padding: 16px !important;
   min-height: 210px !important;
 }
-
-body.page-index .card-header {
-  display: flex !important;
-  align-items: center !important;
-  gap: 12px !important;
-}
-
 body.page-index .avatar {
-  width: 58px !important;
-  height: 58px !important;
-  border-radius: 50% !important;
-  border: 2px solid rgba(255,255,255,0.12) !important;
-  background: linear-gradient(135deg, var(--ns-purple), #2b1b49) !important;
-  color: #fff !important;
   overflow: hidden;
 }
-
 body.page-index .avatar.recording,
 body.page-index .avatar.online {
   border-color: var(--ns-purple) !important;
   box-shadow: 0 0 0 4px rgba(145, 71, 255, 0.14), 0 0 28px rgba(145, 71, 255, 0.24) !important;
 }
-
-body.page-index .streamer-name {
-  color: #fff !important;
-  font-size: 18px !important;
-  font-weight: 900 !important;
-  letter-spacing: 0 !important;
-}
-
-body.page-index .card-stats {
-  margin-top: 16px !important;
-  display: grid !important;
-  grid-template-columns: 1fr 1.35fr !important;
-  gap: 8px !important;
-}
-
-body.page-index .stat-box {
-  border-radius: 7px !important;
-  border: 1px solid var(--ns-line) !important;
-  background: rgba(0,0,0,0.18) !important;
-  padding: 10px !important;
-}
-
-body.page-index .card-actions,
-body.page-streamer .card-actions {
-  display: flex !important;
-  gap: 8px !important;
-  margin-top: 16px !important;
-}
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) button,
+body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) button:where(:not(.sv-btn)),
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .btn,
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .btn-action,
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .action-btn,
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .btn-primary {
   min-height: 36px !important;
   padding: 8px 12px !important;
-  border-radius: 6px !important;
+  border-radius: var(--nebula-radius-xs) !important;
   border: 1px solid var(--ns-line) !important;
   background: rgba(255,255,255,0.075) !important;
   color: var(--ns-text) !important;
-  font-size: 13px !important;
+  font-size: var(--sv-text-sm) !important;
   font-weight: 850 !important;
   text-decoration: none !important;
   box-shadow: none !important;
 }
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) button:hover,
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .btn:hover,
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .btn-action:hover,
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .action-btn:hover {
+body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) button:where(:not(.sv-btn)):hover,
+body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .btn:hover {
   border-color: rgba(145,71,255,0.55) !important;
   background: rgba(145,71,255,0.18) !important;
 }
-
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .btn-primary,
-body:is(.page-index,.page-streamer) .action-btn.primary,
 body.page-files .btn-primary {
   background: var(--ns-purple) !important;
   border-color: rgba(180,108,255,0.45) !important;
   color: #fff !important;
 }
-
-body.page-index .status-badge,
-body.page-streamer .status-badge,
 body.page-index .badge,
-body.page-streamer .badge,
-body.page-files .file-size {
-  border-radius: 999px !important;
+body.page-streamer .badge {
+  border-radius: var(--nebula-radius-full) !important;
   border: 1px solid var(--ns-line) !important;
   background: rgba(255,255,255,0.06) !important;
   color: var(--ns-text-2) !important;
   padding: 4px 8px !important;
-  font-size: 11px !important;
+  font-size: var(--sv-min-text) !important;
   font-weight: 900 !important;
 }
-
-body.page-index .status-badge.live,
-body.page-streamer .status-badge.live {
-  background: rgba(255,79,105,0.16) !important;
-  border-color: rgba(255,79,105,0.34) !important;
-  color: #ffb2bf !important;
-}
-
-body.page-index .status-badge.online,
-body.page-streamer .status-badge.online {
-  background: rgba(62,229,141,0.13) !important;
-  border-color: rgba(62,229,141,0.28) !important;
-  color: #a8f7c9 !important;
-}
-
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) input,
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) select,
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) textarea,
-body.page-files .input-field {
+body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) textarea {
   min-height: 38px !important;
-  border-radius: 6px !important;
+  border-radius: var(--nebula-radius-xs) !important;
   border: 1px solid var(--ns-line) !important;
   background: #0b0812 !important;
   color: #fff !important;
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.025) !important;
 }
-
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) input:focus,
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) select:focus,
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) textarea:focus {
   border-color: var(--ns-purple) !important;
   box-shadow: 0 0 0 3px rgba(145, 71, 255, 0.18) !important;
 }
-
 body.page-streamer .header {
   align-items: center !important;
 }
-
-body.page-streamer .panel {
-  margin-bottom: 14px !important;
-  padding: 14px !important;
-}
-
 body.page-streamer .tabs,
 body.page-admin .tabs,
 body.page-discord-tool .tabs {
@@ -3825,91 +3503,30 @@ body.page-discord-tool .tabs {
   gap: 2px !important;
   padding: 4px !important;
   border: 1px solid var(--ns-line) !important;
-  border-radius: 8px !important;
+  border-radius: var(--nebula-radius-sm) !important;
   background: rgba(0,0,0,0.18) !important;
   width: auto !important;
 }
-
 body.page-streamer .tab,
 body.page-admin .tab,
 body.page-discord-tool .tab {
-  border-radius: 6px !important;
+  border-radius: var(--nebula-radius-xs) !important;
   padding: 9px 13px !important;
   color: var(--ns-muted) !important;
   border: 0 !important;
   margin: 0 !important;
   font-weight: 900 !important;
 }
-
 body.page-streamer .tab.active,
 body.page-admin .tab.active,
 body.page-discord-tool .tab.active {
   background: var(--ns-purple) !important;
   color: #fff !important;
 }
-
-body.page-streamer .video-grid {
-  display: grid !important;
-  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important;
-  gap: 14px !important;
-}
-
-body.page-streamer .video-card {
-  overflow: hidden !important;
-}
-
-body.page-streamer .thumb-wrap {
-  display: block;
-  aspect-ratio: 16 / 9;
-  background: #020104 !important;
-  border-bottom: 1px solid var(--ns-line) !important;
-  position: relative;
-}
-
-body.page-streamer .thumb-img {
-  width: 100% !important;
-  height: 100% !important;
-  object-fit: cover !important;
-  filter: saturate(1.08) contrast(1.06) !important;
-}
-
-body.page-streamer .duration-badge {
-  position: absolute;
-  right: 8px;
-  bottom: 8px;
-  padding: 4px 6px;
-  border-radius: 4px !important;
-  background: rgba(0,0,0,0.82) !important;
-  color: #fff !important;
-  font-size: 12px !important;
-  font-weight: 900 !important;
-}
-
-body.page-streamer .card-body {
-  padding: 12px !important;
-}
-
-body.page-streamer .video-title {
-  display: -webkit-box !important;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  min-height: 40px;
-  color: #fff !important;
-  font-weight: 850 !important;
-  text-decoration: none !important;
-}
-
-body.page-streamer .video-meta {
-  margin-top: 8px !important;
-  color: var(--ns-muted) !important;
-}
-
 body.page-vod,
 body.page-live {
   display: flex !important;
 }
-
 body.page-vod .sidebar,
 body.page-live .sidebar {
   width: 230px !important;
@@ -3917,7 +3534,6 @@ body.page-live .sidebar {
   background: #0d0a16 !important;
   border-right: 1px solid var(--ns-line) !important;
 }
-
 body.page-vod .brand,
 body.page-live .brand {
   margin: 0 0 18px !important;
@@ -3925,42 +3541,20 @@ body.page-live .brand {
   border-bottom: 1px solid var(--ns-line);
   color: #fff !important;
   font-family: Inter, "Sora", sans-serif !important;
-  font-size: 22px !important;
+  font-size: var(--sv-text-xl) !important;
   font-weight: 950 !important;
 }
-
 body.page-vod nav,
 body.page-live nav {
   display: flex !important;
   flex-direction: column !important;
   gap: 4px !important;
 }
-
-body.page-vod .nav-item,
-body.page-live .nav-item {
-  min-height: 42px !important;
-  padding: 10px 12px !important;
-  border-radius: 6px !important;
-  color: var(--ns-text-2) !important;
-  background: transparent !important;
-  border: 1px solid transparent !important;
-  font-size: 14px !important;
-  font-weight: 750 !important;
-  text-decoration: none !important;
-}
-
-body.page-vod .nav-item:hover,
-body.page-live .nav-item:hover {
-  color: #fff !important;
-  background: rgba(255,255,255,0.07) !important;
-}
-
 body.page-vod .main,
 body.page-live .main {
   flex: 1 !important;
   padding: 18px !important;
 }
-
 body.page-vod header,
 body.page-live header,
 body.page-hls header,
@@ -3969,555 +3563,161 @@ body.page-clip-editor header {
   background: rgba(13, 10, 22, 0.98) !important;
   border-bottom: 1px solid var(--ns-line) !important;
 }
-
 body.page-vod .page-title,
 body.page-live .page-title {
   color: #fff !important;
-  font-size: 18px !important;
+  font-size: var(--sv-text-lg) !important;
   font-weight: 900 !important;
 }
-
 body.page-vod .player-wrapper,
 body.page-live .player-wrapper,
 body.page-hls video,
 body.page-clip-editor .player-container {
-  border-radius: 8px !important;
+  border-radius: var(--nebula-radius-sm) !important;
   overflow: hidden !important;
   background: #000 !important;
   border: 1px solid var(--ns-line) !important;
   box-shadow: var(--ns-shadow) !important;
 }
-
 body.page-vod .controls-panel,
 body.page-vod .chat-panel,
 body.page-live .chat-panel,
 body.page-live .controls-panel {
-  border-radius: 8px !important;
+  border-radius: var(--nebula-radius-sm) !important;
   border: 1px solid var(--ns-line) !important;
   background: var(--ns-panel) !important;
 }
-
 body.page-vod .main {
   gap: 16px !important;
 }
-
-body.page-vod .vod-hero {
-  position: relative;
-  align-items: center !important;
-  gap: 24px !important;
-  margin: 0 18px 16px;
-  padding: 16px 18px !important;
-  overflow: hidden;
-  border: 1px solid var(--ns-line) !important;
-  border-radius: 10px;
-  background:
-    linear-gradient(110deg, rgba(124, 92, 255, 0.12), transparent 38%),
-    rgba(16, 19, 24, 0.86) !important;
-}
-
-body.page-vod .vod-hero::after {
-  content: "";
-  position: absolute;
-  inset: auto -80px -110px auto;
-  width: 220px;
-  height: 220px;
-  pointer-events: none;
-  border-radius: 50%;
-  background: rgba(34, 211, 238, 0.06);
-  filter: blur(4px);
-}
-
-body.page-vod .vod-header-main {
-  flex: 1 1 auto;
-  min-width: 0;
-  display: grid;
-  gap: 11px;
-}
-
-body.page-vod .vod-heading {
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-body.page-vod .vod-heading-icon {
-  position: relative;
-  width: 40px;
-  height: 40px;
-  flex: 0 0 40px;
-  border: 1px solid rgba(124, 92, 255, 0.32);
-  border-radius: 10px;
-  background: linear-gradient(145deg, rgba(124, 92, 255, 0.28), rgba(34, 211, 238, 0.12));
-}
-
-body.page-vod .vod-heading-icon::after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 53%;
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-bottom: 6px solid transparent;
-  border-left: 9px solid #fff;
-  transform: translate(-50%, -50%);
-}
-
-body.page-vod .vod-title-block {
-  min-width: 0;
-  display: grid;
-  gap: 2px;
-}
-
-body.page-vod .vod-back-link {
-  width: fit-content;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--ns-soft);
-  font-size: 12px;
-  font-weight: 800;
-  text-decoration: none;
-}
-
-body.page-vod .vod-back-link:hover {
-  color: #fff;
-}
-
-body.page-vod .vod-kicker {
-  color: var(--ns-accent-2);
-  font-size: 10px;
-  font-weight: 850;
-  text-transform: uppercase;
-}
-
 body.page-vod .page-title {
   max-width: min(760px, 62vw);
   overflow-wrap: anywhere;
   line-height: 1.1 !important;
-  font-size: 24px !important;
-}
-
-body.page-vod .vod-filename {
-  max-width: min(760px, 62vw);
-  overflow: hidden;
-  color: var(--ns-muted);
-  font-size: 11px;
-  line-height: 1.3;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-body.page-vod .vod-meta-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  color: var(--ns-muted);
-}
-
-body.page-vod .vod-meta-row span {
-  min-height: 30px;
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  border: 1px solid var(--ns-line);
-  border-radius: 8px;
-  background: rgba(255,255,255,0.04);
-  padding: 5px 9px;
-  font-variant-numeric: tabular-nums;
-}
-
-body.page-vod .vod-meta-row small {
-  color: var(--ns-muted);
-  font-size: 10px;
-}
-
-body.page-vod .vod-meta-row strong {
-  color: var(--ns-soft);
-  font-size: 11px;
-  font-weight: 750;
-}
-
-body.page-vod .vod-header-actions,
-body.page-vod .vod-actions {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-body.page-vod .vod-icon-btn,
-body.page-vod .vod-link-btn,
-body.page-vod .vod-actions .btn,
-body.page-vod .vod-actions button {
-  min-height: 34px !important;
-  padding: 7px 12px !important;
-  border-radius: 8px !important;
-  border: 1px solid var(--ns-line) !important;
-  background: rgba(255,255,255,0.06) !important;
-  color: var(--ns-text) !important;
-  font-size: 12px !important;
-  font-weight: 800 !important;
-  text-decoration: none !important;
-  box-shadow: none !important;
-}
-
-body.page-vod .vod-header-actions {
-  position: relative;
-  z-index: 1;
-  flex: 0 0 auto;
-}
-
-body.page-vod .vod-header-actions .vod-icon-btn,
-body.page-vod .vod-header-actions .vod-link-btn {
-  min-height: 38px !important;
-  padding-inline: 14px !important;
-}
-
-body.page-vod .vod-icon-btn:hover,
-body.page-vod .vod-link-btn:hover,
-body.page-vod .vod-actions .btn:hover,
-body.page-vod .vod-actions button:hover {
-  border-color: var(--ns-line-strong) !important;
-  background: rgba(255,255,255,0.1) !important;
-  transform: translateY(-1px) !important;
+  font-size: var(--sv-text-2xl) !important;
 }
-
-body.page-vod .vod-actions .vod-primary-action {
-  background: linear-gradient(135deg, var(--ns-warm), var(--ns-warm-2)) !important;
-  border-color: rgba(255, 207, 151, 0.36) !important;
-  color: #14100a !important;
-}
-
-body.page-vod .vod-actions .vod-success-action {
-  background: rgba(91, 211, 154, 0.14) !important;
-  border-color: rgba(91, 211, 154, 0.28) !important;
-  color: #a9f3ce !important;
-}
-
 body.page-vod .content {
   grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important;
-  gap: 16px !important;
   padding: 0 18px 18px !important;
 }
-
 body.page-vod .content.solo {
   grid-template-columns: minmax(0, 1fr) !important;
 }
-
 body.page-vod .main-col {
   gap: 12px !important;
 }
-
 body.page-vod .player-wrapper {
   flex: 0 0 auto !important;
-  aspect-ratio: 16 / 9;
-  min-height: 420px !important;
-  max-height: calc(100vh - 255px);
-}
-
-body.page-vod .vod-tools-panel {
-  padding: 14px !important;
-}
-
-body.page-vod .vod-tools-head,
-body.page-vod .transcript-status-head {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 14px;
-}
-
-body.page-vod .vod-panel-title {
-  font-size: 13px;
-  font-weight: 900;
-  color: var(--ns-text);
 }
-
-body.page-vod .vod-panel-subtitle,
 body.page-vod .transcript-status-message {
   margin-top: 4px;
   color: var(--ns-muted);
-  font-size: 12px;
+  font-size: var(--sv-text-xs);
   line-height: 1.35;
 }
-
 body.page-vod .transcript-status-card {
   padding: 14px !important;
   background: rgba(73, 199, 192, 0.08) !important;
   border-color: rgba(73, 199, 192, 0.26) !important;
 }
-
 body.page-vod .transcript-percent {
   flex: 0 0 auto;
   min-width: 54px;
   text-align: right;
   color: var(--ns-text);
-  font-size: 12px;
+  font-size: var(--sv-text-xs);
   font-weight: 900;
 }
-
 body.page-vod .transcript-progress {
   margin-top: 10px;
   height: 8px;
   overflow: hidden;
-  border-radius: 999px;
+  border-radius: var(--nebula-radius-full);
   background: rgba(255,255,255,0.08);
 }
-
 body.page-vod .transcript-progress > div {
   height: 100%;
   border-radius: inherit;
   background: linear-gradient(90deg, var(--ns-accent), var(--ns-warm));
 }
-
 body.page-vod .transcript-error {
   margin-top: 8px;
   color: #fda4af;
-  font-size: 12px;
-}
-
-body.page-vod .transcript-details {
-  padding: 0 !important;
-  overflow: hidden;
-}
-
-body.page-vod .transcript-details summary {
-  min-height: 50px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 14px;
-  padding: 14px;
-  cursor: pointer;
-  list-style: none;
-}
-
-body.page-vod .transcript-details summary::-webkit-details-marker {
-  display: none;
-}
-
-body.page-vod .transcript-details summary strong {
-  display: block;
-  color: var(--ns-text);
-  font-size: 13px;
-}
-
-body.page-vod .transcript-details summary small {
-  display: block;
-  margin-top: 3px;
-  color: var(--ns-muted);
-  font-size: 12px;
-}
-
-body.page-vod .transcript-chevron {
-  flex: 0 0 auto;
-  color: var(--ns-muted);
-  font-size: 12px;
-  font-weight: 800;
-}
-
-body.page-vod .transcript-details[open] .transcript-chevron {
-  color: var(--ns-text);
-}
-
-body.page-vod .transcript-details[open] summary {
-  border-bottom: 1px solid var(--ns-line);
-}
-
-body.page-vod .transcript-details pre {
-  max-height: 300px;
-  margin: 0;
-  overflow: auto;
-  padding: 14px;
-  color: var(--ns-text);
-  font-size: 13px;
-  line-height: 1.6;
-  white-space: pre-wrap;
-  word-break: break-word;
-  background: rgba(0,0,0,0.18);
-}
-
-body.page-vod .transcript-empty {
-  padding: 14px;
-  color: var(--ns-muted);
-  font-size: 13px;
-}
-
-body.page-vod .chat-panel {
-  min-height: 0;
-}
-
-body.page-vod .chat-list {
-  padding: 12px !important;
-  font-size: 13px;
-  line-height: 1.35;
+  font-size: var(--sv-text-xs);
 }
-
 body.page-vod .chat-line {
   grid-template-columns: 40px minmax(0, 1fr) !important;
-  padding: 3px 4px;
-}
-
-body.page-vod .chat-time {
-  font-variant-numeric: tabular-nums;
 }
-
 @media (max-width: 1180px) {
   body.page-vod .content {
     grid-template-columns: 1fr !important;
   }
-
-  body.page-vod .chat-panel {
-    height: 360px !important;
-  }
 }
-
 @media (max-width: 760px) {
-  body.page-vod .vod-hero,
-  body.page-vod .vod-tools-head,
-  body.page-vod .transcript-status-head {
-    align-items: stretch !important;
-    flex-direction: column;
-  }
-
   body.page-vod .page-title {
     max-width: 100%;
-    font-size: 20px !important;
-  }
-
-  body.page-vod .vod-hero {
-    margin: 0 0 14px;
-    padding: 14px !important;
-  }
-
-  body.page-vod .vod-filename {
-    max-width: calc(100vw - 110px);
-  }
-
-  body.page-vod .vod-header-actions,
-  body.page-vod .vod-actions {
-    justify-content: flex-start;
+    font-size: var(--sv-text-xl) !important;
   }
-
-  body.page-vod .vod-header-actions {
-    width: 100%;
-  }
-
   body.page-vod .player-wrapper {
     min-height: 0 !important;
     max-height: none;
   }
 }
-
 body.page-vod .chat-header,
 body.page-live .chat-header {
   background: rgba(255,255,255,0.04) !important;
   border-bottom: 1px solid var(--ns-line) !important;
 }
-
 body.page-admin table,
 body.page-search table {
   border-collapse: separate !important;
   border-spacing: 0 !important;
 }
-
 body.page-admin th,
 body.page-search th {
   background: rgba(255,255,255,0.045) !important;
   color: var(--ns-muted) !important;
   letter-spacing: 0 !important;
 }
-
 body.page-admin td,
 body.page-admin th,
 body.page-search td,
 body.page-search th {
   border-bottom: 1px solid var(--ns-line) !important;
 }
-
-body.page-login {
-  background:
-    radial-gradient(circle at 50% 58%, rgba(145, 71, 255, 0.16), transparent 22%),
-    radial-gradient(circle at 50% 72%, rgba(255, 106, 42, 0.24), transparent 20%),
-    linear-gradient(180deg, #05030a 0%, #120815 48%, #050306 100%) !important;
-}
-
 body.page-login .login-shell {
-  display: grid !important;
   grid-template-columns: minmax(280px, 1fr) minmax(320px, 420px) !important;
-  align-items: center !important;
   justify-items: center !important;
-  max-width: 1180px;
-  margin: 0 auto;
-  padding: 40px 24px !important;
 }
-
 body.page-login .login-copy {
   justify-self: start !important;
   text-align: left !important;
-  max-width: 520px !important;
   padding-top: 0 !important;
 }
-
 body.page-login h1 {
   font-family: Inter, "Sora", sans-serif !important;
   font-weight: 950 !important;
-  letter-spacing: 0 !important;
-  color: #fff !important;
 }
-
 body.page-login h1::after {
   content: "StreamVault";
 }
-
 body.page-login h1 {
   font-size: 0 !important;
 }
-
 body.page-login h1::after {
   font-size: clamp(48px, 7vw, 84px);
   line-height: .94;
 }
-
 body.page-login .eyebrow {
   border-color: rgba(145, 71, 255, 0.42) !important;
-  background: rgba(145, 71, 255, 0.14) !important;
-  color: #d8c2ff !important;
-}
-
-body.page-login .subtitle {
-  color: #d9d2e8 !important;
-  font-size: 16px !important;
 }
-
 body.page-login .login-panel {
   justify-self: end !important;
-  border-radius: 8px !important;
-  border: 1px solid rgba(145, 71, 255, 0.28) !important;
-  background: rgba(18, 13, 30, 0.92) !important;
-  box-shadow: 0 24px 80px rgba(0,0,0,0.62), 0 0 0 1px rgba(255,255,255,0.035) inset !important;
-}
-
-body.page-login input {
-  border-radius: 6px !important;
-  background: #0b0812 !important;
 }
-
-body.page-login button {
-  border-radius: 6px !important;
-  background: linear-gradient(135deg, var(--ns-purple), var(--ns-purple-2)) !important;
-  color: #fff !important;
-  box-shadow: 0 18px 34px rgba(145, 71, 255, 0.26) !important;
-}
-
 body.page-login .portal-frame {
   left: 48% !important;
   opacity: .9;
 }
-
 @media (max-width: 980px) {
   body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) {
     flex-direction: column !important;
@@ -4537,9 +3737,6 @@ body.page-login .portal-frame {
   body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .main {
     padding: 18px !important;
   }
-  body.page-index .stats-grid {
-    grid-template-columns: 1fr !important;
-  }
   body.page-login .login-shell {
     grid-template-columns: 1fr !important;
     align-content: center !important;
@@ -4551,717 +3748,189 @@ body.page-login .portal-frame {
     text-align: center !important;
   }
 }
-
-
-/* STREAMVAULT STUDIO CONSOLE */
-:root {
-  --ns-bg: #0b0d10;
-  --ns-rail: #101318;
-  --ns-panel: #151922;
-  --ns-panel-2: #1b202b;
-  --ns-panel-3: #222936;
-  --ns-line: rgba(255,255,255,.10);
-  --ns-line-strong: rgba(255,255,255,.16);
-  --ns-text: #f3f6fb;
-  --ns-muted: #9aa5b5;
-  --ns-soft: #cbd5e1;
-  --ns-accent: #7c5cff;
-  --ns-accent-2: #22d3ee;
-  --ns-live: #ff3b5f;
-  --ns-good: #22c55e;
-  --ns-warn: #f59e0b;
-  --ns-radius: 10px;
-}
-
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) {
   margin: 0 !important;
   min-height: 100vh;
   display: flex;
   color: var(--ns-text) !important;
-  background:
-    linear-gradient(180deg, rgba(124,92,255,.08), transparent 260px),
+  background: linear-gradient(180deg, rgba(124,92,255,.08), transparent 260px),
     radial-gradient(circle at 84% 8%, rgba(34,211,238,.08), transparent 280px),
     var(--ns-bg) !important;
   font-family: Inter, Sora, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
 }
-
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) * {
   box-sizing: border-box;
   letter-spacing: 0 !important;
 }
-
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live)::before,
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live)::after {
   display: none !important;
 }
-
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) a {
   color: inherit;
   text-decoration: none;
 }
-
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .sidebar {
   position: sticky !important;
-  top: 0;
-  width: 260px !important;
-  height: 100vh;
-  flex-shrink: 0;
-  padding: 18px 14px !important;
-  display: flex !important;
-  flex-direction: column !important;
-  background: rgba(16,19,24,.94) !important;
-  border-right: 1px solid var(--ns-line) !important;
-  backdrop-filter: none;
-  box-shadow: none !important;
-}
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .brand {
-  min-height: 52px;
-  margin: 0 0 18px !important;
-  padding: 0 12px !important;
-  display: flex !important;
-  align-items: center !important;
-  gap: 11px !important;
-  color: var(--ns-text) !important;
-  font-family: Inter, Sora, system-ui, sans-serif !important;
-  font-size: 19px !important;
-  font-weight: 800 !important;
-}
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .brand::before {
-  content: "";
-  width: 30px;
-  height: 30px;
-  flex: 0 0 30px;
-  border-radius: 8px;
-  background:
-    linear-gradient(135deg, var(--ns-accent), var(--ns-accent-2));
-  box-shadow: 0 10px 22px rgba(124,92,255,.26);
-}
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) nav {
-  min-height: 0 !important;
-  display: flex !important;
-  flex: 1;
-  flex-direction: column !important;
-  gap: 4px !important;
-  overflow: visible !important;
-}
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .nav-item {
-  min-height: 42px !important;
-  margin: 0 !important;
-  padding: 0 12px !important;
-  display: flex !important;
-  align-items: center !important;
-  gap: 12px !important;
-  border: 1px solid transparent !important;
-  border-radius: var(--ns-radius) !important;
-  background: transparent !important;
-  color: var(--ns-muted) !important;
-  font-size: 14px !important;
-  font-weight: 650 !important;
-  transform: none !important;
-  box-shadow: none !important;
-}
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .nav-item:hover {
-  color: var(--ns-text) !important;
-  background: rgba(255,255,255,.06) !important;
-  transform: none !important;
-}
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .nav-item.active {
-  color: var(--ns-text) !important;
-  background: linear-gradient(135deg, rgba(124,92,255,.20), rgba(34,211,238,.10)) !important;
-  border-color: rgba(124,92,255,.34) !important;
-}
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .nav-item[style*="margin-top"] {
-  margin-top: auto !important;
-}
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .main {
-  flex: 1;
-  min-width: 0;
-  padding: 28px 36px 52px !important;
-  overflow-y: auto;
-  background: transparent !important;
-  animation: none !important;
-}
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .header {
-  min-height: 58px;
-  margin: 0 0 18px !important;
-  padding: 0 !important;
-  display: flex !important;
-  justify-content: space-between !important;
-  align-items: flex-start !important;
-  gap: 20px !important;
-  border: 0 !important;
-}
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .page-title {
-  margin: 0 !important;
-  color: var(--ns-text) !important;
-  font-family: Inter, Sora, system-ui, sans-serif !important;
-  font-size: 30px !important;
-  line-height: 1.15 !important;
-  font-weight: 800 !important;
-}
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .page-subtitle,
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .muted {
-  color: var(--ns-muted) !important;
-}
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .page-subtitle {
-  margin-top: 7px !important;
-  max-width: 720px !important;
-  font-size: 14px !important;
-  line-height: 1.5 !important;
-}
-
-.header-actions,
-.overview-actions,
-.card-actions {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  flex-wrap: wrap;
-}
-
-.studio-btn,
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .btn-action,
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .btn-restart,
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .action-btn,
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .btn-icon,
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) button {
-  min-height: 38px;
-  padding: 9px 13px !important;
-  display: inline-flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  border: 1px solid var(--ns-line) !important;
-  border-radius: var(--ns-radius) !important;
-  background: rgba(255,255,255,.055) !important;
-  color: var(--ns-text) !important;
-  font-size: 13px !important;
-  font-weight: 700 !important;
-  box-shadow: none !important;
-  transform: none !important;
-  cursor: pointer;
-}
-
-.studio-btn:hover,
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .btn-action:hover,
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .btn-restart:hover,
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .action-btn:hover,
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .btn-icon:hover,
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) button:hover {
-  background: rgba(255,255,255,.09) !important;
-  border-color: var(--ns-line-strong) !important;
-}
-
-.studio-btn.primary,
-body.page-index .action-btn.primary,
-body.page-index .live-input-group button,
-body:is(.page-channels,.page-streamer) .btn-action:not([style*="rgba"]) {
-  border-color: transparent !important;
-  background: linear-gradient(135deg, var(--ns-accent), #5b8cff) !important;
-  color: #fff !important;
-}
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) input,
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) select,
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) textarea {
-  border-radius: var(--ns-radius) !important;
-  border: 1px solid var(--ns-line) !important;
-  background: rgba(7,9,12,.85) !important;
-  color: var(--ns-text) !important;
-  box-shadow: none !important;
-}
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) input:focus,
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) select:focus,
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) textarea:focus {
-  outline: none !important;
-  border-color: rgba(34,211,238,.62) !important;
-}
-
-.studio-quickbar {
-  margin: 0 0 22px;
-  display: flex;
-  gap: 10px;
-  overflow-x: auto;
-  padding-bottom: 2px;
-}
-
-.studio-chip {
-  min-height: 34px;
-  padding: 0 13px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 auto;
-  border: 1px solid var(--ns-line);
-  border-radius: 999px;
-  background: rgba(255,255,255,.045);
-  color: var(--ns-soft);
-  font-size: 13px;
-  font-weight: 700;
-}
-
-.studio-chip.active {
-  color: #fff;
-  border-color: rgba(124,92,255,.42);
-  background: rgba(124,92,255,.18);
-}
-
-.studio-chip.danger {
-  color: #ffd6de;
-  border-color: rgba(255,59,95,.38);
-  background: rgba(255,59,95,.14);
-}
-
-.studio-overview {
-  display: grid;
-  grid-template-columns: minmax(0, 1.55fr) minmax(320px, .85fr);
-  gap: 18px;
-  margin-bottom: 18px;
-}
-
-.overview-panel,
-.signal-panel,
-body.page-index .stat-card,
-body.page-index .streamer-card,
-body:is(.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .panel,
-body.page-channels .mgmt-section,
-body.page-streamer .share-box,
-body.page-streamer .video-card,
-body.page-files .file-card,
-body.page-files .folder-card {
-  border: 1px solid var(--ns-line) !important;
-  border-radius: var(--ns-radius) !important;
-  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.032)) !important;
-  box-shadow: 0 18px 50px rgba(0,0,0,.22) !important;
-}
-
-.overview-panel {
-  min-height: 210px;
-  padding: 26px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  overflow: hidden;
-  position: relative;
-}
-
-.overview-panel::after {
-  content: "";
-  position: absolute;
-  inset: auto -80px -120px auto;
-  width: 260px;
-  height: 260px;
-  border-radius: 50%;
-  background: radial-gradient(circle, rgba(34,211,238,.16), transparent 65%);
-  pointer-events: none;
-}
-
-.overview-kicker {
-  color: var(--ns-accent-2);
-  font-size: 12px;
-  font-weight: 800;
-  text-transform: uppercase;
-}
-
-.overview-panel h2 {
-  max-width: 620px;
-  margin: 10px 0 10px;
-  color: var(--ns-text);
-  font-size: clamp(30px, 4vw, 48px);
-  line-height: 1.03;
-}
-
-.overview-panel p {
-  max-width: 670px;
-  margin: 0 0 22px;
-  color: var(--ns-muted);
-  font-size: 15px;
-  line-height: 1.6;
-}
-
-.signal-panel {
-  min-height: 210px;
-  padding: 22px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.signal-head,
-.signal-meta {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.signal-head span {
-  color: var(--ns-muted);
-  font-size: 13px;
-  font-weight: 700;
-}
-
-.signal-head strong {
-  color: var(--ns-good);
-  font-size: 12px;
-  letter-spacing: .04em !important;
-}
-
-.signal-head .signal-live {
-  color: var(--ns-live);
-}
-
-.signal-bars {
-  min-height: 82px;
-  display: grid;
-  grid-template-columns: repeat(12, 1fr);
-  align-items: end;
-  gap: 7px;
-}
-
-.signal-bars span {
-  display: block;
-  border-radius: 999px 999px 4px 4px;
-  background: linear-gradient(180deg, var(--ns-accent-2), var(--ns-accent));
-  min-height: 18px;
-  opacity: .85;
-}
-
-.signal-bars span:nth-child(1) { height: 24px; }
-.signal-bars span:nth-child(2) { height: 46px; }
-.signal-bars span:nth-child(3) { height: 32px; }
-.signal-bars span:nth-child(4) { height: 70px; }
-.signal-bars span:nth-child(5) { height: 50px; }
-.signal-bars span:nth-child(6) { height: 36px; }
-.signal-bars span:nth-child(7) { height: 78px; }
-.signal-bars span:nth-child(8) { height: 42px; }
-.signal-bars span:nth-child(9) { height: 58px; }
-.signal-bars span:nth-child(10) { height: 30px; }
-.signal-bars span:nth-child(11) { height: 64px; }
-.signal-bars span:nth-child(12) { height: 40px; }
-
-.signal-meta > div {
-  min-width: 0;
-}
-
-.signal-meta span {
-  display: block;
-  color: var(--ns-muted);
-  font-size: 11px;
-  font-weight: 700;
-}
-
-.signal-meta strong {
-  display: block;
-  margin-top: 3px;
-  color: var(--ns-text);
-  font-size: 20px;
-}
-
-body.page-index .stats-grid {
-  grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
-  gap: 14px !important;
-  margin: 0 0 26px !important;
-}
-
-body.page-index .stat-card {
-  min-height: 150px !important;
-  padding: 18px !important;
-  transition: border-color .16s ease, background .16s ease;
-}
-
-body.page-index .stat-card::before,
-body.page-index .action-btn.primary::after,
-body.page-index .channel-input-group button::after {
-  display: none !important;
-}
-
-body.page-index .stat-card:hover,
-body.page-index .streamer-card:hover,
-body.page-streamer .video-card:hover,
-body.page-files .file-card:hover,
-body.page-files .folder-card:hover {
-  border-color: var(--ns-line-strong) !important;
-  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.044)) !important;
-  transform: none !important;
-}
-
-body.page-index .stat-head {
-  margin-bottom: 13px !important;
-}
-
-body.page-index .stat-label,
-body.page-index .stat-box-label {
-  color: var(--ns-muted) !important;
-  font-size: 12px !important;
-  text-transform: none !important;
-  font-weight: 800 !important;
-}
-
-body.page-index .stat-icon {
-  width: 36px;
-  height: 36px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 9px;
-  background: rgba(255,255,255,.07);
-  color: var(--ns-soft);
-  font-size: 17px !important;
-  opacity: 1 !important;
-}
-
-body.page-index .stat-value {
-  color: var(--ns-text) !important;
-  font-size: 25px !important;
-  font-weight: 800 !important;
-}
-
-body.page-index .stat-sub {
-  color: var(--ns-muted) !important;
-}
-
-body.page-index .progress-track,
-body.page-index .res-bar {
-  height: 7px !important;
-  border-radius: 999px !important;
-  background: rgba(255,255,255,.09) !important;
-}
-
-body.page-index .res-fill,
-body.page-index .progress-fill {
-  border-radius: 999px !important;
-  background: linear-gradient(90deg, var(--ns-accent), var(--ns-accent-2)) !important;
-}
-
-body.page-index .live-input-group {
-  margin-top: auto !important;
-}
-
-body.page-index .live-input-group input {
-  min-width: 0;
+  top: 0;
+  width: 260px !important;
+  height: 100vh;
+  flex-shrink: 0;
+  padding: 18px 14px !important;
+  display: flex !important;
+  flex-direction: column !important;
+  background: rgba(16,19,24,.94) !important;
+  border-right: 1px solid var(--ns-line) !important;
+  backdrop-filter: none;
+  box-shadow: none !important;
 }
-
-body.page-index .grid-title {
-  margin: 6px 0 14px !important;
+body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .brand {
+  min-height: 52px;
+  margin: 0 0 18px !important;
+  padding: 0 12px !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 11px !important;
   color: var(--ns-text) !important;
   font-family: Inter, Sora, system-ui, sans-serif !important;
-  font-size: 20px !important;
+  font-size: var(--sv-text-lg) !important;
   font-weight: 800 !important;
 }
-
-body.page-index .live-pulse {
-  background: var(--ns-live) !important;
-  box-shadow: 0 0 0 0 rgba(255,59,95,.62) !important;
+body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .brand::before {
+  content: "";
+  width: 30px;
+  height: 30px;
+  flex: 0 0 30px;
+  border-radius: var(--nebula-radius-sm);
+  background: linear-gradient(135deg, var(--ns-accent), var(--ns-accent-2));
+  box-shadow: 0 10px 22px rgba(124,92,255,.26);
 }
-
-body.page-index .streamer-grid {
-  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
-  gap: 14px !important;
+body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) nav {
+  min-height: 0 !important;
+  display: flex !important;
+  flex: 1;
+  flex-direction: column !important;
+  gap: 4px !important;
+  overflow: visible !important;
 }
-
-body.page-index .streamer-card {
-  min-height: 218px !important;
-  padding: 16px !important;
-  display: flex;
-  flex-direction: column;
+body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .main {
+  flex: 1;
+  min-width: 0;
+  padding: 28px 36px 52px !important;
+  overflow-y: auto;
+  background: transparent !important;
+  animation: none !important;
 }
-
-body.page-index .card-header {
-  gap: 12px !important;
+body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .header {
+  min-height: 58px;
+  margin: 0 0 18px !important;
+  padding: 0 !important;
+  display: flex !important;
+  justify-content: space-between !important;
   align-items: flex-start !important;
+  gap: 20px !important;
+  border: 0 !important;
 }
-
-body.page-index .avatar {
-  width: 48px !important;
-  height: 48px !important;
-  border-radius: 12px !important;
-  border: 1px solid var(--ns-line) !important;
-  background: linear-gradient(135deg, rgba(124,92,255,.36), rgba(34,211,238,.20)) !important;
-  color: #fff !important;
-  font-weight: 800;
-}
-
-body.page-index .avatar.online {
-  border-color: rgba(34,197,94,.42) !important;
-}
-
-body.page-index .avatar.recording {
-  border-color: rgba(255,59,95,.58) !important;
-  box-shadow: 0 0 0 3px rgba(255,59,95,.12);
-}
-
-body.page-index .streamer-name {
-  margin: 0 0 7px !important;
+body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .page-title {
+  margin: 0 !important;
   color: var(--ns-text) !important;
   font-family: Inter, Sora, system-ui, sans-serif !important;
-  font-size: 17px !important;
+  font-size: var(--sv-text-3xl) !important;
+  line-height: 1.15 !important;
   font-weight: 800 !important;
 }
-
-body.page-index .status-badge {
-  border-radius: 999px !important;
-  background: rgba(255,255,255,.07) !important;
+body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .page-subtitle,
+body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .muted {
   color: var(--ns-muted) !important;
-  font-size: 11px !important;
-  font-weight: 800 !important;
-}
-
-body.page-index .status-badge.live {
-  background: rgba(255,59,95,.14) !important;
-  color: #ff8aa0 !important;
 }
-
-body.page-index .status-badge.online {
-  background: rgba(34,197,94,.14) !important;
-  color: #7ee39a !important;
-}
-
-body.page-index .card-stats {
-  grid-template-columns: 1fr 1fr !important;
-  gap: 10px !important;
-  margin-top: 18px !important;
+body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .page-subtitle {
+  margin-top: 7px !important;
+  max-width: 720px !important;
+  font-size: var(--sv-text-md) !important;
+  line-height: 1.5 !important;
 }
-
-body.page-index .stat-box {
-  padding: 10px !important;
-  border-radius: 8px !important;
-  background: rgba(0,0,0,.18) !important;
+.studio-btn,
+body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .btn-icon,
+body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) button:where(:not(.sv-btn)) {
+  min-height: 38px;
+  padding: 9px 13px !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
   border: 1px solid var(--ns-line) !important;
-}
-
-body.page-index .stat-box-val {
+  border-radius: var(--ns-radius) !important;
+  background: rgba(255,255,255,.055) !important;
   color: var(--ns-text) !important;
-  font-size: 14px !important;
-  font-weight: 800 !important;
+  font-size: var(--sv-text-sm) !important;
+  font-weight: 700 !important;
+  box-shadow: none !important;
+  transform: none !important;
+  cursor: pointer;
 }
-
-body.page-index .card-actions {
-  margin-top: auto !important;
-  padding-top: 16px;
+.studio-btn:hover,
+body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .btn-icon:hover,
+body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) button:where(:not(.sv-btn)):hover {
+  background: rgba(255,255,255,.09) !important;
+  border-color: var(--ns-line-strong) !important;
 }
-
-body.page-index .action-btn {
-  flex: 1;
-  min-height: 36px !important;
+.studio-btn.primary {
+  border-color: transparent !important;
+  background: linear-gradient(135deg, var(--ns-accent), #5b8cff) !important;
+  color: #fff !important;
 }
-
-body.page-index .empty-state {
-  border: 1px solid var(--ns-line) !important;
+body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) input,
+body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) select,
+body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) textarea {
   border-radius: var(--ns-radius) !important;
-  background: rgba(255,255,255,.04) !important;
-}
-
-body.page-streamer .tabs {
-  gap: 8px !important;
-  margin-bottom: 18px !important;
-  border-bottom: 1px solid var(--ns-line) !important;
-}
-
-body.page-streamer .tab {
-  border-radius: 8px 8px 0 0 !important;
-  color: var(--ns-muted) !important;
-}
-
-body.page-streamer .tab.active {
+  border: 1px solid var(--ns-line) !important;
+  background: rgba(7,9,12,.85) !important;
   color: var(--ns-text) !important;
-  border-bottom: 3px solid var(--ns-accent-2) !important;
+  box-shadow: none !important;
 }
-
-body.page-streamer .video-grid {
-  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)) !important;
-  gap: 16px !important;
+body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) input:focus,
+body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) select:focus,
+body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) textarea:focus {
+  border-color: rgba(34,211,238,.62) !important;
 }
-
+body:is(.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .panel,
 body.page-streamer .video-card {
-  overflow: hidden !important;
-}
-
-body.page-streamer .thumb-wrap {
-  aspect-ratio: 16 / 9;
-  border-radius: 8px 8px 0 0 !important;
-  background: #05070a !important;
-}
-
-body.page-streamer .thumb-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-body.page-streamer .card-body {
-  padding: 12px !important;
-}
-
-body.page-streamer .video-title {
-  color: var(--ns-text) !important;
-  font-size: 14px !important;
-  line-height: 1.35 !important;
-  font-weight: 750;
+  border: 1px solid var(--ns-line) !important;
+  border-radius: var(--ns-radius) !important;
+  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.032)) !important;
+  box-shadow: 0 18px 50px rgba(0,0,0,.22) !important;
 }
-
-body.page-streamer .video-meta {
-  color: var(--ns-muted) !important;
+body.page-streamer .video-card:hover {
+  border-color: var(--ns-line-strong) !important;
+  transform: none !important;
 }
-
-body.page-streamer .duration-badge,
-body.page-streamer .empty-badge {
-  border-radius: 5px !important;
-  background: rgba(0,0,0,.78) !important;
+body.page-index .avatar {
+  font-weight: 800;
 }
-
-body.page-channels .mgmt-body,
-body.page-index .mgmt-body {
-  padding: 24px !important;
+body.page-index .avatar.online {
+  border-color: rgba(34,197,94,.42) !important;
 }
-
-body.page-channels .channel-input-group,
-body.page-index .channel-input-group {
-  border-radius: var(--ns-radius) !important;
-  background: rgba(7,9,12,.8) !important;
-  border-color: var(--ns-line) !important;
+body.page-index .avatar.recording {
+  border-color: rgba(255,59,95,.58) !important;
+  box-shadow: 0 0 0 3px rgba(255,59,95,.12);
 }
-
-body.page-channels .channel-input-group button,
-body.page-index .channel-input-group button {
-  background: linear-gradient(135deg, var(--ns-accent), #5b8cff) !important;
-  border-color: transparent !important;
+body.page-streamer .tabs {
+  border-bottom: 1px solid var(--ns-line) !important;
 }
-
-body.page-channels .channel-chip,
-body.page-index .channel-chip {
-  border-radius: 999px !important;
-  background: rgba(255,255,255,.055) !important;
-  border: 1px solid var(--ns-line) !important;
-  color: var(--ns-text) !important;
+body.page-streamer .tab.active {
+  border-bottom: 3px solid var(--ns-accent-2) !important;
 }
-
 body.page-admin table,
 body.page-files table,
 body.page-search table {
   border-collapse: separate !important;
   border-spacing: 0 8px !important;
 }
-
 body.page-admin th,
 body.page-files th,
 body.page-search th {
   color: var(--ns-muted) !important;
   font-weight: 700 !important;
 }
-
 body.page-admin td,
 body.page-files td,
 body.page-search td {
@@ -5269,36 +3938,22 @@ body.page-search td {
   border-top: 1px solid var(--ns-line) !important;
   border-bottom: 1px solid var(--ns-line) !important;
 }
-
 body.page-admin td:first-child,
 body.page-files td:first-child,
 body.page-search td:first-child {
   border-left: 1px solid var(--ns-line) !important;
-  border-radius: 8px 0 0 8px !important;
+  border-radius: var(--nebula-radius-sm) 0 0 var(--nebula-radius-sm) !important;
 }
-
 body.page-admin td:last-child,
 body.page-files td:last-child,
 body.page-search td:last-child {
   border-right: 1px solid var(--ns-line) !important;
-  border-radius: 0 8px 8px 0 !important;
-}
-
-@media (max-width: 1100px) {
-  .studio-overview {
-    grid-template-columns: 1fr;
-  }
-
-  body.page-index .stats-grid {
-    grid-template-columns: 1fr !important;
-  }
+  border-radius: 0 var(--nebula-radius-sm) var(--nebula-radius-sm) 0 !important;
 }
-
 @media (max-width: 760px) {
   body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) {
     flex-direction: column !important;
   }
-
   body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .sidebar {
     position: relative !important;
     width: 100% !important;
@@ -5307,365 +3962,102 @@ body.page-search td:last-child {
     border-right: 0 !important;
     border-bottom: 1px solid var(--ns-line) !important;
   }
-
   body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .brand {
     min-height: 38px;
     margin-bottom: 8px !important;
   }
-
   body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) nav {
     flex-direction: row !important;
     overflow-x: auto !important;
     padding-bottom: 3px;
   }
-
-  body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .nav-item {
-    white-space: nowrap;
-  }
-
-  body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .nav-item[style*="margin-top"] {
-    margin-top: 0 !important;
-    margin-left: auto !important;
-  }
-
   body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .main {
     padding: 18px !important;
   }
-
   body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live) .header {
     flex-direction: column;
     align-items: stretch !important;
   }
-
-  .header-actions,
-  .overview-actions {
-    width: 100%;
-  }
-
-  .studio-btn,
-  .header-actions > a,
-  .overview-actions > a {
+  .studio-btn {
     flex: 1;
   }
-
-  .overview-panel,
-  .signal-panel {
-    min-height: auto;
-    padding: 20px;
-  }
-
-  .overview-panel h2 {
-    font-size: 30px;
-  }
-
-  body.page-index .streamer-grid,
-  body.page-streamer .video-grid {
-    grid-template-columns: 1fr !important;
-  }
 }
-
 /* FUNCTIONAL OVERVIEW PASS */
 body.page-index .page-title::before,
-body.page-index .page-title::after,
-body.page-index .grid-title::after {
+body.page-index .page-title::after {
   content: none !important;
   display: none !important;
 }
-
-body.page-index {
-  background: #0b0d10 !important;
-}
-
-body.page-index .main {
-  padding: 24px 30px 42px !important;
-}
-
 body.page-index .header {
   min-height: 0 !important;
   margin-bottom: 16px !important;
   align-items: center !important;
 }
-
 body.page-index .page-title {
   display: block !important;
-  font-size: 34px !important;
   line-height: 1.1 !important;
 }
-
-body.page-index .page-subtitle {
-  font-size: 14px !important;
-}
-
-body.page-index .studio-quickbar {
-  margin-bottom: 16px !important;
-}
-
-body.page-index .stats-grid {
-  grid-template-columns: minmax(320px, 1.1fr) minmax(300px, 1fr) minmax(240px, .75fr) !important;
-  gap: 12px !important;
-  margin-bottom: 22px !important;
-}
-
-body.page-index .stat-card {
-  min-height: 132px !important;
-  padding: 16px !important;
-  border-radius: 10px !important;
-}
-
-body.page-index .stat-head {
-  margin-bottom: 10px !important;
-}
-
-body.page-index .stat-icon {
-  width: 32px;
-  height: 32px;
-}
-
-body.page-index .res-row {
-  margin-bottom: 10px !important;
-}
-
-body.page-index .live-input-group {
-  margin-top: 14px !important;
-}
-
-body.page-index .live-input-group input {
-  height: 38px;
-}
-
-body.page-index .overview-section {
-  border: 1px solid var(--ns-line);
-  border-radius: 10px;
-  background: rgba(255,255,255,.035);
-  overflow: hidden;
-}
-
 body.page-index .section-head {
-  min-height: 70px;
-  padding: 16px 18px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
-  border-bottom: 1px solid var(--ns-line);
 }
-
 body.page-index .section-head h2 {
-  margin: 0;
-  color: var(--ns-text);
-  font-size: 20px;
   line-height: 1.2;
 }
-
-body.page-index .section-head p {
-  margin: 4px 0 0;
-  color: var(--ns-muted);
-  font-size: 13px;
-}
-
-body.page-index .streamer-list {
-  display: flex;
-  flex-direction: column;
-}
-
 body.page-index .streamer-row {
-  min-height: 74px;
-  padding: 12px 14px;
-  display: grid;
   grid-template-columns: minmax(230px, 1.3fr) minmax(72px, .35fr) minmax(160px, .75fr) minmax(240px, auto);
-  align-items: center;
-  gap: 14px;
-  border-bottom: 1px solid var(--ns-line);
-}
-
-body.page-index .streamer-row:last-child {
-  border-bottom: 0;
 }
-
 body.page-index .streamer-row:hover {
   background: rgba(255,255,255,.04);
 }
-
-body.page-index .streamer-main {
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
 body.page-index .streamer-row .avatar {
-  width: 42px !important;
-  height: 42px !important;
-  border-radius: 10px !important;
-  flex: 0 0 42px;
-}
-
-body.page-index .streamer-row .streamer-name {
-  margin: 0 0 5px !important;
-  font-size: 15px !important;
-  max-width: 260px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-body.page-index .streamer-cell span {
-  display: block;
-  color: var(--ns-muted);
-  font-size: 11px;
-  font-weight: 700;
-}
-
-body.page-index .streamer-cell strong {
-  display: block;
-  margin-top: 4px;
-  color: var(--ns-text);
-  font-size: 14px;
-  line-height: 1.25;
-}
-
-body.page-index .streamer-cell.wide strong {
-  font-size: 13px;
-  color: var(--ns-soft);
-}
-
-body.page-index .streamer-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-}
-
-body.page-index .streamer-actions .action-btn {
-  flex: 0 0 auto;
-  min-width: 74px;
-  min-height: 34px !important;
-  padding: 7px 10px !important;
-}
-
-body.page-index .streamer-actions .action-btn.danger {
-  border-color: rgba(255,59,95,.36) !important;
-  background: rgba(255,59,95,.14) !important;
-  color: #ff9bad !important;
-}
-
-body.page-index .status-badge {
-  padding: 4px 8px !important;
-  display: inline-flex;
-  width: fit-content;
+  flex: 0 0 42px;
 }
-
 @media (max-width: 1200px) {
-  body.page-index .stats-grid {
-    grid-template-columns: 1fr !important;
-  }
-
   body.page-index .streamer-row {
     grid-template-columns: minmax(220px, 1fr) minmax(70px, auto) minmax(150px, auto);
   }
-
-  body.page-index .streamer-actions {
-    grid-column: 1 / -1;
-    justify-content: flex-start;
-  }
 }
-
 @media (max-width: 760px) {
   body.page-index .main {
     padding: 16px !important;
   }
-
   body.page-index .header {
     align-items: stretch !important;
   }
-
   body.page-index .page-title {
-    font-size: 28px !important;
+    font-size: var(--sv-text-3xl) !important;
   }
-
   body.page-index .section-head {
     align-items: stretch;
     flex-direction: column;
   }
-
   body.page-index .streamer-row {
     grid-template-columns: 1fr;
     align-items: stretch;
   }
-
-  body.page-index .streamer-actions {
-    justify-content: stretch;
-  }
-
-  body.page-index .streamer-actions .action-btn {
-    flex: 1;
-  }
-}
-
-.logout-form {
-  margin: 0;
-}
-
-.nav-logout-form {
-  margin-top: auto;
-}
-
-.logout-button {
-  width: 100%;
-  border: 0;
-  background: transparent;
-  font: inherit;
-  cursor: pointer;
-  text-align: left;
-}
-
-.inline-logout-form {
-  display: inline;
-}
-
-.link-button {
-  border: 0;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  font: inherit;
-  padding: 0;
-  text-decoration: inherit;
-}
-
-.link-button:hover {
-  text-decoration: underline;
 }
-
-.mobile-logout-button {
-  color: #a1a1aa;
-  font-size: 12px;
-  font-weight: normal;
-  text-decoration: none;
-}
-
 /* Mythic+ log analyzer */
 body.page-mplus {
   min-height: 100vh;
   display: flex;
   margin: 0;
   color: #edf6f3;
-  background:
-    linear-gradient(135deg, rgba(50, 190, 150, 0.08), transparent 28%),
+  background: linear-gradient(135deg, rgba(50, 190, 150, 0.08), transparent 28%),
     linear-gradient(215deg, rgba(244, 185, 78, 0.06), transparent 32%),
     repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 42px),
     linear-gradient(180deg, #07100f 0%, #091312 48%, #060909 100%);
   font-family: Inter, "Sora", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   letter-spacing: 0;
 }
-
 body.page-mplus * {
   box-sizing: border-box;
 }
-
 body.page-mplus a {
   color: inherit;
 }
-
 body.page-mplus .sidebar {
   width: 252px;
   flex: 0 0 252px;
@@ -5674,7 +4066,6 @@ body.page-mplus .sidebar {
   border-right: 1px solid rgba(255,255,255,0.1);
   box-shadow: 14px 0 34px rgba(0,0,0,0.26);
 }
-
 body.page-mplus .brand {
   margin: 0 0 22px;
   min-height: 52px;
@@ -5684,66 +4075,32 @@ body.page-mplus .brand {
   font-size: 0;
   font-weight: 900;
 }
-
 body.page-mplus .brand::before {
   content: "StreamVault";
   display: block;
-  font-size: 22px;
+  font-size: var(--sv-text-xl);
   line-height: 1;
 }
-
 body.page-mplus .brand::after {
   content: "M+ Lab";
   display: block;
   margin-top: 6px;
   color: #89a39a;
-  font-size: 11px;
+  font-size: var(--sv-min-text);
   font-weight: 800;
   text-transform: uppercase;
 }
-
 body.page-mplus nav {
   display: flex;
   flex-direction: column;
   gap: 4px;
   min-height: calc(100vh - 110px);
 }
-
-body.page-mplus .nav-item {
-  min-height: 42px;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding: 10px 12px;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  color: #b8cbc3;
-  background: transparent;
-  font-size: 14px;
-  font-weight: 750;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-body.page-mplus .nav-item:hover {
-  color: #fff;
-  background: rgba(255,255,255,0.06);
-  border-color: rgba(255,255,255,0.12);
-}
-
-body.page-mplus .nav-item.active {
-  color: #06110f;
-  background: linear-gradient(135deg, #65d8ac, #e8c060);
-  border-color: rgba(255,255,255,0.22);
-  box-shadow: 0 12px 26px rgba(101, 216, 172, 0.15);
-}
-
 body.page-mplus .main {
   width: 100%;
   min-width: 0;
   padding: 28px 34px;
 }
-
 body.page-mplus .header {
   display: flex;
   gap: 18px;
@@ -5753,657 +4110,69 @@ body.page-mplus .header {
   padding: 0 0 18px;
   border-bottom: 1px solid rgba(255,255,255,0.1);
 }
-
 body.page-mplus .page-title {
   margin: 0;
   color: #fff;
-  font-size: 34px;
+  font-size: var(--sv-text-4xl);
   line-height: 1.08;
   letter-spacing: 0;
 }
-
-body.page-mplus .page-subtitle,
-body.page-mplus .mplus-muted {
+body.page-mplus .page-subtitle {
   color: #95aaa2;
-  font-size: 14px;
-}
-
-.mplus-api-state {
-  padding: 8px 12px;
-  border-radius: 999px;
-  border: 1px solid rgba(255,255,255,0.12);
-  font-size: 12px;
-  font-weight: 800;
-}
-
-.mplus-api-state.ok {
-  color: #bdf2d6;
-  background: rgba(59, 214, 139, 0.12);
-}
-
-.mplus-api-state.warn {
-  color: #f6ce87;
-  background: rgba(244, 185, 78, 0.12);
-}
-
-.mplus-layout {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  gap: 18px;
-  margin-bottom: 18px;
-}
-
-.mplus-panel,
-.mplus-stat,
-.mplus-compare-hero > div {
-  border: 1px solid rgba(255,255,255,0.11);
-  border-radius: 8px;
-  background: rgba(11, 20, 19, 0.78);
-  box-shadow: 0 18px 40px rgba(0,0,0,0.22);
-}
-
-.mplus-panel {
-  padding: 18px;
-}
-
-.mplus-wide {
-  margin-bottom: 18px;
-}
-
-.mplus-panel-head {
-  display: flex;
-  gap: 12px;
-  align-items: baseline;
-  justify-content: space-between;
-  margin-bottom: 14px;
+  font-size: var(--sv-text-md);
 }
-
-.mplus-panel-head h2 {
-  margin: 0;
-  color: #fff;
-  font-size: 18px;
-  letter-spacing: 0;
-}
-
-.mplus-panel-head span {
-  color: #85a097;
-  font-size: 12px;
-  font-weight: 800;
-  text-transform: uppercase;
-}
-
-.mplus-import-form,
-.mplus-compare-form,
-.mplus-inline-form {
-  display: grid;
-  gap: 10px;
-}
-
 body.page-mplus label {
   color: #a9beb6;
-  font-size: 12px;
+  font-size: var(--sv-text-xs);
   font-weight: 800;
 }
-
 body.page-mplus input,
 body.page-mplus select {
   width: 100%;
   min-height: 42px;
   padding: 10px 12px;
   border: 1px solid rgba(255,255,255,0.12);
-  border-radius: 6px;
+  border-radius: var(--nebula-radius-xs);
   color: #f5fbf8;
   background: rgba(0,0,0,0.28);
-  outline: none;
 }
-
 body.page-mplus input:focus,
 body.page-mplus select:focus {
-  border-color: rgba(101, 216, 172, 0.72);
-  box-shadow: 0 0 0 3px rgba(101, 216, 172, 0.12);
-}
-
-.mplus-primary,
-.mplus-link.buttonlike {
-  min-height: 40px;
-  padding: 9px 13px;
-  border: 1px solid rgba(255,255,255,0.18);
-  border-radius: 6px;
-  color: #06110f;
-  background: linear-gradient(135deg, #65d8ac, #e8c060);
-  font-size: 13px;
-  font-weight: 850;
-  cursor: pointer;
-}
-
-.mplus-primary:disabled,
-.mplus-link.buttonlike:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-.mplus-alert {
-  margin-bottom: 18px;
-  padding: 12px 14px;
-  border-radius: 8px;
-  border: 1px solid rgba(255,255,255,0.14);
-  font-weight: 750;
-}
-
-.mplus-alert.ok {
-  color: #c9f7dc;
-  background: rgba(59, 214, 139, 0.12);
-}
-
-.mplus-alert.bad {
-  color: #ffc3bc;
-  background: rgba(240, 91, 74, 0.14);
-}
-
-.mplus-table-wrap {
-  overflow-x: auto;
-}
-
-.mplus-table {
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0 8px;
-}
-
-.mplus-table th {
-  padding: 0 10px 6px;
-  color: #88a199;
-  font-size: 11px;
-  font-weight: 850;
-  text-align: left;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-
-.mplus-table td {
-  padding: 12px 10px;
-  color: #e9f5f1;
-  background: rgba(255,255,255,0.045);
-  border-top: 1px solid rgba(255,255,255,0.08);
-  border-bottom: 1px solid rgba(255,255,255,0.08);
-  font-size: 13px;
-  vertical-align: middle;
-  white-space: nowrap;
-}
-
-.mplus-table td:first-child {
-  border-left: 1px solid rgba(255,255,255,0.08);
-  border-radius: 8px 0 0 8px;
-}
-
-.mplus-table td:last-child {
-  border-right: 1px solid rgba(255,255,255,0.08);
-  border-radius: 0 8px 8px 0;
-}
-
-.mplus-table strong {
-  display: block;
-  color: #fff;
-  font-weight: 850;
-}
-
-.mplus-table span {
-  display: block;
-  margin-top: 3px;
-  color: #8da59d;
-  font-size: 11px;
-}
-
-.mplus-actions {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.mplus-actions form {
-  margin: 0;
-}
-
-.mplus-link {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 34px;
-  padding: 7px 10px;
-  border: 1px solid rgba(101, 216, 172, 0.34);
-  border-radius: 6px;
-  color: #c9f7dc;
-  background: rgba(101, 216, 172, 0.1);
-  font-size: 12px;
-  font-weight: 850;
-  text-decoration: none;
-}
-
-.mplus-link.secondary {
-  color: #dae5e0;
-  border-color: rgba(255,255,255,0.13);
-  background: rgba(255,255,255,0.055);
-}
-
-.mplus-empty {
-  padding: 28px 12px;
-  color: #95aaa2;
-  text-align: center;
-}
-
-.mplus-empty h3 {
-  margin: 0 0 6px;
-  color: #fff;
-}
-
-.mplus-stat-grid {
-  display: grid;
-  grid-template-columns: repeat(6, minmax(120px, 1fr));
-  gap: 12px;
-  margin-bottom: 18px;
-}
-
-.mplus-stat {
-  min-height: 86px;
-  padding: 14px;
-}
-
-.mplus-stat span {
-  display: block;
-  color: #88a199;
-  font-size: 11px;
-  font-weight: 850;
-  text-transform: uppercase;
-}
-
-.mplus-stat strong {
-  display: block;
-  margin-top: 8px;
-  color: #fff;
-  font-size: 24px;
-  line-height: 1;
-}
-
-.mplus-good {
-  color: #7ee3aa !important;
-}
-
-.mplus-bad {
-  color: #ff8e81 !important;
-}
-
-.mplus-finding-list {
-  display: grid;
-  gap: 10px;
-}
-
-.mplus-finding {
-  padding: 12px;
-  border: 1px solid rgba(255,255,255,0.1);
-  border-radius: 8px;
-  background: rgba(255,255,255,0.045);
-}
-
-.mplus-finding strong {
-  color: #fff;
-}
-
-.mplus-finding p {
-  margin: 5px 0 0;
-  color: #a8bab4;
-  font-size: 13px;
-}
-
-.mplus-finding.ok {
-  border-color: rgba(93, 214, 139, 0.32);
-}
-
-.mplus-finding.warn,
-.mplus-finding.info {
-  border-color: rgba(232, 192, 96, 0.3);
-}
-
-.mplus-finding.bad {
-  border-color: rgba(255, 119, 100, 0.36);
-}
-
-.mplus-definition {
-  display: grid;
-  grid-template-columns: minmax(120px, 0.45fr) minmax(0, 1fr);
-  gap: 10px 14px;
-  margin: 0;
-}
-
-.mplus-definition dt {
-  color: #87a096;
-  font-size: 12px;
-  font-weight: 850;
-}
-
-.mplus-definition dd {
-  margin: 0;
-  color: #f4fbf8;
-  font-size: 13px;
-}
-
-.mplus-inline-form {
-  margin-top: 14px;
-}
-
-.mplus-simc-summary {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 10px;
-  margin-bottom: 14px;
-}
-
-.mplus-simc-summary div {
-  min-height: 68px;
-  padding: 12px;
-  border: 1px solid rgba(255,255,255,0.1);
-  border-radius: 8px;
-  background: rgba(255,255,255,0.045);
-}
-
-.mplus-simc-summary span {
-  display: block;
-  color: #88a199;
-  font-size: 11px;
-  font-weight: 850;
-  text-transform: uppercase;
-}
-
-.mplus-simc-summary strong {
-  display: block;
-  margin-top: 6px;
-  color: #fff;
-  font-size: 18px;
-}
-
-.mplus-pull-list {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
-  gap: 8px;
-}
-
-.mplus-pull {
-  display: grid;
-  grid-template-columns: 32px minmax(0, 1fr) auto auto;
-  gap: 10px;
-  align-items: center;
-  padding: 10px;
-  border: 1px solid rgba(255,255,255,0.09);
-  border-radius: 8px;
-  background: rgba(255,255,255,0.042);
-}
-
-.mplus-pull strong {
-  overflow: hidden;
-  color: #fff;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.mplus-pull span {
-  color: #9cb1aa;
-  font-size: 12px;
-  white-space: nowrap;
-}
-
-.mplus-pull-index {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  border-radius: 999px;
-  color: #06110f !important;
-  background: #65d8ac;
-  font-weight: 900;
-}
-
-.mplus-delete-form {
-  display: flex;
-  justify-content: flex-end;
-  margin: 18px 0 0;
-}
-
-.mplus-delete-form button {
-  min-height: 36px;
-  padding: 8px 12px;
-  border: 1px solid rgba(255, 119, 100, 0.35);
-  border-radius: 6px;
-  color: #ffb3a9;
-  background: rgba(255, 119, 100, 0.1);
-  cursor: pointer;
-}
-
-.mplus-compare-hero {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr);
-  gap: 14px;
-  align-items: stretch;
-  margin-bottom: 18px;
-}
-
-.mplus-compare-hero > div {
-  min-height: 130px;
-  padding: 18px;
-}
-
-.mplus-compare-hero > div > span {
-  color: #8ba49b;
-  font-size: 11px;
-  font-weight: 850;
-  text-transform: uppercase;
-}
-
-.mplus-compare-hero h2 {
-  margin: 8px 0;
-  color: #fff;
-  font-size: 24px;
-}
-
-.mplus-compare-hero p {
-  margin: 0 0 12px;
-  color: #9db2aa;
-}
-
-.mplus-compare-hero a {
-  color: #bdf2d6;
-  font-weight: 800;
-  text-decoration: none;
-}
-
-.mplus-vs {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #07100f;
-  background: linear-gradient(135deg, #65d8ac, #e8c060) !important;
-  font-weight: 950;
-  text-transform: uppercase;
-}
-
-.mplus-gear-result {
-  display: grid;
-  gap: 5px;
-  margin-bottom: 14px;
-  padding: 14px;
-  border: 1px solid rgba(255,255,255,0.11);
-  border-radius: 8px;
-  background: rgba(255,255,255,0.045);
-}
-
-.mplus-gear-result strong {
-  color: #fff;
-  font-size: 32px;
-}
-
-.mplus-gear-result.left strong {
-  color: #7ee3aa;
-}
-
-.mplus-gear-result.right strong {
-  color: #ffb06e;
-}
-
-.mplus-winner {
-  display: inline-flex !important;
-  width: auto;
-  margin: 0 !important;
-  padding: 3px 7px;
-  border-radius: 999px;
-  background: rgba(255,255,255,0.08);
-  color: #a8bab4 !important;
-  font-size: 11px !important;
-  font-weight: 850;
-}
-
-.mplus-winner.left {
-  color: #07100f !important;
-  background: #65d8ac;
-}
-
-.mplus-winner.right {
-  color: #07100f !important;
-  background: #e8c060;
-}
-
-@media (max-width: 1180px) {
-  .mplus-stat-grid {
-    grid-template-columns: repeat(3, minmax(120px, 1fr));
-  }
+  border-color: rgba(101, 216, 172, 0.72);
+  box-shadow: 0 0 0 3px rgba(101, 216, 172, 0.12);
 }
-
 @media (max-width: 840px) {
   body.page-mplus {
     flex-direction: column;
   }
-
   body.page-mplus .sidebar {
     width: 100%;
     flex-basis: auto;
     border-right: 0;
     border-bottom: 1px solid rgba(255,255,255,0.1);
   }
-
   body.page-mplus nav {
     min-height: 0;
     flex-direction: row;
     overflow-x: auto;
     padding-bottom: 3px;
   }
-
-  body.page-mplus .nav-item {
-    white-space: nowrap;
-  }
-
   body.page-mplus .main {
     padding: 18px;
   }
-
-  body.page-mplus .header,
-  .mplus-layout,
-  .mplus-compare-hero {
+  body.page-mplus .header {
     grid-template-columns: 1fr;
     flex-direction: column;
   }
-
-  .mplus-vs {
-    min-height: 42px !important;
-  }
-
-  .mplus-stat-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .mplus-simc-summary {
-    grid-template-columns: 1fr;
-  }
 }
-
 @media (max-width: 560px) {
   body.page-mplus .page-title {
-    font-size: 28px;
-  }
-
-  .mplus-stat-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .mplus-definition {
-    grid-template-columns: 1fr;
+    font-size: var(--sv-text-3xl);
   }
-
-  .mplus-pull {
-    grid-template-columns: 28px minmax(0, 1fr);
-  }
-}
-
-/* Unified StreamVault theme */
-:root {
-  --ns-bg-0: #050909;
-  --ns-bg-1: #07100f;
-  --ns-bg-2: #0b1513;
-  --ns-panel: rgba(9, 18, 16, 0.82);
-  --ns-panel-2: rgba(16, 28, 25, 0.78);
-  --ns-line: rgba(188, 224, 210, 0.12);
-  --ns-line-strong: rgba(188, 224, 210, 0.2);
-  --ns-text: #f3fbf8;
-  --ns-text-2: #c8ddd5;
-  --ns-muted: #8ea79e;
-  --ns-green: #65d8ac;
-  --ns-green-soft: rgba(101, 216, 172, 0.13);
-  --ns-gold: #e8c060;
-  --ns-gold-soft: rgba(232, 192, 96, 0.13);
-  --ns-red: #ff8e81;
-  --ns-radius: 8px;
-  --bg: var(--ns-bg-0);
-  --bg-deep: var(--ns-bg-0);
-  --card: var(--ns-panel);
-  --glass: var(--ns-panel);
-  --glass-hover: rgba(255,255,255,0.065);
-  --border: var(--ns-line);
-  --primary: var(--ns-green);
-  --primary-hover: #50c99b;
-  --accent: var(--ns-gold);
-  --accent-2: var(--ns-green);
-  --text: var(--ns-text);
-  --text-main: var(--ns-text);
-  --text-muted: var(--ns-muted);
-  --muted: var(--ns-muted);
-  --danger: var(--ns-red);
-  --success: var(--ns-green);
-  --radius: var(--ns-radius);
-}
-
-body:is(
-  .page-login,
-  .page-index,
-  .page-channels,
-  .page-streamer,
-  .page-vod,
-  .page-live,
-  .page-admin,
-  .page-mail,
-  .page-files,
-  .page-search,
-  .page-discord-tool,
-  .page-hls,
-  .page-clip-editor,
-  .page-mobile-index,
-  .page-mobile-streamer,
-  .page-mobile-player,
-  .page-chat-export,
-  .page-mplus,
-  .page-twitch-live,
-  .page-twitch-watch
-) {
+}
+body:is( .page-login, .page-index, .page-channels, .page-streamer, .page-vod, .page-live, .page-admin, .page-mail, .page-files, .page-search, .page-discord-tool, .page-hls, .page-clip-editor, .page-mobile-index, .page-mobile-streamer, .page-mobile-player, .page-chat-export, .page-mplus, .page-twitch-live, .page-twitch-watch ) {
   color: var(--ns-text) !important;
-  background:
-    linear-gradient(135deg, rgba(50, 190, 150, 0.075), transparent 28%),
+  background: linear-gradient(135deg, rgba(50, 190, 150, 0.075), transparent 28%),
     linear-gradient(215deg, rgba(232, 192, 96, 0.055), transparent 31%),
     repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 42px),
     repeating-linear-gradient(90deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 42px),
@@ -6411,12 +4180,10 @@ body:is(
   font-family: Inter, "Sora", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
   letter-spacing: 0 !important;
 }
-
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-mplus) {
   display: flex !important;
   min-height: 100vh !important;
 }
-
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-mplus) .sidebar {
   width: 248px !important;
   flex: 0 0 248px !important;
@@ -6426,7 +4193,6 @@ body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-
   box-shadow: 16px 0 38px rgba(0,0,0,0.32) !important;
   backdrop-filter: none !important;
 }
-
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-mplus) .brand {
   min-height: 66px !important;
   margin: 0 0 22px !important;
@@ -6437,145 +4203,68 @@ body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-
   font-weight: 900 !important;
   letter-spacing: 0 !important;
 }
-
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-mplus) .brand::before {
   content: "StreamVault" !important;
   display: block !important;
   color: #fff !important;
-  font-size: 23px !important;
+  font-size: var(--sv-text-2xl) !important;
   line-height: 1.05 !important;
   font-weight: 900 !important;
   letter-spacing: 0 !important;
 }
-
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-mplus) .brand::after {
   content: "Private Archive" !important;
   display: block !important;
   margin-top: 7px !important;
   color: var(--ns-green) !important;
-  font-size: 10px !important;
+  font-size: var(--sv-min-text) !important;
   font-weight: 900 !important;
   text-transform: uppercase !important;
   letter-spacing: 0 !important;
 }
-
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-mplus) nav {
   display: flex !important;
   flex-direction: column !important;
   gap: 5px !important;
   min-height: calc(100vh - 112px) !important;
 }
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-mplus) .nav-item {
-  min-height: 43px !important;
-  width: 100% !important;
-  display: flex !important;
-  align-items: center !important;
-  gap: 10px !important;
-  padding: 10px 12px !important;
-  border: 1px solid transparent !important;
-  border-radius: 6px !important;
-  color: var(--ns-text-2) !important;
-  background: transparent !important;
-  font-size: 14px !important;
-  font-weight: 800 !important;
-  text-decoration: none !important;
-  transform: none !important;
-  box-shadow: none !important;
-}
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-mplus) .nav-item:hover {
-  color: #fff !important;
-  background: rgba(255,255,255,0.055) !important;
-  border-color: var(--ns-line) !important;
-  transform: none !important;
-}
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-mplus) .nav-item.active {
-  color: #06110f !important;
-  background: linear-gradient(135deg, var(--ns-green), var(--ns-gold)) !important;
-  border-color: rgba(255,255,255,0.18) !important;
-  box-shadow: 0 12px 26px rgba(101, 216, 172, 0.14) !important;
-}
-
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-mplus) .main {
   width: 100% !important;
   min-width: 0 !important;
   padding: 28px 34px !important;
   background: transparent !important;
 }
-
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live,.page-hls,.page-mplus) .header {
   margin: 0 0 22px !important;
   padding: 0 0 18px !important;
   border-bottom: 1px solid var(--ns-line) !important;
 }
-
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live,.page-hls,.page-mplus) .page-title {
   margin: 0 !important;
   color: #fff !important;
-  font-size: 34px !important;
+  font-size: var(--sv-text-4xl) !important;
   line-height: 1.08 !important;
   font-weight: 900 !important;
   letter-spacing: 0 !important;
   text-shadow: 0 1px 0 rgba(0,0,0,0.45) !important;
 }
-
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live,.page-hls,.page-mplus) .page-subtitle,
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live,.page-hls,.page-mplus) .muted {
   color: var(--ns-muted) !important;
 }
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live,.page-hls,.page-mplus) :is(
-  .panel,
-  .stat-card,
-  .card,
-  .overview-section,
-  .mgmt-section,
-  .share-box,
-  .upload-section,
-  .file-card,
-  .folder-card,
-  .video-card,
-  .controls-panel,
-  .vod-tools-panel,
-  .chat-panel,
-  .transcript-status-card,
-  .mplus-panel,
-  .mplus-stat,
-  .mplus-compare-hero > div
-) {
+body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live,.page-hls,.page-mplus) :is( .panel, .stat-card, .card, .overview-section, .mgmt-section, .share-box, .upload-section, .file-card, .folder-card, .video-card, .controls-panel, .vod-tools-panel, .chat-panel, .transcript-status-card, .mplus-panel, .mplus-stat, .mplus-compare-hero > div ) {
   border: 1px solid var(--ns-line) !important;
   border-radius: var(--ns-radius) !important;
   background: var(--ns-panel) !important;
   box-shadow: 0 18px 40px rgba(0,0,0,0.22) !important;
   backdrop-filter: none !important;
 }
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live,.page-hls,.page-mplus) :is(
-  .panel h2,
-  .panel h3,
-  .section-head h2,
-  .grid-title,
-  .vod-panel-title,
-  .mplus-panel-head h2
-) {
+body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live,.page-hls,.page-mplus) :is( .panel h2, .panel h3, .section-head h2, .grid-title, .vod-panel-title, .mplus-panel-head h2 ) {
   color: #fff !important;
   letter-spacing: 0 !important;
 }
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live,.page-hls,.page-mplus) :is(
-  button,
-  .btn,
-  .btn-action,
-  .btn-restart,
-  .action-btn,
-  .btn-primary,
-  .studio-btn,
-  .mplus-primary,
-  .mplus-link.buttonlike
-) {
-  border-radius: 6px !important;
+body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live,.page-hls,.page-mplus) :is( button:where(:not(.sv-btn)), .btn, .btn-action, .btn-restart, .action-btn, .btn-primary, .studio-btn, .mplus-primary, .mplus-link.buttonlike ) {
+  border-radius: var(--nebula-radius-xs) !important;
   border: 1px solid var(--ns-line-strong) !important;
   color: var(--ns-text) !important;
   background: rgba(255,255,255,0.055) !important;
@@ -6584,231 +4273,126 @@ body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-
   font-weight: 850 !important;
   letter-spacing: 0 !important;
 }
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live,.page-hls,.page-mplus) :is(
-  .btn-primary,
-  .studio-btn.primary,
-  .action-btn.primary,
-  .mplus-primary,
-  .mplus-link.buttonlike,
-  .live-input-group button,
-  .channel-input-group button
-) {
+body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live,.page-hls,.page-mplus) :is( .btn-primary, .studio-btn.primary, .action-btn.primary, .mplus-primary, .mplus-link.buttonlike, .live-input-group button:where(:not(.sv-btn)), .channel-input-group button:where(:not(.sv-btn)) ) {
   color: #06110f !important;
   background: linear-gradient(135deg, var(--ns-green), var(--ns-gold)) !important;
   border-color: rgba(255,255,255,0.2) !important;
 }
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live,.page-hls,.page-mplus) :is(button,.btn,.btn-action,.btn-restart,.action-btn,.btn-primary,.studio-btn,.mplus-primary):hover {
+body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live,.page-hls,.page-mplus) :is(button:where(:not(.sv-btn)),.btn,.btn-action,.btn-restart,.action-btn,.btn-primary,.studio-btn,.mplus-primary):hover {
   border-color: rgba(101,216,172,0.42) !important;
   filter: brightness(1.04);
 }
-
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live,.page-hls,.page-mplus) :is(input, select, textarea) {
   border: 1px solid var(--ns-line) !important;
-  border-radius: 6px !important;
+  border-radius: var(--nebula-radius-xs) !important;
   color: var(--ns-text) !important;
   background: rgba(0,0,0,0.24) !important;
-  outline: none !important;
 }
-
 body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live,.page-hls,.page-mplus) :is(input, select, textarea):focus {
   border-color: rgba(101,216,172,0.72) !important;
   box-shadow: 0 0 0 3px rgba(101,216,172,0.12) !important;
 }
-
 body:is(.page-admin,.page-files,.page-search,.page-mplus) table {
   border-collapse: separate !important;
   border-spacing: 0 8px !important;
 }
-
 body:is(.page-admin,.page-files,.page-search,.page-mplus) th {
   color: #88a199 !important;
   border: 0 !important;
-  font-size: 11px !important;
+  font-size: var(--sv-min-text) !important;
   font-weight: 900 !important;
   text-transform: uppercase !important;
 }
-
 body:is(.page-admin,.page-files,.page-search,.page-mplus) td {
   color: var(--ns-text) !important;
   background: rgba(255,255,255,0.045) !important;
   border-top: 1px solid rgba(255,255,255,0.08) !important;
   border-bottom: 1px solid rgba(255,255,255,0.08) !important;
 }
-
 body:is(.page-admin,.page-files,.page-search,.page-mplus) td:first-child {
   border-left: 1px solid rgba(255,255,255,0.08) !important;
-  border-radius: 8px 0 0 8px !important;
+  border-radius: var(--nebula-radius-sm) 0 0 var(--nebula-radius-sm) !important;
 }
-
 body:is(.page-admin,.page-files,.page-search,.page-mplus) td:last-child {
   border-right: 1px solid rgba(255,255,255,0.08) !important;
-  border-radius: 0 8px 8px 0 !important;
+  border-radius: 0 var(--nebula-radius-sm) var(--nebula-radius-sm) 0 !important;
 }
-
-body.page-index .studio-chip,
 body.page-streamer .tab,
-body.page-admin .tab,
-body.page-mplus .mplus-api-state,
-body.page-mplus .mplus-winner,
-body:is(.page-index,.page-streamer,.page-vod,.page-live) .status-badge {
+body.page-admin .tab {
   border: 1px solid var(--ns-line) !important;
-  border-radius: 999px !important;
+  border-radius: var(--nebula-radius-full) !important;
   color: var(--ns-text-2) !important;
   background: rgba(255,255,255,0.055) !important;
 }
-
-body.page-index .studio-chip.active,
 body.page-streamer .tab.active,
 body.page-admin .tab.active {
   color: #06110f !important;
   background: linear-gradient(135deg, var(--ns-green), var(--ns-gold)) !important;
   border-color: rgba(255,255,255,0.2) !important;
 }
-
 body:is(.page-vod,.page-live,.page-hls) {
   min-height: 100vh !important;
 }
-
 body:is(.page-vod,.page-live,.page-hls) .layout,
 body:is(.page-vod,.page-live,.page-hls) .main {
   background: transparent !important;
 }
-
-body:is(.page-vod,.page-live) .player-wrapper,
-body.page-hls .player-shell {
-  border: 1px solid var(--ns-line) !important;
-  border-radius: var(--ns-radius) !important;
-  background: #020505 !important;
-  box-shadow: 0 18px 40px rgba(0,0,0,0.26) !important;
-}
-
-body:is(.page-vod,.page-live) .chat-line,
-body:is(.page-vod,.page-live) .transcript-details pre {
-  background: rgba(255,255,255,0.035) !important;
+body:is(.page-vod,.page-live) .chat-line {
   border-color: rgba(255,255,255,0.075) !important;
 }
-
 body.page-clip-editor header {
   background: rgba(5, 11, 10, 0.96) !important;
   border-bottom: 1px solid var(--ns-line) !important;
 }
-
 body.page-clip-editor .editor-panel,
 body.page-clip-editor .player-container {
   border-color: var(--ns-line) !important;
   background: var(--ns-panel) !important;
 }
-
-body.page-login {
-  overflow: auto !important;
-}
-
 body.page-login .inferno-stage {
   opacity: 0.55 !important;
   filter: hue-rotate(82deg) saturate(0.65) brightness(0.74) !important;
 }
-
 body.page-login .login-shell {
   position: relative !important;
   z-index: 1 !important;
   width: min(1120px, calc(100vw - 40px)) !important;
-  min-height: 100vh !important;
-  margin: 0 auto !important;
-  display: grid !important;
   grid-template-columns: minmax(0, 1fr) minmax(340px, 420px) !important;
-  gap: 42px !important;
-  align-items: center !important;
-  padding: 42px 0 !important;
 }
-
 body.page-login .login-copy {
   max-width: 620px !important;
 }
-
 body.page-login .eyebrow {
-  color: var(--ns-green) !important;
   background: transparent !important;
   border: 0 !important;
   padding: 0 !important;
-  font-size: 12px !important;
-  font-weight: 900 !important;
-  letter-spacing: 0 !important;
   text-transform: uppercase !important;
 }
-
 body.page-login h1 {
-  color: #fff !important;
   font-size: clamp(42px, 7vw, 78px) !important;
-  line-height: 0.98 !important;
-  letter-spacing: 0 !important;
-  text-shadow: 0 2px 0 rgba(0,0,0,0.42) !important;
 }
-
 body.page-login h1::after {
   background: linear-gradient(90deg, var(--ns-green), var(--ns-gold)) !important;
 }
-
-body.page-login .subtitle {
-  color: var(--ns-text-2) !important;
-  max-width: 540px !important;
-}
-
 body.page-login .login-panel {
-  border: 1px solid var(--ns-line) !important;
-  border-radius: var(--ns-radius) !important;
-  background: rgba(9, 18, 16, 0.86) !important;
-  box-shadow: 0 22px 54px rgba(0,0,0,0.36) !important;
   backdrop-filter: none !important;
 }
-
-body.page-login .panel-glow {
-  display: none !important;
-}
-
 body.page-login .login-form label {
-  color: var(--ns-muted) !important;
-  font-size: 12px !important;
   font-weight: 900 !important;
 }
-
-body.page-login input {
-  border: 1px solid var(--ns-line) !important;
-  border-radius: 6px !important;
-  color: var(--ns-text) !important;
-  background: rgba(0,0,0,0.28) !important;
-}
-
-body.page-login input:focus {
-  border-color: rgba(101,216,172,0.72) !important;
-  box-shadow: 0 0 0 3px rgba(101,216,172,0.12) !important;
-}
-
-body.page-login button {
-  min-height: 44px !important;
-  border-radius: 6px !important;
-  color: #06110f !important;
-  background: linear-gradient(135deg, var(--ns-green), var(--ns-gold)) !important;
-  box-shadow: none !important;
-}
-
 body.page-login .error {
   border: 1px solid rgba(255,142,129,0.3) !important;
   color: #ffc3bc !important;
   background: rgba(255,142,129,0.1) !important;
 }
-
 body:is(.page-mobile-index,.page-mobile-streamer,.page-mobile-player) {
   min-height: 100vh !important;
 }
-
 body:is(.page-mobile-index,.page-mobile-streamer,.page-mobile-player) .header {
   color: #fff !important;
   background: rgba(5, 11, 10, 0.96) !important;
   border-bottom: 1px solid var(--ns-line) !important;
 }
-
 body:is(.page-mobile-index,.page-mobile-streamer,.page-mobile-player) .section,
 body:is(.page-mobile-index,.page-mobile-streamer,.page-mobile-player) .card,
 body:is(.page-mobile-index,.page-mobile-streamer,.page-mobile-player) .player-container {
@@ -6816,173 +4400,75 @@ body:is(.page-mobile-index,.page-mobile-streamer,.page-mobile-player) .player-co
   background: var(--ns-panel) !important;
   border-radius: var(--ns-radius) !important;
 }
-
 body:is(.page-mobile-index,.page-mobile-streamer,.page-mobile-player) .nav {
   border-top: 1px solid var(--ns-line) !important;
   background: rgba(5, 11, 10, 0.98) !important;
 }
-
 body:is(.page-mobile-index,.page-mobile-streamer,.page-mobile-player) .nav a {
   color: var(--ns-muted) !important;
 }
-
 body:is(.page-mobile-index,.page-mobile-streamer,.page-mobile-player) .nav a.active {
   color: var(--ns-green) !important;
 }
-
 body.page-chat-export {
   color: var(--ns-text) !important;
   padding: 24px !important;
 }
-
 body.page-chat-export .container,
 body.page-chat-export .vod-group {
   border: 1px solid var(--ns-line) !important;
   border-radius: var(--ns-radius) !important;
   background: var(--ns-panel) !important;
 }
-
 @media (max-width: 840px) {
   body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-mplus) {
     flex-direction: column !important;
   }
-
   body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-mplus) .sidebar {
     width: 100% !important;
     flex-basis: auto !important;
     border-right: 0 !important;
     border-bottom: 1px solid var(--ns-line) !important;
   }
-
   body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-mplus) nav {
     min-height: 0 !important;
     flex-direction: row !important;
     overflow-x: auto !important;
   }
-
-  body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-mplus) .nav-item {
-    white-space: nowrap !important;
-  }
-
   body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-mplus) .main {
     padding: 18px !important;
   }
-
   body.page-login .login-shell {
     min-height: 100vh !important;
     grid-template-columns: 1fr !important;
     gap: 22px !important;
     width: min(100vw - 28px, 560px) !important;
   }
-
   body.page-login .login-copy {
     text-align: left !important;
   }
 }
-
 @media (max-width: 560px) {
   body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool,.page-vod,.page-live,.page-hls,.page-mplus) .page-title {
-    font-size: 28px !important;
-  }
-}
-
-/* StreamVault clean platform shell - 2026-06-07 */
-:root {
-  --tube-bg: #050505;
-  --tube-surface: #111111;
-  --tube-surface-2: #171717;
-  --tube-surface-3: #202020;
-  --tube-line: #292929;
-  --tube-line-soft: #1d1d1d;
-  --tube-text: #f7f7f7;
-  --tube-text-2: #c7c7c7;
-  --tube-muted: #858585;
-  --tube-accent: #f2e58d;
-  --tube-accent-hover: #fff3a9;
-  --tube-live: #ff5c66;
-  --tube-success: #6ed9a2;
-  --tube-radius: 10px;
-  --tube-rail: 76px;
-  --bg: var(--tube-bg);
-  --bg-deep: var(--tube-bg);
-  --card: var(--tube-surface);
-  --glass: var(--tube-surface);
-  --glass-hover: var(--tube-surface-2);
-  --border: var(--tube-line);
-  --primary: var(--tube-accent);
-  --primary-hover: var(--tube-accent-hover);
-  --accent: var(--tube-accent);
-  --accent-2: var(--tube-accent);
-  --text: var(--tube-text);
-  --text-main: var(--tube-text);
-  --text-muted: var(--tube-muted);
-  --muted: var(--tube-muted);
-  --danger: var(--tube-live);
-  --success: var(--tube-success);
-  --radius: var(--tube-radius);
-}
-
+    font-size: var(--sv-text-3xl) !important;
+  }
+}
 html {
   color-scheme: dark;
   background: var(--tube-bg);
 }
-
-body:is(
-  .page-index,
-  .page-channels,
-  .page-streamer,
-  .page-vod,
-  .page-live,
-  .page-admin,
-  .page-mail,
-  .page-files,
-  .page-search,
-  .page-discord-tool,
-  .page-mplus,
-  .page-hls,
-  .page-clip-editor
-) {
+body:is( .page-index, .page-channels, .page-streamer, .page-vod, .page-live, .page-admin, .page-mail, .page-files, .page-search, .page-discord-tool, .page-mplus, .page-hls, .page-clip-editor ) {
   min-height: 100vh !important;
   margin: 0 !important;
   color: var(--tube-text) !important;
   background: var(--tube-bg) !important;
   font-family: Inter, "Sora", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
 }
-
-body:is(
-  .page-index,
-  .page-channels,
-  .page-streamer,
-  .page-vod,
-  .page-live,
-  .page-admin,
-  .page-mail,
-  .page-files,
-  .page-search,
-  .page-discord-tool,
-  .page-mplus,
-  .page-twitch-live,
-  .page-twitch-watch
-) {
+body:is( .page-index, .page-channels, .page-streamer, .page-vod, .page-live, .page-admin, .page-mail, .page-files, .page-search, .page-discord-tool, .page-mplus, .page-twitch-live, .page-twitch-watch ) {
   display: flex !important;
   align-items: stretch !important;
 }
-
-body:is(
-  .page-index,
-  .page-channels,
-  .page-streamer,
-  .page-vod,
-  .page-live,
-  .page-admin,
-  .page-mail,
-  .page-files,
-  .page-search,
-  .page-discord-tool,
-  .page-mplus,
-  .page-twitch-live,
-  .page-twitch-watch
-) .sidebar {
+body:is( .page-index, .page-channels, .page-streamer, .page-vod, .page-live, .page-admin, .page-mail, .page-files, .page-search, .page-discord-tool, .page-mplus, .page-twitch-live, .page-twitch-watch ) .sidebar {
   position: sticky !important;
   top: 0 !important;
   z-index: 40 !important;
@@ -6997,22 +4483,7 @@ body:is(
   box-shadow: none !important;
   backdrop-filter: none !important;
 }
-
-body:is(
-  .page-index,
-  .page-channels,
-  .page-streamer,
-  .page-vod,
-  .page-live,
-  .page-admin,
-  .page-mail,
-  .page-files,
-  .page-search,
-  .page-discord-tool,
-  .page-mplus,
-  .page-twitch-live,
-  .page-twitch-watch
-) .brand {
+body:is( .page-index, .page-channels, .page-streamer, .page-vod, .page-live, .page-admin, .page-mail, .page-files, .page-search, .page-discord-tool, .page-mplus, .page-twitch-live, .page-twitch-watch ) .brand {
   width: 56px !important;
   min-height: 74px !important;
   margin: 0 !important;
@@ -7025,70 +4496,26 @@ body:is(
   color: transparent !important;
   font-size: 0 !important;
 }
-
-body:is(
-  .page-index,
-  .page-channels,
-  .page-streamer,
-  .page-vod,
-  .page-live,
-  .page-admin,
-  .page-mail,
-  .page-files,
-  .page-search,
-  .page-discord-tool,
-  .page-mplus,
-  .page-twitch-live,
-  .page-twitch-watch
-) .brand::before {
+body:is( .page-index, .page-channels, .page-streamer, .page-vod, .page-live, .page-admin, .page-mail, .page-files, .page-search, .page-discord-tool, .page-mplus, .page-twitch-live, .page-twitch-watch ) .brand::before {
   content: "N" !important;
   width: 34px !important;
   height: 34px !important;
   display: grid !important;
   place-items: center !important;
-  border-radius: 8px !important;
+  border-radius: var(--nebula-radius-sm) !important;
   color: #090909 !important;
   background: linear-gradient(145deg, #d9fff4 0%, var(--tube-accent) 100%) !important;
-  font-size: 19px !important;
+  font-size: var(--sv-text-lg) !important;
   line-height: 1 !important;
   font-weight: 950 !important;
   letter-spacing: -0.06em !important;
   transform: skewX(-7deg);
   box-shadow: none !important;
 }
-
-body:is(
-  .page-index,
-  .page-channels,
-  .page-streamer,
-  .page-vod,
-  .page-live,
-  .page-admin,
-  .page-mail,
-  .page-files,
-  .page-search,
-  .page-discord-tool,
-  .page-mplus,
-  .page-twitch-live,
-  .page-twitch-watch
-) .brand::after {
+body:is( .page-index, .page-channels, .page-streamer, .page-vod, .page-live, .page-admin, .page-mail, .page-files, .page-search, .page-discord-tool, .page-mplus, .page-twitch-live, .page-twitch-watch ) .brand::after {
   display: none !important;
 }
-
-body:is(
-  .page-index,
-  .page-channels,
-  .page-streamer,
-  .page-vod,
-  .page-live,
-  .page-admin,
-  .page-mail,
-  .page-files,
-  .page-search,
-  .page-discord-tool,
-  .page-mplus,
-  .page-twitch-live
-) nav {
+body:is( .page-index, .page-channels, .page-streamer, .page-vod, .page-live, .page-admin, .page-mail, .page-files, .page-search, .page-discord-tool, .page-mplus, .page-twitch-live ) nav {
   min-height: calc(100vh - 90px) !important;
   padding: 16px 0 0 !important;
   display: flex !important;
@@ -7097,172 +4524,7 @@ body:is(
   gap: 8px !important;
   overflow: visible !important;
 }
-
-body:is(
-  .page-index,
-  .page-channels,
-  .page-streamer,
-  .page-vod,
-  .page-live,
-  .page-admin,
-  .page-mail,
-  .page-files,
-  .page-search,
-  .page-discord-tool,
-  .page-mplus,
-  .page-twitch-live,
-  .page-twitch-watch
-) .nav-item {
-  --tube-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.8'%3E%3Crect x='4' y='4' width='6' height='6' rx='1'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1'/%3E%3Crect x='14' y='14' width='6' height='6' rx='1'/%3E%3C/svg%3E");
-  position: relative !important;
-  width: 44px !important;
-  min-width: 44px !important;
-  min-height: 44px !important;
-  height: 44px !important;
-  margin: 0 !important;
-  padding: 0 !important;
-  display: grid !important;
-  place-items: center !important;
-  overflow: visible !important;
-  border: 1px solid transparent !important;
-  border-radius: 9px !important;
-  color: var(--tube-muted) !important;
-  background: transparent !important;
-  font-size: 0 !important;
-  line-height: 1 !important;
-  text-decoration: none !important;
-  transform: none !important;
-  box-shadow: none !important;
-}
-
-body:is(
-  .page-index,
-  .page-channels,
-  .page-streamer,
-  .page-vod,
-  .page-live,
-  .page-admin,
-  .page-mail,
-  .page-files,
-  .page-search,
-  .page-discord-tool,
-  .page-mplus,
-  .page-twitch-live,
-  .page-twitch-watch
-) .nav-item::before {
-  content: "" !important;
-  width: 21px !important;
-  height: 21px !important;
-  display: block !important;
-  background: currentColor !important;
-  mask: var(--tube-nav-icon) center / contain no-repeat !important;
-  -webkit-mask: var(--tube-nav-icon) center / contain no-repeat !important;
-}
-
-.nav-item[href="/"],
-.nav-item[href$="/"] {
-  --tube-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 10.8 12 3l9 7.8V21a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1V10.8Z'/%3E%3C/svg%3E");
-}
-
-.nav-item[href="/live"],
-.nav-item[href$="/live"] {
-  --tube-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath stroke-linecap='round' d='M5.5 8.5a8 8 0 0 1 13 0M3 6a11 11 0 0 1 18 0M8.5 18.5h7'/%3E%3C/svg%3E");
-}
-
-.nav-item[href*="/admin/stalk"] {
-  --tube-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath stroke-linecap='round' d='M12 2v2M12 20v2M2 12h2M20 12h2'/%3E%3C/svg%3E");
-}
-
-.nav-item[href*="/mplus"] {
-  --tube-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m7 4 10 16M17 4 7 20M5 7h14M5 17h14'/%3E%3C/svg%3E");
-}
-
-.nav-item[href*="/channels"] {
-  --tube-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3Ccircle cx='16.5' cy='9.5' r='2.5'/%3E%3Cpath stroke-linecap='round' d='M2.5 20c.5-4 2.4-6 5.5-6s5 2 5.5 6M13 19.5c.4-2.8 1.7-4.2 4-4.2 2.2 0 3.7 1.5 4 4.2'/%3E%3C/svg%3E");
-}
-
-.nav-item[href*="/files"] {
-  --tube-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.8'%3E%3Cpath stroke-linejoin='round' d='M3 6.5A1.5 1.5 0 0 1 4.5 5H9l2 2h8.5A1.5 1.5 0 0 1 21 8.5v9A1.5 1.5 0 0 1 19.5 19h-15A1.5 1.5 0 0 1 3 17.5v-11Z'/%3E%3C/svg%3E");
-}
-
-.nav-item[href*="/admin/chat"] {
-  --tube-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath stroke-linecap='round' d='m15.5 15.5 5 5'/%3E%3C/svg%3E");
-}
-
-.nav-item[href*="/admin/mail"] {
-  --tube-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.8'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath stroke-linejoin='round' d='m4 7 8 6 8-6'/%3E%3C/svg%3E");
-}
-
-.nav-item[href="/admin"] {
-  --tube-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1-2.8 2.8-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6v.2h-4V21a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1L4.2 17l.1-.1a1.7 1.7 0 0 0 .3-1.9A1.7 1.7 0 0 0 3 14H2.8v-4H3a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9L4.2 7 7 4.2l.1.1A1.7 1.7 0 0 0 9 4.6 1.7 1.7 0 0 0 10 3V2.8h4V3a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1L19.8 7l-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.6 1h.2v4H21a1.7 1.7 0 0 0-1.6 1Z'/%3E%3C/svg%3E");
-}
-
-.logout-button {
-  --tube-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10 4H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h5M14 8l4 4-4 4M18 12H8'/%3E%3C/svg%3E") !important;
-}
-
-body:is(
-  .page-index,
-  .page-channels,
-  .page-streamer,
-  .page-vod,
-  .page-live,
-  .page-admin,
-  .page-mail,
-  .page-files,
-  .page-search,
-  .page-discord-tool,
-  .page-mplus,
-  .page-twitch-live,
-  .page-twitch-watch
-) .nav-item:hover {
-  color: var(--tube-text) !important;
-  background: var(--tube-surface-2) !important;
-  border-color: var(--tube-line) !important;
-  transform: none !important;
-}
-
-body:is(
-  .page-index,
-  .page-channels,
-  .page-streamer,
-  .page-vod,
-  .page-live,
-  .page-admin,
-  .page-mail,
-  .page-files,
-  .page-search,
-  .page-discord-tool,
-  .page-mplus,
-  .page-twitch-live,
-  .page-twitch-watch
-) .nav-item.active {
-  color: var(--tube-accent) !important;
-  background: #1c1b16 !important;
-  border-color: rgba(242, 229, 141, 0.22) !important;
-  box-shadow: none !important;
-}
-
-.nav-logout-form {
-  width: 44px !important;
-  margin: auto 0 0 !important;
-}
-
-body:is(
-  .page-index,
-  .page-channels,
-  .page-streamer,
-  .page-vod,
-  .page-live,
-  .page-admin,
-  .page-mail,
-  .page-files,
-  .page-search,
-  .page-discord-tool,
-  .page-mplus,
-  .page-twitch-live,
-  .page-twitch-watch
-) .main {
+body:is( .page-index, .page-channels, .page-streamer, .page-vod, .page-live, .page-admin, .page-mail, .page-files, .page-search, .page-discord-tool, .page-mplus, .page-twitch-live, .page-twitch-watch ) .main {
   width: calc(100% - var(--tube-rail)) !important;
   min-width: 0 !important;
   min-height: 100vh !important;
@@ -7270,20 +4532,7 @@ body:is(
   overflow: visible !important;
   background: var(--tube-bg) !important;
 }
-
-body:is(
-  .page-index,
-  .page-channels,
-  .page-streamer,
-  .page-admin,
-  .page-mail,
-  .page-files,
-  .page-search,
-  .page-discord-tool,
-  .page-mplus,
-  .page-twitch-live,
-  .page-twitch-watch
-) .main > .header {
+body:is( .page-index, .page-channels, .page-streamer, .page-admin, .page-mail, .page-files, .page-search, .page-discord-tool, .page-mplus, .page-twitch-live, .page-twitch-watch ) .main > .header {
   min-height: 75px !important;
   margin: 0 -28px 24px !important;
   padding: 0 28px !important;
@@ -7295,66 +4544,23 @@ body:is(
   border-bottom: 1px solid var(--tube-line-soft) !important;
   background: rgba(5, 5, 5, 0.96) !important;
 }
-
-body:is(
-  .page-index,
-  .page-channels,
-  .page-streamer,
-  .page-admin,
-  .page-mail,
-  .page-files,
-  .page-search,
-  .page-discord-tool,
-  .page-mplus,
-  .page-vod,
-  .page-live
-) .page-title {
+body:is( .page-index, .page-channels, .page-streamer, .page-admin, .page-mail, .page-files, .page-search, .page-discord-tool, .page-mplus, .page-vod, .page-live ) .page-title {
   margin: 0 !important;
   color: var(--tube-text) !important;
   font-family: inherit !important;
-  font-size: 22px !important;
+  font-size: var(--sv-text-xl) !important;
   line-height: 1.2 !important;
   font-weight: 800 !important;
   letter-spacing: -0.025em !important;
   text-shadow: none !important;
 }
-
 .page-subtitle {
   margin-top: 4px !important;
   color: var(--tube-muted) !important;
-  font-size: 12px !important;
+  font-size: var(--sv-text-xs) !important;
   line-height: 1.45 !important;
 }
-
-body:is(
-  .page-index,
-  .page-channels,
-  .page-streamer,
-  .page-vod,
-  .page-live,
-  .page-admin,
-  .page-mail,
-  .page-files,
-  .page-search,
-  .page-discord-tool,
-  .page-mplus,
-  .page-twitch-live
-) :is(
-  .panel,
-  .stat-card,
-  .card,
-  .overview-section,
-  .mgmt-section,
-  .upload-section,
-  .file-card,
-  .folder-card,
-  .video-card,
-  .controls-panel,
-  .chat-panel,
-  .mplus-panel,
-  .mplus-stat,
-  .share-box
-) {
+body:is( .page-index, .page-channels, .page-streamer, .page-vod, .page-live, .page-admin, .page-mail, .page-files, .page-search, .page-discord-tool, .page-mplus, .page-twitch-live ) :is( .panel, .stat-card, .card, .overview-section, .mgmt-section, .upload-section, .file-card, .folder-card, .video-card, .controls-panel, .chat-panel, .mplus-panel, .mplus-stat, .share-box ) {
   color: var(--tube-text) !important;
   background: var(--tube-surface) !important;
   border: 1px solid var(--tube-line-soft) !important;
@@ -7362,425 +4568,108 @@ body:is(
   box-shadow: none !important;
   backdrop-filter: none !important;
 }
-
-body:is(
-  .page-index,
-  .page-channels,
-  .page-streamer,
-  .page-vod,
-  .page-live,
-  .page-admin,
-  .page-mail,
-  .page-files,
-  .page-search,
-  .page-discord-tool,
-  .page-mplus,
-  .page-twitch-live
-) :is(input, select, textarea) {
+body:is( .page-index, .page-channels, .page-streamer, .page-vod, .page-live, .page-admin, .page-mail, .page-files, .page-search, .page-discord-tool, .page-mplus, .page-twitch-live ) :is(input, select, textarea) {
   min-height: 40px !important;
   border: 1px solid var(--tube-line) !important;
-  border-radius: 8px !important;
+  border-radius: var(--nebula-radius-sm) !important;
   color: var(--tube-text) !important;
   background: #0d0d0d !important;
   box-shadow: none !important;
-  outline: none !important;
-}
-
-body:is(
-  .page-index,
-  .page-channels,
-  .page-streamer,
-  .page-vod,
-  .page-live,
-  .page-admin,
-  .page-mail,
-  .page-files,
-  .page-search,
-  .page-discord-tool,
-  .page-mplus,
-  .page-twitch-live
-) :is(input, select, textarea):focus {
+}
+body:is( .page-index, .page-channels, .page-streamer, .page-vod, .page-live, .page-admin, .page-mail, .page-files, .page-search, .page-discord-tool, .page-mplus, .page-twitch-live ) :is(input, select, textarea):focus {
   border-color: rgba(242, 229, 141, 0.7) !important;
   box-shadow: 0 0 0 3px rgba(242, 229, 141, 0.08) !important;
 }
-
-body:is(
-  .page-index,
-  .page-channels,
-  .page-streamer,
-  .page-vod,
-  .page-live,
-  .page-admin,
-  .page-mail,
-  .page-files,
-  .page-search,
-  .page-discord-tool,
-  .page-mplus,
-  .page-twitch-live
-) :is(
-  button,
-  .btn,
-  .btn-action,
-  .btn-restart,
-  .action-btn,
-  .btn-primary,
-  .btn-secondary,
-  .studio-btn,
-  .vod-link-btn,
-  .vod-icon-btn,
-  .mplus-primary
-) {
+body:is( .page-index, .page-channels, .page-streamer, .page-vod, .page-live, .page-admin, .page-mail, .page-files, .page-search, .page-discord-tool, .page-mplus, .page-twitch-live ) :is( button:where(:not(.sv-btn)), .btn, .btn-action, .btn-restart, .action-btn, .btn-primary, .btn-secondary, .studio-btn, .vod-link-btn, .vod-icon-btn, .mplus-primary ) {
   min-height: 38px !important;
   padding: 8px 13px !important;
   border: 1px solid var(--tube-line) !important;
-  border-radius: 8px !important;
+  border-radius: var(--nebula-radius-sm) !important;
   color: var(--tube-text-2) !important;
   background: var(--tube-surface-2) !important;
   box-shadow: none !important;
   transform: none !important;
   font-family: inherit !important;
-  font-size: 12px !important;
+  font-size: var(--sv-text-xs) !important;
   font-weight: 750 !important;
   text-decoration: none !important;
 }
-
-body:is(
-  .page-index,
-  .page-channels,
-  .page-streamer,
-  .page-vod,
-  .page-live,
-  .page-admin,
-  .page-mail,
-  .page-files,
-  .page-search,
-  .page-discord-tool,
-  .page-mplus,
-  .page-twitch-live
-) :is(
-  button,
-  .btn,
-  .btn-action,
-  .btn-restart,
-  .action-btn,
-  .btn-primary,
-  .btn-secondary,
-  .studio-btn,
-  .vod-link-btn,
-  .vod-icon-btn,
-  .mplus-primary
-):hover {
+body:is( .page-index, .page-channels, .page-streamer, .page-vod, .page-live, .page-admin, .page-mail, .page-files, .page-search, .page-discord-tool, .page-mplus, .page-twitch-live ) :is( button:where(:not(.sv-btn)), .btn, .btn-action, .btn-restart, .action-btn, .btn-primary, .btn-secondary, .studio-btn, .vod-link-btn, .vod-icon-btn, .mplus-primary ):hover {
   color: var(--tube-text) !important;
   background: var(--tube-surface-3) !important;
   border-color: #3a3a3a !important;
   filter: none !important;
   transform: none !important;
 }
-
-body:is(
-  .page-index,
-  .page-channels,
-  .page-streamer,
-  .page-vod,
-  .page-live,
-  .page-admin,
-  .page-mail,
-  .page-files,
-  .page-search,
-  .page-discord-tool,
-  .page-mplus,
-  .page-twitch-live
-) :is(
-  .btn-primary,
-  .studio-btn.primary,
-  .action-btn.primary,
-  .vod-primary-action,
-  .mplus-primary,
-  .live-input-group button,
-  .channel-input-group button
-) {
+body:is( .page-index, .page-channels, .page-streamer, .page-vod, .page-live, .page-admin, .page-mail, .page-files, .page-search, .page-discord-tool, .page-mplus, .page-twitch-live ) :is( .btn-primary, .studio-btn.primary, .action-btn.primary, .vod-primary-action, .mplus-primary, .live-input-group button:where(:not(.sv-btn)), .channel-input-group button:where(:not(.sv-btn)) ) {
   color: #11100a !important;
   background: var(--tube-accent) !important;
   border-color: var(--tube-accent) !important;
 }
-
-body:is(
-  .page-index,
-  .page-channels,
-  .page-streamer,
-  .page-vod,
-  .page-live,
-  .page-admin,
-  .page-mail,
-  .page-files,
-  .page-search,
-  .page-discord-tool,
-  .page-mplus,
-  .page-twitch-live
-) :is(
-  .btn-primary,
-  .studio-btn.primary,
-  .action-btn.primary,
-  .vod-primary-action,
-  .mplus-primary,
-  .live-input-group button,
-  .channel-input-group button
-):hover {
+body:is( .page-index, .page-channels, .page-streamer, .page-vod, .page-live, .page-admin, .page-mail, .page-files, .page-search, .page-discord-tool, .page-mplus, .page-twitch-live ) :is( .btn-primary, .studio-btn.primary, .action-btn.primary, .vod-primary-action, .mplus-primary, .live-input-group button:where(:not(.sv-btn)), .channel-input-group button:where(:not(.sv-btn)) ):hover {
   color: #11100a !important;
   background: var(--tube-accent-hover) !important;
   border-color: var(--tube-accent-hover) !important;
 }
-
 button:disabled,
 .btn:disabled {
   cursor: not-allowed !important;
   opacity: 0.45 !important;
 }
-
 /* Home */
-body.page-index .studio-quickbar {
-  margin: 0 0 20px !important;
-  padding: 0 !important;
-  display: flex !important;
-  gap: 8px !important;
-  overflow-x: auto !important;
-  scrollbar-width: none;
-}
-
-body.page-index .studio-chip,
 body.page-streamer .tab {
   min-height: 34px !important;
   padding: 8px 13px !important;
   display: inline-flex !important;
   align-items: center !important;
   border: 1px solid var(--tube-line) !important;
-  border-radius: 8px !important;
+  border-radius: var(--nebula-radius-sm) !important;
   color: var(--tube-text-2) !important;
   background: var(--tube-surface) !important;
-  font-size: 12px !important;
+  font-size: var(--sv-text-xs) !important;
   font-weight: 700 !important;
   white-space: nowrap !important;
   text-decoration: none !important;
 }
-
-body.page-index .studio-chip.active,
 body.page-streamer .tab.active {
   color: #11100a !important;
   background: var(--tube-accent) !important;
   border-color: var(--tube-accent) !important;
 }
-
-body.page-index .studio-chip.danger {
-  color: #ffd4d7 !important;
-  background: rgba(255, 92, 102, 0.13) !important;
-  border-color: rgba(255, 92, 102, 0.3) !important;
-}
-
-body.page-index .stats-grid {
-  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
-  gap: 12px !important;
-  margin: 0 0 24px !important;
-}
-
-body.page-index .stat-card {
-  min-height: 132px !important;
-  padding: 16px !important;
-}
-
-body.page-index .stat-card:hover,
 body.page-index .streamer-row:hover,
-body.page-streamer .video-card:hover,
-body.page-files .file-card:hover {
+body.page-streamer .video-card:hover {
   border-color: #383838 !important;
   background: #151515 !important;
   box-shadow: none !important;
   transform: none !important;
 }
-
-body.page-index .stat-head {
-  margin-bottom: 12px !important;
-}
-
-body.page-index .stat-label {
-  color: var(--tube-text-2) !important;
-  font-size: 12px !important;
-  font-weight: 750 !important;
-}
-
-body.page-index .stat-icon {
-  color: var(--tube-muted) !important;
-  font-size: 15px !important;
-}
-
-body.page-index .stat-value {
-  color: var(--tube-text) !important;
-  font-size: 24px !important;
-}
-
-body.page-index .res-bar,
-body.page-index .progress-track {
-  height: 4px !important;
-  background: #292929 !important;
-}
-
-body.page-index .res-fill,
-body.page-index .progress-fill {
-  background: var(--tube-accent) !important;
-}
-
-body.page-index .overview-section {
-  padding: 0 !important;
-  overflow: hidden !important;
-}
-
 body.page-index .section-head {
-  min-height: 68px !important;
   margin: 0 !important;
-  padding: 15px 18px !important;
-  border-bottom: 1px solid var(--tube-line-soft) !important;
-}
-
-body.page-index .section-head h2 {
-  color: var(--tube-text) !important;
-  font-size: 17px !important;
-}
-
-body.page-index .section-head p {
-  color: var(--tube-muted) !important;
-  font-size: 12px !important;
-}
-
-body.page-index .streamer-list {
-  gap: 0 !important;
 }
-
-body.page-index .streamer-row {
-  min-height: 78px !important;
-  padding: 13px 18px !important;
-  border-bottom: 1px solid var(--tube-line-soft) !important;
-  background: transparent !important;
-}
-
-body.page-index .streamer-row:last-child {
-  border-bottom: 0 !important;
-}
-
 body.page-index .streamer-row .avatar {
-  width: 46px !important;
-  height: 46px !important;
   border-radius: 50% !important;
   background: var(--tube-surface-3) !important;
 }
-
 body.page-index .streamer-row .avatar img {
   border-radius: 50% !important;
 }
-
-body.page-index .streamer-name {
-  color: var(--tube-text) !important;
-  font-size: 14px !important;
-}
-
-body.page-index .status-badge {
-  padding: 0 !important;
-  border: 0 !important;
-  background: transparent !important;
-  color: var(--tube-muted) !important;
-  font-size: 11px !important;
-}
-
-body.page-index .status-badge.live {
-  color: var(--tube-live) !important;
-}
-
-body.page-index .status-badge.online {
-  color: var(--tube-success) !important;
-}
-
-body.page-index .streamer-cell span {
-  color: var(--tube-muted) !important;
-  font-size: 10px !important;
-}
-
-body.page-index .streamer-cell strong {
-  color: var(--tube-text-2) !important;
-  font-size: 12px !important;
-}
-
 /* Streamer archive */
 body.page-streamer .tabs {
   width: auto !important;
   margin: 0 0 16px !important;
   padding: 0 !important;
   display: flex !important;
-  gap: 8px !important;
   border: 0 !important;
   background: transparent !important;
 }
-
-body.page-streamer .panel {
-  margin-bottom: 14px !important;
-  padding: 16px !important;
-}
-
-body.page-streamer .video-grid {
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
-  gap: 18px 14px !important;
-  padding: 4px 0 20px !important;
-}
-
 body.page-streamer .video-card {
   overflow: hidden !important;
   background: transparent !important;
   border-color: transparent !important;
 }
-
 body.page-streamer .video-card:hover {
   background: var(--tube-surface) !important;
 }
-
-body.page-streamer .thumb-wrap {
-  aspect-ratio: 16 / 9 !important;
-  overflow: hidden !important;
-  border-radius: 9px !important;
-  border: 1px solid var(--tube-line-soft) !important;
-  background: #0b0b0b !important;
-}
-
-body.page-streamer .thumb-img {
-  width: 100% !important;
-  height: 100% !important;
-  object-fit: cover !important;
-}
-
-body.page-streamer .card-body {
-  padding: 11px 4px 4px !important;
-}
-
-body.page-streamer .video-title {
-  min-height: 0 !important;
-  color: var(--tube-text) !important;
-  font-size: 13px !important;
-  line-height: 1.4 !important;
-}
-
-body.page-streamer .video-meta {
-  color: var(--tube-muted) !important;
-  font-size: 11px !important;
-}
-
-body.page-streamer .duration-badge,
-body.page-streamer .empty-badge {
-  border: 0 !important;
-  border-radius: 5px !important;
-  color: #fff !important;
-  background: rgba(0, 0, 0, 0.86) !important;
-}
-
-body.page-streamer .card-actions {
-  gap: 6px !important;
-}
-
 body.page-streamer .btn-icon,
 body.page-files .btn-icon,
 body.page-admin .btn-icon {
@@ -7789,19 +4678,13 @@ body.page-admin .btn-icon {
   height: 34px !important;
   min-height: 34px !important;
   padding: 0 !important;
-  border-radius: 7px !important;
+  border-radius: var(--nebula-radius-sm) !important;
 }
-
 /* Player and live pages */
 body:is(.page-vod,.page-live) .main {
   padding: 0 18px 26px !important;
 }
-
-body.page-vod .vod-hero,
 body.page-live .live-hero {
-  min-height: 75px !important;
-  margin: 0 -18px 18px !important;
-  padding: 12px 18px !important;
   display: flex !important;
   align-items: center !important;
   justify-content: space-between !important;
@@ -7810,65 +4693,32 @@ body.page-live .live-hero {
   border-bottom: 1px solid var(--tube-line-soft) !important;
   background: var(--tube-bg) !important;
 }
-
-body.page-vod .vod-header-main,
 body.page-live .live-header-main {
   min-width: 0 !important;
   display: flex !important;
   align-items: center !important;
   gap: 16px !important;
 }
-
-body.page-vod .vod-back-link,
 body.page-live .live-back-link {
   flex: 0 0 auto !important;
   color: var(--tube-muted) !important;
-  font-size: 12px !important;
+  font-size: var(--sv-text-xs) !important;
   text-decoration: none !important;
 }
-
-body.page-vod .vod-heading {
-  min-width: 0 !important;
-}
-
-body.page-vod .vod-heading-icon {
-  display: none !important;
-}
-
-body.page-vod .vod-title-block {
-  min-width: 0 !important;
-}
-
 body.page-vod .vod-kicker,
 body.page-live .live-kicker {
   margin-bottom: 3px !important;
   color: var(--tube-live) !important;
-  font-size: 9px !important;
+  font-size: var(--sv-min-text) !important;
   font-weight: 850 !important;
   letter-spacing: 0.09em !important;
   text-transform: uppercase !important;
 }
-
-body.page-vod .vod-filename {
-  max-width: min(44vw, 620px) !important;
-  overflow: hidden !important;
-  color: var(--tube-muted) !important;
-  font-size: 11px !important;
-  text-overflow: ellipsis !important;
-  white-space: nowrap !important;
-}
-
-body.page-vod .vod-meta-row {
-  display: none !important;
-}
-
-body.page-vod .vod-header-actions,
 body.page-live .live-header-actions {
   display: flex !important;
   align-items: center !important;
   gap: 8px !important;
 }
-
 body:is(.page-vod,.page-live) .content {
   height: auto !important;
   min-height: 0 !important;
@@ -7877,16 +4727,13 @@ body:is(.page-vod,.page-live) .content {
   gap: 12px !important;
   align-items: start !important;
 }
-
 body:is(.page-vod,.page-live) .content.solo {
   grid-template-columns: minmax(0, 1fr) !important;
 }
-
 body:is(.page-vod,.page-live) .main-col {
   min-width: 0 !important;
   height: auto !important;
 }
-
 body:is(.page-vod,.page-live) .player-wrapper {
   width: 100% !important;
   height: auto !important;
@@ -7898,13 +4745,11 @@ body:is(.page-vod,.page-live) .player-wrapper {
   background: #000 !important;
   box-shadow: none !important;
 }
-
 body:is(.page-vod,.page-live) .player-wrapper video {
   width: 100% !important;
   height: 100% !important;
   object-fit: contain !important;
 }
-
 body:is(.page-vod,.page-live) .chat-panel {
   position: sticky !important;
   top: 12px !important;
@@ -7916,100 +4761,67 @@ body:is(.page-vod,.page-live) .chat-panel {
   display: flex !important;
   flex-direction: column !important;
 }
-
 body:is(.page-vod,.page-live) .chat-header {
   min-height: 52px !important;
   padding: 0 16px !important;
   border-bottom: 1px solid var(--tube-line-soft) !important;
   background: var(--tube-surface) !important;
   color: var(--tube-text) !important;
-  font-size: 13px !important;
+  font-size: var(--sv-text-sm) !important;
   font-weight: 800 !important;
 }
-
 body:is(.page-vod,.page-live) .chat-list {
   padding: 10px 8px 18px !important;
   background: var(--tube-surface) !important;
 }
-
 body:is(.page-vod,.page-live) .chat-line {
   margin: 0 !important;
   padding: 8px !important;
   border: 0 !important;
-  border-radius: 7px !important;
+  border-radius: var(--nebula-radius-sm) !important;
   color: var(--tube-text-2) !important;
   background: transparent !important;
-  font-size: 12px !important;
+  font-size: var(--sv-text-xs) !important;
 }
-
 body:is(.page-vod,.page-live) .chat-line:hover {
   background: rgba(255, 255, 255, 0.035) !important;
 }
-
 body:is(.page-vod,.page-live) .controls-panel {
   margin-top: 12px !important;
   padding: 14px !important;
 }
-
-body.page-vod .vod-tools-head {
-  gap: 12px !important;
-}
-
-body.page-vod .vod-panel-title {
-  color: var(--tube-text) !important;
-  font-size: 14px !important;
-}
-
-body.page-vod .vod-panel-subtitle {
-  color: var(--tube-muted) !important;
-  font-size: 11px !important;
-}
-
-body.page-vod .transcript-details {
-  border-color: var(--tube-line-soft) !important;
-  background: var(--tube-surface) !important;
-}
-
 body.page-live .live-title-group {
   min-width: 0 !important;
 }
-
 body.page-live .live-title-group .page-title {
   overflow: hidden !important;
   text-overflow: ellipsis !important;
   white-space: nowrap !important;
 }
-
 body.page-live .live-state {
   color: var(--tube-live) !important;
-  font-size: 11px !important;
+  font-size: var(--sv-min-text) !important;
   font-weight: 800 !important;
 }
-
 /* Operator pages */
 body:is(.page-admin,.page-files,.page-search,.page-mplus) .grid {
   gap: 14px !important;
 }
-
-body:is(.page-admin,.page-files,.page-search,.page-mplus) .panel,
-body.page-files .upload-section {
+body:is(.page-admin,.page-files,.page-search,.page-mplus) .panel {
   padding: 18px !important;
 }
-
 body:is(.page-admin,.page-search,.page-mplus) table {
   border-collapse: collapse !important;
   border-spacing: 0 !important;
 }
-
 body:is(.page-admin,.page-search,.page-mplus) th {
   padding: 10px 12px !important;
   color: var(--tube-muted) !important;
   background: #0d0d0d !important;
   border-bottom: 1px solid var(--tube-line) !important;
-  font-size: 10px !important;
+  font-size: var(--sv-min-text) !important;
   letter-spacing: 0.04em !important;
 }
-
 body:is(.page-admin,.page-search,.page-mplus) td {
   padding: 10px 12px !important;
   color: var(--tube-text-2) !important;
@@ -8018,35 +4830,14 @@ body:is(.page-admin,.page-search,.page-mplus) td {
   border-bottom: 1px solid var(--tube-line-soft) !important;
   border-radius: 0 !important;
 }
-
-body.page-files .upload-dropzone {
-  min-height: 150px !important;
-  border: 1px dashed #383838 !important;
-  border-radius: 9px !important;
-  background: #0d0d0d !important;
-}
-
-body.page-files .files-grid {
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
-  gap: 14px !important;
-}
-
-body.page-files .file-card {
-  padding: 16px !important;
-}
-
 /* Login */
 body.page-login {
   min-height: 100vh !important;
   overflow: auto !important;
-  color: var(--tube-text) !important;
-  background: var(--tube-bg) !important;
 }
-
 body.page-login .inferno-stage {
   display: none !important;
 }
-
 body.page-login .login-shell {
   width: min(100%, 920px) !important;
   min-height: 100vh !important;
@@ -8057,164 +4848,91 @@ body.page-login .login-shell {
   gap: 64px !important;
   align-items: center !important;
 }
-
 body.page-login .eyebrow {
-  color: var(--tube-accent) !important;
-  font-size: 10px !important;
-  font-weight: 850 !important;
+  font-size: var(--sv-min-text) !important;
   letter-spacing: 0.1em !important;
 }
-
 body.page-login h1 {
   margin: 12px 0 18px !important;
-  color: var(--tube-text) !important;
   font-size: clamp(42px, 7vw, 72px) !important;
   line-height: 0.95 !important;
   letter-spacing: -0.065em !important;
   text-shadow: none !important;
 }
-
 body.page-login h1::after {
   display: none !important;
 }
-
 body.page-login .subtitle {
   max-width: 520px !important;
-  color: var(--tube-muted) !important;
-  font-size: 14px !important;
+  font-size: var(--sv-text-md) !important;
   line-height: 1.7 !important;
 }
-
 body.page-login .login-panel {
   padding: 28px !important;
-  border: 1px solid var(--tube-line) !important;
-  border-radius: var(--tube-radius) !important;
-  background: var(--tube-surface) !important;
-  box-shadow: none !important;
 }
-
 body.page-login .panel-glow {
   display: none !important;
 }
-
 body.page-login .login-form label {
-  color: var(--tube-text-2) !important;
-  font-size: 11px !important;
+  font-size: var(--sv-min-text) !important;
 }
-
 body.page-login input {
   min-height: 44px !important;
-  border: 1px solid var(--tube-line) !important;
-  border-radius: 8px !important;
-  color: var(--tube-text) !important;
-  background: #0b0b0b !important;
-}
-
-body.page-login input:focus {
-  border-color: rgba(242, 229, 141, 0.7) !important;
-  box-shadow: 0 0 0 3px rgba(242, 229, 141, 0.08) !important;
 }
-
-body.page-login button {
+body.page-login button:where(:not(.sv-btn)) {
   min-height: 44px !important;
   border: 1px solid var(--tube-accent) !important;
-  border-radius: 8px !important;
+  border-radius: var(--nebula-radius-sm) !important;
   color: #11100a !important;
   background: var(--tube-accent) !important;
   box-shadow: none !important;
 }
-
 /* Existing dedicated mobile templates */
 body:is(.page-mobile-index,.page-mobile-streamer,.page-mobile-player) {
   color: var(--tube-text) !important;
   background: var(--tube-bg) !important;
   font-family: Inter, "Sora", system-ui, sans-serif !important;
 }
-
 body:is(.page-mobile-index,.page-mobile-streamer) .header {
   min-height: 58px !important;
   background: #080808 !important;
   border-bottom: 1px solid var(--tube-line-soft) !important;
 }
-
 body:is(.page-mobile-index,.page-mobile-streamer) :is(.section,.controls,.card,.video-card,.tab) {
   border-color: var(--tube-line-soft) !important;
-  border-radius: 9px !important;
+  border-radius: var(--nebula-radius-sm) !important;
   background: var(--tube-surface) !important;
   box-shadow: none !important;
 }
-
 body.page-mobile-index .nav {
   height: 62px !important;
   background: rgba(7, 7, 7, 0.98) !important;
   border-top: 1px solid var(--tube-line) !important;
 }
-
 body.page-mobile-index .nav a {
   color: var(--tube-muted) !important;
 }
-
 body.page-mobile-index .nav a.active {
   color: var(--tube-accent) !important;
 }
-
-body.page-mobile-streamer .thumb-area {
-  border-radius: 8px !important;
-  overflow: hidden !important;
-}
-
 body.page-mobile-player .video-container {
   background: #000 !important;
 }
-
 body.page-mobile-player .chat-container {
   background: var(--tube-surface) !important;
   border-color: var(--tube-line) !important;
 }
-
 @media (max-width: 1180px) {
-  body.page-index .stats-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
-  }
-
   body:is(.page-vod,.page-live) .content {
     grid-template-columns: minmax(0, 1fr) 290px !important;
   }
 }
-
 @media (max-width: 920px) {
-  body:is(
-    .page-index,
-    .page-channels,
-    .page-streamer,
-    .page-vod,
-    .page-live,
-    .page-admin,
-    .page-mail,
-    .page-files,
-    .page-search,
-    .page-discord-tool,
-    .page-mplus,
-    .page-twitch-live
-  ) {
+  body:is( .page-index, .page-channels, .page-streamer, .page-vod, .page-live, .page-admin, .page-mail, .page-files, .page-search, .page-discord-tool, .page-mplus, .page-twitch-live ) {
     display: block !important;
     padding-bottom: 68px !important;
   }
-
-  body:is(
-    .page-index,
-    .page-channels,
-    .page-streamer,
-    .page-vod,
-    .page-live,
-    .page-admin,
-    .page-mail,
-    .page-files,
-    .page-search,
-    .page-discord-tool,
-    .page-mplus,
-    .page-twitch-live
-  ) .sidebar {
+  body:is( .page-index, .page-channels, .page-streamer, .page-vod, .page-live, .page-admin, .page-mail, .page-files, .page-search, .page-discord-tool, .page-mplus, .page-twitch-live ) .sidebar {
     position: fixed !important;
     inset: auto 0 0 0 !important;
     z-index: 100 !important;
@@ -8226,38 +4944,10 @@ body.page-mobile-player .chat-container {
     border-top: 1px solid var(--tube-line) !important;
     background: rgba(7, 7, 7, 0.98) !important;
   }
-
-  body:is(
-    .page-index,
-    .page-channels,
-    .page-streamer,
-    .page-vod,
-    .page-live,
-    .page-admin,
-    .page-mail,
-    .page-files,
-    .page-search,
-    .page-discord-tool,
-    .page-mplus,
-    .page-twitch-live
-  ) .brand {
+  body:is( .page-index, .page-channels, .page-streamer, .page-vod, .page-live, .page-admin, .page-mail, .page-files, .page-search, .page-discord-tool, .page-mplus, .page-twitch-live ) .brand {
     display: none !important;
   }
-
-  body:is(
-    .page-index,
-    .page-channels,
-    .page-streamer,
-    .page-vod,
-    .page-live,
-    .page-admin,
-    .page-mail,
-    .page-files,
-    .page-search,
-    .page-discord-tool,
-    .page-mplus,
-    .page-twitch-live
-  ) nav {
+  body:is( .page-index, .page-channels, .page-streamer, .page-vod, .page-live, .page-admin, .page-mail, .page-files, .page-search, .page-discord-tool, .page-mplus, .page-twitch-live ) nav {
     min-height: 0 !important;
     height: 52px !important;
     padding: 0 !important;
@@ -8267,136 +4957,48 @@ body.page-mobile-player .chat-container {
     gap: 4px !important;
     overflow-x: auto !important;
   }
-
-  body:is(
-    .page-index,
-    .page-channels,
-    .page-streamer,
-    .page-vod,
-    .page-live,
-    .page-admin,
-    .page-mail,
-    .page-files,
-    .page-search,
-    .page-discord-tool,
-    .page-mplus,
-    .page-twitch-live
-  ) .nav-item {
-    width: 42px !important;
-    min-width: 42px !important;
-    height: 42px !important;
-    min-height: 42px !important;
-  }
-
-  .nav-logout-form {
-    width: 42px !important;
-    margin: 0 !important;
-  }
-
-  body:is(
-    .page-index,
-    .page-channels,
-    .page-streamer,
-    .page-vod,
-    .page-live,
-    .page-admin,
-    .page-mail,
-    .page-files,
-    .page-search,
-    .page-discord-tool,
-    .page-mplus,
-    .page-twitch-live
-  ) .main {
+  body:is( .page-index, .page-channels, .page-streamer, .page-vod, .page-live, .page-admin, .page-mail, .page-files, .page-search, .page-discord-tool, .page-mplus, .page-twitch-live ) .main {
     width: 100% !important;
     padding: 0 16px 24px !important;
   }
-
-  body:is(
-    .page-index,
-    .page-channels,
-    .page-streamer,
-    .page-admin,
-    .page-mail,
-    .page-files,
-    .page-search,
-    .page-discord-tool,
-    .page-mplus,
-    .page-twitch-live
-  ) .main > .header {
+  body:is( .page-index, .page-channels, .page-streamer, .page-admin, .page-mail, .page-files, .page-search, .page-discord-tool, .page-mplus, .page-twitch-live ) .main > .header {
     min-height: 66px !important;
     margin: 0 -16px 18px !important;
     padding: 10px 16px !important;
   }
-
-  body.page-vod .vod-hero,
   body.page-live .live-hero {
     min-height: 66px !important;
     margin: 0 -16px 14px !important;
     padding: 10px 16px !important;
   }
-
-  body.page-vod .vod-back-link,
-  body.page-live .live-back-link,
-  body.page-vod .vod-filename {
+  body.page-live .live-back-link {
     display: none !important;
   }
-
   body:is(.page-vod,.page-live) .content {
     display: flex !important;
     flex-direction: column !important;
     gap: 12px !important;
   }
-
   body:is(.page-vod,.page-live) .chat-panel {
     position: static !important;
     height: 420px !important;
     min-height: 360px !important;
   }
-
   body.page-login .login-shell {
     grid-template-columns: 1fr !important;
     gap: 30px !important;
   }
-}
-
-@media (max-width: 640px) {
-  body.page-index .stats-grid {
-    grid-template-columns: 1fr !important;
-  }
-
-  body.page-index .streamer-row {
-    grid-template-columns: minmax(0, 1fr) auto !important;
-  }
-
-  body.page-index .streamer-cell {
-    display: none !important;
-  }
-
-  body.page-index .streamer-actions {
-    width: auto !important;
-  }
-
-  body.page-index .streamer-actions .action-btn:not(.primary):not(.danger) {
-    display: none !important;
-  }
-
-  body.page-streamer .video-grid {
-    grid-template-columns: 1fr !important;
+}
+@media (max-width: 640px) {
+  body.page-index .streamer-row {
+    grid-template-columns: minmax(0, 1fr) auto !important;
   }
-
   body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-mail,.page-files,.page-search,.page-mplus) .page-title {
-    font-size: 19px !important;
+    font-size: var(--sv-text-lg) !important;
   }
-
-  body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-mail,.page-files,.page-search,.page-mplus) .header-actions {
-    display: none !important;
-  }
-
-  body.page-vod .vod-header-actions .vod-icon-btn,
   body.page-live .live-header-actions .studio-btn {
     display: none !important;
   }
-
   body:is(.page-vod,.page-live) .player-wrapper {
     margin: 0 -16px !important;
     width: calc(100% + 32px) !important;
@@ -8404,11 +5006,9 @@ body.page-mobile-player .chat-container {
     border-left: 0 !important;
     border-radius: 0 !important;
   }
-
   body.page-login .login-copy {
     display: none !important;
   }
-
   body.page-login .login-shell {
     width: 100% !important;
     min-height: 100vh !important;
@@ -8416,46 +5016,12 @@ body.page-mobile-player .chat-container {
     align-content: center !important;
   }
 }
-
 /* Navigation and player corrections - 2026-06-07 */
 @media (min-width: 921px) {
-  :root {
-    --tube-rail: 196px;
-  }
-
-  body:is(
-    .page-index,
-    .page-channels,
-    .page-streamer,
-    .page-vod,
-    .page-live,
-    .page-admin,
-    .page-mail,
-    .page-files,
-    .page-search,
-    .page-discord-tool,
-    .page-mplus,
-    .page-twitch-live,
-    .page-twitch-watch
-  ) .sidebar {
+  body:is( .page-index, .page-channels, .page-streamer, .page-vod, .page-live, .page-admin, .page-mail, .page-files, .page-search, .page-discord-tool, .page-mplus, .page-twitch-live, .page-twitch-watch ) .sidebar {
     padding: 0 12px 16px !important;
   }
-
-  body:is(
-    .page-index,
-    .page-channels,
-    .page-streamer,
-    .page-vod,
-    .page-live,
-    .page-admin,
-    .page-mail,
-    .page-files,
-    .page-search,
-    .page-discord-tool,
-    .page-mplus,
-    .page-twitch-live,
-    .page-twitch-watch
-  ) .brand {
+  body:is( .page-index, .page-channels, .page-streamer, .page-vod, .page-live, .page-admin, .page-mail, .page-files, .page-search, .page-discord-tool, .page-mplus, .page-twitch-live, .page-twitch-watch ) .brand {
     width: 100% !important;
     min-height: 68px !important;
     display: flex !important;
@@ -8463,202 +5029,23 @@ body.page-mobile-player .chat-container {
     gap: 10px !important;
     padding: 0 8px !important;
   }
-
-  body:is(
-    .page-index,
-    .page-channels,
-    .page-streamer,
-    .page-vod,
-    .page-live,
-    .page-admin,
-    .page-mail,
-    .page-files,
-    .page-search,
-    .page-discord-tool,
-    .page-mplus,
-    .page-twitch-live,
-    .page-twitch-watch
-  ) .brand::before {
+  body:is( .page-index, .page-channels, .page-streamer, .page-vod, .page-live, .page-admin, .page-mail, .page-files, .page-search, .page-discord-tool, .page-mplus, .page-twitch-live, .page-twitch-watch ) .brand::before {
     flex: 0 0 32px !important;
     width: 32px !important;
     height: 32px !important;
   }
-
-  body:is(
-    .page-index,
-    .page-channels,
-    .page-streamer,
-    .page-vod,
-    .page-live,
-    .page-admin,
-    .page-mail,
-    .page-files,
-    .page-search,
-    .page-discord-tool,
-    .page-mplus,
-    .page-twitch-live,
-    .page-twitch-watch
-  ) .brand::after {
+  body:is( .page-index, .page-channels, .page-streamer, .page-vod, .page-live, .page-admin, .page-mail, .page-files, .page-search, .page-discord-tool, .page-mplus, .page-twitch-live, .page-twitch-watch ) .brand::after {
     content: "StreamVault" !important;
     display: block !important;
     color: var(--tube-text) !important;
-    font-size: 13px !important;
+    font-size: var(--sv-text-sm) !important;
     font-weight: 850 !important;
     letter-spacing: -0.02em !important;
   }
-
-  body:is(
-    .page-index,
-    .page-channels,
-    .page-streamer,
-    .page-vod,
-    .page-live,
-    .page-admin,
-    .page-mail,
-    .page-files,
-    .page-search,
-    .page-discord-tool,
-    .page-mplus,
-    .page-twitch-live,
-    .page-twitch-watch
-  ) nav {
+  body:is( .page-index, .page-channels, .page-streamer, .page-vod, .page-live, .page-admin, .page-mail, .page-files, .page-search, .page-discord-tool, .page-mplus, .page-twitch-live, .page-twitch-watch ) nav {
     align-items: stretch !important;
   }
-
-  body:is(
-    .page-index,
-    .page-channels,
-    .page-streamer,
-    .page-vod,
-    .page-live,
-    .page-admin,
-    .page-mail,
-    .page-files,
-    .page-search,
-    .page-discord-tool,
-    .page-mplus,
-    .page-twitch-live,
-    .page-twitch-watch
-  ) .nav-item {
-    width: 100% !important;
-    min-width: 0 !important;
-    grid-template-columns: 22px minmax(0, 1fr) !important;
-    justify-content: start !important;
-    column-gap: 12px !important;
-    padding: 0 11px !important;
-  }
-
-  body:is(
-    .page-index,
-    .page-channels,
-    .page-streamer,
-    .page-vod,
-    .page-live,
-    .page-admin,
-    .page-mail,
-    .page-files,
-    .page-search,
-    .page-discord-tool,
-    .page-mplus,
-    .page-twitch-live,
-    .page-twitch-watch
-  ) .nav-item::after {
-    content: "Bereich" !important;
-    overflow: hidden !important;
-    color: currentColor !important;
-    font-size: 12px !important;
-    font-weight: 700 !important;
-    line-height: 1 !important;
-    text-align: left !important;
-    text-overflow: ellipsis !important;
-    white-space: nowrap !important;
-  }
-
-  .nav-item[href="/"]::after,
-  .nav-item[href$="/"]::after {
-    content: "Übersicht" !important;
-  }
-
-  .nav-item[href="/live"]::after,
-  .nav-item[href$="/live"]::after {
-    content: "Live" !important;
-  }
-
-  .nav-item[href*="/admin/stalk"]::after {
-    content: "Stalk" !important;
-  }
-
-  .nav-item[href*="/mplus"]::after {
-    content: "M+ Analyse" !important;
-  }
-
-  .nav-item[href*="/channels"]::after {
-    content: "Streamer" !important;
-  }
-
-  .nav-item[href*="/files"]::after {
-    content: "Dateien" !important;
-  }
-
-  .nav-item[href*="/admin/chat"]::after {
-    content: "Chat-Tracker" !important;
-  }
-
-  .nav-item[href*="/admin/mail"]::after {
-    content: "Mail" !important;
-  }
-
-  .nav-item[href="/admin"]::after {
-    content: "Administration" !important;
-  }
-
-  .nav-item[href*="/admin/discord"]::after {
-    content: "Discord" !important;
-  }
-
-  .logout-button::after {
-    content: "Abmelden" !important;
-  }
-
-  .nav-logout-form {
-    width: 100% !important;
-  }
-}
-
-.nav-item[href*="/mplus"] {
-  --tube-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5.2 3.5 12 10.3l6.8-6.8 1.7 1.7-6.8 6.8 6.8 6.8-1.7 1.7-6.8-6.8-6.8 6.8-1.7-1.7 6.8-6.8-6.8-6.8 1.7-1.7Z'/%3E%3C/svg%3E");
-}
-
-.nav-item[href*="/channels"] {
-  --tube-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8.5 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm7-1a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM8.5 13C4.4 13 2 15.2 2 19v2h13v-2c0-3.8-2.4-6-6.5-6Zm7 .3c-.8 0-1.5.1-2.1.3 2.1 1.2 3.3 3.3 3.3 6.2V21H22v-1.7c0-3.8-2.4-6-6.5-6Z'/%3E%3C/svg%3E");
-}
-
-.nav-item[href*="/files"] {
-  --tube-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 5a2 2 0 0 1 2-2h5l2 2h7a2 2 0 0 1 2 2v11a3 3 0 0 1-3 3H5a2 2 0 0 1-2-2V5Zm2 3v11h13a1 1 0 0 0 1-1V8H5Z'/%3E%3C/svg%3E");
-}
-
-.nav-item[href*="/admin/chat"] {
-  --tube-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 3a7 7 0 1 0 4.3 12.5l4.1 4.1 1.4-1.4-4.1-4.1A7 7 0 0 0 10 3Zm0 2a5 5 0 1 1 0 10 5 5 0 0 1 0-10Z'/%3E%3C/svg%3E");
-}
-
-.nav-item[href*="/admin/mail"] {
-  --tube-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 4h18a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm0 3v11h18V7l-9 6L3 7Zm1.8-1L12 10.8 19.2 6H4.8Z'/%3E%3C/svg%3E");
 }
-
-.nav-item[href="/admin"] {
-  --tube-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m9.7 2 .6 2.2c.6-.2 1.1-.2 1.7-.2s1.1 0 1.7.2L14.3 2l3.5 1.5-1.1 2c.9.7 1.6 1.4 2.1 2.3l2.2-.6 1 3.7-2.2.6v1c0 .6 0 1.1-.2 1.7l2 1.1-1.9 3.3-2-1.1c-.7.8-1.5 1.4-2.4 1.9l.6 2.2-3.7 1-.6-2.2H12c-.6 0-1.1 0-1.7-.2l-1.1 2-3.3-1.9 1.1-2c-.8-.7-1.4-1.5-1.9-2.4l-2.2.6-1-3.7 2.2-.6V12c0-.6 0-1.1.2-1.7l-2-1.1 1.9-3.3 2 1.1c.7-.8 1.5-1.4 2.4-1.9L8 3l1.7-1Zm2.3 6a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z'/%3E%3C/svg%3E");
-}
-
-body.page-vod .vod-hero {
-  min-height: 58px !important;
-  margin-bottom: 14px !important;
-  padding-block: 10px !important;
-}
-
-body.page-vod .vod-header-main {
-  display: block !important;
-}
-
 body.page-vod .player-wrapper {
   position: relative !important;
   min-height: 0 !important;
@@ -8666,7 +5053,6 @@ body.page-vod .player-wrapper {
   aspect-ratio: 16 / 9 !important;
   contain: layout paint !important;
 }
-
 body.page-vod .player-wrapper video {
   position: absolute !important;
   inset: 0 !important;
@@ -8677,73 +5063,30 @@ body.page-vod .player-wrapper video {
   object-fit: contain !important;
   background: #000 !important;
 }
-
 body.page-vod .vod-details {
-  padding: 16px 18px !important;
-  display: flex !important;
-  align-items: flex-start !important;
-  justify-content: space-between !important;
-  gap: 24px !important;
   border: 1px solid var(--tube-line-soft) !important;
-  border-radius: var(--tube-radius) !important;
-  background: var(--tube-surface) !important;
-}
-
-body.page-vod .vod-details-main {
-  min-width: 0 !important;
 }
-
 body.page-vod .vod-display-title {
-  margin: 4px 0 7px !important;
-  overflow-wrap: anywhere !important;
-  color: var(--tube-text) !important;
-  font-size: 17px !important;
-  line-height: 1.35 !important;
-  font-weight: 800 !important;
   letter-spacing: -0.015em !important;
 }
-
 body.page-vod .vod-channel-link {
-  color: var(--tube-text-2) !important;
-  font-size: 12px !important;
-  font-weight: 700 !important;
   text-decoration: none !important;
 }
-
 body.page-vod .vod-channel-link:hover {
   color: var(--tube-accent) !important;
 }
-
 body.page-vod .vod-facts {
-  margin: 0 !important;
-  display: flex !important;
   flex: 0 0 auto !important;
-  flex-wrap: wrap !important;
-  gap: 18px !important;
-}
-
-body.page-vod .vod-facts div {
-  min-width: 74px !important;
 }
-
 body.page-vod .vod-facts dt {
-  margin-bottom: 4px !important;
-  color: var(--tube-muted) !important;
-  font-size: 9px !important;
   font-weight: 800 !important;
   letter-spacing: 0.06em !important;
   text-transform: uppercase !important;
 }
-
 body.page-vod .vod-facts dd {
-  margin: 0 !important;
-  color: var(--tube-text-2) !important;
-  font-size: 11px !important;
-  font-weight: 700 !important;
   font-variant-numeric: tabular-nums !important;
   white-space: nowrap !important;
 }
-
 body.page-vod .chat-panel {
   position: static !important;
   height: auto !important;
@@ -8751,152 +5094,57 @@ body.page-vod .chat-panel {
   max-height: calc(100vh - 102px) !important;
   align-self: stretch !important;
 }
-
 @media (max-width: 1180px) {
   body.page-vod .chat-panel {
     height: 380px !important;
     max-height: none !important;
   }
 }
-
 @media (max-width: 720px) {
   body.page-vod .vod-details {
     flex-direction: column !important;
     gap: 14px !important;
   }
-
   body.page-vod .vod-facts {
     width: 100% !important;
     display: grid !important;
     grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
     gap: 10px !important;
   }
-
   body.page-vod .vod-facts div {
     min-width: 0 !important;
   }
 }
-
 /* Compact icon-only navigation; M+ and Mail removed - 2026-06-07 */
 @media (min-width: 921px) {
   :root {
     --tube-rail: 76px;
   }
-
-  body:is(
-    .page-index,
-    .page-channels,
-    .page-streamer,
-    .page-vod,
-    .page-live,
-    .page-admin,
-    .page-files,
-    .page-search,
-    .page-discord-tool
-  ) .sidebar {
+  body:is( .page-index, .page-channels, .page-streamer, .page-vod, .page-live, .page-admin, .page-files, .page-search, .page-discord-tool ) .sidebar {
     width: var(--tube-rail) !important;
     flex-basis: var(--tube-rail) !important;
     padding: 0 10px 14px !important;
   }
-
-  body:is(
-    .page-index,
-    .page-channels,
-    .page-streamer,
-    .page-vod,
-    .page-live,
-    .page-admin,
-    .page-files,
-    .page-search,
-    .page-discord-tool
-  ) .brand {
+  body:is( .page-index, .page-channels, .page-streamer, .page-vod, .page-live, .page-admin, .page-files, .page-search, .page-discord-tool ) .brand {
     width: 56px !important;
     min-height: 74px !important;
     padding: 0 !important;
     display: grid !important;
     place-items: center !important;
   }
-
-  body:is(
-    .page-index,
-    .page-channels,
-    .page-streamer,
-    .page-vod,
-    .page-live,
-    .page-admin,
-    .page-files,
-    .page-search,
-    .page-discord-tool
-  ) .brand::before {
+  body:is( .page-index, .page-channels, .page-streamer, .page-vod, .page-live, .page-admin, .page-files, .page-search, .page-discord-tool ) .brand::before {
     flex: none !important;
     width: 34px !important;
     height: 34px !important;
   }
-
-  body:is(
-    .page-index,
-    .page-channels,
-    .page-streamer,
-    .page-vod,
-    .page-live,
-    .page-admin,
-    .page-files,
-    .page-search,
-    .page-discord-tool
-  ) .brand::after,
-  body:is(
-    .page-index,
-    .page-channels,
-    .page-streamer,
-    .page-vod,
-    .page-live,
-    .page-admin,
-    .page-files,
-    .page-search,
-    .page-discord-tool
-  ) .nav-item::after {
+  body:is( .page-index, .page-channels, .page-streamer, .page-vod, .page-live, .page-admin, .page-files, .page-search, .page-discord-tool ) .brand::after {
     content: none !important;
     display: none !important;
   }
-
-  body:is(
-    .page-index,
-    .page-channels,
-    .page-streamer,
-    .page-vod,
-    .page-live,
-    .page-admin,
-    .page-files,
-    .page-search,
-    .page-discord-tool
-  ) nav {
+  body:is( .page-index, .page-channels, .page-streamer, .page-vod, .page-live, .page-admin, .page-files, .page-search, .page-discord-tool ) nav {
     align-items: center !important;
   }
-
-  body:is(
-    .page-index,
-    .page-channels,
-    .page-streamer,
-    .page-vod,
-    .page-live,
-    .page-admin,
-    .page-files,
-    .page-search,
-    .page-discord-tool
-  ) .nav-item {
-    width: 44px !important;
-    min-width: 44px !important;
-    grid-template-columns: 1fr !important;
-    justify-content: center !important;
-    column-gap: 0 !important;
-    padding: 0 !important;
-  }
-
-  .nav-logout-form {
-    width: 44px !important;
-  }
 }
-
 /* Stable VOD viewport and distinct icon rail */
 @media (min-width: 921px) {
   body.page-vod .main-col {
@@ -8904,102 +5152,71 @@ body.page-vod .chat-panel {
     max-width: none !important;
     justify-self: stretch !important;
   }
-
   body.page-vod .player-wrapper {
     width: 100% !important;
     aspect-ratio: 16 / 9 !important;
   }
 }
-
 @media (min-width: 1900px) {
   body.page-vod .content {
-    grid-template-columns:
-      minmax(0, min(1440px, calc(177.78vh - 320px)))
+    grid-template-columns: minmax(0, min(1440px, calc(177.78vh - 320px)))
       minmax(360px, 400px) !important;
-    justify-content: center !important;
   }
 }
-
 /* Compact VOD controls below the player */
-body.page-vod .vod-library-nav {
-  --tube-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m10 6-6 6 6 6M4 12h16'/%3E%3C/svg%3E") !important;
-}
-
 body.page-vod .vod-file-actions {
-  display: flex !important;
   flex: 0 0 auto !important;
-  align-items: center !important;
-  gap: 7px !important;
 }
-
 body.page-vod .vod-file-action {
-  width: 38px !important;
-  min-width: 38px !important;
-  height: 38px !important;
-  min-height: 38px !important;
   padding: 0 !important;
   display: grid !important;
   place-items: center !important;
   overflow: hidden !important;
   border: 1px solid var(--tube-line) !important;
-  border-radius: 8px !important;
   color: var(--tube-text-2) !important;
-  background: var(--tube-surface-2) !important;
   text-decoration: none !important;
   box-shadow: none !important;
 }
-
 body.page-vod .vod-file-action::after {
   display: none !important;
 }
-
 body.page-vod .vod-file-action svg {
-  width: 19px !important;
-  height: 19px !important;
   fill: none !important;
   stroke: currentColor !important;
   stroke-width: 1.9 !important;
   stroke-linecap: round !important;
   stroke-linejoin: round !important;
 }
-
 body.page-vod .vod-file-action:hover {
   color: var(--tube-text) !important;
   border-color: #3a3a3a !important;
   background: var(--tube-surface-3) !important;
   transform: none !important;
 }
-
 body.page-vod .vod-file-action.is-loading {
   opacity: 0.55 !important;
 }
-
 body.page-vod .vod-file-action.is-success {
   color: #9ce8bf !important;
   border-color: rgba(91, 211, 154, 0.35) !important;
 }
-
 body.page-vod .vod-file-action.is-error {
   color: #ff9a9a !important;
   border-color: rgba(255, 106, 106, 0.35) !important;
 }
-
 @media (min-width: 921px) {
   body.page-vod .main {
     padding: 12px 18px 20px !important;
   }
-
   body.page-vod .content {
     padding: 0 !important;
     grid-template-columns: minmax(0, 1fr) minmax(340px, 400px) !important;
     gap: 12px !important;
     align-items: start !important;
   }
-
   body.page-vod .main-col {
     gap: 10px !important;
   }
-
   body.page-vod .vod-details {
     min-height: 76px !important;
     padding: 11px 14px !important;
@@ -9008,68 +5225,41 @@ body.page-vod .vod-file-action.is-error {
     align-items: center !important;
     gap: 18px !important;
   }
-
   body.page-vod .vod-display-title {
     margin: 2px 0 4px !important;
-    font-size: 15px !important;
+    font-size: var(--sv-text-md) !important;
   }
-
   body.page-vod .vod-facts {
     gap: 14px !important;
   }
-
-  body.page-vod .vod-tools-panel {
-    padding: 9px 12px !important;
-  }
-
-  body.page-vod .vod-tools-head {
-    min-height: 38px !important;
-  }
-
-  body.page-vod .vod-panel-subtitle {
-    display: none !important;
-  }
-
-  body.page-vod .vod-actions .btn,
-  body.page-vod .vod-actions button {
-    min-height: 34px !important;
-    padding: 6px 10px !important;
-  }
-
   body.page-vod .transcript-status-card[data-state="finished"],
   body.page-vod .transcript-status-card[data-state="idle"] {
     display: none !important;
   }
-
   body.page-vod .chat-panel {
     height: calc(100vh - 32px) !important;
     max-height: calc(100vh - 32px) !important;
   }
 }
-
 @media (min-width: 1900px) {
   body.page-vod .content {
     grid-template-columns: minmax(0, 1320px) minmax(360px, 400px) !important;
     justify-content: center !important;
   }
 }
-
 @media (max-width: 720px) {
   body.page-vod .vod-details {
     grid-template-columns: 1fr !important;
   }
-
   body.page-vod .vod-file-actions {
     justify-content: flex-start !important;
   }
 }
-
 /* Clean single-row VOD metadata and dense chat */
 body.page-vod .player-wrapper {
   border-color: rgba(255, 255, 255, 0.08) !important;
-  border-radius: 9px !important;
+  border-radius: var(--nebula-radius-sm) !important;
 }
-
 body.page-vod .vod-details {
   min-height: 0 !important;
   padding: 12px 16px !important;
@@ -9079,10 +5269,9 @@ body.page-vod .vod-details {
   justify-content: space-between !important;
   gap: 12px 20px !important;
   border-color: rgba(255, 255, 255, 0.07) !important;
-  border-radius: 8px !important;
+  border-radius: var(--nebula-radius-sm) !important;
   background: #0d0d0d !important;
 }
-
 body.page-vod .vod-details-main {
   min-width: 280px !important;
   flex: 1 1 360px !important;
@@ -9090,7 +5279,6 @@ body.page-vod .vod-details-main {
   flex-direction: column !important;
   gap: 3px !important;
 }
-
 body.page-vod .vod-details-side {
   display: flex !important;
   flex-direction: column !important;
@@ -9100,7 +5288,6 @@ body.page-vod .vod-details-side {
   flex: 0 1 auto !important;
   flex-shrink: 0 !important;
 }
-
 body.page-vod .vod-kicker {
   display: inline-flex !important;
   align-items: center !important;
@@ -9108,39 +5295,35 @@ body.page-vod .vod-kicker {
   white-space: nowrap !important;
   gap: 6px !important;
   margin: 0 0 2px !important;
-  font-size: 11px !important;
+  font-size: var(--sv-min-text) !important;
   font-weight: 750 !important;
   letter-spacing: 0.06em !important;
   text-transform: uppercase !important;
-  color: var(--tube-live, #ef4444) !important;
+  color: var(--tube-live) !important;
   line-height: 1.3 !important;
 }
-
 body.page-vod .vod-kicker .platform-badge {
   display: inline-flex !important;
   align-items: center !important;
   padding: 1px 6px !important;
-  font-size: 9px !important;
+  font-size: var(--sv-min-text) !important;
   line-height: 1.2 !important;
   margin: 0 !important;
   vertical-align: middle !important;
 }
-
 body.page-vod .vod-display-title {
   margin: 0 0 2px !important;
-  font-size: 17px !important;
+  font-size: var(--sv-text-base) !important;
   line-height: 1.35 !important;
   font-weight: 750 !important;
   color: #fff !important;
   overflow-wrap: break-word !important;
 }
-
 body.page-vod .vod-channel-link {
-  font-size: 12px !important;
+  font-size: var(--sv-text-xs) !important;
   font-weight: 650 !important;
-  color: var(--tube-text-2, #a1a1aa) !important;
+  color: var(--tube-text-2) !important;
 }
-
 body.page-vod .vod-facts {
   display: flex !important;
   flex-wrap: wrap !important;
@@ -9149,24 +5332,20 @@ body.page-vod .vod-facts {
   gap: 10px 16px !important;
   margin: 0 !important;
 }
-
 body.page-vod .vod-facts div {
   min-width: 58px !important;
 }
-
 body.page-vod .vod-facts dt {
   margin-bottom: 2px !important;
-  font-size: 9px !important;
-  color: var(--tube-muted, #71717a) !important;
+  font-size: var(--sv-min-text) !important;
+  color: var(--tube-muted) !important;
 }
-
 body.page-vod .vod-facts dd {
   margin: 0 !important;
-  font-size: 11px !important;
+  font-size: var(--sv-min-text) !important;
   font-weight: 650 !important;
-  color: var(--tube-text, #f4f4f5) !important;
+  color: var(--tube-text) !important;
 }
-
 body.page-vod .vod-file-actions {
   display: flex !important;
   flex-wrap: wrap !important;
@@ -9174,106 +5353,90 @@ body.page-vod .vod-file-actions {
   justify-content: flex-end !important;
   gap: 6px !important;
 }
-
 body.page-vod .vod-file-actions form {
   margin: 0 !important;
 }
-
 body:is(.page-vod, .page-live) .vod-inline-tool {
   min-height: 32px !important;
   padding: 0 10px !important;
   display: inline-flex !important;
   align-items: center !important;
   border: 1px solid transparent !important;
-  border-radius: 7px !important;
+  border-radius: var(--nebula-radius-sm) !important;
   color: var(--tube-text-2) !important;
   background: transparent !important;
-  font-size: 11px !important;
+  font-size: var(--sv-min-text) !important;
   line-height: 1 !important;
   font-weight: 700 !important;
   text-decoration: none !important;
   box-shadow: none !important;
 }
-
 body:is(.page-vod, .page-live) .vod-inline-tool::after {
   display: none !important;
 }
-
 body:is(.page-vod, .page-live) .vod-inline-tool:hover {
   border-color: var(--tube-line) !important;
   color: var(--tube-text) !important;
   background: var(--tube-surface-2) !important;
   transform: none !important;
 }
-
 body:is(.page-vod, .page-live) .vod-inline-tool-warning {
   color: #ffe082 !important;
   border-color: rgba(255, 224, 130, 0.22) !important;
   background: rgba(255, 224, 130, 0.06) !important;
 }
-
 body:is(.page-vod, .page-live) .vod-inline-tool-warning:hover {
   color: #fff3b0 !important;
   border-color: rgba(255, 224, 130, 0.36) !important;
   background: rgba(255, 224, 130, 0.1) !important;
 }
-
 body:is(.page-vod, .page-live) .vod-inline-tool:disabled {
   opacity: 0.55 !important;
   cursor: not-allowed !important;
 }
-
 body:is(.page-vod, .page-live) .vod-inline-tool:disabled:hover {
   color: #ffe082 !important;
   border-color: rgba(255, 224, 130, 0.22) !important;
   background: rgba(255, 224, 130, 0.06) !important;
 }
-
 body.page-vod .vod-file-action {
   width: 34px !important;
   min-width: 34px !important;
   height: 34px !important;
   min-height: 34px !important;
   border-color: rgba(255, 255, 255, 0.09) !important;
-  border-radius: 7px !important;
+  border-radius: var(--nebula-radius-sm) !important;
   background: transparent !important;
 }
-
 body.page-vod .vod-file-action svg {
   width: 17px !important;
   height: 17px !important;
 }
-
 body:is(.page-vod, .page-live).clip-overlay-open {
   overflow: hidden !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-flash {
   padding: 10px 12px !important;
   border: 1px solid rgba(255, 255, 255, 0.08) !important;
-  border-radius: 8px !important;
+  border-radius: var(--nebula-radius-sm) !important;
   color: var(--tube-text) !important;
   background: rgba(255, 255, 255, 0.035) !important;
-  font-size: 12px !important;
+  font-size: var(--sv-text-xs) !important;
   font-weight: 750 !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-flash.success {
   color: #b7f3cf !important;
   border-color: rgba(91, 211, 154, 0.28) !important;
   background: rgba(91, 211, 154, 0.08) !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-flash.error {
   color: #ffb6b6 !important;
   border-color: rgba(255, 106, 106, 0.28) !important;
   background: rgba(255, 106, 106, 0.08) !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-overlay[hidden] {
   display: none !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-overlay {
   position: fixed !important;
   inset: 0 !important;
@@ -9282,7 +5445,6 @@ body:is(.page-vod, .page-live) .vod-clip-overlay {
   grid-template-columns: minmax(0, 1fr) minmax(460px, 42vw) !important;
   pointer-events: none !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-scrim {
   grid-column: 1 / -1 !important;
   grid-row: 1 !important;
@@ -9290,7 +5452,6 @@ body:is(.page-vod, .page-live) .vod-clip-scrim {
   backdrop-filter: blur(2px) !important;
   pointer-events: auto !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-panel {
   grid-column: 2 !important;
   grid-row: 1 !important;
@@ -9308,7 +5469,6 @@ body:is(.page-vod, .page-live) .vod-clip-panel {
   box-shadow: -18px 0 52px rgba(0, 0, 0, 0.46) !important;
   pointer-events: auto !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-head {
   min-height: 40px !important;
   display: flex !important;
@@ -9316,29 +5476,25 @@ body:is(.page-vod, .page-live) .vod-clip-head {
   justify-content: space-between !important;
   gap: 12px !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-kicker {
   margin-bottom: 2px !important;
   color: var(--tube-muted) !important;
-  font-size: 10px !important;
+  font-size: var(--sv-min-text) !important;
   font-weight: 800 !important;
   letter-spacing: 0 !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-head h2 {
   margin: 0 !important;
   color: #fff !important;
-  font-size: 18px !important;
+  font-size: var(--sv-text-lg) !important;
   line-height: 1.15 !important;
   font-weight: 850 !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-head-actions {
   display: flex !important;
   align-items: center !important;
   gap: 6px !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-icon-button,
 body:is(.page-vod, .page-live) .vod-clip-icon-link {
   width: 34px !important;
@@ -9347,22 +5503,19 @@ body:is(.page-vod, .page-live) .vod-clip-icon-link {
   display: grid !important;
   place-items: center !important;
   border: 1px solid rgba(255, 255, 255, 0.08) !important;
-  border-radius: 8px !important;
+  border-radius: var(--nebula-radius-sm) !important;
   color: var(--tube-text-2) !important;
   background: rgba(255, 255, 255, 0.04) !important;
   text-decoration: none !important;
   cursor: pointer !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-icon-button:hover,
 body:is(.page-vod, .page-live) .vod-clip-icon-link:hover,
 body:is(.page-vod, .page-live) .vod-clip-icon-button:focus-visible,
 body:is(.page-vod, .page-live) .vod-clip-icon-link:focus-visible {
   color: #fff !important;
   border-color: rgba(242, 229, 141, 0.36) !important;
-  outline: none !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-icon-button svg,
 body:is(.page-vod, .page-live) .vod-clip-icon-link svg {
   width: 18px !important;
@@ -9373,7 +5526,6 @@ body:is(.page-vod, .page-live) .vod-clip-icon-link svg {
   stroke-linecap: round !important;
   stroke-linejoin: round !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-preview-shell {
   position: relative !important;
   aspect-ratio: 16 / 9 !important;
@@ -9381,10 +5533,9 @@ body:is(.page-vod, .page-live) .vod-clip-preview-shell {
   flex: 0 0 auto !important;
   overflow: hidden !important;
   border: 1px solid rgba(255, 255, 255, 0.08) !important;
-  border-radius: 8px !important;
+  border-radius: var(--nebula-radius-sm) !important;
   background: #000 !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-preview-shell video {
   position: absolute !important;
   inset: 0 !important;
@@ -9393,7 +5544,6 @@ body:is(.page-vod, .page-live) .vod-clip-preview-shell video {
   object-fit: contain !important;
   background: #000 !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-preview-toggle {
   position: absolute !important;
   right: 10px !important;
@@ -9403,22 +5553,18 @@ body:is(.page-vod, .page-live) .vod-clip-preview-toggle {
   display: grid !important;
   place-items: center !important;
   border: 1px solid rgba(255, 255, 255, 0.12) !important;
-  border-radius: 8px !important;
+  border-radius: var(--nebula-radius-sm) !important;
   color: #fff !important;
   background: rgba(0, 0, 0, 0.64) !important;
   cursor: pointer !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-preview-toggle svg {
-  width: 18px !important;
-  height: 18px !important;
   fill: none !important;
   stroke: currentColor !important;
   stroke-width: 2.2 !important;
   stroke-linecap: round !important;
   stroke-linejoin: round !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-form {
   min-height: 0 !important;
   display: flex !important;
@@ -9426,14 +5572,12 @@ body:is(.page-vod, .page-live) .vod-clip-form {
   flex-direction: column !important;
   gap: 14px !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-timebar {
   padding: 12px !important;
   border: 1px solid rgba(255, 255, 255, 0.08) !important;
-  border-radius: 8px !important;
+  border-radius: var(--nebula-radius-sm) !important;
   background: rgba(255, 255, 255, 0.035) !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-time-row {
   min-height: 20px !important;
   display: grid !important;
@@ -9441,45 +5585,38 @@ body:is(.page-vod, .page-live) .vod-clip-time-row {
   align-items: center !important;
   gap: 10px !important;
   color: var(--tube-text-2) !important;
-  font-size: 12px !important;
+  font-size: var(--sv-text-xs) !important;
   font-weight: 750 !important;
   font-variant-numeric: tabular-nums !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-time-row strong {
-  color: #f2e58d !important;
-  font-size: 12px !important;
+  color: var(--nebula-accent-text) !important;
+  font-size: var(--sv-text-xs) !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-time-row span:last-child {
   text-align: right !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-range {
   position: relative !important;
   height: 42px !important;
   margin-top: 8px !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-range-base,
 body:is(.page-vod, .page-live) .vod-clip-range-fill {
   position: absolute !important;
   top: 17px !important;
   height: 10px !important;
-  border-radius: 999px !important;
+  border-radius: var(--nebula-radius-full) !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-range-base {
   left: 0 !important;
   right: 0 !important;
   background: #242830 !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-range-fill {
-  background: linear-gradient(90deg, #f2e58d, #5bd39a) !important;
+  background: linear-gradient(90deg, var(--nebula-accent-text), #5bd39a) !important;
   box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-range input[type="range"] {
   position: absolute !important;
   inset: 0 !important;
@@ -9491,47 +5628,41 @@ body:is(.page-vod, .page-live) .vod-clip-range input[type="range"] {
   background: transparent !important;
   pointer-events: none !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-range input[type="range"]::-webkit-slider-runnable-track {
   height: 42px !important;
   background: transparent !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-range input[type="range"]::-webkit-slider-thumb {
   width: 18px !important;
   height: 28px !important;
   margin-top: 7px !important;
   border: 2px solid #111318 !important;
-  border-radius: 7px !important;
-  background: #f2e58d !important;
+  border-radius: var(--nebula-radius-sm) !important;
+  background: var(--nebula-accent-text) !important;
   box-shadow: 0 7px 18px rgba(0, 0, 0, 0.36) !important;
   cursor: ew-resize !important;
   pointer-events: auto !important;
   -webkit-appearance: none !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-range input[type="range"]::-moz-range-track {
   height: 42px !important;
   background: transparent !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-range input[type="range"]::-moz-range-thumb {
   width: 18px !important;
   height: 28px !important;
   border: 2px solid #111318 !important;
-  border-radius: 7px !important;
-  background: #f2e58d !important;
+  border-radius: var(--nebula-radius-sm) !important;
+  background: var(--nebula-accent-text) !important;
   box-shadow: 0 7px 18px rgba(0, 0, 0, 0.36) !important;
   cursor: ew-resize !important;
   pointer-events: auto !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-nudge-grid {
   display: grid !important;
   grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
   gap: 10px !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-nudge-group {
   min-width: 0 !important;
   display: grid !important;
@@ -9539,123 +5670,103 @@ body:is(.page-vod, .page-live) .vod-clip-nudge-group {
   align-items: center !important;
   gap: 6px !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-nudge-group span {
   color: var(--tube-muted) !important;
-  font-size: 11px !important;
+  font-size: var(--sv-min-text) !important;
   font-weight: 850 !important;
 }
-
-body:is(.page-vod, .page-live) .vod-clip-nudge-group button,
+body:is(.page-vod, .page-live) .vod-clip-nudge-group button:where(:not(.sv-btn)),
 body:is(.page-vod, .page-live) .vod-clip-secondary,
 body:is(.page-vod, .page-live) .vod-clip-primary {
   min-height: 34px !important;
   border: 1px solid rgba(255, 255, 255, 0.08) !important;
-  border-radius: 8px !important;
+  border-radius: var(--nebula-radius-sm) !important;
   color: var(--tube-text) !important;
   background: rgba(255, 255, 255, 0.055) !important;
-  font-size: 12px !important;
+  font-size: var(--sv-text-xs) !important;
   font-weight: 800 !important;
   cursor: pointer !important;
 }
-
-body:is(.page-vod, .page-live) .vod-clip-nudge-group button:hover,
+body:is(.page-vod, .page-live) .vod-clip-nudge-group button:where(:not(.sv-btn)):hover,
 body:is(.page-vod, .page-live) .vod-clip-secondary:hover {
   border-color: rgba(242, 229, 141, 0.28) !important;
   background: rgba(255, 255, 255, 0.08) !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-title-field {
   display: grid !important;
   gap: 7px !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-title-field span {
   color: var(--tube-muted) !important;
-  font-size: 11px !important;
+  font-size: var(--sv-min-text) !important;
   font-weight: 850 !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-title-field input {
   width: 100% !important;
   min-height: 42px !important;
   padding: 0 12px !important;
   border: 1px solid rgba(255, 255, 255, 0.12) !important;
-  border-radius: 8px !important;
+  border-radius: var(--nebula-radius-sm) !important;
   color: #fff !important;
   background: #0d1014 !important;
-  font-size: 14px !important;
+  font-size: var(--sv-text-md) !important;
   font-weight: 650 !important;
-  outline: none !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-title-field input:focus {
   border-color: rgba(242, 229, 141, 0.5) !important;
   box-shadow: 0 0 0 3px rgba(242, 229, 141, 0.12) !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-status {
   min-height: 20px !important;
   color: var(--tube-text-2) !important;
-  font-size: 12px !important;
+  font-size: var(--sv-text-xs) !important;
   font-weight: 750 !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-status[data-state="pending"] {
-  color: #f2e58d !important;
+  color: var(--nebula-accent-text) !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-status[data-state="success"] {
   color: #9ce8bf !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-status[data-state="error"] {
   color: #ffaaa5 !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-result {
   padding: 10px 12px !important;
   border: 1px solid rgba(91, 211, 154, 0.24) !important;
-  border-radius: 8px !important;
+  border-radius: var(--nebula-radius-sm) !important;
   color: #b7f3cf !important;
   background: rgba(91, 211, 154, 0.07) !important;
-  font-size: 12px !important;
+  font-size: var(--sv-text-xs) !important;
   font-weight: 800 !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-result a {
-  color: #f2e58d !important;
+  color: var(--nebula-accent-text) !important;
   text-decoration: none !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-actions {
   margin-top: auto !important;
   display: flex !important;
   justify-content: flex-end !important;
   gap: 10px !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-secondary,
 body:is(.page-vod, .page-live) .vod-clip-primary {
   min-width: 124px !important;
   padding: 0 14px !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-primary {
   color: #111318 !important;
   border-color: rgba(242, 229, 141, 0.68) !important;
-  background: #f2e58d !important;
+  background: var(--nebula-accent-text) !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-primary:hover {
   background: #fff1a6 !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-primary:disabled {
   opacity: 0.45 !important;
   cursor: not-allowed !important;
 }
-
 .clip-toast {
   position: fixed;
   top: 18px;
@@ -9665,49 +5776,52 @@ body:is(.page-vod, .page-live) .vod-clip-primary:disabled {
   min-width: 220px;
   max-width: min(420px, calc(100vw - 24px));
   padding: 10px 14px;
-  border-radius: 10px;
+  border-radius: var(--nebula-radius-sm);
   border: 1px solid rgba(255, 255, 255, 0.12);
   background: rgba(12, 12, 14, 0.94);
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
-  color: #f4f4f5;
+  color: var(--nebula-text-main);
   text-align: center;
   pointer-events: auto;
 }
-.clip-toast[hidden] { display: none !important; }
+.clip-toast[hidden] {
+  display: none !important;
+}
 .clip-toast-kicker {
-  font-size: 11px;
+  font-size: var(--sv-min-text);
   font-weight: 700;
   letter-spacing: 0.08em;
-  color: #f2e58d;
+  color: var(--nebula-accent-text);
+}
+.clip-toast[data-state="success"] .clip-toast-kicker {
+  color: #86efac;
+}
+.clip-toast[data-state="error"] .clip-toast-kicker {
+  color: #fca5a5;
 }
-.clip-toast[data-state="success"] .clip-toast-kicker { color: #86efac; }
-.clip-toast[data-state="error"] .clip-toast-kicker { color: #fca5a5; }
 .clip-toast-msg {
   margin-top: 4px;
-  font-size: 13px;
+  font-size: var(--sv-text-sm);
   color: rgba(244, 244, 245, 0.86);
 }
 .clip-toast-link {
   display: inline-block;
   margin-top: 6px;
-  font-size: 12px;
+  font-size: var(--sv-text-xs);
   font-weight: 600;
-  color: #f2e58d;
+  color: var(--nebula-accent-text);
 }
 #btnInstantClip {
   font-weight: 700;
 }
-
 @media (max-width: 920px) {
   body:is(.page-vod, .page-live) .vod-clip-overlay {
     display: block !important;
     overflow: hidden !important;
   }
-
   body:is(.page-vod, .page-live) .vod-clip-scrim {
     display: none !important;
   }
-
   body:is(.page-vod, .page-live) .vod-clip-panel {
     width: 100% !important;
     height: 100vh !important;
@@ -9715,192 +5829,149 @@ body:is(.page-vod, .page-live) .vod-clip-primary:disabled {
     padding: 12px !important;
     border-left: 0 !important;
   }
-
   body:is(.page-vod, .page-live) .vod-clip-nudge-grid {
     grid-template-columns: 1fr !important;
   }
-
   body:is(.page-vod, .page-live) .vod-clip-nudge-group {
     grid-template-columns: 44px repeat(3, minmax(0, 1fr)) !important;
   }
-
   body:is(.page-vod, .page-live) .vod-clip-actions {
     display: grid !important;
     grid-template-columns: 1fr 1fr !important;
   }
-
   body:is(.page-vod, .page-live) .vod-clip-secondary,
   body:is(.page-vod, .page-live) .vod-clip-primary {
     min-width: 0 !important;
     width: 100% !important;
   }
 }
-
 @media (max-height: 700px) and (min-width: 921px) {
   body:is(.page-vod, .page-live) .vod-clip-panel {
     overflow-y: auto !important;
   }
-
   body:is(.page-vod, .page-live) .vod-clip-preview-shell {
     max-height: 38vh !important;
   }
 }
-
 body.page-vod .chat-panel {
   border-color: rgba(255, 255, 255, 0.08) !important;
-  border-radius: 9px !important;
+  border-radius: var(--nebula-radius-sm) !important;
   background: #0d0d0d !important;
 }
-
 body.page-vod .chat-header {
   min-height: 48px !important;
   padding: 0 13px !important;
   background: #0d0d0d !important;
 }
-
 body.page-vod .chat-list {
   padding: 7px 10px 12px !important;
   background: #0d0d0d !important;
-  font-size: 12px !important;
+  font-size: var(--sv-text-xs) !important;
   line-height: 1.25 !important;
 }
-
 body.page-vod .chat-line {
   grid-template-columns: 56px minmax(0, 1fr) !important;
   column-gap: 6px !important;
   margin: 0 !important;
   padding: 3px 2px !important;
-  border-radius: 4px !important;
+  border-radius: var(--nebula-radius-xs) !important;
   align-items: start !important;
 }
-
 body.page-vod .chat-line + .chat-line {
   margin-top: 1px !important;
 }
-
 body.page-vod .chat-time {
   padding-top: 1px !important;
-  font-size: 10px !important;
+  font-size: var(--sv-min-text) !important;
   line-height: 1.25 !important;
   font-variant-numeric: tabular-nums !important;
   white-space: nowrap !important;
 }
-
 body.page-mobile-player .t {
   color: var(--tube-muted) !important;
   font-variant-numeric: tabular-nums !important;
   white-space: nowrap !important;
 }
-
 body.page-vod .chat-text,
 body.page-vod .chat-msg {
   line-height: 1.25 !important;
 }
-
-body:is(.page-vod, .page-live, .page-mobile-player, .page-twitch-live,
-  .page-twitch-watch, .page-twitch-watch-mobile) .chat-line-redeem {
+body:is(.page-vod, .page-live, .page-mobile-player, .page-twitch-live, .page-twitch-watch, .page-twitch-watch-mobile) .chat-line-redeem {
   padding: 6px 8px !important;
   margin: 4px 0 !important;
-  border-left: 3px solid #f2e58d !important;
-  border-radius: 8px !important;
+  border-left: 3px solid var(--nebula-accent-text) !important;
+  border-radius: var(--nebula-radius-sm) !important;
   background: rgba(242, 229, 141, 0.1) !important;
 }
-
-body:is(.page-vod, .page-live, .page-mobile-player, .page-twitch-live,
-  .page-twitch-watch, .page-twitch-watch-mobile) .chat-redeem-badge {
+body:is(.page-vod, .page-live, .page-mobile-player, .page-twitch-live, .page-twitch-watch, .page-twitch-watch-mobile) .chat-redeem-badge {
   display: inline-block !important;
   margin-right: 4px !important;
   padding: 1px 6px !important;
   border: 1px solid rgba(242, 229, 141, 0.35) !important;
-  border-radius: 999px !important;
+  border-radius: var(--nebula-radius-full) !important;
   color: #111318 !important;
-  background: #f2e58d !important;
-  font-size: 10px !important;
+  background: var(--nebula-accent-text) !important;
+  font-size: var(--sv-min-text) !important;
   font-weight: 850 !important;
   letter-spacing: 0.02em !important;
   vertical-align: 0.1em !important;
 }
-
-body:is(.page-vod, .page-live, .page-mobile-player, .page-twitch-live,
-  .page-twitch-watch, .page-twitch-watch-mobile) .chat-redeem-title {
-  color: #f2e58d !important;
+body:is(.page-vod, .page-live, .page-mobile-player, .page-twitch-live, .page-twitch-watch, .page-twitch-watch-mobile) .chat-redeem-title {
+  color: var(--nebula-accent-text) !important;
   font-weight: 800 !important;
 }
-
-body:is(.page-vod, .page-live, .page-mobile-player, .page-twitch-live,
-  .page-twitch-watch, .page-twitch-watch-mobile) .chat-redeem-cost {
-  color: var(--tube-muted, #9aa3b2) !important;
+body:is(.page-vod, .page-live, .page-mobile-player, .page-twitch-live, .page-twitch-watch, .page-twitch-watch-mobile) .chat-redeem-cost {
+  color: var(--tube-muted) !important;
   font-weight: 750 !important;
 }
-
-body:is(.page-vod, .page-live, .page-mobile-player, .page-twitch-live,
-  .page-twitch-watch, .page-twitch-watch-mobile) .chat-redeem-sep {
-  color: var(--tube-muted, #9aa3b2) !important;
+body:is(.page-vod, .page-live, .page-mobile-player, .page-twitch-live, .page-twitch-watch, .page-twitch-watch-mobile) .chat-redeem-sep {
+  color: var(--tube-muted) !important;
 }
-
-body:is(.page-vod, .page-live, .page-mobile-player, .page-twitch-live,
-  .page-twitch-watch, .page-twitch-watch-mobile) .chat-redeem-msg {
+body:is(.page-vod, .page-live, .page-mobile-player, .page-twitch-live, .page-twitch-watch, .page-twitch-watch-mobile) .chat-redeem-msg {
   color: inherit !important;
 }
-
-body:is(.page-vod, .page-live, .page-mobile-player, .page-twitch-live,
-  .page-twitch-watch, .page-twitch-watch-mobile) .chat-line-mod {
+body:is(.page-vod, .page-live, .page-mobile-player, .page-twitch-live, .page-twitch-watch, .page-twitch-watch-mobile) .chat-line-mod {
   padding: 6px 8px !important;
   margin: 4px 0 !important;
   border-left: 3px solid #ff7b72 !important;
-  border-radius: 8px !important;
+  border-radius: var(--nebula-radius-sm) !important;
   background: rgba(255, 123, 114, 0.1) !important;
   color: #ffb4ae !important;
 }
-
-body:is(.page-vod, .page-live, .page-mobile-player, .page-twitch-live,
-  .page-twitch-watch, .page-twitch-watch-mobile) .chat-line-mod-timeout {
+body:is(.page-vod, .page-live, .page-mobile-player, .page-twitch-live, .page-twitch-watch, .page-twitch-watch-mobile) .chat-line-mod-timeout {
   border-left-color: #f0b429 !important;
   background: rgba(240, 180, 41, 0.1) !important;
   color: #f6d48a !important;
 }
-
-body:is(.page-vod, .page-live, .page-mobile-player, .page-twitch-live,
-  .page-twitch-watch, .page-twitch-watch-mobile) .chat-line-mod-delete,
-body:is(.page-vod, .page-live, .page-mobile-player, .page-twitch-live,
-  .page-twitch-watch, .page-twitch-watch-mobile) .chat-line-mod-clear {
+body:is(.page-vod, .page-live, .page-mobile-player, .page-twitch-live, .page-twitch-watch, .page-twitch-watch-mobile) .chat-line-mod-delete,
+body:is(.page-vod, .page-live, .page-mobile-player, .page-twitch-live, .page-twitch-watch, .page-twitch-watch-mobile) .chat-line-mod-clear {
   border-left-color: #8b949e !important;
   background: rgba(139, 148, 158, 0.12) !important;
   color: #c9d1d9 !important;
 }
-
-body:is(.page-vod, .page-live, .page-mobile-player, .page-twitch-live,
-  .page-twitch-watch, .page-twitch-watch-mobile) .chat-mod-badge {
+body:is(.page-vod, .page-live, .page-mobile-player, .page-twitch-live, .page-twitch-watch, .page-twitch-watch-mobile) .chat-mod-badge {
   display: inline-block !important;
   margin-right: 4px !important;
   padding: 1px 6px !important;
-  border-radius: 999px !important;
+  border-radius: var(--nebula-radius-full) !important;
   color: #111318 !important;
   background: #ff7b72 !important;
-  font-size: 10px !important;
+  font-size: var(--sv-min-text) !important;
   font-weight: 850 !important;
   letter-spacing: 0.02em !important;
   vertical-align: 0.1em !important;
 }
-
-body:is(.page-vod, .page-live, .page-mobile-player, .page-twitch-live,
-  .page-twitch-watch, .page-twitch-watch-mobile) .chat-mod-badge-timeout {
+body:is(.page-vod, .page-live, .page-mobile-player, .page-twitch-live, .page-twitch-watch, .page-twitch-watch-mobile) .chat-mod-badge-timeout {
   background: #f0b429 !important;
 }
-
-body:is(.page-vod, .page-live, .page-mobile-player, .page-twitch-live,
-  .page-twitch-watch, .page-twitch-watch-mobile) .chat-mod-badge-delete,
-body:is(.page-vod, .page-live, .page-mobile-player, .page-twitch-live,
-  .page-twitch-watch, .page-twitch-watch-mobile) .chat-mod-badge-clear {
+body:is(.page-vod, .page-live, .page-mobile-player, .page-twitch-live, .page-twitch-watch, .page-twitch-watch-mobile) .chat-mod-badge-delete,
+body:is(.page-vod, .page-live, .page-mobile-player, .page-twitch-live, .page-twitch-watch, .page-twitch-watch-mobile) .chat-mod-badge-clear {
   background: #8b949e !important;
   color: #111318 !important;
 }
-
-body:is(.page-vod, .page-live, .page-mobile-player, .page-twitch-live,
-  .page-twitch-watch, .page-twitch-watch-mobile) .chat-mod-text {
+body:is(.page-vod, .page-live, .page-mobile-player, .page-twitch-live, .page-twitch-watch, .page-twitch-watch-mobile) .chat-mod-text {
   font-weight: 650 !important;
 }
-
 body:is(.page-vod,.page-live,.page-mobile-player) .chat-emote {
   display: inline-block;
   width: auto;
@@ -9910,9 +5981,7 @@ body:is(.page-vod,.page-live,.page-mobile-player) .chat-emote {
   object-fit: contain;
   vertical-align: -0.32em;
 }
-
-body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live,
-  .page-twitch-watch,.page-twitch-watch-mobile) .chat-badges {
+body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live, .page-twitch-watch,.page-twitch-watch-mobile) .chat-badges {
   display: inline-flex;
   flex-wrap: wrap;
   align-items: center;
@@ -9920,14 +5989,10 @@ body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live,
   margin-right: 5px;
   vertical-align: -0.18em;
 }
-
-body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live,
-  .page-twitch-watch,.page-twitch-watch-mobile) .chat-badges:empty {
+body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live, .page-twitch-watch,.page-twitch-watch-mobile) .chat-badges:empty {
   display: none;
 }
-
-body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live,
-  .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge {
+body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live, .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge {
   --badge-size: 20px;
   --badge-bg-a: #3b3b44;
   --badge-bg-b: #24242b;
@@ -9940,7 +6005,7 @@ body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live,
   height: var(--badge-size);
   padding: 0;
   border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 5px;
+  border-radius: var(--nebula-radius-xs);
   background: linear-gradient(145deg, var(--badge-bg-a), var(--badge-bg-b));
   color: var(--badge-fg);
   font-size: 0;
@@ -9948,159 +6013,92 @@ body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live,
   line-height: 1;
   letter-spacing: 0;
   text-transform: uppercase;
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.22),
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22),
     0 1px 2px rgba(0, 0, 0, 0.28);
 }
-
-body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live,
-  .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge.has-badge-image {
+body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live, .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge.has-badge-image {
   min-width: 0;
   width: var(--badge-size);
   height: var(--badge-size);
   padding: 0;
-  background: transparent;
   border-color: transparent;
-  color: inherit;
-  box-shadow: none;
 }
-
-body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live,
-  .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge.has-badge-fallback-icon {
+body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live, .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge.has-badge-fallback-icon {
   min-width: 0;
   width: var(--badge-size);
   height: var(--badge-size);
   padding: 0;
-  border-radius: 5px;
+  border-radius: var(--nebula-radius-xs);
 }
-
-body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live,
-  .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge-img {
+body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live, .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge-img {
   display: block;
   width: var(--badge-size);
   height: var(--badge-size);
   object-fit: contain;
 }
-
-body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live,
-  .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge-fallback-icon {
+body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live, .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge-fallback-icon {
   display: block;
   width: 14px;
   height: 14px;
   fill: currentColor;
   stroke: none;
 }
-
-body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live,
-  .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge[data-badge="broadcaster"] {
+body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live, .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge[data-badge="broadcaster"] {
   --badge-bg-a: #ff667f;
   --badge-bg-b: #d92352;
   --badge-fg: #fff;
 }
-
-body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live,
-  .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge[data-badge="moderator"] {
+body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live, .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge[data-badge="moderator"] {
   --badge-bg-a: #4ade80;
   --badge-bg-b: #159447;
   --badge-fg: #042414;
 }
-
-body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live,
-  .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge[data-badge="subscriber"],
-body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live,
-  .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge[data-badge="founder"] {
+body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live, .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge[data-badge="subscriber"],
+body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live, .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge[data-badge="founder"] {
   --badge-bg-a: #a78bfa;
   --badge-bg-b: #6d4ee8;
   --badge-fg: #fff;
 }
-
-body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live,
-  .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge[data-badge="vip"] {
+body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live, .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge[data-badge="vip"] {
   --badge-bg-a: #fb6fbd;
   --badge-bg-b: #cb257e;
   --badge-fg: #fff;
 }
-
-body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live,
-  .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge[data-badge="bits"],
-body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live,
-  .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge[data-badge="sub_gifter"] {
+body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live, .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge[data-badge="bits"],
+body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live, .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge[data-badge="sub_gifter"] {
   --badge-bg-a: #5eead4;
   --badge-bg-b: #0ea5b7;
   --badge-fg: #06282f;
 }
-
-body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live,
-  .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge[data-badge="staff"],
-body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live,
-  .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge[data-badge="admin"],
-body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live,
-  .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge[data-badge="partner"] {
+body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live, .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge[data-badge="staff"],
+body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live, .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge[data-badge="admin"],
+body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live, .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge[data-badge="partner"] {
   --badge-bg-a: #facc15;
   --badge-bg-b: #f59e0b;
   --badge-fg: #2a1700;
 }
-
-body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live,
-  .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge[data-badge="premium"],
-body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live,
-  .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge[data-badge="turbo"] {
+body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live, .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge[data-badge="premium"],
+body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live, .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge[data-badge="turbo"] {
   --badge-bg-a: #60a5fa;
   --badge-bg-b: #4f46e5;
   --badge-fg: #fff;
 }
-
-body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live,
-  .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge.has-badge-image {
+body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live, .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge.has-badge-image {
   background: transparent;
   color: inherit;
   box-shadow: none;
 }
-
 body.page-vod .chat-user {
   margin-right: 4px !important;
   font-weight: 750 !important;
 }
-
 body.page-search .log-word-hit {
   padding: 0 3px;
-  border-radius: 4px;
+  border-radius: var(--nebula-radius-xs);
   background: rgba(242, 229, 141, 0.22);
   color: #fff7ad;
   box-shadow: inset 0 0 0 1px rgba(242, 229, 141, 0.28);
 }
-
-body.page-search .log-vod-link {
-  width: 24px;
-  height: 24px;
-  margin-left: 8px;
-  display: inline-grid;
-  place-items: center;
-  vertical-align: -6px;
-  border: 1px solid rgba(242, 229, 141, 0.26);
-  border-radius: 6px;
-  background: rgba(242, 229, 141, 0.1);
-  color: #f2e58d;
-  transition:
-    background-color 0.16s ease,
-    border-color 0.16s ease,
-    color 0.16s ease;
-}
-
-body.page-search .log-vod-link:hover,
-body.page-search .log-vod-link:focus-visible {
-  background: rgba(242, 229, 141, 0.18);
-  border-color: rgba(242, 229, 141, 0.48);
-  color: #fff6a3;
-  outline: none;
-}
-
-body.page-search .log-vod-link svg {
-  width: 15px;
-  height: 15px;
-  fill: currentColor;
-}
-
 @media (max-width: 1250px) {
   body.page-vod .vod-details-side {
     align-items: flex-end !important;
@@ -10108,18 +6106,15 @@ body.page-search .log-vod-link svg {
     gap: 7px !important;
   }
 }
-
 @media (max-width: 720px) {
   body.page-vod .vod-details-side {
     width: 100% !important;
     align-items: stretch !important;
   }
-
   body.page-vod .vod-file-actions {
     flex-wrap: wrap !important;
   }
 }
-
 /* Transcript panel (in-flow; replaces clipped absolute dropdown) */
 body.page-vod .vod-transcript-panel {
   margin: 0 !important;
@@ -10128,119 +6123,103 @@ body.page-vod .vod-transcript-panel {
   flex-direction: column !important;
   gap: 12px !important;
   border: 1px solid var(--tube-line) !important;
-  border-radius: 10px !important;
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 48px),
-    var(--tube-surface, #111) !important;
+  border-radius: var(--nebula-radius-sm) !important;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 48px),
+    var(--tube-surface) !important;
   box-shadow: none !important;
 }
-
 body.page-vod .vod-transcript-panel.is-open,
 body.page-vod .vod-transcript-panel:not([hidden]) {
   display: flex !important;
 }
-
 body.page-vod .vod-transcript-panel-head {
   display: flex !important;
   align-items: flex-start !important;
   justify-content: space-between !important;
   gap: 12px !important;
 }
-
 body.page-vod .vod-transcript-kicker {
   margin: 0 0 2px !important;
   color: var(--tube-muted) !important;
-  font-size: 10px !important;
+  font-size: var(--sv-min-text) !important;
   font-weight: 700 !important;
   letter-spacing: 0.04em !important;
   text-transform: uppercase !important;
 }
-
 body.page-vod .vod-transcript-panel-head h2 {
   margin: 0 !important;
   color: var(--tube-text) !important;
-  font-size: 15px !important;
+  font-size: var(--sv-text-md) !important;
   font-weight: 800 !important;
   line-height: 1.2 !important;
 }
-
 body.page-vod .vod-transcript-panel-meta {
   display: flex !important;
   align-items: center !important;
   gap: 8px !important;
   flex: 0 0 auto !important;
 }
-
 body.page-vod .vod-transcript-panel-meta span,
 body.page-vod .transcript-status-message,
 body.page-vod .transcript-percent {
   color: var(--tube-muted) !important;
-  font-size: 11px !important;
+  font-size: var(--sv-min-text) !important;
 }
-
 body.page-vod .vod-transcript-close {
   min-height: 30px !important;
   padding: 0 10px !important;
   border: 1px solid var(--tube-line) !important;
-  border-radius: 7px !important;
+  border-radius: var(--nebula-radius-sm) !important;
   color: var(--tube-text-2) !important;
   background: var(--tube-surface-2) !important;
-  font-size: 11px !important;
+  font-size: var(--sv-min-text) !important;
   font-weight: 700 !important;
   cursor: pointer !important;
 }
-
 body.page-vod .vod-transcript-close:hover {
   color: var(--tube-text) !important;
   border-color: #3a3a3a !important;
 }
-
 body.page-vod #btnTranscriptToggle.is-active {
   color: var(--tube-text) !important;
   border-color: var(--tube-line) !important;
   background: var(--tube-surface-2) !important;
 }
-
 body.page-vod .vod-transcript-panel .transcript-status-card {
   position: relative !important;
   margin: 0 !important;
   padding: 10px 12px !important;
-  border: 1px solid var(--tube-line-soft, rgba(255,255,255,0.08)) !important;
-  border-radius: 8px !important;
+  border: 1px solid var(--tube-line-soft) !important;
+  border-radius: var(--nebula-radius-sm) !important;
   background: rgba(0, 0, 0, 0.28) !important;
 }
-
 body.page-vod .vod-transcript-panel .transcript-progress {
   height: 4px !important;
   margin: 8px 0 4px !important;
 }
-
 body.page-vod .vod-transcript-body {
   max-height: min(42vh, 420px) !important;
   margin: 0 !important;
   padding: 12px !important;
   overflow: auto !important;
-  border: 1px solid var(--tube-line-soft, rgba(255,255,255,0.08)) !important;
-  border-radius: 8px !important;
+  border: 1px solid var(--tube-line-soft) !important;
+  border-radius: var(--nebula-radius-sm) !important;
   color: var(--tube-text-2) !important;
   background: rgba(0, 0, 0, 0.35) !important;
   font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace !important;
   white-space: pre-wrap !important;
 }
-
 body.page-vod .vod-transcript-empty {
   margin: 0 !important;
   color: var(--tube-muted) !important;
-  font-size: 12px !important;
+  font-size: var(--sv-text-xs) !important;
   line-height: 1.45 !important;
 }
-
 body.page-vod .vod-transcript-actions {
   margin: 0 !important;
   display: flex !important;
   gap: 8px !important;
 }
-
 body.page-vod .vod-transcript-start,
 body.page-vod .vod-transcript-download {
   min-height: 34px !important;
@@ -10249,267 +6228,129 @@ body.page-vod .vod-transcript-download {
   align-items: center !important;
   justify-content: center !important;
   border: 1px solid var(--tube-line) !important;
-  border-radius: 7px !important;
+  border-radius: var(--nebula-radius-sm) !important;
   color: var(--tube-text-2) !important;
   background: var(--tube-surface-2) !important;
-  font-size: 11px !important;
+  font-size: var(--sv-min-text) !important;
   font-weight: 700 !important;
   text-decoration: none !important;
   cursor: pointer !important;
 }
-
 body.page-vod .vod-transcript-start:hover,
 body.page-vod .vod-transcript-download:hover {
   color: var(--tube-text) !important;
   border-color: #3a3a3a !important;
 }
-
 body.page-vod .vod-transcript-start:disabled {
   opacity: 0.55 !important;
   cursor: default !important;
 }
-
 @media (max-width: 720px) {
   body.page-vod .vod-transcript-body {
     max-height: 48vh !important;
   }
-
   body.page-vod .vod-transcript-panel-head {
     flex-direction: column !important;
     align-items: stretch !important;
   }
-
   body.page-vod .vod-transcript-panel-meta {
     justify-content: space-between !important;
   }
 }
-
 @media (min-width: 921px) {
-  body:is(
-    .page-index,
-    .page-channels,
-    .page-streamer,
-    .page-admin,
-    .page-mail,
-    .page-files,
-    .page-search,
-    .page-discord-tool
-  ) .main {
+  body:is( .page-index, .page-channels, .page-streamer, .page-admin, .page-mail, .page-files, .page-search, .page-discord-tool ) .main {
     padding: 0 18px 24px !important;
   }
-
-  body:is(
-    .page-index,
-    .page-channels,
-    .page-streamer,
-    .page-admin,
-    .page-mail,
-    .page-files,
-    .page-search,
-    .page-discord-tool
-  ) .main > .header {
+  body:is( .page-index, .page-channels, .page-streamer, .page-admin, .page-mail, .page-files, .page-search, .page-discord-tool ) .main > .header {
     min-height: 58px !important;
     margin: 0 -18px 16px !important;
     padding: 0 18px !important;
   }
 }
-
-body:is(
-  .page-index,
-  .page-channels,
-  .page-streamer,
-  .page-admin,
-  .page-mail,
-  .page-files,
-  .page-search,
-  .page-discord-tool
-) .page-title {
-  font-size: 19px !important;
-}
-
-body:is(
-  .page-index,
-  .page-channels,
-  .page-streamer,
-  .page-admin,
-  .page-mail,
-  .page-files,
-  .page-search,
-  .page-discord-tool
-) :is(
-  .panel,
-  .stat-card,
-  .card,
-  .overview-section,
-  .mgmt-section,
-  .upload-section,
-  .file-card,
-  .folder-card,
-  .share-box
-) {
-  border-radius: 8px !important;
-}
-
+body:is( .page-index, .page-channels, .page-streamer, .page-admin, .page-mail, .page-files, .page-search, .page-discord-tool ) .page-title {
+  font-size: var(--sv-text-lg) !important;
+}
+body:is( .page-index, .page-channels, .page-streamer, .page-admin, .page-mail, .page-files, .page-search, .page-discord-tool ) :is( .panel, .stat-card, .card, .overview-section, .mgmt-section, .upload-section, .file-card, .folder-card, .share-box ) {
+  border-radius: var(--nebula-radius-sm) !important;
+}
 body:is(.page-admin,.page-mail,.page-files,.page-search,.page-discord-tool) :is(.panel,.upload-section,.mgmt-section) {
   padding: 14px !important;
 }
-
 body:is(.page-admin,.page-mail,.page-files,.page-search,.page-discord-tool) :is(.grid,.mail-grid) {
   gap: 12px !important;
 }
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-mail,.page-files,.page-search,.page-discord-tool) :is(
-  input,
-  select,
-  textarea
-) {
+body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-mail,.page-files,.page-search,.page-discord-tool) :is( input, select, textarea ) {
   min-height: 36px !important;
-  border-radius: 7px !important;
-  font-size: 12px !important;
-}
-
-body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-mail,.page-files,.page-search,.page-discord-tool) :is(
-  button,
-  .btn,
-  .btn-action,
-  .btn-restart,
-  .action-btn,
-  .btn-primary,
-  .btn-secondary
-) {
+  border-radius: var(--nebula-radius-sm) !important;
+  font-size: var(--sv-text-xs) !important;
+}
+body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-mail,.page-files,.page-search,.page-discord-tool) :is( button:where(:not(.sv-btn)), .btn, .btn-action, .btn-restart, .action-btn, .btn-primary, .btn-secondary ) {
   min-height: 34px !important;
   padding: 6px 10px !important;
-  border-radius: 7px !important;
-  font-size: 11px !important;
-}
-
-body.page-index .studio-quickbar {
-  margin-bottom: 12px !important;
-}
-
-body.page-index .stats-grid {
-  gap: 10px !important;
-  margin-bottom: 14px !important;
-}
-
-body.page-index .stat-card {
-  min-height: 98px !important;
-  padding: 12px !important;
-}
-
-body.page-index .stat-head {
-  margin-bottom: 7px !important;
+  border-radius: var(--nebula-radius-sm) !important;
+  font-size: var(--sv-min-text) !important;
 }
-
-body.page-index .stat-value {
-  font-size: 20px !important;
-}
-
-body.page-index .section-head {
-  min-height: 54px !important;
-  padding: 11px 14px !important;
-}
-
 body.page-index .streamer-row {
   min-height: 64px !important;
   padding: 9px 14px !important;
 }
-
 body.page-index .streamer-row .avatar {
   width: 40px !important;
   height: 40px !important;
 }
-
 body.page-streamer .panel {
   margin-bottom: 10px !important;
   padding: 12px !important;
 }
-
 body.page-streamer .tabs {
   margin-bottom: 12px !important;
   gap: 6px !important;
 }
-
-body.page-streamer .video-grid {
-  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
-  gap: 14px 10px !important;
-}
-
-body.page-streamer .thumb-wrap {
-  border-radius: 8px !important;
-}
-
-body.page-streamer .card-body {
-  padding-top: 8px !important;
-}
-
 body:is(.page-admin,.page-mail,.page-files,.page-search) table {
   border-spacing: 0 4px !important;
 }
-
 body:is(.page-admin,.page-mail,.page-files,.page-search) th {
   padding: 7px 9px !important;
-  font-size: 9px !important;
+  font-size: var(--sv-min-text) !important;
 }
-
 body:is(.page-admin,.page-mail,.page-files,.page-search) td {
   padding: 8px 9px !important;
-  font-size: 11px !important;
-}
-
-body.page-files .file-grid,
-body.page-files .folder-grid {
-  gap: 10px !important;
+  font-size: var(--sv-min-text) !important;
 }
-
-body.page-files .file-card,
-body.page-files .folder-card {
-  padding: 12px !important;
-}
-
 body.page-search .grid {
   gap: 12px !important;
 }
-
 body.page-search .panel {
   padding: 13px !important;
 }
-
 body.page-live .main {
   padding: 0 14px 20px !important;
 }
-
 body.page-live .live-hero {
   min-height: 58px !important;
   margin: 0 -14px 12px !important;
   padding: 8px 14px !important;
 }
-
 body.page-live .content {
   gap: 10px !important;
 }
-
 body.page-clip-editor header {
   min-height: 58px !important;
   padding: 0 16px !important;
 }
-
 body.page-clip-editor .main-area {
   gap: 12px !important;
   padding: 14px !important;
 }
-
 body.page-clip-editor .editor-panel {
   padding: 14px !important;
-  border-radius: 8px !important;
+  border-radius: var(--nebula-radius-sm) !important;
 }
-
 @media (max-width: 720px) {
   body.page-clip-editor .editor-panel {
     padding: 12px !important;
   }
 }
-
 /* Restore document scrolling for long dashboard/library pages. */
 html:has(body.page-index),
 html:has(body.page-channels),
@@ -10525,99 +6366,47 @@ html:has(body.page-twitch-live) {
   min-height: 100% !important;
   overflow-y: auto !important;
 }
-
-body:is(
-  .page-index,
-  .page-channels,
-  .page-streamer,
-  .page-admin,
-  .page-mail,
-  .page-files,
-  .page-search,
-  .page-discord-tool,
-  .page-mplus,
-  .page-twitch-live,
-  .page-twitch-watch
-) {
+body:is( .page-index, .page-channels, .page-streamer, .page-admin, .page-mail, .page-files, .page-search, .page-discord-tool, .page-mplus, .page-twitch-live, .page-twitch-watch ) {
   height: auto !important;
   min-height: 100vh !important;
   overflow-x: hidden !important;
   overflow-y: auto !important;
   align-items: flex-start !important;
 }
-
-body:is(
-  .page-index,
-  .page-channels,
-  .page-streamer,
-  .page-admin,
-  .page-mail,
-  .page-files,
-  .page-search,
-  .page-discord-tool,
-  .page-mplus,
-  .page-twitch-live,
-  .page-twitch-watch
-) .main {
+body:is( .page-index, .page-channels, .page-streamer, .page-admin, .page-mail, .page-files, .page-search, .page-discord-tool, .page-mplus, .page-twitch-live, .page-twitch-watch ) .main {
   min-height: 100vh !important;
   height: auto !important;
   overflow: visible !important;
 }
-
-/* Dashboard product redesign and account themes - 2026-06-24 */
-:root {
-  --bg: #08090a;
-  --sidebar: #0c0d0f;
-  --surface: #111316;
-  --surface-raised: #17191d;
-  --surface-hover: #1c1f23;
-  --surface-active: #202329;
-  --border: rgba(255, 255, 255, 0.07);
-  --border-strong: rgba(255, 255, 255, 0.12);
-  --text-primary: #f2f3f5;
-  --text-secondary: #979ba3;
-  --text-muted: #62666e;
-  --brand: #d8eb72;
-  --brand-hover: #e4f58b;
-  --brand-muted: rgba(216, 235, 114, 0.12);
-  --success: #65d59a;
-  --warning: #efc66b;
-  --danger: #ef7474;
-  --offline: #737780;
-  --radius-sm: 6px;
-  --radius-md: 10px;
-  --radius-lg: 14px;
-}
-
-body.theme-silo, body.theme-vault {
-  --bg: #0b0b0b;
-  --sidebar: #0f0f0f;
-  --surface: #141414;
-  --surface-raised: #1a1a1a;
-  --surface-hover: #222222;
-  --surface-active: #2a2a2a;
-  --border: rgba(255, 255, 255, 0.08);
-  --border-strong: rgba(255, 255, 255, 0.14);
-  --text-primary: #f5f5f5;
-  --text-secondary: #b0b0b0;
-  --text-muted: #7a7a7a;
-  --brand: #c8f53a;
-  --brand-hover: #d8ff5c;
-  --brand-muted: rgba(200, 245, 58, 0.12);
-  --success: #c8f53a;
-  --warning: #f59e0b;
-  --danger: #ef4444;
-  --offline: #6b6b6b;
-  --theme-accent-rgb: 200, 245, 58;
-  --theme-success-rgb: 200, 245, 58;
-  --theme-button-text: #0b0b0b;
-  --radius: 14px;
-  --radius-card: 16px;
-  --radius-sm: 10px;
-  --radius-md: 14px;
-  --radius-lg: 20px;
-}
-
+body.theme-silo,
+body.theme-vault {
+  --bg: var(--nebula-bg-root);
+  --sidebar: var(--nebula-bg-deep);
+  --surface: var(--nebula-bg-surface);
+  --surface-raised: var(--nebula-bg-card);
+  --surface-hover: var(--nebula-bg-hover);
+  --surface-active: var(--nebula-bg-active);
+  --border: var(--nebula-border);
+  --border-strong: var(--nebula-border-bright);
+  --text-primary: var(--nebula-text-main);
+  --text-secondary: var(--nebula-text-secondary);
+  --text-muted: var(--nebula-text-muted);
+  --brand: var(--nebula-accent-text);
+  --brand-hover: var(--nebula-accent-highlight);
+  --brand-muted: rgba(77, 99, 255, 0.15);
+  --success: var(--nebula-status-success);
+  --warning: var(--nebula-status-warning);
+  --danger: var(--nebula-status-live-text);
+  --offline: var(--nebula-text-muted);
+  --theme-accent-rgb: 77, 99, 255;
+  --theme-success-rgb: 72, 214, 162;
+  --theme-button-text: var(--nebula-bg-root);
+  --radius: var(--nebula-radius-md);
+  --radius-card: var(--nebula-radius-lg);
+  --radius-sm: var(--nebula-radius-sm);
+  --radius-md: var(--nebula-radius-md);
+  --radius-lg: var(--nebula-radius-xl);
+}
 body.theme-aurora {
   --bg: #07100f;
   --sidebar: #0a1413;
@@ -10641,7 +6430,6 @@ body.theme-aurora {
   --theme-success-rgb: 168, 231, 110;
   --theme-button-text: #06110f;
 }
-
 body.theme-cyber {
   --bg: #090910;
   --sidebar: #0d0d16;
@@ -10665,7 +6453,6 @@ body.theme-cyber {
   --theme-success-rgb: 111, 212, 231;
   --theme-button-text: #090910;
 }
-
 body.theme-ember {
   --bg: #100b09;
   --sidebar: #130d0b;
@@ -10689,7 +6476,6 @@ body.theme-ember {
   --theme-success-rgb: 115, 214, 155;
   --theme-button-text: #130b07;
 }
-
 body.theme-ocean {
   --bg: #071018;
   --sidebar: #09131d;
@@ -10713,7 +6499,6 @@ body.theme-ocean {
   --theme-success-rgb: 93, 214, 200;
   --theme-button-text: #06101b;
 }
-
 body:is(.theme-silo,.theme-vault,.theme-aurora,.theme-cyber,.theme-ember,.theme-ocean) {
   --tube-bg: var(--bg);
   --tube-surface: var(--surface);
@@ -10749,128 +6534,43 @@ body:is(.theme-silo,.theme-vault,.theme-aurora,.theme-cyber,.theme-ember,.theme-
   --ns-accent: var(--brand);
   --ns-accent-2: var(--success);
 }
-
 body.page-index {
   min-height: 100vh !important;
   color: var(--text-primary) !important;
   background: var(--bg) !important;
   font-family: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
 }
-
 body.page-index .sidebar {
   width: 76px !important;
   flex: 0 0 76px !important;
   background: var(--sidebar) !important;
   border-right: 1px solid var(--border) !important;
 }
-
 body.page-index .brand::before {
   color: var(--theme-button-text) !important;
   background: var(--brand) !important;
   box-shadow: none !important;
 }
-
 body.page-index nav {
   min-height: calc(100vh - 90px) !important;
   gap: 8px !important;
 }
-
-body.page-index .nav-item {
-  width: 44px !important;
-  min-width: 44px !important;
-  height: 44px !important;
-  min-height: 44px !important;
-  border-radius: var(--radius-md) !important;
-  color: var(--text-muted) !important;
-  background: transparent !important;
-  border-color: transparent !important;
-  box-shadow: none !important;
-}
-
 /* Dashboard home icon comes from the shared rail map below (house), not the default grid. */
-
-body.page-index .nav-item:hover,
-body.page-index .nav-item:focus-visible {
-  color: var(--text-primary) !important;
-  background: var(--surface-hover) !important;
-  border-color: var(--border) !important;
-  outline: none !important;
-  box-shadow: 0 0 0 3px rgba(var(--theme-accent-rgb), 0.12) !important;
-}
-
-body.page-index .nav-item.active {
-  color: var(--brand) !important;
-  background: var(--brand-muted) !important;
-  border-color: transparent !important;
-  box-shadow: none !important;
-}
-
-body.page-index .nav-item[aria-label]::after {
-  content: attr(aria-label) !important;
-  position: absolute !important;
-  left: 56px !important;
-  top: 50% !important;
-  z-index: 100 !important;
-  height: auto !important;
-  min-width: max-content !important;
-  padding: 7px 9px !important;
-  display: block !important;
-  border: 1px solid var(--border-strong) !important;
-  border-radius: var(--radius-sm) !important;
-  color: var(--text-primary) !important;
-  background: var(--surface-active) !important;
-  font-size: 12px !important;
-  font-weight: 600 !important;
-  line-height: 1 !important;
-  opacity: 0 !important;
-  transform: translate(4px, -50%) !important;
-  pointer-events: none !important;
-  transition: opacity 140ms ease, transform 140ms ease !important;
-  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28) !important;
-}
-
-body.page-index .nav-item[aria-label]:hover::after,
-body.page-index .nav-item[aria-label]:focus-visible::after {
-  opacity: 1 !important;
-  transform: translate(0, -50%) !important;
-}
-
-body.page-index .nav-logout-form {
-  border-top-color: var(--border) !important;
-}
-
-body.page-index .logout-button {
-  color: var(--text-secondary) !important;
-  background: var(--surface) !important;
-  border-color: var(--border) !important;
-}
-
 body.page-index .main {
   width: calc(100% - 76px) !important;
   padding: 0 32px 40px !important;
   background: var(--bg) !important;
 }
-
-body.page-index .dashboard-header {
-  min-height: 76px !important;
-  margin: 0 -32px 18px !important;
-  padding: 0 32px !important;
-  border-bottom: 1px solid var(--border) !important;
-  background: var(--bg) !important;
-}
-
 body.page-index .page-title {
-  font-size: 26px !important;
+  font-size: var(--sv-text-2xl) !important;
   font-weight: 650 !important;
   letter-spacing: -0.03em !important;
 }
-
 body.page-index .page-subtitle {
   color: var(--text-secondary) !important;
-  font-size: 14px !important;
+  font-size: var(--sv-text-md) !important;
   font-weight: 400 !important;
 }
-
 body.page-index :is(.btn-primary,.btn-secondary,.btn-ghost,.action-btn) {
   min-height: 40px !important;
   padding: 0 14px !important;
@@ -10878,129 +6578,54 @@ body.page-index :is(.btn-primary,.btn-secondary,.btn-ghost,.action-btn) {
   align-items: center !important;
   justify-content: center !important;
   gap: 8px !important;
-  border-radius: 8px !important;
-  font-size: 13px !important;
+  border-radius: var(--nebula-radius-sm) !important;
+  font-size: var(--sv-text-sm) !important;
   font-weight: 650 !important;
   line-height: 1 !important;
   text-decoration: none !important;
   cursor: pointer !important;
 }
-
 body.page-index .btn-primary {
   color: var(--theme-button-text) !important;
   background: var(--brand) !important;
   border: 1px solid transparent !important;
 }
-
 body.page-index .btn-primary:hover,
 body.page-index .btn-primary:focus-visible {
   background: var(--brand-hover) !important;
-  outline: none !important;
   box-shadow: 0 0 0 3px rgba(var(--theme-accent-rgb), 0.16) !important;
 }
-
 body.page-index .btn-secondary {
   color: var(--text-primary) !important;
   background: var(--surface-raised) !important;
   border: 1px solid var(--border) !important;
 }
-
 body.page-index .btn-secondary:hover,
 body.page-index .btn-secondary:focus-visible {
   background: var(--surface-hover) !important;
   border-color: var(--border-strong) !important;
-  outline: none !important;
 }
-
 body.page-index .btn-ghost {
   color: var(--text-secondary) !important;
   background: transparent !important;
   border: 1px solid transparent !important;
 }
-
 body.page-index .btn-ghost:hover,
 body.page-index .btn-ghost:focus-visible {
   color: var(--text-primary) !important;
   background: var(--surface-hover) !important;
-  outline: none !important;
 }
-
 body.page-index .btn-secondary.danger {
   color: #ffd5d5 !important;
   border-color: rgba(239, 116, 116, 0.28) !important;
   background: rgba(239, 116, 116, 0.08) !important;
 }
-
-body.page-index :is(.btn-primary,.btn-secondary,.btn-ghost,button,select):disabled,
-body.page-index :is(.btn-primary,.btn-secondary,.btn-ghost,button,select)[aria-disabled="true"] {
+body.page-index :is(.btn-primary,.btn-secondary,.btn-ghost,button:where(:not(.sv-btn)),select):disabled,
+body.page-index :is(.btn-primary,.btn-secondary,.btn-ghost,button:where(:not(.sv-btn)),select)[aria-disabled="true"] {
   opacity: 0.48 !important;
   cursor: not-allowed !important;
   box-shadow: none !important;
 }
-
-body.page-index .dashboard-search-button kbd {
-  padding: 3px 6px;
-  border: 1px solid var(--border);
-  border-radius: 5px;
-  color: var(--text-muted);
-  background: var(--surface);
-  font: inherit;
-  font-size: 11px;
-}
-
-body.page-index .dashboard-statusline {
-  margin: 0 0 18px !important;
-  min-height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  flex-wrap: wrap;
-}
-
-body.page-index .statusline-items {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  flex-wrap: wrap;
-}
-
-body.page-index .statusline-item {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  color: var(--text-secondary);
-  font-size: 13px;
-  font-weight: 560;
-}
-
-body.page-index .status-dot {
-  width: 8px;
-  height: 8px;
-  flex: 0 0 8px;
-  border-radius: 999px;
-  background: var(--offline);
-}
-
-body.page-index .status-ready .status-dot,
-body.page-index .status-dot.status-ready {
-  background: var(--success);
-}
-
-body.page-index .status-recording .status-dot,
-body.page-index .status-dot.status-recording {
-  background: var(--danger);
-  animation: dashboard-live-pulse 1.8s ease-in-out infinite;
-}
-
-body.page-index .storage-warning {
-  color: var(--warning);
-}
-
-body.page-index .storage-critical {
-  color: var(--danger);
-}
-
 body.page-index .theme-picker {
   min-height: 32px !important;
   padding: 3px 4px 3px 8px !important;
@@ -11008,22 +6633,19 @@ body.page-index .theme-picker {
   align-items: center !important;
   gap: 8px !important;
   border: 1px solid var(--border) !important;
-  border-radius: 8px !important;
+  border-radius: var(--nebula-radius-sm) !important;
   background: var(--surface) !important;
 }
-
 body.page-index .theme-picker-label {
   color: var(--text-secondary) !important;
-  font-size: 12px !important;
+  font-size: var(--sv-text-xs) !important;
   font-weight: 650 !important;
 }
-
 body.page-index .theme-swatches {
   display: inline-flex;
   align-items: center;
   gap: 5px;
 }
-
 body.page-index .theme-picker .theme-swatch {
   --swatch-a: var(--brand);
   --swatch-b: var(--success);
@@ -11034,339 +6656,81 @@ body.page-index .theme-picker .theme-swatch {
   min-height: 24px !important;
   padding: 0 !important;
   border: 1px solid var(--border-strong) !important;
-  border-radius: 7px !important;
-  background:
-    radial-gradient(circle at 75% 25%, var(--swatch-c) 0 18%, transparent 19%),
+  border-radius: var(--nebula-radius-sm) !important;
+  background: radial-gradient(circle at 75% 25%, var(--swatch-c) 0 18%, transparent 19%),
     linear-gradient(135deg, var(--swatch-a), var(--swatch-b)) !important;
   box-shadow: none !important;
 }
-
-body.page-index .theme-picker .swatch-silo, body.page-index .theme-picker .swatch-vault {
-  --swatch-a: #d8eb72;
-  --swatch-b: #65d59a;
-  --swatch-c: #202329;
-}
-
-body.page-index .theme-picker .swatch-aurora {
-  --swatch-a: #78e8c6;
-  --swatch-b: #a8e76e;
-  --swatch-c: #20332f;
-}
-
-body.page-index .theme-picker .swatch-cyber {
-  --swatch-a: #a895ff;
-  --swatch-b: #6fd4e7;
-  --swatch-c: #29263d;
-}
-
-body.page-index .theme-picker .swatch-ember {
-  --swatch-a: #f0b86e;
-  --swatch-b: #f07b70;
-  --swatch-c: #32241c;
-}
-
-body.page-index .theme-picker .swatch-ocean {
-  --swatch-a: #6caeff;
-  --swatch-b: #5dd6c8;
-  --swatch-c: #21364d;
-}
-
 body.page-index .theme-picker .theme-swatch span {
   display: none !important;
 }
-
 body.page-index .theme-picker .theme-swatch:hover,
 body.page-index .theme-picker .theme-swatch:focus-visible,
 body.page-index .theme-picker .theme-swatch.active {
   border-color: var(--text-primary) !important;
-  outline: none !important;
   box-shadow: 0 0 0 2px rgba(var(--theme-accent-rgb), 0.28) !important;
 }
-
-body.page-index .dashboard-alert {
-  margin: 0 0 16px;
-  padding: 12px 14px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  color: var(--text-primary);
-  background: var(--surface);
-  font-size: 13px;
-}
-
-body.page-index .dashboard-alert.info {
-  border-color: rgba(var(--theme-accent-rgb), 0.24);
-  background: var(--brand-muted);
-}
-
-body.page-index .dashboard-alert.danger {
-  border-color: rgba(239, 116, 116, 0.34);
-  background: rgba(239, 116, 116, 0.09);
-}
-
-body.page-index .dashboard-main-grid {
-  margin-bottom: 20px;
-  display: grid;
-  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
-  gap: 16px;
-}
-
-body.page-index .panel,
-body.page-index .overview-section {
+body.page-index .panel {
   border: 1px solid var(--border) !important;
   border-radius: var(--radius-lg) !important;
   background: var(--surface) !important;
   box-shadow: none !important;
 }
-
-body.page-index .live-watch-panel {
-  padding: 20px !important;
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-}
-
-body.page-index .live-watch-head {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-body.page-index .live-watch-head h2 {
-  margin: 0;
-  color: var(--text-primary);
-  font-size: 22px;
-  font-weight: 680;
-  letter-spacing: -0.02em;
-}
-
-body.page-index .live-watch-head p {
-  margin: 5px 0 0;
-  color: var(--text-secondary);
-  font-size: 14px;
-}
-
-body.page-index .live-watch-browse {
-  flex-shrink: 0;
-  white-space: nowrap;
-}
-
-body.page-index .live-watch-panel .live-input-group {
-  display: flex;
-  gap: 8px;
-  margin-top: 0 !important;
-}
-
-body.page-index .live-watch-panel .live-input-group input {
-  flex: 1;
-  min-width: 0;
-  height: 42px;
-  background: rgba(0,0,0,0.28);
-  border: 1px solid var(--border);
-  color: var(--text-primary, #fff);
-  padding: 10px 12px;
-  border-radius: 8px;
-  outline: none;
-}
-
-body.page-index .live-watch-panel .live-input-group input:focus {
-  border-color: var(--primary);
-  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
-}
-
-body.page-index .live-watch-panel .live-input-group button {
-  flex-shrink: 0;
-  width: 44px;
-  height: 42px;
-  border: none;
-  border-radius: 8px;
-  background: linear-gradient(180deg, rgba(255,92,102,.95), rgba(220,50,60,.95));
-  color: #fff;
-  font-size: 14px;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-body.page-index .live-watch-panel .live-input-group button:hover {
-  filter: brightness(1.06);
-}
-
-body.page-index .live-watch-quick {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-body.page-index .live-watch-chip {
-  display: inline-flex;
-  align-items: center;
-  min-height: 32px;
-  padding: 4px 12px;
-  border-radius: 999px;
-  border: 1px solid rgba(255,92,102,.35);
-  background: rgba(255,92,102,.12);
-  color: #fecaca;
-  text-decoration: none;
-  font-size: 13px;
-  font-weight: 650;
-}
-
-body.page-index .live-watch-chip:hover {
-  border-color: rgba(255,92,102,.55);
-  background: rgba(255,92,102,.2);
-}
-
-body.page-index .live-watch-chip.watching {
-  border-color: rgba(245,158,11,.4);
-  background: rgba(245,158,11,.12);
-  color: #fcd34d;
-}
-
 body.page-index .storage-panel {
   padding: 20px !important;
 }
-
-body.page-index .panel-kicker {
-  margin-bottom: 14px;
-  color: var(--text-muted);
-  font-size: 11px;
-  font-weight: 720;
-  letter-spacing: 0.08em;
-}
-
-body.page-index .storage-head h2 {
-  margin: 0;
-  color: var(--text-primary);
-  font-size: 32px;
-  font-weight: 680;
-  letter-spacing: -0.03em;
-}
-
-body.page-index .storage-head p {
-  margin: 5px 0 0;
-  color: var(--text-secondary);
-  font-size: 14px;
-}
-
 body.page-index .storage-meta {
   margin: 18px 0 0;
   display: grid;
   gap: 10px;
 }
-
 body.page-index .storage-meta div {
   min-width: 0;
 }
-
 body.page-index dt {
   color: var(--text-muted);
-  font-size: 12px;
+  font-size: var(--sv-text-xs);
   font-weight: 600;
 }
-
 body.page-index dd {
   margin: 3px 0 0;
   color: var(--text-primary);
-  font-size: 13px;
+  font-size: var(--sv-text-sm);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
 body.page-index :is(input, select, textarea) {
   min-height: 40px !important;
   border: 1px solid var(--border) !important;
-  border-radius: 8px !important;
+  border-radius: var(--nebula-radius-sm) !important;
   color: var(--text-primary) !important;
   background: var(--surface-raised) !important;
 }
-
 body.page-index :is(input, select, textarea):focus {
   border-color: rgba(var(--theme-accent-rgb), 0.58) !important;
-  outline: none !important;
   box-shadow: 0 0 0 3px rgba(var(--theme-accent-rgb), 0.12) !important;
 }
-
-body.page-index .storage-progress {
-  height: 7px;
-  overflow: hidden;
-  border-radius: 999px;
-  background: var(--surface-active);
-}
-
-body.page-index .storage-progress-fill {
-  width: 0;
-  height: 100%;
-  border-radius: inherit;
-  background: var(--brand);
-  transition: width 180ms ease;
-}
-
-body.page-index .storage-head {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-body.page-index .storage-state {
-  padding: 4px 7px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  color: var(--text-secondary);
-  background: var(--surface-raised);
-  font-size: 11px;
-  font-weight: 700;
-  text-transform: uppercase;
-}
-
-body.page-index .storage-progress {
-  margin-top: 22px;
-  height: 10px;
-}
-
-body.page-index .storage-warning .storage-progress-fill {
-  background: var(--warning);
-}
-
-body.page-index .storage-critical .storage-progress-fill {
-  background: var(--danger);
-}
-
 body.page-index .storage-meta {
   margin-top: 18px;
 }
-
-body.page-index .overview-section {
-  overflow: visible !important;
-}
-
 body.page-index .section-head {
   min-height: 68px !important;
   padding: 18px 20px !important;
   border-bottom: 1px solid var(--border) !important;
 }
-
 body.page-index .section-head h2 {
   margin: 0 !important;
   color: var(--text-primary) !important;
-  font-size: 17px !important;
+  font-size: var(--sv-text-base) !important;
   font-weight: 620 !important;
   letter-spacing: -0.015em !important;
 }
-
 body.page-index .section-head p {
   margin: 4px 0 0 !important;
   color: var(--text-secondary) !important;
-  font-size: 13px !important;
-}
-
-body.page-index .streamer-list {
-  display: block;
+  font-size: var(--sv-text-sm) !important;
 }
-
 body.page-index .streamer-row {
   position: relative;
   min-height: 76px;
@@ -11383,142 +6747,48 @@ body.page-index .streamer-row {
   box-shadow: none !important;
   transition: background-color 140ms ease;
 }
-
 body.page-index .streamer-row:last-child {
   border-bottom: 0 !important;
 }
-
 body.page-index .streamer-row:hover,
 body.page-index .streamer-row:focus-visible {
   background: var(--surface-hover) !important;
-  outline: none;
 }
-
 body.page-index .streamer-row:has(.streamer-menu[open]) {
   z-index: 80;
   background: var(--surface-hover) !important;
 }
-
-body.page-index .streamer-main {
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
 body.page-index .avatar {
   width: 44px !important;
   height: 44px !important;
   flex: 0 0 44px !important;
   border: 1px solid var(--border) !important;
-  border-radius: 10px !important;
+  border-radius: var(--nebula-radius-sm) !important;
   color: var(--text-primary) !important;
   background: var(--surface-raised) !important;
 }
-
 body.page-index .avatar.recording,
 body.page-index .avatar.online {
   background: var(--surface-active) !important;
 }
-
 body.page-index .avatar img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
-
-body.page-index .streamer-name {
-  margin: 0 0 5px !important;
-  color: var(--text-primary) !important;
-  font-size: 15px !important;
-  font-weight: 650 !important;
-  letter-spacing: -0.01em !important;
-}
-
-body.page-index .status-badge {
-  padding: 0 !important;
-  display: inline-flex !important;
-  align-items: center;
-  gap: 6px;
-  border: 0 !important;
-  border-radius: 0 !important;
-  color: var(--text-secondary) !important;
-  background: transparent !important;
-  font-size: 12px !important;
-  font-weight: 560 !important;
-}
-
-body.page-index .status-badge .status-dot {
-  width: 7px;
-  height: 7px;
-  flex-basis: 7px;
-  background: var(--offline);
-}
-
-body.page-index .status-badge.live {
-  color: var(--danger) !important;
-}
-
-body.page-index .status-badge.live .status-dot {
-  background: var(--danger);
-}
-
-body.page-index .status-badge.online {
-  color: var(--success) !important;
-}
-
-body.page-index .status-badge.online .status-dot {
-  background: var(--success);
-}
-
-body.page-index .streamer-cell span {
-  display: block;
-  color: var(--text-muted);
-  font-size: 12px;
-  font-weight: 600;
-}
-
-body.page-index .streamer-cell strong {
-  margin-top: 4px;
-  display: block;
-  color: var(--text-primary);
-  font-size: 14px;
-  font-weight: 620;
-}
-
-body.page-index .streamer-cell.wide strong {
-  color: var(--text-secondary);
-}
-
-body.page-index .streamer-actions {
-  position: relative;
-  z-index: 2;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 8px;
-}
-
-body.page-index .streamer-actions .action-btn.primary {
-  min-width: 112px;
-}
-
 body.page-index .streamer-menu {
   position: relative;
   z-index: 90;
 }
-
 body.page-index .streamer-menu summary {
   width: 40px !important;
   min-width: 40px !important;
   padding: 0 !important;
   list-style: none;
 }
-
 body.page-index .streamer-menu summary::-webkit-details-marker {
   display: none;
 }
-
 body.page-index .streamer-menu-popover {
   position: absolute;
   right: 0;
@@ -11531,9 +6801,8 @@ body.page-index .streamer-menu-popover {
   background: var(--surface-active);
   box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
 }
-
 body.page-index .streamer-menu-popover a,
-body.page-index .streamer-menu-popover button {
+body.page-index .streamer-menu-popover button:where(:not(.sv-btn)) {
   width: 100% !important;
   min-height: 34px !important;
   padding: 0 9px !important;
@@ -11544,72 +6813,40 @@ body.page-index .streamer-menu-popover button {
   border-radius: var(--radius-sm) !important;
   color: var(--text-secondary) !important;
   background: transparent !important;
-  font-size: 13px !important;
+  font-size: var(--sv-text-sm) !important;
   font-weight: 600 !important;
   text-decoration: none !important;
   cursor: pointer;
 }
-
 body.page-index .streamer-menu-popover a:hover,
-body.page-index .streamer-menu-popover button:hover,
+body.page-index .streamer-menu-popover button:where(:not(.sv-btn)):hover,
 body.page-index .streamer-menu-popover a:focus-visible,
-body.page-index .streamer-menu-popover button:focus-visible {
+body.page-index .streamer-menu-popover button:where(:not(.sv-btn)):focus-visible {
   color: var(--text-primary) !important;
   background: var(--surface-hover) !important;
-  outline: none !important;
 }
-
 body.page-index .streamer-menu-popover form {
   margin: 0;
 }
-
-body.page-index .dashboard-empty {
-  padding: 36px 20px !important;
-  text-align: center;
-  color: var(--text-secondary) !important;
-}
-
-body.page-index .dashboard-empty h3 {
-  margin: 0 0 8px;
-  color: var(--text-primary);
-  font-size: 18px;
-}
-
-body.page-index .dashboard-empty p {
-  margin: 0 0 18px;
-}
-
 @keyframes dashboard-live-pulse {
   0%, 100% { opacity: 0.75; }
   50% { opacity: 1; }
 }
-
 @media (prefers-reduced-motion: reduce) {
   body.page-index * {
     animation: none !important;
     transition: none !important;
   }
 }
-
 @media (max-width: 1000px) {
-  body.page-index .dashboard-main-grid {
-    grid-template-columns: 1fr;
-  }
-
   body.page-index .streamer-row {
     grid-template-columns: minmax(220px, 1fr) minmax(100px, auto) auto;
   }
-
-  body.page-index .streamer-cell.wide {
-    display: none;
-  }
 }
-
 @media (max-width: 720px) {
   body.page-index {
     display: block !important;
   }
-
   body.page-index .sidebar {
     position: sticky !important;
     top: 0 !important;
@@ -11620,11 +6857,9 @@ body.page-index .dashboard-empty p {
     border-right: 0 !important;
     border-bottom: 1px solid var(--border) !important;
   }
-
   body.page-index .brand {
     display: none !important;
   }
-
   body.page-index nav {
     min-height: 64px !important;
     padding: 0 !important;
@@ -11632,1382 +6867,788 @@ body.page-index .dashboard-empty p {
     justify-content: flex-start !important;
     overflow-x: auto !important;
   }
-
-  body.page-index .nav-logout-form {
-    width: auto !important;
-    margin-left: auto !important;
-    padding-top: 0 !important;
-    border-top: 0 !important;
-  }
-
-  body.page-index .nav-item[aria-label]::after {
-    display: none !important;
-  }
-
   body.page-index .main {
     width: 100% !important;
     padding: 0 16px 28px !important;
   }
-
-  body.page-index .dashboard-header {
-    min-height: auto !important;
-    margin: 0 -16px 16px !important;
-    padding: 14px 16px !important;
-    align-items: flex-start !important;
-    flex-direction: column !important;
-  }
-
-  body.page-index .dashboard-header-actions {
-    width: 100% !important;
-    display: flex !important;
-  }
-
-  body.page-index .dashboard-search-button {
-    flex: 1;
-  }
-
-  body.page-index .dashboard-statusline {
-    align-items: flex-start;
-  }
-
-  body.page-index .statusline-tools,
   body.page-index .theme-picker {
     width: 100%;
   }
-
   body.page-index .theme-picker {
     justify-content: space-between;
   }
-
   body.page-index .streamer-row {
     grid-template-columns: 1fr;
     align-items: stretch;
   }
-
-  body.page-index .streamer-cell {
-    display: grid;
-    grid-template-columns: 110px 1fr;
-    gap: 8px;
-  }
-
-  body.page-index .streamer-cell span,
-  body.page-index .streamer-cell strong {
-    margin: 0;
-  }
-
-  body.page-index .streamer-actions {
-    justify-content: space-between;
-  }
-
   body.page-index .streamer-menu-popover {
     top: auto;
     bottom: calc(100% + 8px);
   }
 }
-
-/* === Tube audit 20260720 — brand + multi-source === */
-:root {
-  --ns-purple: var(--tube-accent, #f2e58d) !important;
-  --ns-purple-2: var(--tube-accent-hover, #fff3a9) !important;
-  --radius: 10px;
-  --radius-card: 10px;
-}
-
 body.page-mobile-index .header,
 body.page-mobile-streamer .header,
 body.page-mobile-player .header {
   letter-spacing: 0.01em;
 }
-
 .platform-badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 28px;
   padding: 2px 7px;
-  border-radius: 999px;
-  font-size: 10px;
+  border-radius: var(--nebula-radius-full);
+  font-size: var(--sv-min-text);
   font-weight: 700;
   letter-spacing: 0.04em;
   line-height: 1.2;
-  border: 1px solid color-mix(in srgb, var(--tube-accent, #f2e58d) 45%, transparent);
-  background: color-mix(in srgb, var(--tube-accent, #f2e58d) 16%, transparent);
-  color: var(--tube-accent, #f2e58d);
+  border: 1px solid color-mix(in srgb, var(--tube-accent) 45%, transparent);
+  background: color-mix(in srgb, var(--tube-accent) 16%, transparent);
+  color: var(--tube-accent);
   text-transform: uppercase;
 }
-
 .platform-badge.platform-youtube {
   border-color: color-mix(in srgb, #ff6b6b 50%, transparent);
   background: color-mix(in srgb, #ff6b6b 14%, transparent);
   color: #ffb4b4;
 }
-
 .platform-badge.platform-twitch {
-  border-color: color-mix(in srgb, var(--tube-accent, #f2e58d) 45%, transparent);
-  background: color-mix(in srgb, var(--tube-accent, #f2e58d) 16%, transparent);
-  color: var(--tube-accent, #f2e58d);
+  border-color: color-mix(in srgb, var(--tube-accent) 45%, transparent);
+  background: color-mix(in srgb, var(--tube-accent) 16%, transparent);
+  color: var(--tube-accent);
 }
-
-.drive-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1px 7px;
-  border-radius: 999px;
-  font-size: 10px;
+.vod-card .platform-badge {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  z-index: 2;
+}
+.vod-filename-meta {
+  margin-top: 4px;
+  font-size: var(--sv-text-xs);
+}
+.vod-description,
+.mobile-vod-description {
+  margin-top: 10px;
+  max-width: 72ch;
+  color: var(--text-muted);
+  font-size: var(--sv-text-md);
+  line-height: 1.55;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.vod-admin-meta-form,
+.vod-admin-rename-form {
+  margin-bottom: 14px;
+}
+.vod-admin-field input,
+.vod-admin-field textarea {
+  font: inherit;
+}
+.vod-admin-field textarea {
+  resize: vertical;
+  min-height: 96px;
+}
+/* Chat-jump lane removed from VOD player (was overlaying the video). */
+/* Chat-Jump + related recordings (feature styles) */
+.related-recordings {
+  margin: 16px 0 8px;
+  padding: 14px 16px;
+  border: 1px solid var(--border);
+  border-radius: var(--nebula-radius-sm);
+  background: var(--surface);
+}
+.related-recordings-head {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-bottom: 10px;
+}
+.related-kicker {
+  font-size: var(--sv-min-text);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.related-recordings-head strong {
+  font-size: var(--sv-text-lg);
   font-weight: 700;
-  letter-spacing: 0.04em;
-  line-height: 1.2;
-  border: 1px solid rgba(59, 130, 246, 0.45);
-  background: rgba(59, 130, 246, 0.18);
-  color: #93c5fd;
+}
+.related-recordings-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 10px;
+}
+.related-recording-card {
+  display: grid;
+  gap: 6px;
+  padding: 12px;
+  border-radius: var(--nebula-radius-sm);
+  border: 1px solid var(--border);
+  background: rgba(0, 0, 0, 0.18);
+  text-decoration: none;
+  color: inherit;
+}
+.related-recording-card:hover {
+  border-color: var(--tube-accent, var(--accent));
+}
+/* WoW Stalk admin */
+body.page-stalk label span {
+  display: block;
+  margin-bottom: 7px;
+  color: var(--text-muted);
+  font-size: var(--sv-text-xs);
+  font-weight: 600;
   text-transform: uppercase;
+  letter-spacing: .05em;
+}
+body.page-stalk .badge.success {
+  background: rgba(34,197,94,.2);
+  color: #86efac;
+}
+body.page-stalk .success {
+  color: #86efac;
+}
+body.page-stalk .fail {
+  color: #f87171;
+}
+/* ===== Twitch Live Hub + Embed Watch (StreamVault) ===== */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border: 0;
+}
+body.page-twitch-live,
+body.page-twitch-watch {
+  --twitch-gap: 16px;
+  background: var(--tube-bg, var(--bg));
+  color: var(--tube-text, var(--ink));
+  min-height: 100vh;
+  display: flex;
+}
+body.page-twitch-live .main,
+body.page-twitch-watch .main {
+  flex: 1;
+  min-width: 0;
+  padding: 20px 22px 32px;
+}
+body.page-twitch-live .twitch-live-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+  margin-bottom: 18px;
+  flex-wrap: wrap;
+}
+body.page-twitch-live .page-subtitle {
+  color: var(--tube-muted, var(--muted));
+  margin: 4px 0 0;
+}
+body.page-twitch-live .twitch-live-search {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  min-width: min(100%, 420px);
+}
+body.page-twitch-live .twitch-live-search input,
+body.page-twitch-live .twitch-category-search input {
+  flex: 1;
+  min-width: 180px;
+  min-height: 42px;
+  padding: 10px 12px;
+  border-radius: var(--nebula-radius-sm);
+  border: 1px solid rgba(255,255,255,.1);
+  background: rgba(0,0,0,.28);
+  color: inherit;
+}
+body.page-twitch-live .twitch-live-search input:focus,
+body.page-twitch-live .twitch-category-search input:focus {
+  border-color: var(--tube-accent);
+  box-shadow: 0 0 0 2px rgba(242,229,141,.18);
+}
+body.page-twitch-live .twitch-status.warn {
+  background: rgba(245,158,11,.12);
+  border: 1px solid rgba(245,158,11,.35);
+  color: #fbbf24;
+}
+body.page-twitch-live .twitch-status {
+  margin-bottom: 12px;
+  font-size: var(--sv-text-sm);
+  color: var(--tube-muted);
+}
+body.page-twitch-live .twitch-status.error {
+  color: #f87171;
+}
+body.page-twitch-live .twitch-section {
+  margin-bottom: 28px;
+}
+body.page-twitch-live .twitch-section-head,
+body.page-twitch-watch .twitch-section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+  flex-wrap: wrap;
+}
+body.page-twitch-live .twitch-section-head h2,
+body.page-twitch-watch .twitch-section-head h3 {
+  margin: 0;
+  font-size: var(--sv-text-lg);
+}
+body.page-twitch-live .twitch-section-meta {
+  color: var(--tube-muted);
+  font-size: var(--sv-text-sm);
+}
+body.page-twitch-live .twitch-chip-row {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+body.page-twitch-live .twitch-chip {
+  min-height: 34px;
+  padding: 6px 12px;
+  border-radius: var(--nebula-radius-full);
+  border: 1px solid rgba(255,255,255,.12);
+  background: rgba(255,255,255,.04);
+  color: inherit;
+  cursor: pointer;
+  font-size: var(--sv-text-xs);
+  font-weight: 600;
 }
-
-.source-chip,
-.source-chip-row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 6px;
+body.page-twitch-live .twitch-chip.active,
+body.page-twitch-live .twitch-chip:hover {
+  border-color: rgba(242,229,141,.45);
+  background: rgba(242,229,141,.12);
+  color: var(--tube-accent);
 }
-
-.source-chip-row {
-  margin-top: 4px;
+body.page-twitch-live .twitch-category-search {
+  margin-bottom: 12px;
+}
+body.page-twitch-live .twitch-stream-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 14px;
 }
-
-.source-external-link {
-  color: var(--tube-accent, #f2e58d);
-  font-size: 13px;
+body.page-twitch-live .twitch-stream-card {
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--nebula-radius-sm);
+  overflow: hidden;
+  border: 1px solid rgba(255,255,255,.08);
+  background: rgba(255,255,255,.03);
+  color: inherit;
   text-decoration: none;
+  min-width: 0;
+  transition: border-color .15s ease, transform .15s ease;
 }
-
-.source-external-link:hover {
-  color: var(--tube-accent-hover, #fff3a9);
-  text-decoration: underline;
+body.page-twitch-live .twitch-stream-card:hover,
+body.page-twitch-live .twitch-stream-card:focus-visible {
+  border-color: rgba(255,92,102,.45);
+  transform: translateY(-1px);
 }
-
-.archive-sources-block {
-  margin-top: 14px;
-  padding-top: 14px;
-  border-top: 1px solid var(--border);
+body.page-twitch-live .twitch-thumb-wrap {
+  position: relative;
+  aspect-ratio: 16/9;
+  background: #000;
+  overflow: hidden;
 }
-
-.archive-sources-label {
-  margin-bottom: 8px;
+body.page-twitch-live .twitch-thumb-wrap img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
 }
-
-.archive-sources-list {
+body.page-twitch-live .twitch-thumb-offline {
+  width: 100%;
+  height: 100%;
   display: flex;
-  flex-direction: column;
-  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  color: var(--nebula-text-muted);
+  font-size: var(--sv-text-sm);
+  background: linear-gradient(180deg, var(--nebula-bg-surface), #0e0e10);
 }
-
-.archive-source-row {
-  gap: 10px;
+body.page-twitch-live .twitch-live-pill,
+body.page-twitch-watch .twitch-live-pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 8px;
+  border-radius: var(--nebula-radius-xs);
+  background: var(--tube-live);
+  color: #fff;
+  font-size: var(--sv-min-text);
+  font-weight: 800;
+  letter-spacing: .04em;
 }
-
-.archive-source-name {
-  font-size: 13px;
+body.page-twitch-live .twitch-thumb-wrap .twitch-live-pill {
+  position: absolute;
+  top: 8px;
+  left: 8px;
 }
-
-.source-record-toggle {
-  padding: 4px 10px;
-  font-size: 12px;
+body.page-twitch-live .twitch-viewers {
+  position: absolute;
+  left: 8px;
+  bottom: 8px;
+  padding: 3px 7px;
+  border-radius: var(--nebula-radius-xs);
+  background: rgba(0,0,0,.72);
+  color: #fff;
+  font-size: var(--sv-min-text);
+  font-weight: 600;
 }
-
-.source-record-toggle.is-on {
-  background: rgba(34, 197, 94, 0.15);
-  color: #86efac;
+body.page-twitch-live .twitch-card-body {
+  display: grid;
+  gap: 4px;
+  padding: 10px 12px 12px;
+  min-width: 0;
 }
-
-.source-record-toggle.is-off {
-  background: rgba(148, 163, 184, 0.15);
-  color: #cbd5e1;
+body.page-twitch-live .twitch-card-title {
+  font-size: var(--sv-text-md);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-
-.btn-empty-folder {
-  background: color-mix(in srgb, var(--tube-accent, #f2e58d) 18%, transparent);
-  color: var(--tube-accent, #f2e58d);
+body.page-twitch-live .twitch-card-meta,
+body.page-twitch-live .twitch-card-game {
+  font-size: var(--sv-text-xs);
+  color: var(--tube-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-
-.channel-groups {
-  display: flex;
-  flex-direction: column;
-  gap: 18px;
-  margin-top: 16px;
+body.page-twitch-live .twitch-empty,
+body.page-twitch-watch .twitch-empty {
+  padding: 22px;
+  border: 1px dashed rgba(255,255,255,.12);
+  border-radius: var(--nebula-radius-sm);
+  color: var(--tube-muted);
+  text-align: center;
+  grid-column: 1 / -1;
 }
-
-.channel-group-label {
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: var(--muted, #a1a1aa);
-  margin-bottom: 8px;
+body.page-twitch-watch .twitch-empty.compact {
+  padding: 12px;
 }
-
-.channel-chip.source-chip {
-  gap: 8px;
+/* Watch layout */
+body.page-twitch-watch .twitch-player-frame {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16/9;
+  max-height: min(72vh, 900px);
+  background: #000;
+  border-radius: var(--nebula-radius-sm);
+  overflow: hidden;
+  border: 1px solid rgba(255,255,255,.08);
+  flex: 0 0 auto;
 }
-
-.channel-chip-archive {
-  opacity: 0.7;
-  font-weight: 500;
-  font-size: 12px;
+body.page-twitch-watch .twitch-player-frame iframe,
+body.page-twitch-watch .twitch-proxy-video {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: #000;
+  object-fit: contain;
 }
-
-.recording-now-strip {
-  margin: 0 0 18px;
-  padding: 14px 16px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-card, 10px);
-  background: color-mix(in srgb, var(--panel, #18181b) 92%, var(--tube-accent, #f2e58d));
+body.page-twitch-watch .twitch-embed-wrapper {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16/9;
+  max-height: min(72vh, 900px);
+  background: #000;
+  border-radius: var(--nebula-radius-sm);
+  overflow: hidden;
+  border: 1px solid rgba(255,255,255,.08);
+  flex: 0 0 auto;
 }
-
-.recording-now-head {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  gap: 12px;
-  margin-bottom: 10px;
+body.page-twitch-watch .twitch-proxy-wait {
+  position: absolute;
+  inset: 0;
+  display: none;
+  place-items: center;
+  padding: 24px;
+  background: #050505;
+  z-index: 2;
 }
-
-.recording-now-head span,
-.continue-watching-shelf .section-head p {
-  color: var(--muted, #a1a1aa);
-  font-size: 13px;
+body.page-twitch-watch .twitch-proxy-wait.is-visible {
+  display: grid;
 }
-
-.recording-now-list {
-  display: flex;
-  gap: 10px;
-  overflow-x: auto;
-  padding-bottom: 2px;
+body.page-twitch-watch .twitch-proxy-status {
+  margin: 0;
+  font-size: var(--sv-text-xs);
+  color: var(--nebula-text-muted);
+  font-family: "IBM Plex Mono", ui-monospace, monospace;
 }
-
-.recording-now-item {
-  min-width: 180px;
-  max-width: 260px;
+body.page-twitch-watch .twitch-proxy-wait-card {
+  max-width: 420px;
+  text-align: center;
   display: grid;
-  gap: 4px;
-  padding: 10px 12px;
-  border-radius: 10px;
-  border: 1px solid var(--border);
-  background: rgba(0, 0, 0, 0.18);
-  color: inherit;
-  text-decoration: none;
+  gap: 8px;
+  color: var(--nebula-text-main);
 }
-
-.recording-now-item:hover {
-  border-color: color-mix(in srgb, var(--tube-accent, #f2e58d) 55%, transparent);
+body.page-twitch-watch .twitch-proxy-wait-card strong {
+  font-size: var(--sv-text-base);
 }
-
-.recording-now-status {
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.03em;
-  text-transform: uppercase;
-  color: var(--tube-accent, #f2e58d);
+body.page-twitch-watch .twitch-proxy-wait-card p {
+  margin: 0;
+  color: var(--nebula-text-secondary);
+  font-size: var(--sv-text-md);
+  line-height: 1.45;
 }
-
-.recording-now-item.status-recording .recording-now-status,
-.recording-now-item.status-starting .recording-now-status {
-  color: #f87171;
+/* Mobile live/VOD meta bar under the player */
+body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-details-main {
+  margin-bottom: 8px;
 }
-
-.recording-now-name {
-  font-weight: 700;
+body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-kicker {
+  margin-bottom: 4px;
 }
-
-.recording-now-meta,
-.recording-now-viewers {
-  font-size: 12px;
-  color: var(--muted, #a1a1aa);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-display-title {
+  letter-spacing: -0.01em;
+  overflow-wrap: anywhere;
 }
-
-.continue-watching-shelf {
-  margin: 0 0 22px;
+body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .mobile-vod-stream-title {
+  margin: 4px 0 0;
+  font-size: var(--sv-text-xs);
+  font-weight: 500;
+  line-height: 1.35;
+  color: var(--nebula-text-secondary);
+  overflow-wrap: anywhere;
 }
-
-.continue-watching-shelf[hidden] {
-  display: none !important;
+body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-details-side {
+  flex-wrap: wrap;
 }
-
-.continue-watching-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  gap: 10px;
+body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-facts {
+  flex-wrap: wrap;
 }
-
-.continue-watching-card {
-  display: grid;
-  gap: 6px;
-  padding: 12px;
-  border-radius: var(--radius-card, 10px);
-  border: 1px solid var(--border);
-  background: rgba(0, 0, 0, 0.18);
-  color: inherit;
-  text-decoration: none;
+body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-facts div {
+  flex-direction: row;
+  min-width: 0;
 }
-
-.continue-watching-card:hover {
-  border-color: color-mix(in srgb, var(--tube-accent, #f2e58d) 50%, transparent);
+body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-facts dt {
+  margin: 0;
+  letter-spacing: 0.06em;
+  flex: 0 0 auto;
 }
-
-.continue-watching-title {
-  font-weight: 650;
-  font-size: 14px;
+body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-facts dd {
+  margin: 0;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
+  min-width: 0;
 }
-
-.continue-watching-meta {
-  font-size: 12px;
-  color: var(--muted, #a1a1aa);
+body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-file-actions {
+  flex: 0 0 auto;
 }
-
-.vod-card .thumb-wrap,
-.video-card .thumb-wrap {
-  position: relative;
+body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-inline-tool {
+  letter-spacing: 0.01em;
+  line-height: 1;
+  box-shadow: none;
 }
-
-.vod-card .platform-badge,
-.video-card .thumb-wrap .platform-badge {
-  position: absolute;
-  top: 8px;
-  left: 8px;
-  z-index: 2;
+body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-inline-tool:focus-visible {
+  box-shadow: 0 0 0 3px rgba(242, 229, 141, 0.28);
 }
-
-.mobile-archive-sources {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin: 10px 0;
-  padding: 10px 12px;
-  border-radius: 10px;
-  background: rgba(0, 0, 0, 0.18);
-  border: 1px solid var(--border, #27272a);
+body:is(.page-twitch-watch-mobile, .page-mobile-player) .twitch-live-pill {
+  font-size: var(--sv-min-text);
+  padding: 2px 7px;
 }
-
-.vod-filename-meta {
-  margin-top: 4px;
-  font-size: 12px;
+body.page-twitch-watch-mobile .chat-container {
+  flex: 1 1 auto;
+  min-height: 0;
 }
-
-.vod-description,
-.mobile-vod-description {
-  margin-top: 10px;
-  max-width: 72ch;
-  color: var(--text-muted, #cfcfcf);
-  font-size: 14px;
-  line-height: 1.55;
-  white-space: pre-wrap;
+body.page-twitch-watch-mobile .chat-list {
+  padding: 8px 12px 24px;
+}
+body.page-twitch-watch-mobile .chat-line {
+  display: grid;
+  grid-template-columns: 36px minmax(0, 1fr);
+  gap: 6px;
+  align-items: baseline;
+  margin-bottom: 6px;
+}
+body.page-twitch-watch-mobile .chat-text {
+  min-width: 0;
   overflow-wrap: anywhere;
+  word-break: break-word;
 }
-.vod-admin-meta {
-  margin: 12px 0 18px;
-  padding: 14px 16px;
-  border: 1px solid rgba(255,255,255,0.12);
-  border-radius: 10px;
-  background: rgba(255,255,255,0.03);
+body.page-twitch-watch-mobile .twitch-mobile-player-frame {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16/9;
+  background: #000;
 }
-.vod-admin-meta-title {
-  margin: 0 0 12px;
-  font-size: 14px;
-  font-weight: 700;
-  color: #f5f5f5;
+body.page-twitch-watch-mobile .twitch-proxy-video,
+body.page-twitch-watch-mobile .twitch-proxy-wait {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
 }
-.vod-admin-meta-form,
-.vod-admin-rename-form {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  margin-bottom: 14px;
+body.page-twitch-watch-mobile .twitch-proxy-wait {
+  display: none;
+  place-items: center;
+  padding: 16px;
+  background: #050505;
+  z-index: 2;
 }
-.vod-admin-field {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  font-size: 12px;
-  color: var(--text-muted, #a1a1aa);
+body.page-twitch-watch-mobile .twitch-proxy-wait.is-visible {
+  display: grid;
 }
-.vod-admin-field input,
-.vod-admin-field textarea {
-  width: 100%;
-  box-sizing: border-box;
-  border-radius: 8px;
-  border: 1px solid rgba(255,255,255,0.14);
-  background: rgba(0,0,0,0.35);
-  color: #f5f5f5;
-  padding: 10px 12px;
-  font: inherit;
+@media (max-width: 900px) {
+  body.page-twitch-live,
+  body.page-twitch-watch {
+    flex-direction: column;
+  }
+  body.page-twitch-live .sidebar,
+  body.page-twitch-watch .sidebar {
+    width: 100%;
+  }
+  body.page-twitch-live .main,
+  body.page-twitch-watch .main {
+    padding: 14px 12px 88px;
+  }
+  body.page-twitch-live .twitch-stream-grid {
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+    gap: 10px;
+  }
+  body.page-twitch-watch .twitch-player-frame {
+    max-height: none;
+    border-radius: var(--nebula-radius-sm);
+  }
 }
-.vod-admin-field textarea {
-  resize: vertical;
-  min-height: 96px;
+@media (max-width: 560px) {
+  body.page-twitch-live .twitch-stream-grid {
+    grid-template-columns: 1fr 1fr;
+  }
 }
-.mobile-vod-admin {
-  margin: 0 12px 16px;
+@media (min-width: 1800px) {
+  body.page-twitch-watch .twitch-player-frame {
+    max-height: min(78vh, 980px);
+  }
 }
-
-/* Chat-jump lane removed from VOD player (was overlaying the video). */
-.chat-jump-lane,
-.chat-jump-track,
-.chat-jump-mark,
-.chat-jump-legend {
-  display: none !important;
+@media (orientation: landscape) and (max-height: 500px) {
+  body.page-twitch-watch .twitch-player-frame {
+    max-height: 58vh;
+  }
+  body.page-twitch-watch .vod-details {
+    padding: 6px 10px !important;
+  }
+  body.page-twitch-watch .twitch-switcher {
+    display: block !important;
+  }
 }
-
-/* Chat-Jump + related recordings (feature styles) */
-.related-recordings {
-  margin: 16px 0 8px;
-  padding: 14px 16px;
-  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
-  border-radius: 10px;
-  background: var(--surface, rgba(255, 255, 255, 0.03));
+/* ===== Twitch Watch aligned with VOD / mobile player ===== */
+body.page-twitch-watch.page-vod .twitch-embed-wrapper {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16/9;
+  max-height: min(72vh, 900px);
+  background: #000;
+  border-radius: var(--nebula-radius-md);
+  overflow: hidden;
+  flex: 0 0 auto;
 }
-.related-recordings-head {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  margin-bottom: 10px;
+body.page-twitch-watch.page-vod .twitch-embed-wrapper iframe {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  display: block;
 }
-.related-kicker {
-  font-size: 11px;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--muted, #9a9488);
+body.page-twitch-watch .twitch-live-pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 8px;
+  border-radius: var(--nebula-radius-xs);
+  background: var(--tube-live);
+  color: #fff;
+  font-size: var(--sv-min-text);
+  font-weight: 800;
+  letter-spacing: .04em;
+  margin-right: 6px;
 }
-.related-recordings-head strong {
-  font-size: 18px;
+body.page-twitch-watch .twitch-monitored-pill {
+  display: inline-flex;
+  padding: 3px 8px;
+  border-radius: var(--nebula-radius-xs);
+  font-size: var(--sv-min-text);
   font-weight: 700;
+  margin-right: 6px;
 }
-.related-recordings-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 10px;
+body.page-twitch-watch .twitch-monitored-pill {
+  background: rgba(242,229,141,.12);
+  color: var(--tube-accent);
 }
-.related-recording-card {
-  display: grid;
-  gap: 6px;
-  padding: 12px;
-  border-radius: 10px;
-  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
-  background: rgba(0, 0, 0, 0.18);
-  text-decoration: none;
-  color: inherit;
+body.page-twitch-watch .twitch-offline-banner {
+  padding: 12px 14px;
+  border-radius: var(--nebula-radius-sm);
+  background: rgba(255,92,102,.1);
+  border: 1px solid rgba(255,92,102,.28);
+  color: #fecaca;
+  font-size: var(--sv-text-sm);
 }
-.related-recording-card:hover {
-  border-color: var(--tube-accent, var(--accent, #c8f53a));
+body.page-twitch-watch .twitch-chat-empty {
+  padding: 14px 16px;
+  color: var(--text-muted);
+  font-size: var(--sv-text-sm);
 }
-
-
-/* WoW Stalk admin */
-body.page-stalk .stalk-header{ display:flex; justify-content:space-between; align-items:flex-start; gap:18px; }
-body.page-stalk .stalk-overview{ display:grid; grid-template-columns: minmax(260px, .9fr) minmax(320px, 1.1fr); gap:24px; margin-bottom:24px; }
-body.page-stalk .stalk-status-line{ display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid var(--border); font-size:14px; }
-body.page-stalk .stalk-status-line span{ color:var(--text-muted); }
-body.page-stalk .stalk-create-form{ display:grid; gap:16px; }
-body.page-stalk .stalk-form-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px; }
-body.page-stalk label span{ display:block; margin-bottom:7px; color:var(--text-muted); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
-body.page-stalk .stalk-create-form input,
-body.page-stalk .stalk-create-form select{ width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:rgba(0,0,0,.28); color:var(--text); outline:none; }
-body.page-stalk .stalk-create-form input:focus,
-body.page-stalk .stalk-create-form select:focus{ border-color:var(--primary); box-shadow:0 0 0 2px rgba(245,158,11,.2); }
-body.page-stalk .stalk-note{ margin-top:14px; color:var(--text-muted); font-size:13px; line-height:1.5; }
-body.page-stalk .stalk-panel-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; }
-body.page-stalk .stalk-panel-head h3{ margin:0; }
-body.page-stalk .stalk-table-wrap{ overflow-x:auto; }
-body.page-stalk .stalk-row-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
-body.page-stalk .stalk-row-actions form{ margin:0; }
-body.page-stalk .stalk-muted{ color:var(--text-muted); font-size:12px; }
-body.page-stalk .stalk-error{ color:#f87171; font-size:12px; margin-top:4px; }
-body.page-stalk .stalk-empty{ padding:28px; border:1px dashed var(--border); border-radius:12px; color:var(--text-muted); text-align:center; background:rgba(0,0,0,.16); }
-body.page-stalk .stalk-event-list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
-body.page-stalk .stalk-event-list li{ padding:10px 0; border-bottom:1px solid var(--border); }
-body.page-stalk .badge.success{ background:rgba(34,197,94,.2); color:#86efac; }
-body.page-stalk .success{ color:#86efac; }
-body.page-stalk .fail{ color:#f87171; }
-@media (max-width: 960px){
-  body.page-stalk .stalk-overview,
-  body.page-stalk .stalk-form-grid{ grid-template-columns:1fr; }
-}
-
-/* ===== Twitch Live Hub + Embed Watch (StreamVault) ===== */
-.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
-
-.btn-live-watch{
-  display:inline-flex;
-  align-items:center;
-  justify-content:center;
-  gap:6px;
-  min-height:40px;
-  padding:8px 14px;
-  border-radius:10px;
-  border:1px solid rgba(255,92,102,.45);
-  background: linear-gradient(180deg, rgba(255,92,102,.95), rgba(220,50,60,.95));
-  color:#fff !important;
-  font-weight:800;
-  font-size:12px;
-  letter-spacing:.04em;
-  text-transform:uppercase;
-  text-decoration:none;
-  white-space:nowrap;
-  box-shadow:0 8px 20px rgba(255,92,102,.18);
-}
-.btn-live-watch:hover{ filter:brightness(1.05); }
-.btn-live-watch:focus-visible{ outline:2px solid var(--tube-accent, #f2e58d); outline-offset:2px; }
-
-body.page-twitch-live,
-body.page-twitch-watch{
-  --twitch-gap: 16px;
-  background: var(--tube-bg, var(--bg, #0b0b0f));
-  color: var(--tube-text, var(--ink, #f4f4f5));
-  min-height:100vh;
-  display:flex;
+body.page-twitch-watch .twitch-chat-empty.compact {
+  padding: 8px 10px;
+  font-size: var(--sv-text-xs);
 }
-body.page-twitch-live .main,
-body.page-twitch-watch .main{
-  flex:1;
-  min-width:0;
-  padding:20px 22px 32px;
-}
-body.page-twitch-live .twitch-live-header,
-body.page-twitch-watch .twitch-watch-header{
-  display:flex;
-  justify-content:space-between;
-  align-items:flex-start;
-  gap:16px;
-  margin-bottom:18px;
-  flex-wrap:wrap;
-}
-body.page-twitch-live .page-subtitle{ color:var(--tube-muted, var(--muted, #a1a1aa)); margin:4px 0 0; }
-body.page-twitch-live .twitch-live-search{
-  display:flex;
-  gap:8px;
-  flex-wrap:wrap;
-  min-width:min(100%, 420px);
+body.page-twitch-watch .twitch-switcher {
+  margin-top: 4px;
 }
-body.page-twitch-live .twitch-live-search input,
-body.page-twitch-live .twitch-category-search input{
-  flex:1;
-  min-width:180px;
-  min-height:42px;
-  padding:10px 12px;
-  border-radius:10px;
-  border:1px solid rgba(255,255,255,.1);
-  background:rgba(0,0,0,.28);
-  color:inherit;
-  outline:none;
+body.page-twitch-watch .twitch-switcher-item {
+  align-items: center;
+  gap: 8px;
+  min-height: 40px;
+  padding: 8px 12px;
+  border-radius: var(--nebula-radius-sm);
+  border: 1px solid rgba(255,255,255,.1);
+  background: rgba(255,255,255,.03);
+  color: inherit;
+  text-decoration: none;
 }
-body.page-twitch-live .twitch-live-search input:focus,
-body.page-twitch-live .twitch-category-search input:focus{
-  border-color: var(--tube-accent, #f2e58d);
-  box-shadow:0 0 0 2px rgba(242,229,141,.18);
-}
-body.page-twitch-live .twitch-banner{
-  padding:12px 14px;
-  border-radius:10px;
-  margin-bottom:16px;
-  font-size:13px;
-  line-height:1.45;
-}
-body.page-twitch-live .twitch-banner.warn,
-body.page-twitch-live .twitch-status.warn{
-  background:rgba(245,158,11,.12);
-  border:1px solid rgba(245,158,11,.35);
-  color:#fbbf24;
-}
-body.page-twitch-live .twitch-status{
-  margin-bottom:12px;
-  font-size:13px;
-  color:var(--tube-muted, #a1a1aa);
-}
-body.page-twitch-live .twitch-status.error{ color:#f87171; }
-body.page-twitch-live .twitch-section{ margin-bottom:28px; }
-body.page-twitch-live .twitch-section-head,
-body.page-twitch-watch .twitch-section-head{
-  display:flex;
-  align-items:center;
-  justify-content:space-between;
-  gap:12px;
-  margin-bottom:12px;
-  flex-wrap:wrap;
+body.page-twitch-watch .twitch-switcher-item.active,
+body.page-twitch-watch .twitch-switcher-item:hover {
+  border-color: rgba(255,92,102,.4);
 }
-body.page-twitch-live .twitch-section-head h2,
-body.page-twitch-watch .twitch-section-head h3{
-  margin:0;
-  font-size:18px;
-}
-body.page-twitch-live .twitch-section-meta{ color:var(--tube-muted, #a1a1aa); font-size:13px; }
-body.page-twitch-live .twitch-chip-row{
-  display:flex;
-  gap:8px;
-  flex-wrap:wrap;
-}
-body.page-twitch-live .twitch-chip{
-  min-height:34px;
-  padding:6px 12px;
-  border-radius:999px;
-  border:1px solid rgba(255,255,255,.12);
-  background:rgba(255,255,255,.04);
-  color:inherit;
-  cursor:pointer;
-  font-size:12px;
-  font-weight:600;
+body.page-twitch-watch .twitch-live-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--tube-live);
 }
-body.page-twitch-live .twitch-chip.active,
-body.page-twitch-live .twitch-chip:hover{
-  border-color: rgba(242,229,141,.45);
-  background: rgba(242,229,141,.12);
-  color: var(--tube-accent, #f2e58d);
+body.page-twitch-watch .twitch-section-head h3 {
+  margin: 0 0 8px;
+  font-size: var(--sv-text-md);
 }
-body.page-twitch-live .twitch-category-search{ margin-bottom:12px; }
-body.page-twitch-live .twitch-stream-grid{
-  display:grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-  gap:14px;
-}
-body.page-twitch-live .twitch-stream-card{
-  display:flex;
-  flex-direction:column;
-  border-radius:10px;
-  overflow:hidden;
-  border:1px solid rgba(255,255,255,.08);
-  background: rgba(255,255,255,.03);
-  color:inherit;
-  text-decoration:none;
-  min-width:0;
-  transition: border-color .15s ease, transform .15s ease;
+/* Mobile watch = same shell as VOD mobile player */
+body.page-twitch-watch-mobile.page-mobile-player .twitch-mobile-player-frame {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  background: #000;
 }
-body.page-twitch-live .twitch-stream-card:hover,
-body.page-twitch-live .twitch-stream-card:focus-visible{
-  border-color: rgba(255,92,102,.45);
-  transform: translateY(-1px);
-  outline:none;
-}
-body.page-twitch-live .twitch-thumb-wrap{
-  position:relative;
-  aspect-ratio:16/9;
-  background:#000;
-  overflow:hidden;
-}
-body.page-twitch-live .twitch-thumb-wrap img{
-  width:100%;
-  height:100%;
-  object-fit:cover;
-  display:block;
-}
-body.page-twitch-live .twitch-thumb-offline{
-  width:100%;
-  height:100%;
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  color:#71717a;
-  font-size:13px;
-  background:linear-gradient(180deg, #18181b, #0e0e10);
+body.page-twitch-watch-mobile.page-mobile-player .twitch-mobile-player-frame iframe {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  display: block;
 }
-body.page-twitch-live .twitch-live-pill,
-body.page-twitch-watch .twitch-live-pill{
-  display:inline-flex;
-  align-items:center;
-  padding:3px 8px;
-  border-radius:6px;
-  background: var(--tube-live, #ff5c66);
-  color:#fff;
-  font-size:11px;
-  font-weight:800;
-  letter-spacing:.04em;
-}
-body.page-twitch-live .twitch-thumb-wrap .twitch-live-pill{
-  position:absolute;
-  top:8px;
-  left:8px;
-}
-body.page-twitch-live .twitch-viewers{
-  position:absolute;
-  left:8px;
-  bottom:8px;
-  padding:3px 7px;
-  border-radius:6px;
-  background:rgba(0,0,0,.72);
-  color:#fff;
-  font-size:11px;
-  font-weight:600;
-}
-body.page-twitch-live .twitch-card-body{
-  display:grid;
-  gap:4px;
-  padding:10px 12px 12px;
-  min-width:0;
-}
-body.page-twitch-live .twitch-card-title{
-  font-size:14px;
-  overflow:hidden;
-  text-overflow:ellipsis;
-  white-space:nowrap;
+body.page-twitch-watch-mobile .overlay-header-meta {
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  flex: 1 1 auto;
+  margin: 0 10px;
 }
-body.page-twitch-live .twitch-card-meta,
-body.page-twitch-live .twitch-card-game{
-  font-size:12px;
-  color:var(--tube-muted, #a1a1aa);
-  overflow:hidden;
-  text-overflow:ellipsis;
-  white-space:nowrap;
+body.page-twitch-watch-mobile .overlay-stream-name {
+  color: #fff;
+  font-size: var(--sv-text-md);
+  font-weight: 700;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-shadow: 0 1px 3px rgba(0,0,0,0.85);
 }
-body.page-twitch-live .twitch-empty,
-body.page-twitch-watch .twitch-empty{
-  padding:22px;
-  border:1px dashed rgba(255,255,255,.12);
-  border-radius:10px;
-  color:var(--tube-muted, #a1a1aa);
-  text-align:center;
-  grid-column:1 / -1;
-}
-body.page-twitch-watch .twitch-empty.compact{ padding:12px; }
-
-/* Watch layout */
-body.page-twitch-watch .twitch-watch-heading{
-  display:flex;
-  align-items:flex-start;
-  gap:14px;
-  min-width:0;
-}
-body.page-twitch-watch .twitch-watch-kicker{
-  display:flex;
-  gap:8px;
-  align-items:center;
-  margin-bottom:4px;
-  flex-wrap:wrap;
-}
-body.page-twitch-watch .twitch-offline-pill,
-body.page-twitch-watch .twitch-monitored-pill{
-  display:inline-flex;
-  padding:3px 8px;
-  border-radius:6px;
-  font-size:11px;
-  font-weight:700;
-}
-body.page-twitch-watch .twitch-offline-pill{
-  background:rgba(255,255,255,.08);
-  color:#a1a1aa;
-}
-body.page-twitch-watch .twitch-monitored-pill{
-  background:rgba(242,229,141,.12);
-  color:var(--tube-accent, #f2e58d);
-}
-body.page-twitch-watch .twitch-watch-actions{
-  display:flex;
-  gap:8px;
-  flex-wrap:wrap;
-  align-items:center;
-}
-body.page-twitch-watch .twitch-watch-layout{
-  display:grid;
-  gap:16px;
-  align-items:start;
-}
-body.page-twitch-watch .twitch-watch-layout.chat-open{
-  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
-}
-body.page-twitch-watch .twitch-watch-layout.chat-closed{
-  grid-template-columns: minmax(0, 1fr);
+body.page-twitch-watch-mobile .chat-toggle {
+  background: transparent;
+  border: 1px solid rgba(255,255,255,.15);
+  color: #ccc;
+  border-radius: var(--nebula-radius-xs);
+  padding: 4px 8px;
+  font-size: var(--sv-min-text);
+  min-height: 32px;
 }
-body.page-twitch-watch .twitch-player-shell{
-  width:100%;
-  max-width: min(100%, 1600px);
-  margin:0 auto;
-}
-body.page-twitch-watch .twitch-player-frame{
-  position:relative;
-  width:100%;
-  aspect-ratio:16/9;
-  max-height:min(72vh, 900px);
-  background:#000;
-  border-radius:10px;
-  overflow:hidden;
-  border:1px solid rgba(255,255,255,.08);
-  flex:0 0 auto;
+/* chat-line grid defined with mobile-vod-details block above */
+body.page-twitch-watch-mobile .chat-time {
+  color: #555;
+  font-size: var(--sv-min-text);
 }
-body.page-twitch-watch .twitch-player-frame iframe,
-body.page-twitch-watch .twitch-proxy-video{
-  position:absolute;
-  inset:0;
-  width:100%;
-  height:100%;
-  border:0;
-  background:#000;
-  object-fit:contain;
-}
-body.page-twitch-watch .twitch-embed-wrapper{
-  position:relative;
-  width:100%;
-  aspect-ratio:16/9;
-  max-height:min(72vh, 900px);
-  background:#000;
-  border-radius:10px;
-  overflow:hidden;
-  border:1px solid rgba(255,255,255,.08);
-  flex:0 0 auto;
-}
-body.page-twitch-watch .twitch-proxy-wait{
-  position:absolute;
-  inset:0;
-  display:none;
-  place-items:center;
-  padding:24px;
-  background:#050505;
-  z-index:2;
-}
-body.page-twitch-watch .twitch-proxy-wait.is-visible{
-  display:grid;
-}
-body.page-twitch-watch .twitch-proxy-status{
-  margin:0;
-  font-size:12px;
-  color:#7a7a7a;
-  font-family:"IBM Plex Mono", ui-monospace, monospace;
-}
-body.page-twitch-watch .twitch-proxy-wait-card{
-  max-width:420px;
-  text-align:center;
-  display:grid;
-  gap:8px;
-  color:#f5f5f5;
-}
-body.page-twitch-watch .twitch-proxy-wait-card strong{
-  font-size:16px;
-}
-body.page-twitch-watch .twitch-proxy-wait-card p{
-  margin:0;
-  color:#a1a1aa;
-  font-size:14px;
-  line-height:1.45;
+body.page-twitch-watch-mobile .chat-user {
+  font-weight: 700;
+  margin-right: 4px;
 }
-/* Mobile live/VOD meta bar under the player */
-body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details{
-  flex:0 0 auto;
-  padding:10px 12px 12px;
-  background:#0e0e10;
-  border-bottom:1px solid #27272a;
-}
-body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-details-main{
-  margin-bottom:8px;
-}
-body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-kicker{
-  margin-bottom:4px;
-}
-body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-display-title{
-  margin:0;
-  font-size:16px;
-  font-weight:700;
-  line-height:1.25;
-  letter-spacing:-0.01em;
-  color:#f5f5f5;
-  overflow-wrap:anywhere;
-}
-body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .mobile-vod-stream-title{
-  margin:4px 0 0;
-  font-size:12px;
-  font-weight:500;
-  line-height:1.35;
-  color:#a1a1aa;
-  overflow-wrap:anywhere;
-}
-body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-details-side{
-  display:flex;
-  flex-wrap:wrap;
-  align-items:center;
-  justify-content:space-between;
-  gap:10px 12px;
-}
-body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-facts{
-  margin:0;
-  display:flex;
-  flex-wrap:wrap;
-  gap:8px 16px;
-  min-width:0;
-  flex:1 1 auto;
-}
-body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-facts div{
-  display:flex;
-  flex-direction:row;
-  align-items:baseline;
-  gap:6px;
-  min-width:0;
-}
-body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-facts dt{
-  margin:0;
-  font-size:10px;
-  font-weight:800;
-  letter-spacing:0.06em;
-  text-transform:uppercase;
-  color:#8f8f8f;
-  flex:0 0 auto;
-}
-body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-facts dd{
-  margin:0;
-  font-size:13px;
-  font-weight:700;
-  color:#d4d4d8;
-  font-variant-numeric:tabular-nums;
-  white-space:nowrap;
-  overflow:hidden;
-  text-overflow:ellipsis;
-  min-width:0;
-}
-body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-file-actions{
-  display:flex;
-  flex:0 0 auto;
-  gap:6px;
-}
-body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-inline-tool{
-  min-height:34px;
-  padding:0 12px;
-  display:inline-flex;
-  align-items:center;
-  justify-content:center;
-  border:1px solid #2e2e2e;
-  border-radius:8px;
-  color:#cfcfcf;
-  background:#1a1a1a;
-  font-size:12px;
-  font-weight:700;
-  letter-spacing:0.01em;
-  line-height:1;
-  cursor:pointer;
-  box-shadow:none;
-}
-body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details .vod-inline-tool:focus-visible{
-  outline:none;
-  box-shadow:0 0 0 3px rgba(242, 229, 141, 0.28);
-}
-body:is(.page-twitch-watch-mobile, .page-mobile-player) .twitch-live-pill{
-  font-size:10px;
-  padding:2px 7px;
-}
-body.page-twitch-watch-mobile .chat-container{
-  flex:1 1 auto;
-  min-height:0;
-}
-body.page-twitch-watch-mobile .chat-list{
-  padding:8px 12px 24px;
-}
-body.page-twitch-watch-mobile .chat-line{
-  display:grid;
-  grid-template-columns:36px minmax(0, 1fr);
-  gap:6px;
-  align-items:baseline;
-  margin-bottom:6px;
-}
-body.page-twitch-watch-mobile .chat-text{
-  min-width:0;
-  overflow-wrap:anywhere;
-  word-break:break-word;
-}
-
-body.page-twitch-watch-mobile .twitch-mobile-player-frame{
-  position:relative;
-  width:100%;
-  aspect-ratio:16/9;
-  background:#000;
+body.page-twitch-watch-mobile .chat-msg {
+  color: #efeff1;
 }
-body.page-twitch-watch-mobile .twitch-proxy-video,
-body.page-twitch-watch-mobile .twitch-proxy-wait{
-  position:absolute;
-  inset:0;
-  width:100%;
-  height:100%;
-}
-body.page-twitch-watch-mobile .twitch-proxy-wait{
-  display:none;
-  place-items:center;
-  padding:16px;
-  background:#050505;
-  z-index:2;
-}
-body.page-twitch-watch-mobile .twitch-proxy-wait.is-visible{
-  display:grid;
-}
-body.page-twitch-watch .twitch-watch-meta{
-  margin-top:12px;
-  display:grid;
-  gap:10px;
-}
-body.page-twitch-watch .twitch-watch-meta h2{
-  margin:0;
-  font-size:18px;
-  line-height:1.35;
-  word-break:break-word;
-}
-body.page-twitch-watch .twitch-watch-meta-row{
-  display:flex;
-  gap:14px;
-  flex-wrap:wrap;
-  color:var(--tube-muted, #a1a1aa);
-  font-size:13px;
-}
-body.page-twitch-watch .twitch-offline-banner{
-  padding:12px 14px;
-  border-radius:10px;
-  background:rgba(255,92,102,.1);
-  border:1px solid rgba(255,92,102,.28);
-  color:#fecaca;
-  font-size:13px;
-}
-body.page-twitch-watch .twitch-switcher{ margin-top:18px; }
-body.page-twitch-watch .twitch-switcher-list{
-  display:flex;
-  gap:8px;
-  overflow-x:auto;
-  padding-bottom:4px;
-  -webkit-overflow-scrolling:touch;
-}
-body.page-twitch-watch .twitch-switcher-item{
-  display:inline-flex;
-  align-items:center;
-  gap:8px;
-  min-height:40px;
-  padding:8px 12px;
-  border-radius:10px;
-  border:1px solid rgba(255,255,255,.1);
-  background:rgba(255,255,255,.03);
-  color:inherit;
-  text-decoration:none;
-  white-space:nowrap;
-  flex:0 0 auto;
+body.page-twitch-watch-mobile .overlay-header .twitch-live-pill {
+  font-size: var(--sv-min-text);
+  padding: 2px 6px;
+  vertical-align: middle;
 }
-body.page-twitch-watch .twitch-switcher-item.active,
-body.page-twitch-watch .twitch-switcher-item:hover{
-  border-color: rgba(255,92,102,.4);
+body.page-twitch-watch-mobile .twitch-mobile-chat-head {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 4px;
+  flex-wrap: wrap;
 }
-body.page-twitch-watch .twitch-live-dot{
-  width:8px;
-  height:8px;
-  border-radius:50%;
-  background:var(--tube-live, #ff5c66);
-}
-body.page-twitch-watch .twitch-switcher-viewers{
-  color:var(--tube-muted, #a1a1aa);
-  font-size:12px;
-}
-body.page-twitch-watch .twitch-chat-shell{
-  border-radius:10px;
-  border:1px solid rgba(255,255,255,.08);
-  background:#0e0e10;
-  overflow:hidden;
-  min-height:420px;
-  display:flex;
-  flex-direction:column;
-  max-height: min(72vh, 900px);
+body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live, .page-twitch-watch,.page-twitch-watch-mobile) .chat-emote,
+body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live, .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge-img {
+  vertical-align: middle;
 }
-body.page-twitch-watch .twitch-chat-header{
-  display:flex;
-  justify-content:space-between;
-  align-items:center;
-  padding:10px 12px;
-  border-bottom:1px solid rgba(255,255,255,.08);
-  font-size:13px;
-  font-weight:700;
-}
-body.page-twitch-watch .twitch-chat-shell iframe{
-  flex:1;
-  width:100%;
-  border:0;
-  min-height:360px;
-  background:#0e0e10;
-}
-
-@media (max-width: 1100px){
-  body.page-twitch-watch .twitch-watch-layout.chat-open{
-    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
-  }
-}
-@media (max-width: 900px){
-  body.page-twitch-live,
-  body.page-twitch-watch{
-    flex-direction:column;
-  }
-  body.page-twitch-live .sidebar,
-  body.page-twitch-watch .sidebar{
-    width:100%;
-  }
-  body.page-twitch-live .main,
-  body.page-twitch-watch .main{
-    padding:14px 12px 88px;
-  }
-  body.page-twitch-live .twitch-stream-grid{
-    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-    gap:10px;
+@media (max-width: 900px) {
+  body.page-twitch-watch.page-vod .sidebar {
+    display: none;
   }
-  body.page-twitch-watch .twitch-watch-layout.chat-open,
-  body.page-twitch-watch .twitch-watch-layout.chat-closed{
-    grid-template-columns:1fr;
+  body.page-twitch-watch.page-vod {
+    display: block;
+    height: auto;
+    overflow: auto;
   }
-  body.page-twitch-watch .twitch-player-frame{
-    max-height:none;
-    border-radius:8px;
+  body.page-twitch-watch.page-vod .content {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    gap: 0;
   }
-  body.page-twitch-watch .twitch-chat-shell{
-    max-height:none;
-    min-height:320px;
+  body.page-twitch-watch.page-vod .twitch-embed-wrapper {
+    border-radius: 0;
+    max-height: none;
   }
-  body.page-twitch-watch .twitch-watch-actions .btn-ghost{ min-height:40px; }
-}
-@media (max-width: 560px){
-  body.page-twitch-live .twitch-stream-grid{
-    grid-template-columns:1fr 1fr;
+  body.page-twitch-watch.page-vod .chat-panel {
+    height: min(45vh, 420px);
+    border-radius: 0;
+    border-left: none;
+    border-top: 1px solid rgba(255,255,255,.08);
   }
-  body.page-index .streamer-actions{
-    flex-wrap:wrap;
+  body.page-twitch-watch.page-vod .vod-details {
+    padding: 12px 14px;
   }
-  body.page-index .btn-live-watch{
-    width:100%;
+  body.page-twitch-watch.page-vod .twitch-switcher {
+    display: block !important;
   }
 }
-@media (min-width: 1800px){
-  body.page-twitch-watch .twitch-player-shell{
-    max-width: min(100%, 1800px);
-  }
-  body.page-twitch-watch .twitch-player-frame{
-    max-height: min(78vh, 980px);
+@media (orientation: landscape) and (max-height: 500px) {
+  body.page-twitch-watch-mobile.page-mobile-player {
+    flex-direction: row;
   }
-}
-@media (orientation: landscape) and (max-height: 500px){
-  body.page-twitch-watch .twitch-watch-header{ margin-bottom:8px; }
-  body.page-twitch-watch .twitch-player-frame{
-    max-height:58vh;
+  body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details {
+    display: none !important;
   }
-  body.page-twitch-watch .vod-details{ padding:6px 10px !important; }
-  body.page-twitch-watch .twitch-switcher{ display:block !important; }
-}
-
-/* ===== Twitch Watch aligned with VOD / mobile player ===== */
-body.page-twitch-watch.page-vod .twitch-embed-wrapper{
-  position:relative;
-  width:100%;
-  aspect-ratio:16/9;
-  max-height:min(72vh, 900px);
-  background:#000;
-  border-radius:12px;
-  overflow:hidden;
-  flex:0 0 auto;
-}
-body.page-twitch-watch.page-vod .twitch-embed-wrapper iframe{
-  position:absolute;
-  inset:0;
-  width:100%;
-  height:100%;
-  border:0;
-  display:block;
-}
-body.page-twitch-watch .twitch-live-pill{
-  display:inline-flex;
-  align-items:center;
-  padding:3px 8px;
-  border-radius:6px;
-  background:var(--tube-live, #ff5c66);
-  color:#fff;
-  font-size:11px;
-  font-weight:800;
-  letter-spacing:.04em;
-  margin-right:6px;
-}
-body.page-twitch-watch .twitch-offline-pill,
-body.page-twitch-watch .twitch-monitored-pill{
-  display:inline-flex;
-  padding:3px 8px;
-  border-radius:6px;
-  font-size:11px;
-  font-weight:700;
-  margin-right:6px;
-}
-body.page-twitch-watch .twitch-offline-pill{ background:rgba(255,255,255,.08); color:#a1a1aa; }
-body.page-twitch-watch .twitch-monitored-pill{ background:rgba(242,229,141,.12); color:var(--tube-accent, #f2e58d); }
-body.page-twitch-watch .twitch-offline-banner{
-  padding:12px 14px;
-  border-radius:10px;
-  background:rgba(255,92,102,.1);
-  border:1px solid rgba(255,92,102,.28);
-  color:#fecaca;
-  font-size:13px;
-}
-body.page-twitch-watch .twitch-chat-empty{
-  padding:14px 16px;
-  color:var(--text-muted, #a1a1aa);
-  font-size:13px;
-}
-body.page-twitch-watch .twitch-chat-empty.compact{ padding:8px 10px; font-size:12px; }
-body.page-twitch-watch .twitch-switcher{ margin-top:4px; }
-body.page-twitch-watch .twitch-switcher-list{
-  display:flex;
-  gap:8px;
-  overflow-x:auto;
-  padding-bottom:4px;
-  -webkit-overflow-scrolling:touch;
-}
-body.page-twitch-watch .twitch-switcher-item{
-  display:inline-flex;
-  align-items:center;
-  gap:8px;
-  min-height:40px;
-  padding:8px 12px;
-  border-radius:10px;
-  border:1px solid rgba(255,255,255,.1);
-  background:rgba(255,255,255,.03);
-  color:inherit;
-  text-decoration:none;
-  white-space:nowrap;
-  flex:0 0 auto;
 }
-body.page-twitch-watch .twitch-switcher-item.active,
-body.page-twitch-watch .twitch-switcher-item:hover{ border-color:rgba(255,92,102,.4); }
-body.page-twitch-watch .twitch-live-dot{
-  width:8px; height:8px; border-radius:50%; background:var(--tube-live, #ff5c66);
-}
-body.page-twitch-watch .twitch-switcher-viewers{ color:var(--text-muted, #a1a1aa); font-size:12px; }
-body.page-twitch-watch .twitch-section-head h3{ margin:0 0 8px; font-size:14px; }
-
-/* Mobile watch = same shell as VOD mobile player */
-body.page-twitch-watch-mobile.page-mobile-player .twitch-mobile-player-frame{
-  position:absolute;
-  inset:0;
-  width:100%;
-  height:100%;
-  background:#000;
-}
-body.page-twitch-watch-mobile.page-mobile-player .twitch-mobile-player-frame iframe{
-  width:100%;
-  height:100%;
-  border:0;
-  display:block;
-}
-body.page-twitch-watch-mobile .overlay-header-meta{
-  pointer-events:none;
-  display:flex;
-  align-items:center;
-  gap:8px;
-  min-width:0;
-  flex:1 1 auto;
-  margin:0 10px;
-}
-body.page-twitch-watch-mobile .overlay-stream-name{
-  color:#fff;
-  font-size:14px;
-  font-weight:700;
-  white-space:nowrap;
-  overflow:hidden;
-  text-overflow:ellipsis;
-  text-shadow:0 1px 3px rgba(0,0,0,0.85);
-}
-
-body.page-twitch-watch-mobile .chat-toggle{
-  background:transparent;
-  border:1px solid rgba(255,255,255,.15);
-  color:#ccc;
-  border-radius:6px;
-  padding:4px 8px;
-  font-size:11px;
-  min-height:32px;
-}
-/* chat-line grid defined with mobile-vod-details block above */
-body.page-twitch-watch-mobile .chat-time{ color:#555; font-size:10px; }
-body.page-twitch-watch-mobile .chat-user{ font-weight:700; margin-right:4px; }
-body.page-twitch-watch-mobile .chat-msg{ color:#efeff1; }
-body.page-twitch-watch-mobile .overlay-header .twitch-live-pill{
-  font-size:9px;
-  padding:2px 6px;
-  vertical-align:middle;
-}
-body.page-twitch-watch-mobile .mobile-vod-meta{
-  display:flex;
-  flex-wrap:wrap;
-  gap:6px;
-  align-items:center;
-  margin-top:2px;
-  color:rgba(255,255,255,0.62);
-  font-size:10px;
-  font-weight:700;
-  text-shadow:0 1px 2px black;
-}
-body.page-twitch-watch-mobile .twitch-mode-link,
-body.page-twitch-watch .twitch-mode-link{
-  color:#9ad0ff;
-  text-decoration:none;
-  font-weight:700;
-}
-body.page-twitch-watch-mobile .twitch-mode-link:hover,
-body.page-twitch-watch .twitch-mode-link:hover{
-  text-decoration:underline;
-}
-body.page-twitch-watch-mobile .chat-actions,
-body.page-twitch-watch-mobile .twitch-mobile-chat-head{
-  display:flex;
-  align-items:center;
-  justify-content:flex-end;
-  gap:4px;
-  flex-wrap:wrap;
-}
-
-body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live,
-  .page-twitch-watch,.page-twitch-watch-mobile) .chat-emote,
-body:is(.page-vod,.page-live,.page-mobile-player,.page-twitch-live,
-  .page-twitch-watch,.page-twitch-watch-mobile) .chat-badge-img{
-  vertical-align:middle;
-}
-
-@media (max-width: 900px){
-  body.page-twitch-watch.page-vod .sidebar{ display:none; }
-  body.page-twitch-watch.page-vod{
-    display:block;
-    height:auto;
-    overflow:auto;
-  }
-  body.page-twitch-watch.page-vod .content{
-    display:flex;
-    flex-direction:column;
-    padding:0;
-    gap:0;
-  }
-  body.page-twitch-watch.page-vod .twitch-embed-wrapper{
-    border-radius:0;
-    max-height:none;
-  }
-  body.page-twitch-watch.page-vod .chat-panel{
-    height:min(45vh, 420px);
-    border-radius:0;
-    border-left:none;
-    border-top:1px solid rgba(255,255,255,.08);
-  }
-  body.page-twitch-watch.page-vod .vod-details{
-    padding:12px 14px;
-  }
-  body.page-twitch-watch.page-vod .twitch-switcher{ display:block !important; }
-}
-@media (orientation: landscape) and (max-height: 500px){
-  body.page-twitch-watch-mobile.page-mobile-player{ flex-direction:row; }
-  body:is(.page-twitch-watch-mobile, .page-mobile-player) .mobile-vod-details{ display:none !important; }
-}
-
-
 /* Watch UX only — do not touch player sizing */
-body.page-twitch-watch .twitch-offline-pill { display: none !important; }
-body.page-twitch-watch .twitch-section-head { display: none !important; }
+body.page-twitch-watch .twitch-section-head {
+  display: none !important;
+}
 body.page-twitch-watch .twitch-live-pill[hidden],
-body.page-twitch-watch [hidden] { display: none !important; }
-body.page-twitch-watch .twitch-watch-stream-title {
-  margin: 2px 0 0;
-  font-size: 12px;
-  color: var(--tube-muted, #a1a1aa);
+body.page-twitch-watch [hidden] {
+  display: none !important;
 }
-
 /* Live channel tabs: one horizontal row under title/viewers inside details card */
 body.page-twitch-watch.page-vod .vod-details {
   display: grid !important;
@@ -13058,214 +7699,11 @@ body.page-twitch-watch .twitch-switcher-item {
   max-width: none !important;
   white-space: nowrap !important;
 }
-
 /* =========================================================================
    Canonical sidebar nav icons (2026-08-03)
    Must beat `body:is(...) .nav-item { --tube-nav-icon: grid }` specificity.
    ========================================================================= */
-body:is(
-  .page-index,
-  .page-channels,
-  .page-streamer,
-  .page-vod,
-  .page-live,
-  .page-admin,
-  .page-mail,
-  .page-files,
-  .page-search,
-  .page-discord-tool,
-  .page-mplus,
-  .page-twitch-live,
-  .page-twitch-watch
-) .nav-item[href="/"] {
-  --tube-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.9'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 10.8 12 3l9 7.8V21h-6v-6H9v6H3V10.8Z'/%3E%3C/svg%3E") !important;
-}
-
-body:is(
-  .page-index,
-  .page-channels,
-  .page-streamer,
-  .page-vod,
-  .page-live,
-  .page-admin,
-  .page-mail,
-  .page-files,
-  .page-search,
-  .page-discord-tool,
-  .page-mplus,
-  .page-twitch-live,
-  .page-twitch-watch
-) .nav-item[href="/live"] {
-  --tube-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.9'%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath stroke-linecap='round' d='M6.2 8.6a7.2 7.2 0 0 1 11.6 0M3.8 6a10.2 10.2 0 0 1 16.4 0M8.8 18.2h6.4'/%3E%3C/svg%3E") !important;
-}
-
-body:is(
-  .page-index,
-  .page-channels,
-  .page-streamer,
-  .page-vod,
-  .page-live,
-  .page-admin,
-  .page-mail,
-  .page-files,
-  .page-search,
-  .page-discord-tool,
-  .page-mplus,
-  .page-twitch-live,
-  .page-twitch-watch
-) .nav-item[href*="/channels"] {
-  --tube-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.9'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath stroke-linecap='round' d='M2.5 20c.5-4 2.3-6 5.5-6s5 2 5.5 6M14 19.5c.4-2.8 1.7-4.2 4-4.2 2 0 3.3 1.4 3.7 4.2'/%3E%3C/svg%3E") !important;
-}
-
-body:is(
-  .page-index,
-  .page-channels,
-  .page-streamer,
-  .page-vod,
-  .page-live,
-  .page-admin,
-  .page-mail,
-  .page-files,
-  .page-search,
-  .page-discord-tool,
-  .page-mplus,
-  .page-twitch-live,
-  .page-twitch-watch
-) .nav-item[href*="/admin/stalk"] {
-  --tube-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.9'%3E%3Ccircle cx='12' cy='12' r='7.2'/%3E%3Ccircle cx='12' cy='12' r='2.4'/%3E%3Cpath stroke-linecap='round' d='M12 2.8v1.8M12 19.4v1.8M2.8 12h1.8M19.4 12h1.8'/%3E%3C/svg%3E") !important;
-}
-
-body:is(
-  .page-index,
-  .page-channels,
-  .page-streamer,
-  .page-vod,
-  .page-live,
-  .page-admin,
-  .page-mail,
-  .page-files,
-  .page-search,
-  .page-discord-tool,
-  .page-mplus,
-  .page-twitch-live,
-  .page-twitch-watch
-) .nav-item[href*="/mplus"] {
-  --tube-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.9'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m7 4 10 16M17 4 7 20M5 7h14M5 17h14'/%3E%3C/svg%3E") !important;
-}
-
-body:is(
-  .page-index,
-  .page-channels,
-  .page-streamer,
-  .page-vod,
-  .page-live,
-  .page-admin,
-  .page-mail,
-  .page-files,
-  .page-search,
-  .page-discord-tool,
-  .page-mplus,
-  .page-twitch-live,
-  .page-twitch-watch
-) .nav-item[href*="/files"] {
-  --tube-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.9'%3E%3Cpath stroke-linejoin='round' d='M3 7a2 2 0 0 1 2-2h5l2 2h7a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z'/%3E%3C/svg%3E") !important;
-}
-
-body:is(
-  .page-index,
-  .page-channels,
-  .page-streamer,
-  .page-vod,
-  .page-live,
-  .page-admin,
-  .page-mail,
-  .page-files,
-  .page-search,
-  .page-discord-tool,
-  .page-mplus,
-  .page-twitch-live,
-  .page-twitch-watch
-) .nav-item[href*="/admin/chat"] {
-  --tube-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.9'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath stroke-linecap='round' d='m15.5 15.5 5 5'/%3E%3C/svg%3E") !important;
-}
-
-body:is(
-  .page-index,
-  .page-channels,
-  .page-streamer,
-  .page-vod,
-  .page-live,
-  .page-admin,
-  .page-mail,
-  .page-files,
-  .page-search,
-  .page-discord-tool,
-  .page-mplus,
-  .page-twitch-live,
-  .page-twitch-watch
-) .nav-item[href*="/admin/mail"] {
-  --tube-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.9'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath stroke-linejoin='round' d='m4 7 8 6 8-6'/%3E%3C/svg%3E") !important;
-}
-
-body:is(
-  .page-index,
-  .page-channels,
-  .page-streamer,
-  .page-vod,
-  .page-live,
-  .page-admin,
-  .page-mail,
-  .page-files,
-  .page-search,
-  .page-discord-tool,
-  .page-mplus,
-  .page-twitch-live,
-  .page-twitch-watch
-) .nav-item[href*="/admin/discord"] {
-  --tube-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.9'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M7 15h10a4 4 0 0 0 0-8H7a4 4 0 0 0 0 8Z'/%3E%3Cpath stroke-linecap='round' d='M8 11h4M10 9v4M16 10.5h.01M18 12.5h.01M8 15l-2 4M16 15l2 4'/%3E%3C/svg%3E") !important;
-}
-
-body:is(
-  .page-index,
-  .page-channels,
-  .page-streamer,
-  .page-vod,
-  .page-live,
-  .page-admin,
-  .page-mail,
-  .page-files,
-  .page-search,
-  .page-discord-tool,
-  .page-mplus,
-  .page-twitch-live,
-  .page-twitch-watch
-) .nav-item[href="/admin"] {
-  --tube-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.9'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 14.5 21 16l-2 3.5-2.4-1a8 8 0 0 1-2.1 1.2L14 22h-4l-.5-2.3a8 8 0 0 1-2.1-1.2l-2.4 1L3 16l2-1.5a8 8 0 0 1 0-2.5L3 10.5 5 7l2.4 1a8 8 0 0 1 2.1-1.2L10 4h4l.5 2.8A8 8 0 0 1 16.6 8L19 7l2 3.5-2 1.5a8 8 0 0 1 0 2.5Z'/%3E%3C/svg%3E") !important;
-}
-
-body:is(
-  .page-index,
-  .page-channels,
-  .page-streamer,
-  .page-vod,
-  .page-live,
-  .page-admin,
-  .page-mail,
-  .page-files,
-  .page-search,
-  .page-discord-tool,
-  .page-mplus,
-  .page-twitch-live,
-  .page-twitch-watch
-) .logout-button {
-  --tube-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.9'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10 4H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h5M14 8l4 4-4 4M18 12H8'/%3E%3C/svg%3E") !important;
-}
-
 /* Back-to-library / back-to-live chevron (watch + VOD) */
-body:is(.page-vod, .page-twitch-watch) .nav-item.vod-library-nav {
-  --tube-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.9'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m10 6-6 6 6 6M4 12h16'/%3E%3C/svg%3E") !important;
-}
-
 /* Android / Chromium PWA install prompt */
 .ns-pwa-install {
   position: fixed;
@@ -13277,7 +7715,7 @@ body:is(.page-vod, .page-twitch-watch) .nav-item.vod-library-nav {
   align-items: center;
   gap: 12px;
   padding: 12px 12px 12px 14px;
-  border-radius: 12px;
+  border-radius: var(--nebula-radius-md);
   border: 1px solid rgba(148, 163, 184, 0.28);
   background: rgba(11, 16, 24, 0.96);
   color: #f5f7fb;
@@ -13309,7 +7747,7 @@ body:is(.page-vod, .page-twitch-watch) .nav-item.vod-library-nav {
 .ns-pwa-install__btn {
   appearance: none;
   border: 0;
-  border-radius: 10px;
+  border-radius: var(--nebula-radius-sm);
   padding: 8px 12px;
   background: linear-gradient(135deg, #0ea5e9, #2bb3ff);
   color: #041018;
@@ -13330,7 +7768,7 @@ body:is(.page-vod, .page-twitch-watch) .nav-item.vod-library-nav {
   color: #aeb8c8;
   width: 36px;
   height: 36px;
-  border-radius: 10px;
+  border-radius: var(--nebula-radius-sm);
   font-size: 1.25rem;
   line-height: 1;
   cursor: pointer;
@@ -13347,7 +7785,6 @@ body:is(.page-vod, .page-twitch-watch) .nav-item.vod-library-nav {
     width: min(420px, calc(100vw - 40px));
   }
 }
-
 /* Compact watch info under the player — keep readable stacking, never crush
    into an overlapping single line. Player aspect (100cqw * 9 / 16) stays the
    size budget reference for adjacent chat layouts. */
@@ -13355,7 +7792,6 @@ body:is(.page-vod, .page-twitch-watch) .nav-item.vod-library-nav {
   body.page-vod .main-col {
     container-type: inline-size;
   }
-
   body.page-vod .vod-details {
     min-height: 0 !important;
     max-height: none !important;
@@ -13364,7 +7800,6 @@ body:is(.page-vod, .page-twitch-watch) .nav-item.vod-library-nav {
     overflow: visible !important;
     align-items: flex-start !important;
   }
-
   body.page-vod .vod-details-main {
     min-width: 280px !important;
     flex: 1 1 360px !important;
@@ -13372,7 +7807,6 @@ body:is(.page-vod, .page-twitch-watch) .nav-item.vod-library-nav {
     flex-direction: column !important;
     gap: 3px !important;
   }
-
   body.page-vod .vod-kicker {
     display: inline-flex !important;
     align-items: center !important;
@@ -13380,33 +7814,28 @@ body:is(.page-vod, .page-twitch-watch) .nav-item.vod-library-nav {
     white-space: nowrap !important;
     gap: 6px !important;
     margin: 0 0 2px !important;
-    font-size: 11px !important;
+    font-size: var(--sv-min-text) !important;
     line-height: 1.3 !important;
   }
-
   body.page-vod .vod-display-title {
     margin: 0 0 2px !important;
-    font-size: 16px !important;
+    font-size: var(--sv-text-base) !important;
     line-height: 1.35 !important;
     display: block !important;
     overflow: visible !important;
   }
-
   body.page-vod .vod-channel-link,
-  body.page-vod .vod-filename-meta,
-  body.page-twitch-watch .twitch-watch-stream-title {
+  body.page-vod .vod-filename-meta {
     margin: 0 !important;
-    font-size: 12px !important;
+    font-size: var(--sv-text-xs) !important;
     line-height: 1.25 !important;
     white-space: nowrap !important;
     overflow: hidden !important;
     text-overflow: ellipsis !important;
   }
-
   body.page-vod .vod-filename-meta {
     display: none !important;
   }
-
   body.page-vod .vod-details-side {
     display: flex !important;
     flex-direction: column !important;
@@ -13414,11 +7843,9 @@ body:is(.page-vod, .page-twitch-watch) .nav-item.vod-library-nav {
     gap: 8px !important;
     flex-shrink: 0 !important;
   }
-
   body.page-vod .vod-facts {
     gap: 10px 16px !important;
   }
-
   body.page-twitch-watch.page-vod .vod-details {
     align-self: start !important;
     height: auto !important;
@@ -13428,34 +7855,14 @@ body:is(.page-vod, .page-twitch-watch) .nav-item.vod-library-nav {
     column-gap: 16px !important;
     align-items: flex-start !important;
   }
-
   body.page-twitch-watch .twitch-switcher {
     padding-top: 4px !important;
   }
-
   body.page-twitch-watch .twitch-switcher-item {
     min-height: 28px !important;
     padding: 4px 8px !important;
   }
 }
-
-.visibility-form {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin: 10px 0 4px;
-  font-size: 13px;
-}
-.visibility-form select {
-  background: var(--surface, #18181b);
-  color: inherit;
-  border: 1px solid var(--border, #27272a);
-  border-radius: 8px;
-  padding: 6px 8px;
-}
-
-
 /* StreamVault — photo viewer lightbox */
 html.ns-photo-viewer-open,
 html.ns-photo-viewer-open body {
@@ -13467,7 +7874,7 @@ html.ns-photo-viewer-open body {
   z-index: 12000;
   display: flex;
   flex-direction: column;
-  color: var(--tube-text, #f7f7f7);
+  color: var(--tube-text);
 }
 .ns-photo-viewer[hidden] {
   display: none !important;
@@ -13498,12 +7905,12 @@ html.ns-photo-viewer-open body {
 }
 .ns-photo-viewer__btn {
   appearance: none;
-  border: 1px solid var(--tube-line, #292929);
+  border: 1px solid var(--tube-line);
   background: rgba(17, 17, 17, 0.92);
-  color: var(--tube-text, #f7f7f7);
+  color: var(--tube-text);
   width: 42px;
   height: 42px;
-  border-radius: 10px;
+  border-radius: var(--nebula-radius-sm);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -13512,10 +7919,9 @@ html.ns-photo-viewer-open body {
 }
 .ns-photo-viewer__btn:hover,
 .ns-photo-viewer__btn:focus-visible {
-  background: var(--tube-surface-2, #171717);
-  border-color: var(--tube-accent, #f2e58d);
-  color: var(--tube-accent, #f2e58d);
-  outline: none;
+  background: var(--tube-surface-2);
+  border-color: var(--tube-accent);
+  color: var(--tube-accent);
 }
 .ns-photo-viewer__btn--close {
   margin-left: 4px;
@@ -13523,10 +7929,10 @@ html.ns-photo-viewer-open body {
 .ns-photo-viewer__zoom-label {
   min-width: 52px;
   text-align: center;
-  font-size: 12px;
+  font-size: var(--sv-text-xs);
   font-weight: 600;
   letter-spacing: 0.04em;
-  color: var(--tube-muted, #858585);
+  color: var(--tube-muted);
   font-variant-numeric: tabular-nums;
   pointer-events: none;
 }
@@ -13560,105 +7966,26 @@ html.ns-photo-viewer-open body {
   transform-origin: center center;
   transition: transform 80ms ease-out;
   box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
-  border-radius: 4px;
+  border-radius: var(--nebula-radius-xs);
 }
 .ns-photo-viewer__stage.is-dragging .ns-photo-viewer__img {
   transition: none;
 }
-
-/* === StreamVault UI polish (2026-09-05) — see also static/css/ui-polish.css === */
-/* StreamVault — safe visual polish (tokens + grid + action tools).
- * Loaded last via style.css append. No JS/ID/route changes.
- */
-
-:root {
-  --tube-bg: #050505;
-  --tube-surface: #121212;
-  --tube-surface-2: #1a1a1a;
-  --tube-surface-3: #242424;
-  --tube-line: #2e2e2e;
-  --tube-line-soft: #222222;
-  --tube-text: #f5f5f5;
-  --tube-text-2: #cfcfcf;
-  --tube-muted: #8f8f8f;
-  --tube-accent: #f2e58d;
-  --tube-accent-hover: #fff3a9;
-  --tube-live: #ff5c66;
-  --tube-success: #6ed9a2;
-  --tube-radius: 10px;
-  --tube-focus: 0 0 0 3px rgba(242, 229, 141, 0.28);
-  --radius: var(--tube-radius);
-  --text-muted: var(--tube-muted);
-  --muted: var(--tube-muted);
-  --border: var(--tube-line);
-  --primary: var(--tube-accent);
-  --accent: var(--tube-accent);
-}
-
 /* --- Video grid / cards (streamer + search + index-like grids) --- */
-body.page-streamer .video-grid,
-body.page-search .video-grid,
-body.page-index .video-grid {
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
-  gap: 16px 12px !important;
-}
-
 body.page-streamer .video-card,
 body.page-search .video-card {
   border-radius: var(--tube-radius) !important;
   transition: background-color 0.15s ease, transform 0.15s ease !important;
 }
-
 body.page-streamer .video-card:hover,
 body.page-search .video-card:hover {
   background: var(--tube-surface) !important;
 }
-
-body.page-streamer .thumb-wrap,
-body.page-search .thumb-wrap,
-.video-card .thumb-wrap,
-.vod-card .thumb-wrap {
-  aspect-ratio: 16 / 9 !important;
-  border-radius: 10px !important;
-  border: 1px solid var(--tube-line-soft) !important;
-  background: #0a0a0a !important;
-  overflow: hidden !important;
-}
-
-body.page-streamer .thumb-img,
-body.page-search .thumb-img,
-.video-card .thumb-img {
-  transition: transform 0.2s ease !important;
-}
-
-@media (hover: hover) and (pointer: fine) {
-  body.page-streamer .video-card:hover .thumb-img,
-  body.page-search .video-card:hover .thumb-img {
-    transform: scale(1.02) !important;
-  }
-}
-
-body.page-streamer .video-title,
-body.page-search .video-title {
-  color: var(--tube-text) !important;
-  font-size: 13px !important;
-  font-weight: 650 !important;
-  line-height: 1.35 !important;
-}
-
-body.page-streamer .card-body,
-body.page-search .card-body {
-  padding: 10px 2px 2px !important;
-}
-
-body.page-streamer .video-meta,
-body.page-search .video-meta,
 body.page-streamer .meta,
 body.page-search .meta {
   color: var(--tube-muted) !important;
-  font-size: 12px !important;
+  font-size: var(--sv-text-xs) !important;
 }
-
 /* --- Action tool strip (Clip / Zuschneiden / …) --- */
 body:is(.page-vod, .page-live, .page-twitch-watch) .vod-file-actions {
   display: flex !important;
@@ -13666,7 +7993,6 @@ body:is(.page-vod, .page-live, .page-twitch-watch) .vod-file-actions {
   align-items: center !important;
   gap: 6px !important;
 }
-
 body:is(.page-vod, .page-live, .page-twitch-watch) .vod-inline-tool {
   min-height: 34px !important;
   padding: 0 12px !important;
@@ -13675,10 +8001,10 @@ body:is(.page-vod, .page-live, .page-twitch-watch) .vod-inline-tool {
   justify-content: center !important;
   gap: 6px !important;
   border: 1px solid var(--tube-line) !important;
-  border-radius: 8px !important;
+  border-radius: var(--nebula-radius-sm) !important;
   color: var(--tube-text-2) !important;
   background: var(--tube-surface-2) !important;
-  font-size: 12px !important;
+  font-size: var(--sv-text-xs) !important;
   font-weight: 700 !important;
   letter-spacing: 0.01em !important;
   line-height: 1 !important;
@@ -13687,23 +8013,18 @@ body:is(.page-vod, .page-live, .page-twitch-watch) .vod-inline-tool {
   box-shadow: none !important;
   transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease !important;
 }
-
 body:is(.page-vod, .page-live, .page-twitch-watch) .vod-inline-tool::after {
   display: none !important;
 }
-
 body:is(.page-vod, .page-live, .page-twitch-watch) .vod-inline-tool:hover {
   color: var(--tube-text) !important;
   border-color: #3f3f3f !important;
   background: var(--tube-surface-3) !important;
   transform: none !important;
 }
-
 body:is(.page-vod, .page-live, .page-twitch-watch) .vod-inline-tool:focus-visible {
-  outline: none !important;
   box-shadow: var(--tube-focus) !important;
 }
-
 /* Primary clip actions stand out slightly */
 body:is(.page-vod, .page-live, .page-twitch-watch) #btnInstantClip,
 body:is(.page-vod, .page-live, .page-twitch-watch) #btnOpenEditor {
@@ -13711,46 +8032,30 @@ body:is(.page-vod, .page-live, .page-twitch-watch) #btnOpenEditor {
   border-color: rgba(242, 229, 141, 0.55) !important;
   background: var(--tube-accent) !important;
 }
-
 body:is(.page-vod, .page-live, .page-twitch-watch) #btnInstantClip:hover,
 body:is(.page-vod, .page-live, .page-twitch-watch) #btnOpenEditor:hover {
   color: #111 !important;
   border-color: rgba(255, 243, 169, 0.75) !important;
   background: var(--tube-accent-hover) !important;
 }
-
 body:is(.page-vod, .page-live, .page-twitch-watch) .vod-inline-tool-warning {
   color: #ffe082 !important;
   border-color: rgba(255, 224, 130, 0.28) !important;
   background: rgba(255, 224, 130, 0.08) !important;
 }
-
 /* --- Mobile streamer cards: align radius/contrast --- */
 body.page-mobile-streamer .video-card {
-  border-radius: 10px !important;
+  border-radius: var(--nebula-radius-sm) !important;
   border-color: var(--tube-line) !important;
   background: var(--tube-surface) !important;
 }
-
-body.page-mobile-streamer .thumb-area {
-  aspect-ratio: 16 / 9 !important;
-}
-
 @media (prefers-reduced-motion: reduce) {
   body.page-streamer .video-card,
   body.page-search .video-card,
-  body.page-streamer .thumb-img,
-  body.page-search .thumb-img,
   body:is(.page-vod, .page-live, .page-twitch-watch) .vod-inline-tool {
     transition: none !important;
   }
-
-  body.page-streamer .video-card:hover .thumb-img,
-  body.page-search .video-card:hover .thumb-img {
-    transform: none !important;
-  }
 }
-
 /* Login brand mark + Discord register callout (match Tube app icon / rail) */
 body.page-login .login-brand {
   display: flex !important;
@@ -13758,18 +8063,16 @@ body.page-login .login-brand {
   gap: 12px !important;
   margin-bottom: 8px !important;
 }
-
 body.page-login .login-brand-mark {
   width: 48px !important;
   height: 48px !important;
   flex: 0 0 48px !important;
-  border-radius: 10px !important;
-  border: 1px solid var(--tube-line, #292929) !important;
+  border-radius: var(--nebula-radius-sm) !important;
+  border: 1px solid var(--tube-line) !important;
   background: #0b0b0b !important;
   object-fit: cover !important;
   box-shadow: none !important;
 }
-
 body.page-login .login-brand .eyebrow {
   margin: 0 !important;
   padding: 0 !important;
@@ -13778,158 +8081,45 @@ body.page-login .login-brand .eyebrow {
   background: transparent !important;
   box-shadow: none !important;
 }
-
-body.page-login .login-register {
-  position: relative;
-  z-index: 1;
-  margin-top: 16px;
-  padding: 14px 14px 13px;
-  border: 1px solid var(--tube-line, #292929);
-  border-radius: 8px;
-  background: #0b0b0b;
-}
-
-body.page-login .login-register-kicker {
-  margin: 0 0 6px;
-  color: var(--tube-accent, #f2e58d);
-  font-size: 10px;
-  font-weight: 850;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-}
-
-body.page-login .login-register p {
-  margin: 0;
-  color: var(--tube-muted, #858585);
-  font-size: 13px;
-  line-height: 1.55;
-}
-
-body.page-login .login-register strong {
-  color: var(--tube-text-2, #c7c7c7);
-  font-weight: 700;
-}
-
-body.page-login .login-register code {
-  display: inline-block;
-  padding: 1px 6px;
-  border: 1px solid var(--tube-line, #292929);
-  border-radius: 4px;
-  color: var(--tube-accent, #f2e58d);
-  background: rgba(242, 229, 141, 0.06);
-  font-size: 12px;
-  font-weight: 700;
-}
-
 body.page-login .login-panel-brand {
   display: none;
   align-items: center;
   gap: 10px;
   margin-bottom: 18px;
-  color: var(--tube-text, #f7f7f7);
-  font-size: 14px;
+  color: var(--tube-text);
+  font-size: var(--sv-text-md);
   font-weight: 800;
   letter-spacing: -0.02em;
 }
-
 body.page-login .login-panel-brand .login-brand-mark {
   width: 36px !important;
   height: 36px !important;
   flex: 0 0 36px !important;
-  border-radius: 8px !important;
+  border-radius: var(--nebula-radius-sm) !important;
 }
-
 @media (max-width: 920px) {
   body.page-login .login-panel-brand {
     display: flex !important;
   }
 }
-
 /* Admin Discord pending queue — Tube surface, not orange promo card */
-body.page-admin .pending-users {
-  margin-bottom: 24px;
-  padding: 16px;
-  border: 1px solid var(--tube-line, #292929);
-  border-radius: 10px;
-  background: var(--tube-surface, #111);
-}
-
-body.page-admin .pending-users-title {
-  margin: 0 0 12px;
-  color: var(--tube-accent, #f2e58d);
-  font-size: 11px;
-  font-weight: 800;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-body.page-admin .pending-users-actions {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-body.page-admin .pending-users .btn-approve,
-body.page-admin .pending-users .btn-deny {
-  padding: 6px 12px;
-  font-size: 12px;
-  border-radius: 8px;
-}
-
-body.page-admin .pending-users .btn-deny {
-  border: 1px solid var(--tube-line, #292929);
-  color: var(--tube-text-2, #c7c7c7);
-  background: transparent;
-}
-
-body.page-admin .user-discord-meta {
-  font-size: 12px;
-  color: var(--tube-muted, #858585);
-}
-
-body.page-admin .user-via-discord {
-  margin-top: 4px;
-  font-size: 11px;
-  color: var(--tube-muted, #858585);
-}
-body:is(.page-twitch-watch, .page-twitch-watch-mobile) .tube-mod-icon:hover {
-  border-color: #ff8b8b;
-  color: #ff8b8b;
-}
-@media (hover: none) {
-  body:is(.page-twitch-watch, .page-twitch-watch-mobile) .tube-mod-tools {
-    display: inline-flex;
-    opacity: 0.55;
-  }
-}
 @media (max-width: 1100px) {
-  body.page-twitch-watch .chat-panel.chat-panel-split {
-    flex-direction: column;
-  }
   body.page-twitch-watch .chat-split-twitch {
     border-right: none;
     border-bottom: 1px solid rgba(255,255,255,0.08);
     max-height: 50%;
   }
 }
-body.page-twitch-watch-mobile .chat-container.chat-panel-split {
-  flex-direction: column;
-}
 body.page-twitch-watch-mobile .chat-split-twitch {
   border-right: none;
   border-bottom: 1px solid rgba(255,255,255,0.08);
   flex: 1 1 45%;
 }
-body.page-twitch-watch-mobile .chat-split-tube {
-  flex: 1 1 55%;
-}
-
 /* StreamVault Regeln */
 body.page-regeln {
   margin: 0;
   min-height: 100vh;
-  background:
-    radial-gradient(1000px 500px at 20% -10%, rgba(240,194,75,0.12), transparent 55%),
+  background: radial-gradient(1000px 500px at 20% -10%, rgba(240,194,75,0.12), transparent 55%),
     radial-gradient(800px 400px at 90% 10%, rgba(56,189,248,0.08), transparent 50%),
     #0b0b0d;
   color: #ececf1;
@@ -13944,7 +8134,7 @@ body.page-regeln .regeln-brand {
   font-family: "IBM Plex Mono", monospace;
   letter-spacing: 0.08em;
   text-transform: uppercase;
-  font-size: 12px;
+  font-size: var(--sv-text-xs);
   color: #f0c24b;
   margin-bottom: 10px;
 }
@@ -13958,13 +8148,13 @@ body.page-regeln .regeln-sub {
   margin: 0 0 10px;
 }
 body.page-regeln .regeln-meta {
-  font-size: 12px;
+  font-size: var(--sv-text-xs);
   color: rgba(236,236,241,0.55);
   margin-bottom: 18px;
 }
 body.page-regeln .regeln-card {
   border: 1px solid rgba(255,255,255,0.1);
-  border-radius: 12px;
+  border-radius: var(--nebula-radius-md);
   background: rgba(18,18,22,0.92);
   padding: 18px 18px 8px;
 }
@@ -13974,12 +8164,12 @@ body.page-regeln .regeln-list {
   display: grid;
   gap: 10px;
   line-height: 1.45;
-  font-size: 14px;
+  font-size: var(--sv-text-md);
 }
 body.page-regeln .regeln-footer {
   margin-top: 16px;
   color: rgba(236,236,241,0.62);
-  font-size: 13px;
+  font-size: var(--sv-text-sm);
 }
 body.page-regeln .regeln-accept-form {
   margin-top: 18px;
@@ -13990,7 +8180,7 @@ body.page-regeln .regeln-check {
   display: flex;
   gap: 10px;
   align-items: flex-start;
-  font-size: 14px;
+  font-size: var(--sv-text-md);
   line-height: 1.4;
 }
 body.page-regeln .regeln-check input {
@@ -13999,7 +8189,7 @@ body.page-regeln .regeln-check input {
 body.page-regeln .regeln-alert {
   margin-bottom: 14px;
   padding: 10px 12px;
-  border-radius: 8px;
+  border-radius: var(--nebula-radius-sm);
   background: rgba(239,68,68,0.15);
   color: #ffb4b4;
 }
@@ -14011,11 +8201,9 @@ body.page-regeln .regeln-done {
   margin-top: 16px;
   color: rgba(236,236,241,0.75);
 }
-
 body.page-agb {
   min-height: 100vh;
-  background:
-    radial-gradient(1000px 500px at 20% -10%, rgba(240,194,75,0.12), transparent 55%),
+  background: radial-gradient(1000px 500px at 20% -10%, rgba(240,194,75,0.12), transparent 55%),
     radial-gradient(800px 400px at 90% 10%, rgba(56,189,248,0.08), transparent 50%),
     #0b0b0d;
   color: #ececf1;
@@ -14030,7 +8218,7 @@ body.page-agb .agb-brand {
   font-family: "IBM Plex Mono", monospace;
   letter-spacing: 0.08em;
   text-transform: uppercase;
-  font-size: 12px;
+  font-size: var(--sv-text-xs);
   color: #f0c24b;
   margin-bottom: 10px;
 }
@@ -14044,13 +8232,13 @@ body.page-agb .agb-sub {
   margin: 0 0 10px;
 }
 body.page-agb .agb-meta {
-  font-size: 12px;
+  font-size: var(--sv-text-xs);
   color: rgba(236,236,241,0.55);
   margin-bottom: 18px;
 }
 body.page-agb .agb-card {
   border: 1px solid rgba(255,255,255,0.1);
-  border-radius: 12px;
+  border-radius: var(--nebula-radius-md);
   background: rgba(18,18,22,0.92);
 }
 body.page-agb .agb-scroll {
@@ -14070,7 +8258,7 @@ body.page-agb .agb-prose h2:first-child {
 body.page-agb .agb-prose p,
 body.page-agb .agb-anlage-lead,
 body.page-agb .agb-footer {
-  font-size: 14px;
+  font-size: var(--sv-text-md);
   line-height: 1.5;
   color: rgba(236,236,241,0.88);
   margin: 0 0 0.7em;
@@ -14080,7 +8268,7 @@ body.page-agb .agb-prose ul {
   padding-left: 1.2em;
   display: grid;
   gap: 6px;
-  font-size: 14px;
+  font-size: var(--sv-text-md);
   line-height: 1.45;
 }
 body.page-agb .agb-prose code,
@@ -14099,7 +8287,7 @@ body.page-agb .agb-rules-list {
   display: grid;
   gap: 10px;
   line-height: 1.45;
-  font-size: 14px;
+  font-size: var(--sv-text-md);
 }
 body.page-agb .agb-footer {
   margin-top: 16px;
@@ -14114,7 +8302,7 @@ body.page-agb .agb-check {
   display: flex;
   gap: 10px;
   align-items: flex-start;
-  font-size: 14px;
+  font-size: var(--sv-text-md);
   line-height: 1.4;
 }
 body.page-agb .agb-check input {
@@ -14122,13 +8310,13 @@ body.page-agb .agb-check input {
 }
 body.page-agb .agb-scroll-hint {
   margin: 0;
-  font-size: 13px;
+  font-size: var(--sv-text-sm);
   color: rgba(236,236,241,0.55);
 }
 body.page-agb .agb-alert {
   margin-bottom: 14px;
   padding: 10px 12px;
-  border-radius: 8px;
+  border-radius: var(--nebula-radius-sm);
   background: rgba(239,68,68,0.15);
   color: #ffb4b4;
 }
@@ -14145,7 +8333,6 @@ body.page-agb .agb-done {
     max-height: min(58vh, 480px);
   }
 }
-
 /* ------------------------------------------------------------------
    Responsive player shell (2026-09-08)
    Native Play/Pause controls were clipped by overflow:hidden + absolute
@@ -14158,25 +8345,21 @@ body:is(.page-vod, .page-live) {
   overflow-x: hidden !important;
   overflow-y: auto !important;
 }
-
 body:is(.page-vod, .page-live) .main {
   overflow: visible !important;
   overflow-x: hidden !important;
   min-width: 0 !important;
 }
-
 body:is(.page-vod, .page-live) .content {
   min-width: 0 !important;
   width: 100% !important;
   max-width: 100% !important;
 }
-
 body:is(.page-vod, .page-live) .main-col {
   min-width: 0 !important;
   width: 100% !important;
   max-width: 100% !important;
 }
-
 body:is(.page-vod, .page-live) .player-wrapper {
   position: relative !important;
   display: block !important;
@@ -14193,9 +8376,8 @@ body:is(.page-vod, .page-live) .player-wrapper {
   contain: none !important;
   isolation: isolate !important;
   background: #000 !important;
-  border-radius: 10px !important;
+  border-radius: var(--nebula-radius-sm) !important;
 }
-
 body:is(.page-vod, .page-live) .player-wrapper video,
 body:is(.page-vod, .page-live) .player-wrapper > video {
   position: relative !important;
@@ -14215,26 +8397,21 @@ body:is(.page-vod, .page-live) .player-wrapper > video {
   border-radius: inherit !important;
   object-fit: contain !important;
   background: #000 !important;
-  /* Keep browser control bar hittable and readable on HiDPI / zoom */
   min-height: clamp(180px, 42vw, 100%) !important;
 }
-
 /* Ensure native media controls stay above adjacent panels */
 body:is(.page-vod, .page-live) .player-wrapper video::-webkit-media-controls {
   z-index: 3 !important;
 }
-
 body:is(.page-vod, .page-live) .player-wrapper video::-webkit-media-controls-enclosure {
   overflow: visible !important;
   width: 100% !important;
   max-width: 100% !important;
 }
-
 body:is(.page-vod, .page-live) .player-wrapper video::-webkit-media-controls-panel {
   display: flex !important;
   opacity: 1 !important;
 }
-
 body:is(.page-vod, .page-live) .player-wrapper video::-webkit-media-controls-play-button,
 body:is(.page-vod, .page-live) .player-wrapper video::-webkit-media-controls-mute-button,
 body:is(.page-vod, .page-live) .player-wrapper video::-webkit-media-controls-fullscreen-button,
@@ -14244,7 +8421,6 @@ body:is(.page-vod, .page-live) .player-wrapper video::-webkit-media-controls-tim
   visibility: visible !important;
   opacity: 1 !important;
 }
-
 /* Custom seekbar owns scrubbing — always hide native timeline to prevent double bars */
 body:is(.page-vod, .page-live) .player-wrapper video::-webkit-media-controls-timeline,
 body.page-mobile-player .video-container video::-webkit-media-controls-timeline {
@@ -14257,7 +8433,6 @@ body.page-mobile-player .video-container video::-webkit-media-controls-timeline
   opacity: 0 !important;
   pointer-events: none !important;
 }
-
 /* Clip overlay preview play/pause — fluid size */
 body:is(.page-vod, .page-live) .vod-clip-preview-toggle {
   width: clamp(44px, 12vw, 64px) !important;
@@ -14265,31 +8440,25 @@ body:is(.page-vod, .page-live) .vod-clip-preview-toggle {
   min-width: 44px !important;
   min-height: 44px !important;
 }
-
 body:is(.page-vod, .page-live) .vod-clip-preview-toggle svg {
   width: 48% !important;
   height: 48% !important;
 }
-
 /* Mobile player: keep controls reachable, scale with viewport */
 body.page-mobile-player .video-container {
   overflow: visible !important;
 }
-
 body.page-mobile-player video {
   width: 100% !important;
   height: 100% !important;
   max-height: 100% !important;
   object-fit: contain !important;
 }
-
 body.page-mobile-player video::-webkit-media-controls-enclosure {
   overflow: visible !important;
 }
-
 /* Twitch watch / HLS shells */
-body.page-twitch-watch .player-wrapper,
-body.page-hls .player-shell {
+body.page-twitch-watch .player-wrapper {
   width: min(100%, calc(min(78dvh, 78vh, 900px) * 16 / 9)) !important;
   max-width: 100% !important;
   aspect-ratio: 16 / 9 !important;
@@ -14297,55 +8466,44 @@ body.page-hls .player-shell {
   overflow: visible !important;
   contain: none !important;
 }
-
 body.page-twitch-watch .player-wrapper video,
-body.page-twitch-watch .twitch-proxy-video,
-body.page-hls .player-shell video {
+body.page-twitch-watch .twitch-proxy-video {
   position: relative !important;
   inset: auto !important;
   width: 100% !important;
   height: 100% !important;
   object-fit: contain !important;
 }
-
 @media (max-width: 920px) {
   body:is(.page-vod, .page-live) .player-wrapper,
-  body.page-twitch-watch .player-wrapper,
-  body.page-hls .player-shell {
+  body.page-twitch-watch .player-wrapper {
     width: 100% !important;
     max-width: 100% !important;
     border-radius: 0 !important;
   }
-
   body:is(.page-vod, .page-live) .player-wrapper video {
     min-height: clamp(200px, 56vw, 100%) !important;
     border-radius: 0 !important;
   }
 }
-
 @media (max-height: 720px) {
   body:is(.page-vod, .page-live) .player-wrapper,
-  body.page-twitch-watch .player-wrapper,
-  body.page-hls .player-shell {
+  body.page-twitch-watch .player-wrapper {
     width: min(100%, calc(min(68dvh, 68vh) * 16 / 9)) !important;
   }
 }
-
 @media (max-height: 560px) {
   body:is(.page-vod, .page-live) .player-wrapper,
-  body.page-twitch-watch .player-wrapper,
-  body.page-hls .player-shell {
+  body.page-twitch-watch .player-wrapper {
     width: min(100%, calc(min(62dvh, 62vh) * 16 / 9)) !important;
   }
 }
-
 /* Prefer page scroll over clipping the player on short / zoomed windows */
 @media (max-width: 1180px) {
   body:is(.page-vod, .page-live) .content {
     display: grid !important;
     grid-template-columns: minmax(0, 1fr) !important;
   }
-
   body:is(.page-vod, .page-live) .chat-panel {
     position: static !important;
     width: 100% !important;
@@ -14354,7 +8512,6 @@ body.page-hls .player-shell video {
     max-height: none !important;
   }
 }
-
 /* Admin traffic overview */
 body.page-admin-traffic .header.traffic-header {
   margin-bottom: 20px;
@@ -14370,7 +8527,7 @@ body.page-admin-traffic .traffic-lead {
   margin: 8px 0 0;
   max-width: 72ch;
   color: var(--text-muted);
-  font-size: 13px;
+  font-size: var(--sv-text-sm);
   line-height: 1.45;
 }
 body.page-admin-traffic .traffic-back {
@@ -14393,21 +8550,29 @@ body.page-admin-traffic .traffic-filters {
   flex-wrap: wrap;
   gap: 8px 12px;
   align-items: center;
-  font-size: 12px;
+  font-size: var(--sv-text-xs);
   color: var(--text-muted);
 }
 body.page-admin-traffic .swatch {
   display: inline-block;
   width: 8px;
   height: 8px;
-  border-radius: 2px;
+  border-radius: var(--nebula-radius-xs);
   margin-right: 6px;
   vertical-align: middle;
 }
-body.page-admin-traffic .swatch.logins { background: #f5b942; }
-body.page-admin-traffic .swatch.pages { background: #7eb8ff; }
-body.page-admin-traffic .swatch.media { background: #6ee7a8; }
-body.page-admin-traffic .swatch.chats { background: #c4b5fd; }
+body.page-admin-traffic .swatch.logins {
+  background: #f5b942;
+}
+body.page-admin-traffic .swatch.pages {
+  background: #7eb8ff;
+}
+body.page-admin-traffic .swatch.media {
+  background: #6ee7a8;
+}
+body.page-admin-traffic .swatch.chats {
+  background: #c4b5fd;
+}
 body.page-admin-traffic .traffic-heat-legend {
   display: inline-flex;
   align-items: center;
@@ -14418,19 +8583,27 @@ body.page-admin-traffic .heat-swatch {
   display: inline-block;
   width: 10px;
   height: 10px;
-  border-radius: 2px;
+  border-radius: var(--nebula-radius-xs);
+}
+body.page-admin-traffic .heat-swatch.l1 {
+  background: rgba(110, 231, 168, 0.28);
+}
+body.page-admin-traffic .heat-swatch.l2 {
+  background: rgba(110, 231, 168, 0.48);
+}
+body.page-admin-traffic .heat-swatch.l3 {
+  background: rgba(110, 231, 168, 0.72);
+}
+body.page-admin-traffic .heat-swatch.l4 {
+  background: #6ee7a8;
 }
-body.page-admin-traffic .heat-swatch.l1 { background: rgba(110, 231, 168, 0.28); }
-body.page-admin-traffic .heat-swatch.l2 { background: rgba(110, 231, 168, 0.48); }
-body.page-admin-traffic .heat-swatch.l3 { background: rgba(110, 231, 168, 0.72); }
-body.page-admin-traffic .heat-swatch.l4 { background: #6ee7a8; }
 body.page-admin-traffic .chip {
   text-decoration: none;
   color: var(--text-muted);
   border: 1px solid var(--border);
-  border-radius: 999px;
+  border-radius: var(--nebula-radius-full);
   padding: 6px 10px;
-  font-size: 12px;
+  font-size: var(--sv-text-xs);
   font-weight: 600;
 }
 body.page-admin-traffic .chip.is-on {
@@ -14446,7 +8619,7 @@ body.page-admin-traffic .traffic-grid {
 }
 body.page-admin-traffic .traffic-card {
   padding: 14px !important;
-  border-radius: 10px;
+  border-radius: var(--nebula-radius-sm);
   display: flex;
   flex-direction: column;
   min-width: 0;
@@ -14466,20 +8639,20 @@ body.page-admin-traffic .traffic-card-head {
 }
 body.page-admin-traffic .traffic-card h3 {
   margin: 0 0 4px !important;
-  font-size: 15px;
+  font-size: var(--sv-text-md);
 }
 body.page-admin-traffic .traffic-meta {
   color: var(--text-muted);
-  font-size: 11px;
+  font-size: var(--sv-min-text);
   line-height: 1.4;
 }
 body.page-admin-traffic .traffic-pill {
   display: inline-block;
   margin-left: 4px;
   padding: 1px 6px;
-  border-radius: 6px;
+  border-radius: var(--nebula-radius-xs);
   border: 1px solid var(--border);
-  font-size: 10px;
+  font-size: var(--sv-min-text);
   letter-spacing: 0.04em;
   text-transform: uppercase;
 }
@@ -14488,7 +8661,7 @@ body.page-admin-traffic .traffic-pill.warn {
   border-color: rgba(251, 191, 36, 0.4);
 }
 body.page-admin-traffic .traffic-total {
-  font-size: 20px;
+  font-size: var(--sv-text-xl);
   font-weight: 700;
   color: #fff;
   line-height: 1;
@@ -14501,21 +8674,21 @@ body.page-admin-traffic .traffic-eval {
 }
 body.page-admin-traffic .traffic-eval div {
   padding: 6px 8px;
-  border-radius: 8px;
+  border-radius: var(--nebula-radius-sm);
   background: rgba(0, 0, 0, 0.22);
   border: 1px solid rgba(255, 255, 255, 0.05);
 }
 body.page-admin-traffic .traffic-eval span {
   display: block;
   color: var(--text-muted);
-  font-size: 9px;
+  font-size: var(--sv-min-text);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   margin-bottom: 2px;
 }
 body.page-admin-traffic .traffic-eval strong {
   color: #fff;
-  font-size: 12px;
+  font-size: var(--sv-text-xs);
   font-weight: 700;
 }
 body.page-admin-traffic .traffic-heat {
@@ -14524,20 +8697,28 @@ body.page-admin-traffic .traffic-heat {
   gap: 2px;
   margin: 0 0 8px;
   padding: 5px;
-  border-radius: 8px;
+  border-radius: var(--nebula-radius-sm);
   background: rgba(0, 0, 0, 0.22);
 }
 body.page-admin-traffic .heat-cell {
   display: block;
   aspect-ratio: 1;
   min-height: 8px;
-  border-radius: 2px;
+  border-radius: var(--nebula-radius-xs);
   background: rgba(255, 255, 255, 0.08);
 }
-body.page-admin-traffic .heat-cell.l1 { background: rgba(110, 231, 168, 0.28); }
-body.page-admin-traffic .heat-cell.l2 { background: rgba(110, 231, 168, 0.48); }
-body.page-admin-traffic .heat-cell.l3 { background: rgba(110, 231, 168, 0.72); }
-body.page-admin-traffic .heat-cell.l4 { background: #6ee7a8; }
+body.page-admin-traffic .heat-cell.l1 {
+  background: rgba(110, 231, 168, 0.28);
+}
+body.page-admin-traffic .heat-cell.l2 {
+  background: rgba(110, 231, 168, 0.48);
+}
+body.page-admin-traffic .heat-cell.l3 {
+  background: rgba(110, 231, 168, 0.72);
+}
+body.page-admin-traffic .heat-cell.l4 {
+  background: #6ee7a8;
+}
 body.page-admin-traffic .traffic-chart-wrap {
   display: grid;
   grid-template-columns: 28px minmax(0, 1fr);
@@ -14553,7 +8734,7 @@ body.page-admin-traffic .traffic-chart-scale {
   justify-content: space-between;
   padding: 2px 0;
   color: var(--text-muted);
-  font-size: 9px;
+  font-size: var(--sv-min-text);
   text-align: right;
   line-height: 1;
 }
@@ -14562,24 +8743,22 @@ body.page-admin-traffic .traffic-chart {
   width: 100%;
   height: 88px;
   background: rgba(0, 0, 0, 0.22);
-  border-radius: 8px;
+  border-radius: var(--nebula-radius-sm);
   overflow: hidden;
 }
 body.page-admin-traffic .chart-axis {
   stroke: rgba(255, 255, 255, 0.14);
   stroke-width: 1;
 }
-body.page-admin-traffic .bar-logins { fill: #f5b942; }
-body.page-admin-traffic .bar-pages { fill: #7eb8ff; }
-body.page-admin-traffic .bar-media { fill: #6ee7a8; }
-body.page-admin-traffic .bar-chats { fill: #c4b5fd; }
-body.page-admin-traffic .bar-empty { fill: rgba(255, 255, 255, 0.12); }
+body.page-admin-traffic .bar-empty {
+  fill: rgba(255, 255, 255, 0.12);
+}
 body.page-admin-traffic .traffic-mix {
   display: flex;
   width: 100%;
   height: 6px;
   margin: 8px 0 0;
-  border-radius: 999px;
+  border-radius: var(--nebula-radius-full);
   overflow: hidden;
   background: rgba(255, 255, 255, 0.06);
 }
@@ -14587,10 +8766,18 @@ body.page-admin-traffic .traffic-mix span {
   display: block;
   height: 100%;
 }
-body.page-admin-traffic .mix-logins { background: #f5b942; }
-body.page-admin-traffic .mix-pages { background: #7eb8ff; }
-body.page-admin-traffic .mix-media { background: #6ee7a8; }
-body.page-admin-traffic .mix-chats { background: #c4b5fd; }
+body.page-admin-traffic .mix-logins {
+  background: #f5b942;
+}
+body.page-admin-traffic .mix-pages {
+  background: #7eb8ff;
+}
+body.page-admin-traffic .mix-media {
+  background: #6ee7a8;
+}
+body.page-admin-traffic .mix-chats {
+  background: #c4b5fd;
+}
 body.page-admin-traffic .traffic-stats {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -14602,13 +8789,13 @@ body.page-admin-traffic .traffic-stats div {
 }
 body.page-admin-traffic .traffic-stats dt {
   color: var(--text-muted);
-  font-size: 9px;
+  font-size: var(--sv-min-text);
   text-transform: uppercase;
   letter-spacing: 0.06em;
 }
 body.page-admin-traffic .traffic-stats dd {
   margin: 2px 0 0;
-  font-size: 13px;
+  font-size: var(--sv-text-sm);
   font-weight: 700;
   color: #fff;
 }
@@ -14617,7 +8804,6 @@ body.page-admin-traffic .traffic-stats dd {
     grid-template-columns: 1fr;
   }
 }
-
 .vod-slot-busy {
   position: absolute;
   inset: 0;
@@ -14627,7 +8813,7 @@ body.page-admin-traffic .traffic-stats dd {
   padding: 16px;
   background: rgba(6, 8, 10, 0.82);
   z-index: 4;
-  border-radius: 10px;
+  border-radius: var(--nebula-radius-sm);
 }
 .player-wrapper,
 .video-container {
@@ -14639,24 +8825,22 @@ body.page-admin-traffic .traffic-stats dd {
 .vod-slot-busy-card {
   max-width: 28rem;
   padding: 16px 18px;
-  border-radius: 10px;
-  border: 1px solid var(--border, #2a2a2a);
-  background: var(--tube-surface, #121212);
+  border-radius: var(--nebula-radius-sm);
+  border: 1px solid var(--border);
+  background: var(--tube-surface);
   color: #f3f3f3;
 }
 .vod-slot-busy-card strong {
   display: block;
   margin-bottom: 8px;
-  font-size: 15px;
+  font-size: var(--sv-text-md);
 }
 .vod-slot-busy-card p {
   margin: 0;
-  color: var(--text-muted, #b3b3b3);
-  font-size: 13px;
+  color: var(--text-muted);
+  font-size: var(--sv-text-sm);
   line-height: 1.45;
 }
-
-
 /* Custom VOD control bar (vod_seek_hover.js → .vod-controlbar).
    Must sit absolutely inside .player-wrapper / .video-container — never in
    normal flow, or it overflows onto .vod-details and stacks over metadata. */
@@ -14666,7 +8850,6 @@ body.page-mobile-player .video-container.has-vod-seekbar,
   position: relative !important;
   overflow: hidden !important;
 }
-
 .vod-controlbar {
   position: absolute !important;
   left: 0 !important;
@@ -14680,18 +8863,16 @@ body.page-mobile-player .video-container.has-vod-seekbar,
   min-height: 44px !important;
   padding: 8px 10px 10px !important;
   margin: 0 !important;
-  color: #f5f5f5 !important;
+  color: var(--nebula-text-main) !important;
   background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.72) 55%, rgba(0, 0, 0, 0.92) 100%) !important;
   pointer-events: auto !important;
   transition: opacity 0.18s ease, transform 0.18s ease !important;
 }
-
 .vod-controlbar--hidden {
   opacity: 0 !important;
   pointer-events: none !important;
   transform: translateY(6px) !important;
 }
-
 .vod-cb-btn {
   flex: 0 0 auto !important;
   display: inline-grid !important;
@@ -14700,24 +8881,20 @@ body.page-mobile-player .video-container.has-vod-seekbar,
   height: 34px !important;
   padding: 0 !important;
   border: 0 !important;
-  border-radius: 8px !important;
+  border-radius: var(--nebula-radius-sm) !important;
   color: inherit !important;
   background: rgba(255, 255, 255, 0.08) !important;
   cursor: pointer !important;
 }
-
 .vod-cb-btn:hover,
 .vod-cb-btn:focus-visible {
   background: rgba(255, 255, 255, 0.16) !important;
-  outline: none !important;
 }
-
 .vod-cb-btn svg {
   width: 18px !important;
   height: 18px !important;
   display: block !important;
 }
-
 .vod-cb-time {
   flex: 0 0 auto !important;
   display: inline-flex !important;
@@ -14725,18 +8902,16 @@ body.page-mobile-player .video-container.has-vod-seekbar,
   gap: 2px !important;
   min-width: 7.5em !important;
   font-family: "IBM Plex Mono", "Consolas", monospace !important;
-  font-size: 12px !important;
+  font-size: var(--sv-text-xs) !important;
   font-weight: 600 !important;
   font-variant-numeric: tabular-nums !important;
   letter-spacing: 0.01em !important;
   white-space: nowrap !important;
-  color: #f4f4f5 !important;
+  color: var(--nebula-text-main) !important;
 }
-
 .vod-cb-sep {
   opacity: 0.55 !important;
 }
-
 .vod-cb-vol {
   flex: 0 0 72px !important;
   width: 72px !important;
@@ -14745,7 +8920,6 @@ body.page-mobile-player .video-container.has-vod-seekbar,
   accent-color: #7dd3fc !important;
   cursor: pointer !important;
 }
-
 .vod-seekbar {
   position: relative !important;
   left: auto !important;
@@ -14761,21 +8935,18 @@ body.page-mobile-player .video-container.has-vod-seekbar,
   touch-action: none !important;
   pointer-events: auto !important;
 }
-
 .vod-seekbar__track {
   position: relative;
   width: 100%;
   height: 4px;
-  border-radius: 999px;
+  border-radius: var(--nebula-radius-full);
   background: rgba(255, 255, 255, 0.18);
   transition: height 0.12s ease;
 }
-
 .vod-seekbar:hover .vod-seekbar__track,
 .vod-seekbar.is-dragging .vod-seekbar__track {
   height: 6px;
 }
-
 .vod-seekbar__buffered,
 .vod-seekbar__played {
   position: absolute;
@@ -14785,17 +8956,14 @@ body.page-mobile-player .video-container.has-vod-seekbar,
   border-radius: inherit;
   pointer-events: none;
 }
-
 .vod-seekbar__buffered {
   background: rgba(255, 255, 255, 0.28);
   width: 0%;
 }
-
 .vod-seekbar__played {
   background: #f1f1f1;
   width: 0%;
 }
-
 .vod-seekbar__thumb {
   position: absolute;
   top: 50%;
@@ -14811,23 +8979,21 @@ body.page-mobile-player .video-container.has-vod-seekbar,
   pointer-events: none;
   transition: opacity 0.12s ease;
 }
-
 .vod-seekbar:hover .vod-seekbar__thumb,
 .vod-seekbar.is-dragging .vod-seekbar__thumb {
   opacity: 1;
 }
-
 .vod-seekbar__tip {
   position: absolute;
   bottom: calc(100% + 8px);
   transform: translateX(-50%);
   padding: 4px 8px;
-  border-radius: 8px;
+  border-radius: var(--nebula-radius-sm);
   border: 1px solid rgba(255, 255, 255, 0.14);
   background: rgba(12, 12, 14, 0.92);
-  color: #f4f4f5;
+  color: var(--nebula-text-main);
   font-family: "IBM Plex Mono", "Consolas", monospace;
-  font-size: 12px;
+  font-size: var(--sv-text-xs);
   font-weight: 600;
   letter-spacing: 0.02em;
   line-height: 1;
@@ -14835,27 +9001,17 @@ body.page-mobile-player .video-container.has-vod-seekbar,
   pointer-events: none;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
 }
-
 .vod-seekbar__tip[hidden] {
   display: none !important;
 }
-
 body.page-mobile-player .vod-controlbar {
   padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
   min-height: 48px !important;
 }
-
 body.page-mobile-player .vod-cb-vol {
   flex-basis: 56px !important;
   width: 56px !important;
 }
-
-.vod-seek-rail,
-.vod-seek-rail__track,
-.vod-seek-tip {
-  display: none !important;
-}
-
 /* VOD action icons: readable labeled buttons (share / download) — 2026-09-13 */
 body:is(.page-vod, .page-live) .vod-file-action {
   width: auto !important;
@@ -14868,11 +9024,11 @@ body:is(.page-vod, .page-live) .vod-file-action {
   justify-content: center !important;
   gap: 7px !important;
   overflow: visible !important;
-  border: 1px solid var(--tube-line, #2e2e2e) !important;
-  border-radius: 8px !important;
+  border: 1px solid var(--tube-line) !important;
+  border-radius: var(--nebula-radius-sm) !important;
   color: #f0f0f0 !important;
-  background: var(--tube-surface-2, #1a1a1a) !important;
-  font-size: 12px !important;
+  background: var(--tube-surface-2) !important;
+  font-size: var(--sv-text-xs) !important;
   font-weight: 700 !important;
   letter-spacing: 0.01em !important;
   line-height: 1 !important;
@@ -14880,16 +9036,13 @@ body:is(.page-vod, .page-live) .vod-file-action {
   cursor: pointer !important;
   box-shadow: none !important;
 }
-
 body:is(.page-vod, .page-live) .vod-file-action:hover,
 body:is(.page-vod, .page-live) .vod-file-action:focus-visible {
   color: #fff !important;
   border-color: #4a4a4a !important;
-  background: var(--tube-surface-3, #242424) !important;
-  outline: none !important;
+  background: var(--tube-surface-3) !important;
   box-shadow: var(--tube-focus, 0 0 0 3px rgba(242, 229, 141, 0.28)) !important;
 }
-
 body:is(.page-vod, .page-live) .vod-file-action svg {
   width: 16px !important;
   height: 16px !important;
@@ -14900,17 +9053,14 @@ body:is(.page-vod, .page-live) .vod-file-action svg {
   stroke-linecap: round !important;
   stroke-linejoin: round !important;
 }
-
 body:is(.page-vod, .page-live) .vod-file-action svg path {
   fill: none !important;
   stroke: currentColor !important;
 }
-
 body:is(.page-vod, .page-live) .vod-file-action span {
   display: inline !important;
   color: inherit !important;
 }
-
 /* Player control icons: higher contrast */
 body:is(.page-vod, .page-live, .page-mobile-player) .vod-cb-btn {
   width: 36px !important;
@@ -14919,16 +9069,13 @@ body:is(.page-vod, .page-live, .page-mobile-player) .vod-cb-btn {
   background: rgba(255, 255, 255, 0.14) !important;
   border: 1px solid rgba(255, 255, 255, 0.18) !important;
 }
-
 body:is(.page-vod, .page-live, .page-mobile-player) .vod-cb-btn:hover,
 body:is(.page-vod, .page-live, .page-mobile-player) .vod-cb-btn:focus-visible {
   background: rgba(255, 255, 255, 0.24) !important;
   border-color: rgba(255, 255, 255, 0.32) !important;
 }
-
 body:is(.page-vod, .page-live, .page-mobile-player) .vod-cb-btn svg {
   width: 18px !important;
   height: 18px !important;
   fill: currentColor !important;
 }
-
diff --git a/WEBUI/static/sv_confirm.js b/WEBUI/static/sv_confirm.js
new file mode 100644
index 0000000..bfc6f46
--- /dev/null
+++ b/WEBUI/static/sv_confirm.js
@@ -0,0 +1,114 @@
+/* Accessible confirmation dialog for forms and buttons (replaces inline confirm() handlers).
+ *
+ * <form data-confirm="Delete X? This cannot be undone." data-confirm-ok="Delete" data-confirm-danger>
+ * <button data-confirm="..."> inside a form works the same way for that submitter only.
+ * Uses a native <dialog> (focus moves in, Escape cancels, focus returns to the trigger).
+ */
+(function () {
+  'use strict';
+
+  var dialog = null;
+  var msgEl = null;
+  var okBtn = null;
+  var cancelBtn = null;
+
+  // Strings are registered in JS_MESSAGES (WEBUI/i18n.py); svT() comes from components/js_i18n.html.
+  function t(text) {
+    return typeof window.svT === 'function' ? window.svT(text) : text;
+  }
+
+  function ensureDialog() {
+    if (dialog) return dialog;
+    dialog = document.createElement('dialog');
+    dialog.className = 'sv-dialog sv-confirm';
+    dialog.setAttribute('aria-labelledby', 'sv-confirm-title');
+    dialog.setAttribute('aria-describedby', 'sv-confirm-msg');
+
+    var body = document.createElement('div');
+    body.className = 'sv-dialog__body';
+    var title = document.createElement('h2');
+    title.id = 'sv-confirm-title';
+    title.className = 'sv-dialog__title';
+    title.textContent = t('Please confirm');
+    msgEl = document.createElement('p');
+    msgEl.id = 'sv-confirm-msg';
+    msgEl.className = 'sv-confirm__msg';
+    body.appendChild(title);
+    body.appendChild(msgEl);
+
+    var foot = document.createElement('div');
+    foot.className = 'sv-dialog__foot';
+    cancelBtn = document.createElement('button');
+    cancelBtn.type = 'button';
+    cancelBtn.className = 'sv-btn sv-btn--secondary';
+    cancelBtn.value = 'cancel';
+    okBtn = document.createElement('button');
+    okBtn.type = 'button';
+    okBtn.value = 'ok';
+    foot.appendChild(cancelBtn);
+    foot.appendChild(okBtn);
+
+    dialog.appendChild(body);
+    dialog.appendChild(foot);
+    document.body.appendChild(dialog);
+
+    cancelBtn.addEventListener('click', function () { dialog.close('cancel'); });
+    okBtn.addEventListener('click', function () { dialog.close('ok'); });
+    dialog.addEventListener('click', function (e) { if (e.target === dialog) dialog.close('cancel'); });
+    return dialog;
+  }
+
+  function ask(trigger, source) {
+    return new Promise(function (resolve) {
+      var dlg = ensureDialog();
+      if (typeof dlg.showModal !== 'function') {
+        resolve(window.confirm(source.getAttribute('data-confirm')));
+        return;
+      }
+      msgEl.textContent = source.getAttribute('data-confirm');
+      okBtn.textContent = source.getAttribute('data-confirm-ok') || t('Confirm');
+      okBtn.className = 'sv-btn ' + (source.hasAttribute('data-confirm-danger') ? 'sv-btn--danger' : 'sv-btn--primary');
+      cancelBtn.textContent = source.getAttribute('data-confirm-cancel') || t('Cancel');
+      dlg.returnValue = '';
+      dlg.addEventListener('close', function onClose() {
+        dlg.removeEventListener('close', onClose);
+        if (trigger && typeof trigger.focus === 'function') trigger.focus();
+        resolve(dlg.returnValue === 'ok');
+      });
+      dlg.showModal();
+      cancelBtn.focus();
+    });
+  }
+
+  document.addEventListener('submit', function (e) {
+    var form = e.target;
+    if (!(form instanceof HTMLFormElement)) return;
+    var submitter = e.submitter || null;
+    var source = submitter && submitter.hasAttribute('data-confirm') ? submitter
+      : (form.hasAttribute('data-confirm') ? form : null);
+    if (!source) return;
+    if (form.__svConfirmed) {
+      form.__svConfirmed = false;
+      return;
+    }
+    e.preventDefault();
+    e.stopImmediatePropagation();
+    ask(submitter || form.querySelector('[type="submit"]'), source).then(function (ok) {
+      if (!ok) return;
+      form.__svConfirmed = true;
+      if (typeof form.requestSubmit === 'function') {
+        form.requestSubmit(submitter && submitter.form === form ? submitter : undefined);
+      } else {
+        form.submit();
+      }
+    });
+  }, true);
+
+  window.svConfirm = function (message, okLabel, danger) {
+    var src = document.createElement('div');
+    src.setAttribute('data-confirm', message);
+    if (okLabel) src.setAttribute('data-confirm-ok', okLabel);
+    if (danger) src.setAttribute('data-confirm-danger', '');
+    return ask(document.activeElement, src);
+  };
+})();
diff --git a/WEBUI/static/tts_overlay.html b/WEBUI/static/tts_overlay.html
index 8ad0124..f294555 100644
--- a/WEBUI/static/tts_overlay.html
+++ b/WEBUI/static/tts_overlay.html
@@ -39,142 +39,7 @@
   <div id="status">TTS idle</div>
   <div id="toast"><span class="user"></span><span class="text"></span></div>
   <audio id="player" preload="auto"></audio>
-  <script>
-    const params = new URLSearchParams(location.search);
-    const token = params.get("token") || "";
-    const streamer = params.get("streamer") || "";
-    const showToast = params.get("toast") !== "0";
-    const statusEl = document.getElementById("status");
-    const toastEl = document.getElementById("toast");
-    const userEl = toastEl.querySelector(".user");
-    const textEl = toastEl.querySelector(".text");
-    const player = document.getElementById("player");
-
-    let busy = false;
-    let currentId = null;
-    let skipTimer = null;
-
-    function setStatus(msg) {
-      statusEl.textContent = msg;
-    }
-
-    function showItem(user, text) {
-      if (!showToast) return;
-      userEl.textContent = user ? (user + ":") : "";
-      textEl.textContent = text || "";
-      toastEl.classList.add("show");
-    }
-
-    function hideToast() {
-      toastEl.classList.remove("show");
-    }
-
-    function withAuth(path) {
-      const u = new URL(path, location.origin);
-      u.searchParams.set("token", token);
-      u.searchParams.set("streamer", streamer);
-      return u.pathname + u.search;
-    }
-
-    async function api(path, opts) {
-      const res = await fetch(withAuth(path), opts);
-      if (!res.ok) throw new Error("http " + res.status);
-      return res.json();
-    }
-
-    async function ack(id) {
-      try {
-        await api("/tts/api/ack?id=" + encodeURIComponent(id), {
-          method: "POST",
-          headers: {"Content-Type": "application/json"},
-          body: JSON.stringify({id: id}),
-        });
-      } catch (e) {}
-    }
-
-    async function pollSkip() {
-      if (!currentId || !busy) return;
-      try {
-        const data = await api("/tts/api/skipcheck?id=" + encodeURIComponent(currentId));
-        if (data && data.skip) {
-          player.pause();
-          hideToast();
-          const id = currentId;
-          currentId = null;
-          busy = false;
-          await ack(id);
-          setStatus("skipped");
-        }
-      } catch (e) {}
-    }
-
-    async function tick() {
-      if (!streamer) {
-        setStatus("streamer fehlt");
-        return;
-      }
-      if (busy) return;
-      try {
-        const data = await api("/tts/api/next");
-        if (!data || !data.item) {
-          setStatus("TTS idle");
-          return;
-        }
-        const item = data.item;
-        busy = true;
-        currentId = item.id;
-        setStatus("playing · " + (item.user || ""));
-        showItem(item.user, item.text);
-        player.src = item.audio_url;
-        try {
-          await player.play();
-        } catch (err) {
-          setStatus("autoplay blocked — Interact + click once");
-          const retry = async () => {
-            try {
-              player.muted = false;
-              await player.play();
-              setStatus("playing · " + (item.user || ""));
-            } catch (e2) {
-              setStatus("autoplay still blocked");
-            }
-          };
-          window.addEventListener("pointerdown", retry, { once: true });
-          return;
-        }
-      } catch (e) {
-        setStatus("error");
-      }
-    }
-
-    player.addEventListener("ended", async () => {
-      const id = currentId;
-      hideToast();
-      currentId = null;
-      busy = false;
-      if (id) await ack(id);
-      setStatus("TTS idle");
-      tick();
-    });
-
-    player.addEventListener("error", async () => {
-      const id = currentId;
-      hideToast();
-      currentId = null;
-      busy = false;
-      if (id) await ack(id);
-      setStatus("audio error");
-    });
-
-    // Unlock autoplay on first user gesture (OBS interaction / click)
-    window.addEventListener("pointerdown", () => {
-      player.muted = false;
-      player.play().catch(() => {});
-    }, {once: true});
-
-    setInterval(tick, 1200);
-    setInterval(pollSkip, 800);
-    tick();
-  </script>
+  <script src="/static/overlay_common.js"></script>
+  <script src="/static/tts_overlay.js"></script>
 </body>
 </html>
diff --git a/WEBUI/static/tts_overlay.js b/WEBUI/static/tts_overlay.js
new file mode 100644
index 0000000..5a4867b
--- /dev/null
+++ b/WEBUI/static/tts_overlay.js
@@ -0,0 +1,171 @@
+/* TTS overlay (OBS browser source). External file: the enforced CSP blocks inline scripts.
+   Auth: token from #token= of the overlay URL (a legacy ?token= is moved into the fragment),
+   sent to the API only as X-TTS-Token header. No token or HTTP 401: polling stops. */
+(function () {
+    const overlay = window.SVOverlay;
+    const parsed = overlay.readToken();
+    const token = parsed.token;
+    const streamer = parsed.params.get("streamer") || "";
+    const showToast = parsed.params.get("toast") !== "0";
+    const statusEl = document.getElementById("status");
+    const toastEl = document.getElementById("toast");
+    const userEl = toastEl.querySelector(".user");
+    const textEl = toastEl.querySelector(".text");
+    const player = document.getElementById("player");
+    const AUTH_HEADERS = { "X-TTS-Token": token };
+
+    function setStatus(msg) {
+      statusEl.textContent = msg;
+    }
+
+    if (!token) {
+      setStatus("Token fehlt – Overlay-URL mit #token=… verwenden");
+      return;
+    }
+    if (!streamer) {
+      setStatus("streamer fehlt");
+      return;
+    }
+
+    const audio = overlay.createAudio(player, AUTH_HEADERS);
+    let busy = false;
+    let currentId = null;
+
+    function showItem(user, text) {
+      if (!showToast) return;
+      userEl.textContent = user ? (user + ":") : "";
+      textEl.textContent = text || "";
+      toastEl.classList.add("show");
+    }
+
+    function hideToast() {
+      toastEl.classList.remove("show");
+    }
+
+    function withStreamer(path) {
+      const u = new URL(path, location.origin);
+      u.searchParams.set("streamer", streamer);
+      return u.pathname + u.search;
+    }
+
+    /** @returns {Promise<{status: number, data: any}>} */
+    async function api(path, opts) {
+      const o = Object.assign({}, opts || {});
+      o.headers = Object.assign({}, o.headers || {}, AUTH_HEADERS);
+      const res = await fetch(withStreamer(path), o);
+      return { status: res.status, data: res.ok ? await res.json() : null };
+    }
+
+    async function ack(id) {
+      try {
+        await api("/tts/api/ack?id=" + encodeURIComponent(id), {
+          method: "POST",
+          headers: {"Content-Type": "application/json"},
+          body: JSON.stringify({id: id}),
+        });
+      } catch (e) {
+        console.error("[tts-overlay] ack failed for item", id, e);
+      }
+    }
+
+    async function pollSkip() {
+      if (!currentId || !busy) return "ok";
+      const res = await api("/tts/api/skipcheck?id=" + encodeURIComponent(currentId));
+      if (res.status === 401) return "unauthorized";
+      if (res.status !== 200) return "error";
+      if (res.data && res.data.skip) {
+        player.pause();
+        hideToast();
+        const id = currentId;
+        currentId = null;
+        busy = false;
+        await ack(id);
+        setStatus("skipped");
+      }
+      return "ok";
+    }
+
+    async function tick() {
+      if (busy) return "ok";
+      const res = await api("/tts/api/next");
+      if (res.status === 401) return "unauthorized";
+      if (res.status !== 200) {
+        setStatus("error " + res.status);
+        return "error";
+      }
+      if (!res.data || !res.data.item) {
+        setStatus("TTS idle");
+        return "ok";
+      }
+      const item = res.data.item;
+      busy = true;
+      currentId = item.id;
+      setStatus("playing · " + (item.user || ""));
+      showItem(item.user, item.text);
+      try {
+        await audio.load(item.audio_url);
+      } catch (e) {
+        console.error("[tts-overlay] loading audio failed for item", item.id, e);
+        busy = false;
+        currentId = null;
+        setStatus("audio error");
+        return "error";
+      }
+      try {
+        await player.play();
+      } catch (err) {
+        console.error("[tts-overlay] autoplay blocked", err);
+        setStatus("autoplay blocked — Interact + click once");
+        const retry = async () => {
+          try {
+            player.muted = false;
+            await player.play();
+            setStatus("playing · " + (item.user || ""));
+          } catch (e2) {
+            console.error("[tts-overlay] autoplay retry failed", e2);
+            setStatus("autoplay still blocked");
+          }
+        };
+        window.addEventListener("pointerdown", retry, { once: true });
+      }
+      return "ok";
+    }
+
+    function stopAll() {
+      nextPoller.stop();
+      skipPoller.stop();
+      setStatus("Token ungültig – Abfrage angehalten");
+    }
+    const nextPoller = overlay.createPoller(tick, { interval: 1200, maxInterval: 30000, label: "tts next", onUnauthorized: stopAll });
+    const skipPoller = overlay.createPoller(pollSkip, { interval: 800, maxInterval: 30000, label: "tts skipcheck", onUnauthorized: stopAll });
+
+    player.addEventListener("ended", async () => {
+      const id = currentId;
+      hideToast();
+      currentId = null;
+      busy = false;
+      audio.release();
+      if (id) await ack(id);
+      setStatus("TTS idle");
+      nextPoller.now();
+    });
+
+    player.addEventListener("error", async () => {
+      const id = currentId;
+      hideToast();
+      currentId = null;
+      busy = false;
+      audio.release();
+      if (id) await ack(id);
+      setStatus("audio error");
+    });
+
+    // Unlock autoplay on first user gesture (OBS interaction / click)
+    window.addEventListener("pointerdown", () => {
+      player.muted = false;
+      player.play().catch((e) => console.error("[tts-overlay] unlock play failed", e));
+    }, {once: true});
+
+    nextPoller.start();
+    skipPoller.start();
+})();
diff --git a/WEBUI/templates/admin.html b/WEBUI/templates/admin.html
index f3c8753..eadc549 100644
--- a/WEBUI/templates/admin.html
+++ b/WEBUI/templates/admin.html
@@ -5,12 +5,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{{ _('Options & system control') }} — StreamVault</title>
     <link rel="stylesheet" href="{{ UI_FONTS_HREF }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='style.css', v=ASSET_VERSION) }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/tube_design_system.css', v=ASSET_VERSION) }}">
+    {% include 'components/styles.html' %}
     <style>
       body.page-admin.ns-platform {
         overflow-x: hidden !important;
-        background: var(--nebula-bg-base, #070B14) !important;
+        background: var(--nebula-bg-base) !important;
         animation: none !important;
       }
       body.page-admin.ns-platform .main {
@@ -24,7 +23,7 @@
         padding: 16px 24px !important;
         overflow: hidden !important;
       }
-      @media (max-width: 1024px) {
+      @media (max-width: 768px) {
         body.page-admin.ns-platform .main {
           margin-left: 0 !important;
           max-width: 100% !important;
@@ -51,8 +50,8 @@
         flex-wrap: wrap;
         gap: 12px;
         padding: 14px 18px;
-        background: #0E1626;
-        border: 1px solid #26344F;
+        background: var(--nebula-bg-surface);
+        border: 1px solid var(--nebula-border);
         border-radius: 12px;
       }
       .ns-options-title-group {
@@ -76,14 +75,14 @@
         gap: 6px;
       }
       .ns-options-pill {
-        font-size: 11px;
+        font-size: 12px;
         font-weight: 600;
         font-family: var(--ns-font-mono, monospace);
         padding: 3px 8px;
         border-radius: 6px;
         background: rgba(17, 26, 43, 0.9);
-        border: 1px solid #26344F;
-        color: #A2AEC8;
+        border: 1px solid var(--nebula-border);
+        color: var(--nebula-text-secondary);
         white-space: nowrap;
       }
       .ns-options-pill strong {
@@ -113,7 +112,7 @@
       .ns-module-link:hover,
       .ns-module-link:focus-visible {
         background: rgba(77, 99, 255, 0.26);
-        border-color: #4D63FF;
+        border-color: var(--nebula-accent-primary);
         color: #FFFFFF;
         outline: none;
       }
@@ -125,8 +124,8 @@
         max-width: 100% !important;
         margin: 0 !important;
         padding: 5px !important;
-        background: #0B1220 !important;
-        border: 1px solid #26344F !important;
+        background: var(--nebula-bg-deep) !important;
+        border: 1px solid var(--nebula-border) !important;
         border-radius: 10px !important;
         box-sizing: border-box !important;
         overflow: visible !important;
@@ -139,7 +138,7 @@
         padding: 9px 12px !important;
         font-size: 13px !important;
         font-weight: 600 !important;
-        color: #A2AEC8 !important;
+        color: var(--nebula-text-secondary) !important;
         background: transparent !important;
         border: 1px solid transparent !important;
         border-radius: 7px !important;
@@ -155,7 +154,7 @@
         color: #F3F6FF !important;
       }
       body.ns-platform.page-admin .admin-tab-btn.active {
-        background: #4D63FF !important;
+        background: var(--nebula-accent-primary) !important;
         color: #FFFFFF !important;
         border-color: rgba(255, 255, 255, 0.18) !important;
         box-shadow: 0 2px 10px rgba(77, 99, 255, 0.35) !important;
@@ -185,8 +184,8 @@
         box-sizing: border-box !important;
       }
       body.page-admin .panel {
-        background: #111A2B !important;
-        border: 1px solid #26344F !important;
+        background: var(--nebula-bg-surface) !important;
+        border: 1px solid var(--nebula-border) !important;
         border-radius: 12px !important;
         padding: 16px 18px !important;
         box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
@@ -239,9 +238,10 @@
     </style>
   </head>
   <body class="page-admin {{ theme_class }} ns-platform">
+    <a class="sv-skip-link" href="#main-content">{{ _('Skip to content') }}</a>
     {% include 'components/sidebar.html' %}
 
-    <div class="main">
+    <main class="main" id="main-content" tabindex="-1">
       <!-- Legacy: Discord-Member VOD-Freigaben gesamte Rolle Discord-Member -->
       <div class="ns-options-shell">
         <header class="ns-options-topbar">
@@ -262,8 +262,8 @@ <h1 class="page-title">{{ _('Options & system control') }}</h1>
           </div>
         </header>
 
-        {% if msg %}<div class="alert alert-success" style="margin:0;">{{ msg }}</div>{% endif %}
-        {% if error %}<div class="alert alert-error" style="margin:0;">{{ error }}</div>{% endif %}
+        {% if msg %}<div class="alert alert-success" role="status" style="margin:0;">{{ msg }}</div>{% endif %}
+        {% if error %}<div class="alert alert-error" role="alert" style="margin:0;">{{ error }}</div>{% endif %}
         {% if storage_alert and storage_alert.critical %}
         <div class="alert alert-error" style="margin:0;">
           {{ _('Storage critical: %(pct)s%% used, only %(free)s free.', pct=storage_alert.used_pct, free=storage_alert.free_str) }}
@@ -272,24 +272,27 @@ <h1 class="page-title">{{ _('Options & system control') }}</h1>
         {% endif %}
 
         <div class="admin-tabs" role="tablist" aria-label="{{ _('Option sections') }}">
-          <button type="button" class="admin-tab-btn active" role="tab" aria-selected="true" aria-controls="tab-system" onclick="switchAdminTab(event, 'tab-system')">{{ _('System & recorder') }}</button>
-          <button type="button" class="admin-tab-btn" role="tab" aria-selected="false" aria-controls="tab-settings" onclick="switchAdminTab(event, 'tab-settings')">{{ _('Settings') }}</button>
-          <button type="button" class="admin-tab-btn" role="tab" aria-selected="false" aria-controls="tab-security" onclick="switchAdminTab(event, 'tab-security')">{{ _('Security & shares') }}</button>
-          <button type="button" class="admin-tab-btn" role="tab" aria-selected="false" aria-controls="tab-backups" onclick="switchAdminTab(event, 'tab-backups')">{{ _('System backups') }}</button>
+          <button type="button" class="admin-tab-btn active" role="tab" id="tabbtn-system" aria-selected="true" aria-controls="tab-system" data-admin-tab="tab-system">{{ _('System & recorder') }}</button>
+          <button type="button" class="admin-tab-btn" role="tab" id="tabbtn-settings" aria-selected="false" aria-controls="tab-settings" data-admin-tab="tab-settings" tabindex="-1">{{ _('Settings') }}</button>
+          <button type="button" class="admin-tab-btn" role="tab" id="tabbtn-security" aria-selected="false" aria-controls="tab-security" data-admin-tab="tab-security" tabindex="-1">{{ _('Security & shares') }}</button>
+          <button type="button" class="admin-tab-btn" role="tab" id="tabbtn-backups" aria-selected="false" aria-controls="tab-backups" data-admin-tab="tab-backups" tabindex="-1">{{ _('System backups') }}</button>
         </div>
 
         <div class="ns-options-stage">
           <!-- TAB 1: System & Recorder -->
-          <div class="grid admin-tab-content active" id="tab-system" role="tabpanel">
+          <div class="grid admin-tab-content active" id="tab-system" role="tabpanel" aria-labelledby="tabbtn-system" tabindex="0">
+            <h2 class="sr-only">{{ _('System & recorder') }}</h2>
             <div class="panel">
               <h3>{{ _('System status') }}</h3>
               <div class="stat-row"><span>{{ _('Load average (1m / 5m):') }}</span> <span class="stat-val">{{ sys_load[0] }} / {{ sys_load[1] }}</span></div>
               <div class="stat-row"><span>{{ _('Storage (total):') }}</span> <span class="stat-val">{{ storage.total_str }}</span></div>
               <div class="stat-row"><span>{{ _('Storage (free):') }}</span> <span class="stat-val">{{ storage.free_str }}</span></div>
               <div style="margin-top: 14px;">
-                <form method="post" action="{{ url_for('channels_restart') }}" style="margin:0;">
+                <form method="post" action="{{ url_for('channels_restart') }}" style="margin:0;"
+                      data-confirm="{{ _('Restart the recorder and chat logger now? Running recordings are interrupted for a few seconds.') }}"
+                      data-confirm-ok="{{ _('Restart services') }}">
                   <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-                  <button type="submit" class="btn-primary" style="width:100%; background:#334155; color:#F3F6FF;">{{ _('Restart services') }}</button>
+                  <button type="submit" class="sv-btn sv-btn--secondary" style="width:100%;">{{ _('Restart services') }}</button>
                 </form>
               </div>
             </div>
@@ -365,7 +368,8 @@ <h3 style="font-size:14px;">{{ _('Recent task errors') }}</h3>
           </div>
 
           <!-- TAB 2: Einstellungen & Cloud -->
-          <div class="grid admin-tab-content" id="tab-settings" role="tabpanel">
+          <div class="grid admin-tab-content" id="tab-settings" role="tabpanel" aria-labelledby="tabbtn-settings" tabindex="0">
+            <h2 class="sr-only">{{ _('Settings') }}</h2>
             <div class="panel">
               <h3>{{ _('Maintenance mode & area control') }}</h3>
               <p class="muted" style="margin:0 0 10px; font-size:12px;">
@@ -376,13 +380,13 @@ <h3>{{ _('Maintenance mode & area control') }}</h3>
                 <div class="stat-row" style="margin-bottom: 6px;">
                   <span style="font-weight:700;">{{ _('Global maintenance mode:') }}</span>
                   {% if maintenance.enabled %}
-                  <span class="stat-val" style="font-size: 13px; font-weight: 800; color: #f87171;">{{ _('ACTIVE (locked)') }}</span>
+                  <span class="stat-val" style="font-size: 13px; font-weight: 800; color: #f87171;">{{ _('Active (locked)') }}</span>
                   {% else %}
                   <span class="stat-val" style="font-size: 13px; font-weight: 800; color: #4ade80;">{{ _('OFF (normal operation)') }}</span>
                   {% endif %}
                 </div>
                 {% if maintenance.updated_label %}
-                <div class="stat-row" style="margin-bottom: 10px; font-size: 11px; color: var(--text-muted);">
+                <div class="stat-row" style="margin-bottom: 10px; font-size: 12px; color: var(--text-muted);">
                   <span>{{ _('Last changed:') }}</span>
                   <span>{{ maintenance.updated_label }}{% if maintenance.updated_by %} ({{ maintenance.updated_by }}){% endif %}</span>
                 </div>
@@ -401,14 +405,16 @@ <h3>{{ _('Maintenance mode & area control') }}</h3>
                   </button>
                 </form>
                 {% else %}
-                <form method="post" action="{{ url_for('admin_maintenance') }}" style="margin: 0;">
+                <form method="post" action="{{ url_for('admin_maintenance') }}" style="margin: 0;"
+                      data-confirm="{{ _('Enable maintenance mode? Everyone except allowlisted users sees the maintenance page until you end it.') }}"
+                      data-confirm-ok="{{ _('Enable maintenance mode') }}" data-confirm-danger>
                   <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                   <input type="hidden" name="action" value="enable">
                   <label class="stat-row" style="gap:8px; margin-bottom:8px; font-size: 12px;">
                     <span>{{ _('Send Discord message') }}</span>
                     <input type="checkbox" name="notify_discord" value="1" checked>
                   </label>
-                  <button type="submit" class="btn-primary" style="width:100%; background: rgba(239,68,68,0.2); color:#fca5a5; border:1px solid rgba(239,68,68,0.4);">
+                  <button type="submit" class="sv-btn sv-btn--danger-outline" style="width:100%;">
                     {{ _('Enable maintenance mode') }}
                   </button>
                 </form>
@@ -432,15 +438,23 @@ <h3>{{ _('Maintenance mode & area control') }}</h3>
                     <input type="checkbox" name="scope_mobile" value="1" {% if maintenance.scopes.mobile %}checked{% endif %}>
                   </label>
                 </div>
-                <label style="display:block; font-size:12px; color:var(--text-muted); margin-bottom:4px;">{{ _('Allowlist (comma-separated):') }}</label>
-                <input type="text" name="bypass_users" value="{{ maintenance.bypass_users_str }}" placeholder="{{ _('e.g. alice, bob') }}" style="width:100%; margin-bottom: 10px; box-sizing:border-box;">
-                <button type="submit" class="btn-primary" style="width:100%; background: #4D63FF; color: white;">
+                <label for="bypassUsers" style="display:block; font-size:12px; color:var(--text-muted); margin-bottom:4px;">{{ _('Allowlist (comma-separated):') }}</label>
+                <input type="text" id="bypassUsers" name="bypass_users" value="{{ maintenance.bypass_users_str }}" placeholder="{{ _('e.g. alice, bob') }}" style="width:100%; margin-bottom: 10px; box-sizing:border-box;">
+                <button type="submit" class="btn-primary" style="width:100%; background: var(--nebula-accent-primary); color: white;">
                   {{ _('Save area maintenance') }}
                 </button>
               </form>
             </div>
 
             <div style="display:flex; flex-direction:column; gap:16px; min-width:0;">
+              <div class="panel">
+                <h3>{{ _('OBS overlays') }}</h3>
+                <p class="muted" style="margin:0 0 10px; font-size:12px;">{{ _('Recommended browser-source URLs. Replace TOKEN with the value of TTS_OVERLAY_TOKEN or ALERT_OVERLAY_TOKEN. The part after # stays in OBS and reaches the server only as a request header, never in a log line.') }}</p>
+                <label for="obsTtsUrl" style="display:block; font-size:12px; color:var(--text-muted); margin-bottom:4px;">{{ _('Text-to-speech overlay') }}</label>
+                <input id="obsTtsUrl" type="text" readonly value="{{ url_for('tts_overlay', _external=True) }}?streamer=CHANNEL#token=TOKEN" style="width:100%; box-sizing:border-box; margin-bottom:10px; font-family:var(--ns-font-mono);">
+                <label for="obsAlertsUrl" style="display:block; font-size:12px; color:var(--text-muted); margin-bottom:4px;">{{ _('Alert sound overlay') }}</label>
+                <input id="obsAlertsUrl" type="text" readonly value="{{ url_for('alerts_overlay', _external=True) }}#token=TOKEN" style="width:100%; box-sizing:border-box; font-family:var(--ns-font-mono);">
+              </div>
               <div class="panel">
                 <h3>{{ _('Clip settings') }}</h3>
                 <p class="muted" style="margin:0 0 10px; font-size:12px;">{{ _('Instant clip parameters and hotkey in the web player.') }}</p>
@@ -476,7 +490,8 @@ <h3>{{ _('Clip settings') }}</h3>
           </div>
 
           <!-- TAB 3: Sicherheit & Freigaben -->
-          <div class="grid admin-tab-content" id="tab-security" role="tabpanel">
+          <div class="grid admin-tab-content" id="tab-security" role="tabpanel" aria-labelledby="tabbtn-security" tabindex="0">
+            <h2 class="sr-only">{{ _('Security & shares') }}</h2>
             <div class="panel full-width">
               <div class="muted" style="font-size:12px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;">
                 <span>{{ _('Role model: full access (<code>admin</code>), archive viewer (<code>viewer</code>), live only (<code>live_only</code>) &amp; Discord member.') }}</span>
@@ -505,7 +520,7 @@ <h3>{{ _('Active shares') }}</h3>
                       <td>{{ share.expires }}</td>
                       <td><a href="{{ share.url }}" target="_blank" rel="noopener">{{ _('Open') }}</a></td>
                       <td>
-                        <form method="post" action="{{ url_for('admin_share_revoke', token=share.token) }}" onsubmit='return confirm({{ _("Really revoke this share?")|tojson }});' style="margin:0;">
+                        <form method="post" action="{{ url_for('admin_share_revoke', token=share.token) }}" data-confirm="{{ _('Revoke this share? The link stops working immediately.') }}" data-confirm-ok="{{ _('Revoke') }}" data-confirm-danger style="margin:0;">
                           <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                           <button type="submit" class="btn-danger">{{ _('Revoke') }}</button>
                         </form>
@@ -565,7 +580,7 @@ <h3>{{ _('Login attempts') }}</h3>
                           <button type="submit" title="{{ _('Ban IP') }}">{{ _('Ban') }}</button>
                         </form>
                         {% else %}
-                        <span style="color:var(--danger); font-size:11px;">{{ _('Banned') }}</span>
+                        <span style="color:var(--danger); font-size:12px;">{{ _('Banned') }}</span>
                         {% endif %}
                       </td>
                     </tr>
@@ -577,7 +592,8 @@ <h3>{{ _('Login attempts') }}</h3>
           </div>
 
           <!-- TAB 4: System-Backups -->
-          <div class="grid admin-tab-content" id="tab-backups" role="tabpanel">
+          <div class="grid admin-tab-content" id="tab-backups" role="tabpanel" aria-labelledby="tabbtn-backups" tabindex="0">
+            <h2 class="sr-only">{{ _('System backups') }}</h2>
             <div class="panel full-width">
               <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px;">
                 <div>
@@ -586,7 +602,7 @@ <h3 style="margin: 0 0 4px 0;">{{ _('System backups') }}</h3>
                 </div>
                 <form method="post" action="{{ url_for('admin_backup_create') }}" style="margin: 0;">
                   <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-                  <button type="submit" class="btn-primary" style="background: #4D63FF; color: #FFF; font-weight: 700; padding: 8px 16px; border-radius: 8px; cursor: pointer;">
+                  <button type="submit" class="btn-primary" style="background: var(--nebula-accent-primary); color: #FFF; font-weight: 700; padding: 8px 16px; border-radius: 8px; cursor: pointer;">
                     {{ _('Create backup now') }}
                   </button>
                 </form>
@@ -606,18 +622,18 @@ <h3 style="margin: 0 0 4px 0;">{{ _('System backups') }}</h3>
                   <tbody>
                     {% for b in backups %}
                     <tr style="border-bottom: 1px solid rgba(255, 255, 255, 0.04);">
-                      <td style="padding: 10px; font-family: monospace; font-weight: 600; color: #F3F5FC;">{{ b.filename }}</td>
+                      <td style="padding: 10px; font-family: monospace; font-weight: 600; color: var(--nebula-text-main);">{{ b.filename }}</td>
                       <td style="padding: 10px; color: var(--text-muted);">{{ b.date_str }}</td>
                       <td style="padding: 10px;">{{ b.size_str }}</td>
                       <td style="padding: 10px;">
-                        {% if b.on_disk %}<span style="display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; background: rgba(72,214,162,0.15); color: #48D6A2; margin-right: 4px;">{{ _('Local') }}</span>{% endif %}
+                        {% if b.on_disk %}<span style="display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; background: rgba(72,214,162,0.15); color: var(--nebula-status-success); margin-right: 4px;">{{ _('Local') }}</span>{% endif %}
                       </td>
                       <td style="padding: 10px; text-align: right;">
                         <div style="display: inline-flex; gap: 6px;">
                           <a href="{{ url_for('admin_backup_download', filename=b.filename) }}" class="ns-btn ns-btn-secondary" style="padding: 4px 10px; font-size: 12px; text-decoration: none;">{{ _('Download') }}</a>
-                          <form method="post" action="{{ url_for('admin_backup_delete', filename=b.filename) }}" style="display: inline; margin: 0;">
+                          <form method="post" action="{{ url_for('admin_backup_delete', filename=b.filename) }}" style="display: inline; margin: 0;" data-confirm="{{ _('Delete backup %(name)s? This cannot be undone.', name=b.filename) }}" data-confirm-ok="{{ _('Delete') }}" data-confirm-danger>
                             <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-                            <button type="submit" class="btn-danger" style="padding: 4px 10px; font-size: 12px;" onclick='return confirm({{ _("Really delete backup %(name)s?", name=b.filename|safe)|tojson }})'>{{ _('Delete') }}</button>
+                            <button type="submit" class="btn-danger" style="padding: 4px 10px; font-size: 12px;">{{ _('Delete') }}</button>
                           </form>
                         </div>
                       </td>
@@ -634,9 +650,10 @@ <h3 style="margin: 0 0 4px 0;">{{ _('System backups') }}</h3>
           </div>
         </div>
       </div>
-    </div>
+    </main>
 
-    <script>
+{% include 'components/js_i18n.html' %}
+    <script nonce="{{ csp_nonce() }}">
       function switchAdminTab(evt, tabId) {
         if (evt) evt.preventDefault();
         var tabContents = document.getElementsByClassName("admin-tab-content");
@@ -647,26 +664,33 @@ <h3 style="margin: 0 0 4px 0;">{{ _('System backups') }}</h3>
         for (var j = 0; j < tabbtns.length; j++) {
           tabbtns[j].classList.remove("active");
           tabbtns[j].setAttribute("aria-selected", "false");
+          tabbtns[j].setAttribute("tabindex", "-1");
         }
         var target = document.getElementById(tabId);
         if (target) target.classList.add("active");
-        var btn = document.querySelector(".admin-tab-btn[onclick*='" + tabId + "']");
+        var btn = document.querySelector('.admin-tab-btn[data-admin-tab="' + tabId + '"]');
         if (btn) {
           btn.classList.add("active");
           btn.setAttribute("aria-selected", "true");
+          btn.removeAttribute("tabindex");
         }
         try { sessionStorage.setItem('active_admin_tab', tabId); } catch(e) {}
       }
       document.addEventListener("DOMContentLoaded", function() {
         var tabList = document.querySelector(".admin-tabs");
         if (tabList) {
+          tabList.addEventListener("click", function(e) {
+            var b = e.target.closest("[data-admin-tab]");
+            if (b) switchAdminTab(e, b.getAttribute("data-admin-tab"));
+          });
           tabList.addEventListener("keydown", function(e) {
-            if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
+            if (e.key !== "ArrowRight" && e.key !== "ArrowLeft" && e.key !== "Home" && e.key !== "End") return;
             var tabs = Array.prototype.slice.call(tabList.querySelectorAll(".admin-tab-btn"));
             var idx = tabs.indexOf(document.activeElement);
             if (idx === -1) return;
             e.preventDefault();
-            var next = tabs[(idx + (e.key === "ArrowRight" ? 1 : tabs.length - 1)) % tabs.length];
+            var next = e.key === "Home" ? tabs[0] : e.key === "End" ? tabs[tabs.length - 1]
+              : tabs[(idx + (e.key === "ArrowRight" ? 1 : tabs.length - 1)) % tabs.length];
             if (next) {
               next.focus();
               next.click();
diff --git a/WEBUI/templates/admin_traffic.html b/WEBUI/templates/admin_traffic.html
index 586f467..2daf69a 100644
--- a/WEBUI/templates/admin_traffic.html
+++ b/WEBUI/templates/admin_traffic.html
@@ -5,8 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{{ _('Traffic') }} – {{ _('Admin') }}</title>
     <link rel="stylesheet" href="{{ UI_FONTS_HREF }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='style.css', v=ASSET_VERSION) }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/tube_design_system.css', v=ASSET_VERSION) }}">
+    {% include 'components/styles.html' %}
   </head>
   <body class="page-admin page-admin-traffic {{ theme_class }} ns-platform">
 
@@ -42,6 +41,7 @@ <h1 class="page-title">{{ _('Traffic overview') }}</h1>
         <p class="muted" style="margin:0;">{{ _('No accounts match this filter.') }}</p>
       </div>
       {% else %}
+      <h2 class="sr-only">{{ _('Accounts') }}</h2>
       <div class="traffic-grid">
         {% for card in cards %}
         <article class="panel traffic-card{% if card.inactive %} is-inactive{% endif %}{% if not card.active %} is-disabled{% endif %}">
diff --git a/WEBUI/templates/admin_users.html b/WEBUI/templates/admin_users.html
index 0d6a74f..b754902 100644
--- a/WEBUI/templates/admin_users.html
+++ b/WEBUI/templates/admin_users.html
@@ -5,16 +5,16 @@
 {% block page_subtitle %}{{ _('Dynamic user account and group management with granular stream and permission control') }}{% endblock %}
 
 {% block header_actions %}
-  <button type="button" class="ns-btn ns-btn-primary" onclick="openModal('modal-add-user')">
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" y1="8" x2="19" y2="14"/><line x1="22" y1="11" x2="16" y2="11"/></svg>
+  <button type="button" class="ns-btn ns-btn-primary" data-open-modal="modal-add-user">
+    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" y1="8" x2="19" y2="14"/><line x1="22" y1="11" x2="16" y2="11"/></svg>
     {{ _('New user') }}
   </button>
-  <button type="button" class="ns-btn ns-btn-secondary" onclick="openModal('modal-add-group')">
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+  <button type="button" class="ns-btn ns-btn-secondary" data-open-modal="modal-add-group">
+    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
     {{ _('New group') }}
   </button>
   <a href="{{ url_for('admin_view') }}" class="ns-btn ns-btn-secondary">
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
+    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
     {{ _('System settings') }}
   </a>
 {% endblock %}
@@ -32,77 +32,79 @@
     flex-shrink: 0; white-space: nowrap;
   }
   .rbac-tab-btn:hover { color: var(--ns-text-primary); background: rgba(255, 255, 255, 0.03); }
-  .rbac-tab-btn.is-active { color: #4D63FF; border-bottom-color: #4D63FF; background: rgba(77, 99, 255, 0.08); }
-  .rbac-tab-badge { background: rgba(255, 255, 255, 0.1); color: var(--ns-text-secondary); font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
+  .rbac-tab-btn.is-active { color: var(--nebula-accent-text); border-bottom-color: var(--nebula-accent-primary); background: rgba(77, 99, 255, 0.08); }
+  .rbac-tab-badge { background: rgba(255, 255, 255, 0.1); color: var(--ns-text-secondary); font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
   .rbac-tab-btn.is-active .rbac-tab-badge { background: rgba(77, 99, 255, 0.25); color: #FFF; }
   .rbac-table-wrap { background: var(--ns-bg-surface); border: 1px solid var(--ns-border-subtle); border-radius: var(--ns-radius-lg); overflow-x: auto; box-shadow: var(--ns-shadow-sm); }
   .rbac-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
-  .rbac-table th { background: var(--ns-bg-surface-raised); color: var(--ns-text-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 14px 18px; border-bottom: 1px solid var(--ns-border-subtle); }
+  .rbac-table th { background: var(--ns-bg-surface-raised); color: var(--ns-text-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 14px 18px; border-bottom: 1px solid var(--ns-border-subtle); }
   .rbac-table td { padding: 14px 18px; border-bottom: 1px solid rgba(38, 52, 79, 0.4); color: var(--ns-text-primary); vertical-align: middle; }
   .rbac-table tr:last-child td { border-bottom: none; }
   .rbac-table tr:hover td { background: var(--ns-bg-surface-hover); }
-  .rbac-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: var(--ns-radius-sm); font-size: 11px; font-weight: 600; line-height: 1.2; }
-  .rbac-badge-admin { background: rgba(147, 101, 255, 0.2); color: #BB78FF; border: 1px solid rgba(147, 101, 255, 0.4); }
-  .rbac-badge-mod { background: rgba(77, 99, 255, 0.2); color: #69C9FF; border: 1px solid rgba(77, 99, 255, 0.4); }
-  .rbac-badge-viewer { background: rgba(162, 174, 200, 0.15); color: #A2AEC8; border: 1px solid rgba(162, 174, 200, 0.25); }
-  .rbac-badge-custom { background: rgba(72, 214, 162, 0.15); color: #48D6A2; border: 1px solid rgba(72, 214, 162, 0.3); }
+  .rbac-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: var(--ns-radius-sm); font-size: 12px; font-weight: 600; line-height: 1.2; }
+  .rbac-badge-admin { background: rgba(147, 101, 255, 0.2); color: var(--nebula-accent-highlight); border: 1px solid rgba(147, 101, 255, 0.4); }
+  .rbac-badge-mod { background: rgba(77, 99, 255, 0.2); color: var(--nebula-accent-cyan); border: 1px solid rgba(77, 99, 255, 0.4); }
+  .rbac-badge-viewer { background: rgba(162, 174, 200, 0.15); color: var(--nebula-text-secondary); border: 1px solid rgba(162, 174, 200, 0.25); }
+  .rbac-badge-custom { background: rgba(72, 214, 162, 0.15); color: var(--nebula-status-success); border: 1px solid rgba(72, 214, 162, 0.3); }
   .rbac-badge-system { background: rgba(187, 120, 255, 0.15); color: #D4A5FF; border: 1px solid rgba(187, 120, 255, 0.35); font-weight: 700; }
-  .rbac-badge-custom-grp { background: rgba(105, 201, 255, 0.15); color: #69C9FF; border: 1px solid rgba(105, 201, 255, 0.35); }
-  .rbac-badge-active { background: rgba(72, 214, 162, 0.15); color: #48D6A2; border: 1px solid rgba(72, 214, 162, 0.4); }
-  .rbac-badge-inactive { background: rgba(240, 68, 88, 0.15); color: #F04458; border: 1px solid rgba(240, 68, 88, 0.4); }
+  .rbac-badge-custom-grp { background: rgba(105, 201, 255, 0.15); color: var(--nebula-accent-cyan); border: 1px solid rgba(105, 201, 255, 0.35); }
+  .rbac-badge-active { background: rgba(72, 214, 162, 0.15); color: var(--nebula-status-success); border: 1px solid rgba(72, 214, 162, 0.4); }
+  .rbac-badge-inactive { background: rgba(240, 68, 88, 0.15); color: var(--nebula-status-live); border: 1px solid rgba(240, 68, 88, 0.4); }
   .rbac-perm-chips { display: flex; flex-wrap: wrap; gap: 6px; max-width: 520px; }
-  .rbac-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 500; }
-  .rbac-chip-on { background: rgba(72, 214, 162, 0.12); color: #48D6A2; border: 1px solid rgba(72, 214, 162, 0.25); }
-  .rbac-chip-off { background: rgba(117, 131, 157, 0.08); color: #75839D; border: 1px solid rgba(117, 131, 157, 0.18); text-decoration: line-through; opacity: 0.6; }
-  .rbac-chip-channel-all { background: rgba(187, 120, 255, 0.15); color: #BB78FF; border: 1px solid rgba(187, 120, 255, 0.35); font-weight: 600; }
-  .rbac-chip-channel-custom { background: rgba(105, 201, 255, 0.15); color: #69C9FF; border: 1px solid rgba(105, 201, 255, 0.35); font-weight: 600; }
+  .rbac-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 4px; font-size: 12px; font-weight: 500; }
+  .rbac-chip-on { background: rgba(72, 214, 162, 0.12); color: var(--nebula-status-success); border: 1px solid rgba(72, 214, 162, 0.25); }
+  .rbac-chip-off { background: rgba(117, 131, 157, 0.08); color: var(--nebula-text-muted); border: 1px solid rgba(117, 131, 157, 0.18); text-decoration: line-through; opacity: 0.6; }
+  .rbac-chip-channel-all { background: rgba(187, 120, 255, 0.15); color: var(--nebula-accent-highlight); border: 1px solid rgba(187, 120, 255, 0.35); font-weight: 600; }
+  .rbac-chip-channel-custom { background: rgba(105, 201, 255, 0.15); color: var(--nebula-accent-cyan); border: 1px solid rgba(105, 201, 255, 0.35); font-weight: 600; }
   .rbac-actions { display: flex; gap: 8px; align-items: center; }
   .rbac-btn-icon { background: transparent; border: 1px solid var(--ns-border-subtle); color: var(--ns-text-secondary); width: 32px; height: 32px; border-radius: var(--ns-radius-sm); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s ease; }
   .rbac-btn-icon:hover { color: var(--ns-text-primary); background: var(--ns-bg-surface-active); border-color: var(--ns-border-medium); }
-  .rbac-btn-icon.danger:hover { color: #F04458; background: rgba(240, 68, 88, 0.12); border-color: rgba(240, 68, 88, 0.35); }
+  .rbac-btn-icon.danger:hover { color: var(--nebula-status-live); background: rgba(240, 68, 88, 0.12); border-color: rgba(240, 68, 88, 0.35); }
   .rbac-modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(7, 11, 20, 0.85); backdrop-filter: blur(4px); z-index: 1000; align-items: center; justify-content: center; padding: 16px; }
   .rbac-modal-backdrop.is-open { display: flex; }
+  dialog.rbac-modal-backdrop { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; color: inherit; }
+  dialog.rbac-modal-backdrop::backdrop { background: transparent; }
   .rbac-modal { background: var(--ns-bg-surface); border: 1px solid var(--ns-border-medium); border-radius: var(--ns-radius-lg); box-shadow: var(--ns-shadow-lg); width: 100%; max-width: 580px; max-height: 90vh; overflow-y: auto; animation: rbacModalFadeIn 0.18s ease-out; }
   @keyframes rbacModalFadeIn { from { opacity: 0; transform: scale(0.97) translateY(-8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
   .rbac-modal-head { background: var(--ns-bg-surface-raised); padding: 18px 24px; border-bottom: 1px solid var(--ns-border-subtle); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 2; }
-  .rbac-modal-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--ns-text-primary); }
+  .rbac-modal-head :is(h2, h3) { margin: 0; font-size: 16px; font-weight: 700; color: var(--ns-text-primary); }
   .rbac-modal-close { background: transparent; border: none; color: var(--ns-text-muted); font-size: 20px; cursor: pointer; line-height: 1; padding: 4px; }
   .rbac-modal-close:hover { color: #FFF; }
   .rbac-modal-body { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
   .rbac-modal-foot { background: var(--ns-bg-surface-raised); padding: 16px 24px; border-top: 1px solid var(--ns-border-subtle); display: flex; justify-content: flex-end; gap: 10px; position: sticky; bottom: 0; z-index: 2; }
   .rbac-form-group { display: flex; flex-direction: column; gap: 6px; }
-  .rbac-form-group label { font-size: 12px; font-weight: 600; color: var(--ns-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
+  .rbac-form-group label, .rbac-group-label { font-size: 12px; font-weight: 600; color: var(--ns-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
   .rbac-input, .rbac-select { background: var(--ns-bg-canvas); border: 1px solid var(--ns-border-medium); border-radius: var(--ns-radius-md); color: var(--ns-text-primary); padding: 10px 14px; font-size: 14px; outline: none; transition: border-color 0.15s ease; }
-  .rbac-input:focus, .rbac-select:focus { border-color: #4D63FF; box-shadow: 0 0 0 2px rgba(77, 99, 255, 0.2); }
+  .rbac-input:focus, .rbac-select:focus { border-color: var(--nebula-accent-primary); box-shadow: 0 0 0 2px rgba(77, 99, 255, 0.2); }
   .rbac-checkbox-list { display: flex; flex-direction: column; gap: 8px; background: var(--ns-bg-canvas); padding: 12px 16px; border-radius: var(--ns-radius-md); border: 1px solid var(--ns-border-subtle); }
   .rbac-checkbox-label { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ns-text-primary); cursor: pointer; }
-  .rbac-checkbox-label input[type="checkbox"] { accent-color: #4D63FF; width: 16px; height: 16px; }
+  .rbac-checkbox-label input[type="checkbox"] { accent-color: var(--nebula-accent-primary); width: 16px; height: 16px; }
   #rbac-toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; }
-  .rbac-toast { background: var(--ns-bg-surface-raised); border: 1px solid var(--ns-border-medium); border-left: 4px solid #4D63FF; color: var(--ns-text-primary); padding: 12px 18px; border-radius: var(--ns-radius-md); box-shadow: var(--ns-shadow-lg); font-size: 13px; display: flex; align-items: center; gap: 10px; min-width: 280px; max-width: 440px; animation: rbacToastIn 0.2s ease-out; }
-  .rbac-toast.success { border-left-color: #48D6A2; }
-  .rbac-toast.error { border-left-color: #F04458; }
+  .rbac-toast { background: var(--ns-bg-surface-raised); border: 1px solid var(--ns-border-medium); border-left: 4px solid var(--nebula-accent-primary); color: var(--ns-text-primary); padding: 12px 18px; border-radius: var(--ns-radius-md); box-shadow: var(--ns-shadow-lg); font-size: 13px; display: flex; align-items: center; gap: 10px; min-width: 280px; max-width: 440px; animation: rbacToastIn 0.2s ease-out; }
+  .rbac-toast.success { border-left-color: var(--nebula-status-success); }
+  .rbac-toast.error { border-left-color: var(--nebula-status-live); }
   @keyframes rbacToastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
 </style>
 {% endblock %}{% block content %}
 <div style="max-width: 1400px; margin: 0 auto;">
-  <div class="rbac-nav-tabs">
-    <button type="button" class="rbac-tab-btn is-active" id="tab-btn-users" onclick="switchRbacTab('users')">
-      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+  <div class="rbac-nav-tabs" role="tablist" aria-label="{{ _('Users & groups') }}">
+    <button type="button" class="rbac-tab-btn is-active" id="tab-btn-users" role="tab" aria-selected="true" aria-controls="section-users" data-rbac-tab="users">
+      <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
       {{ _('User accounts') }}
       <span class="rbac-tab-badge" id="badge-users-count">{{ users|length }}</span>
     </button>
-    <button type="button" class="rbac-tab-btn" id="tab-btn-groups" onclick="switchRbacTab('groups')">
-      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 17v-4"/><path d="M9 9h.01"/><path d="M15 17v-8"/><path d="M15 9h.01"/></svg>
+    <button type="button" class="rbac-tab-btn" id="tab-btn-groups" role="tab" aria-selected="false" aria-controls="section-groups" tabindex="-1" data-rbac-tab="groups">
+      <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 17v-4"/><path d="M9 9h.01"/><path d="M15 17v-8"/><path d="M15 9h.01"/></svg>
       {{ _('User groups & permissions') }}
       <span class="rbac-tab-badge" id="badge-groups-count">{{ groups|length }}</span>
     </button>
   </div>
 
   <!-- TAB 1: USERS SECTION -->
-  <section id="section-users" class="rbac-tab-section">
+  <section id="section-users" class="rbac-tab-section" role="tabpanel" aria-labelledby="tab-btn-users">
     <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 16px; flex-wrap: wrap;">
       <div style="flex: 1; max-width: 360px;">
-        <input type="text" id="users-search-input" class="rbac-input" placeholder="{{ _('Search user, email or group...') }}" oninput="filterUsersTable()" style="width: 100%;">
+        <input type="text" id="users-search-input" class="rbac-input" placeholder="{{ _('Search user, email or group…') }}" aria-label="{{ _('Search user, email or group…') }}" style="width: 100%;">
       </div>
       <div style="font-size: 12px; color: var(--ns-text-muted);">
         {% set users_total %}<span style="color: #FFF; font-weight: 600;">{{ users|length }}</span>{% endset %}{{ _('Total: %(count)s registered accounts', count=users_total) }}
@@ -126,14 +128,14 @@
           <tr id="user-row-{{ u.username }}" data-username="{{ u.username }}" data-email="{{ u.email }}" data-group="{{ u.group_name }}">
             <td>
               <div style="display: flex; align-items: center; gap: 10px;">
-                <div style="width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #4D63FF, #9365FF); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #FFF;">
+                <div style="width: 32px; height: 32px; border-radius: 50%; background: var(--nebula-accent-primary); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #FFF;">
                   {{ u.username[:1].upper() }}
                 </div>
                 <div>
                   <div style="font-weight: 600; color: #FFF; display: flex; align-items: center; gap: 6px;">
                     <span>{{ u.username }}</span>
                     {% if u.is_system_admin %}
-                    <span class="rbac-badge rbac-badge-admin" style="font-size: 9px; padding: 1px 5px;">ENV ADMIN</span>
+                    <span class="rbac-badge rbac-badge-admin" style="font-size: 12px; padding: 1px 5px;">ENV ADMIN</span>
                     {% endif %}
                   </div>
                 </div>
@@ -175,12 +177,12 @@
             </td>
             <td style="text-align: right;">
               <div class="rbac-actions" style="justify-content: flex-end;">
-                <button type="button" class="rbac-btn-icon" title="{{ _('Edit user') }}" onclick="openEditUserModal('{{ u.username }}', '{{ u.email }}', {{ u.group_id or 3 }}, {{ 1 if u.active else 0 }})">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
+                <button type="button" class="rbac-btn-icon" title="{{ _('Edit user') }}" aria-label="{{ _('Edit user') }} {{ u.username }}" data-edit-user="{{ u.username }}" data-email="{{ u.email or '' }}" data-group-id="{{ u.group_id or 3 }}" data-active="{{ 1 if u.active else 0 }}">
+                  <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                 </button>
                 {% if not u.is_system_admin and u.username.lower() != (current_username or '').lower() %}
-                <button type="button" class="rbac-btn-icon danger" title="{{ _('Delete user') }}" onclick="openDeleteUserModal('{{ u.username }}')">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+                <button type="button" class="rbac-btn-icon danger" title="{{ _('Delete user') }}" aria-label="{{ _('Delete user') }} {{ u.username }}" data-delete-user="{{ u.username }}">
+                  <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
                 </button>
                 {% endif %}
               </div>
@@ -193,7 +195,7 @@
   </section>
 
   <!-- TAB 2: GROUPS SECTION -->
-  <section id="section-groups" class="rbac-tab-section" style="display: none;">
+  <section id="section-groups" class="rbac-tab-section" role="tabpanel" aria-labelledby="tab-btn-groups" style="display: none;">
     <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 16px; flex-wrap: wrap;">
       <div style="font-size: 13px; color: var(--ns-text-secondary);">
         {{ _('Configure dynamic permissions for streams, the video archive and channel access.') }}
@@ -233,23 +235,23 @@
             </td>
             <td>
               <span style="font-weight: 600; color: #FFF;">{{ g.member_count or 0 }}</span>
-              <span style="color: var(--ns-text-muted); font-size: 11px;"> {{ _('users') }}</span>
+              <span style="color: var(--ns-text-muted); font-size: 12px;"> {{ _('users') }}</span>
             </td>
             <td>
               {% if g.permissions.access_all_channels %}
                 {% if g.permissions.disabled_channels %}
                 <div style="display:flex; flex-direction:column; gap:4px;">
                   <span class="rbac-chip rbac-chip-channel-all">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
+                    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                     {{ _('All streams (+ auto-new)') }}
                   </span>
-                  <span style="font-size:11px; color:#F04458; font-weight:500;">
+                  <span style="font-size:12px; color:var(--nebula-status-live); font-weight:500;">
                     {{ _('Blocked (%(count)s): %(list)s', count=g.permissions.disabled_channels|length, list=g.permissions.disabled_channels|join(', ')) }}
                   </span>
                 </div>
                 {% else %}
                 <span class="rbac-chip rbac-chip-channel-all">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
+                  <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                   {{ _('All streams (+ auto-new)') }}
                 </span>
                 {% endif %}
@@ -259,7 +261,7 @@
                     {{ ngettext('%(num)d folder allowed', '%(num)d folders allowed', (g.permissions.allowed_channels or [])|length) }}
                   </span>
                   {% if g.permissions.allowed_channels %}
-                  <span style="font-size:11px; color:var(--ns-text-muted);">
+                  <span style="font-size:12px; color:var(--ns-text-muted);">
                     {{ g.permissions.allowed_channels|join(', ') }}
                   </span>
                   {% endif %}
@@ -277,12 +279,12 @@
             </td>
             <td style="text-align: right;">
               <div class="rbac-actions" style="justify-content: flex-end;">
-                <button type="button" class="rbac-btn-icon" title="{{ _('Edit group') }}" onclick='openEditGroupModal({{ g.id }}, {{ g.name|tojson }}, {{ (g.description or "")|tojson }}, {{ 1 if g.is_system else 0 }}, {{ g.permissions|tojson }})'>
-                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
+                <button type="button" class="rbac-btn-icon" title="{{ _('Edit group') }}" aria-label="{{ _('Edit group') }} {{ g.name }}" data-edit-group="{{ g.id }}" data-name="{{ g.name }}" data-desc="{{ g.description or '' }}" data-system="{{ 1 if g.is_system else 0 }}" data-perms='{{ g.permissions|tojson }}'>
+                  <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                 </button>
                 {% if not g.is_system %}
-                <button type="button" class="rbac-btn-icon danger" title="{{ _('Delete group') }}" onclick="openDeleteGroupModal({{ g.id }}, '{{ g.name }}')">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+                <button type="button" class="rbac-btn-icon danger" title="{{ _('Delete group') }}" aria-label="{{ _('Delete group') }} {{ g.name }}" data-delete-group="{{ g.id }}" data-name="{{ g.name }}">
+                  <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
                 </button>
                 {% endif %}
               </div>
@@ -294,28 +296,28 @@
     </div>
   </section>
 </div><!-- MODAL: ADD USER -->
-<div id="modal-add-user" class="rbac-modal-backdrop">
+<dialog id="modal-add-user" class="rbac-modal-backdrop" aria-labelledby="modal-add-user-title">
   <div class="rbac-modal">
     <div class="rbac-modal-head">
-      <h3>{{ _('Create new user') }}</h3>
-      <button type="button" class="rbac-modal-close" onclick="closeModal('modal-add-user')">&times;</button>
+      <h2 id="modal-add-user-title">{{ _('Create new user') }}</h2>
+      <button type="button" class="rbac-modal-close" data-close-modal="modal-add-user" aria-label="{{ _('Close') }}">&times;</button>
     </div>
-    <form id="form-add-user" onsubmit="handleAddUser(event)">
+    <form id="form-add-user" data-rbac-submit="handleAddUser">
       <div class="rbac-modal-body">
         <div class="rbac-form-group">
-          <label>{{ _('Username') }} *</label>
+          <label for="add-user-name">{{ _('Username') }} *</label>
           <input type="text" id="add-user-name" class="rbac-input" required minlength="3" maxlength="32" placeholder="{{ _('e.g. john_doe') }}">
         </div>
         <div class="rbac-form-group">
-          <label>{{ _('Email address (optional)') }}</label>
+          <label for="add-user-email">{{ _('Email address (optional)') }}</label>
           <input type="email" id="add-user-email" class="rbac-input" placeholder="{{ _('user@example.com') }}">
         </div>
         <div class="rbac-form-group">
-          <label>{{ _('Initial password') }} *</label>
+          <label for="add-user-pass">{{ _('Initial password') }} *</label>
           <input type="password" id="add-user-pass" class="rbac-input" required minlength="8" placeholder="{{ _('At least 8 characters') }}">
         </div>
         <div class="rbac-form-group">
-          <label>{{ _('User group') }} *</label>
+          <label for="add-user-group">{{ _('User group') }} *</label>
           <select id="add-user-group" class="rbac-select">
             {% for g in groups %}
             <option value="{{ g.id }}" {% if g.name == 'Viewer' %}selected{% endif %}>{{ g.name }}</option>
@@ -330,37 +332,37 @@ <h3>{{ _('Create new user') }}</h3>
         </div>
       </div>
       <div class="rbac-modal-foot">
-        <button type="button" class="ns-btn ns-btn-secondary" onclick="closeModal('modal-add-user')">{{ _('Cancel') }}</button>
+        <button type="button" class="ns-btn ns-btn-secondary" data-close-modal="modal-add-user">{{ _('Cancel') }}</button>
         <button type="submit" class="ns-btn ns-btn-primary">{{ _('Create user') }}</button>
       </div>
     </form>
   </div>
-</div>
+</dialog>
 
 <!-- MODAL: EDIT USER -->
-<div id="modal-edit-user" class="rbac-modal-backdrop">
+<dialog id="modal-edit-user" class="rbac-modal-backdrop" aria-labelledby="modal-edit-user-title">
   <div class="rbac-modal">
     <div class="rbac-modal-head">
-      <h3>{{ _('Edit user') }}</h3>
-      <button type="button" class="rbac-modal-close" onclick="closeModal('modal-edit-user')">&times;</button>
+      <h2 id="modal-edit-user-title">{{ _('Edit user') }}</h2>
+      <button type="button" class="rbac-modal-close" data-close-modal="modal-edit-user" aria-label="{{ _('Close') }}">&times;</button>
     </div>
-    <form id="form-edit-user" onsubmit="handleEditUser(event)">
+    <form id="form-edit-user" data-rbac-submit="handleEditUser">
       <input type="hidden" id="edit-user-original">
       <div class="rbac-modal-body">
         <div class="rbac-form-group">
-          <label>{{ _('Username') }}</label>
+          <label for="edit-user-name">{{ _('Username') }}</label>
           <input type="text" id="edit-user-name" class="rbac-input" required minlength="3" maxlength="32">
         </div>
         <div class="rbac-form-group">
-          <label>{{ _('Email address') }}</label>
+          <label for="edit-user-email">{{ _('Email address') }}</label>
           <input type="email" id="edit-user-email" class="rbac-input" placeholder="{{ _('user@example.com') }}">
         </div>
         <div class="rbac-form-group">
-          <label>{{ _('New password (leave empty to keep unchanged)') }}</label>
-          <input type="password" id="edit-user-pass" class="rbac-input" minlength="8" placeholder="{{ _('New password...') }}">
+          <label for="edit-user-pass">{{ _('New password (leave empty to keep unchanged)') }}</label>
+          <input type="password" id="edit-user-pass" class="rbac-input" minlength="8" placeholder="{{ _('New password…') }}">
         </div>
         <div class="rbac-form-group">
-          <label>{{ _('User group') }}</label>
+          <label for="edit-user-group">{{ _('User group') }}</label>
           <select id="edit-user-group" class="rbac-select">
             {% for g in groups %}
             <option value="{{ g.id }}">{{ g.name }}</option>
@@ -375,76 +377,76 @@ <h3>{{ _('Edit user') }}</h3>
         </div>
       </div>
       <div class="rbac-modal-foot">
-        <button type="button" class="ns-btn ns-btn-secondary" onclick="closeModal('modal-edit-user')">{{ _('Cancel') }}</button>
+        <button type="button" class="ns-btn ns-btn-secondary" data-close-modal="modal-edit-user">{{ _('Cancel') }}</button>
         <button type="submit" class="ns-btn ns-btn-primary">{{ _('Save changes') }}</button>
       </div>
     </form>
   </div>
-</div>
+</dialog>
 
 <!-- MODAL: DELETE USER -->
-<div id="modal-delete-user" class="rbac-modal-backdrop">
+<dialog id="modal-delete-user" class="rbac-modal-backdrop" aria-labelledby="modal-delete-user-title">
   <div class="rbac-modal">
     <div class="rbac-modal-head">
-      <h3>{{ _('Delete user') }}</h3>
-      <button type="button" class="rbac-modal-close" onclick="closeModal('modal-delete-user')">&times;</button>
+      <h2 id="modal-delete-user-title">{{ _('Delete user') }}</h2>
+      <button type="button" class="rbac-modal-close" data-close-modal="modal-delete-user" aria-label="{{ _('Close') }}">&times;</button>
     </div>
-    <form id="form-delete-user" onsubmit="handleDeleteUser(event)">
+    <form id="form-delete-user" data-rbac-submit="handleDeleteUser">
       <input type="hidden" id="delete-user-name">
       <div class="rbac-modal-body">
         <p style="margin: 0; color: var(--ns-text-primary);">
-          {% set delete_user_target %}<strong id="delete-user-display" style="color: #F04458;"></strong>{% endset %}{{ _('Do you really want to permanently delete the user %(name)s?', name=delete_user_target) }}
+          {% set delete_user_target %}<strong id="delete-user-display" style="color: var(--nebula-status-live);"></strong>{% endset %}{{ _('Do you really want to permanently delete the user %(name)s?', name=delete_user_target) }}
         </p>
         <p style="margin: 0; font-size: 12px; color: var(--ns-text-muted);">
           {{ _('All saved settings of this account will be deleted completely.') }}
         </p>
       </div>
       <div class="rbac-modal-foot">
-        <button type="button" class="ns-btn ns-btn-secondary" onclick="closeModal('modal-delete-user')">{{ _('Cancel') }}</button>
+        <button type="button" class="ns-btn ns-btn-secondary" data-close-modal="modal-delete-user">{{ _('Cancel') }}</button>
         <button type="submit" class="ns-btn ns-btn-danger">{{ _('Delete permanently') }}</button>
       </div>
     </form>
   </div>
-</div>
+</dialog>
 
 <!-- MODAL: ADD GROUP -->
-<div id="modal-add-group" class="rbac-modal-backdrop">
+<dialog id="modal-add-group" class="rbac-modal-backdrop" aria-labelledby="modal-add-group-title">
   <div class="rbac-modal">
     <div class="rbac-modal-head">
-      <h3>{{ _('Create new user group') }}</h3>
-      <button type="button" class="rbac-modal-close" onclick="closeModal('modal-add-group')">&times;</button>
+      <h2 id="modal-add-group-title">{{ _('Create new user group') }}</h2>
+      <button type="button" class="rbac-modal-close" data-close-modal="modal-add-group" aria-label="{{ _('Close') }}">&times;</button>
     </div>
-    <form id="form-add-group" onsubmit="handleAddGroup(event)">
+    <form id="form-add-group" data-rbac-submit="handleAddGroup">
       <div class="rbac-modal-body">
         <div class="rbac-form-group">
-          <label>{{ _('Group name') }} *</label>
+          <label for="add-group-name">{{ _('Group name') }} *</label>
           <input type="text" id="add-group-name" class="rbac-input" required minlength="2" maxlength="50" placeholder="{{ _('e.g. VIP archive') }}">
         </div>
         <div class="rbac-form-group">
-          <label>{{ _('Description') }}</label>
-          <input type="text" id="add-group-desc" class="rbac-input" placeholder="{{ _('Purpose of this user group...') }}">
+          <label for="add-group-desc">{{ _('Description') }}</label>
+          <input type="text" id="add-group-desc" class="rbac-input" placeholder="{{ _('Purpose of this user group…') }}">
         </div>
 
         <!-- Stream- & Ordner-Zugriff -->
         <div class="rbac-form-group">
-          <label>{{ _('Stream & folder access') }}</label>
+          <span class="rbac-group-label">{{ _('Stream & folder access') }}</span>
           <div style="background: var(--ns-bg-canvas); padding: 14px 16px; border-radius: var(--ns-radius-md); border: 1px solid var(--ns-border-subtle); display: flex; flex-direction: column; gap: 10px;">
             <label class="rbac-checkbox-label" style="font-weight: 600; color: #FFF;">
-              <input type="checkbox" id="add-group-access-all" checked onchange="updateChannelMode('add')">
+              <input type="checkbox" id="add-group-access-all" checked data-channel-mode="add">
               <span>{{ _('Automatically unlock future streams & folders') }}</span>
             </label>
-            <div id="add-channel-hint" style="font-size: 11px; color: var(--ns-text-muted); margin-left: 26px;">
+            <div id="add-channel-hint" style="font-size: 12px; color: var(--ns-text-muted); margin-left: 26px;">
               {{ _('Active: new streams are unlocked automatically. Below you can disable / block individual folders.') }}
             </div>
 
             <div id="add-group-channels-box" style="border-top: 1px solid var(--ns-border-subtle); padding-top: 10px; margin-top: 4px;">
               <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
-                <div id="add-channel-title" style="font-size: 11px; font-weight: 700; color: #BB78FF; text-transform: uppercase;">
+                <div id="add-channel-title" style="font-size: 12px; font-weight: 700; color: var(--nebula-accent-highlight); text-transform: uppercase;">
                   {{ _('Disable / enable individual folders:') }}
                 </div>
                 <div style="display: flex; gap: 6px;">
-                  <button type="button" class="ns-btn ns-btn-secondary" style="font-size: 11px; padding: 2px 8px; height: 22px;" onclick="setAllChannels('add', true)">{{ _('All on') }}</button>
-                  <button type="button" class="ns-btn ns-btn-secondary" style="font-size: 11px; padding: 2px 8px; height: 22px;" onclick="setAllChannels('add', false)">{{ _('All off') }}</button>
+                  <button type="button" class="ns-btn ns-btn-secondary" style="font-size: 12px; padding: 2px 10px; min-height: 28px;" data-set-all="add" data-state="true">{{ _('All on') }}</button>
+                  <button type="button" class="ns-btn ns-btn-secondary" style="font-size: 12px; padding: 2px 10px; min-height: 28px;" data-set-all="add" data-state="false">{{ _('All off') }}</button>
                 </div>
               </div>
               <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; max-height: 180px; overflow-y: auto; padding: 8px; background: rgba(0,0,0,0.3); border-radius: var(--ns-radius-sm);">
@@ -461,7 +463,7 @@ <h3>{{ _('Create new user group') }}</h3>
 
         <!-- Funktionsrechte -->
         <div class="rbac-form-group">
-          <label>{{ _('Feature permissions') }}</label>
+          <span class="rbac-group-label">{{ _('Feature permissions') }}</span>
           <div class="rbac-checkbox-list">
             <label class="rbac-checkbox-label">
               <input type="checkbox" id="add-perm-view-streams" checked>
@@ -487,53 +489,53 @@ <h3>{{ _('Create new user group') }}</h3>
         </div>
       </div>
       <div class="rbac-modal-foot">
-        <button type="button" class="ns-btn ns-btn-secondary" onclick="closeModal('modal-add-group')">{{ _('Cancel') }}</button>
+        <button type="button" class="ns-btn ns-btn-secondary" data-close-modal="modal-add-group">{{ _('Cancel') }}</button>
         <button type="submit" class="ns-btn ns-btn-primary">{{ _('Create group') }}</button>
       </div>
     </form>
   </div>
-</div>
+</dialog>
 
 <!-- MODAL: EDIT GROUP -->
-<div id="modal-edit-group" class="rbac-modal-backdrop">
+<dialog id="modal-edit-group" class="rbac-modal-backdrop" aria-labelledby="modal-edit-group-title">
   <div class="rbac-modal">
     <div class="rbac-modal-head">
-      <h3>{{ _('Edit group & permissions') }}</h3>
-      <button type="button" class="rbac-modal-close" onclick="closeModal('modal-edit-group')">&times;</button>
+      <h2 id="modal-edit-group-title">{{ _('Edit group & permissions') }}</h2>
+      <button type="button" class="rbac-modal-close" data-close-modal="modal-edit-group" aria-label="{{ _('Close') }}">&times;</button>
     </div>
-    <form id="form-edit-group" onsubmit="handleEditGroup(event)">
+    <form id="form-edit-group" data-rbac-submit="handleEditGroup">
       <input type="hidden" id="edit-group-id">
       <input type="hidden" id="edit-group-is-system">
       <div class="rbac-modal-body">
         <div class="rbac-form-group">
-          <label>{{ _('Group name') }}</label>
+          <label for="edit-group-name">{{ _('Group name') }}</label>
           <input type="text" id="edit-group-name" class="rbac-input" required minlength="2" maxlength="50">
         </div>
         <div class="rbac-form-group">
-          <label>{{ _('Description') }}</label>
+          <label for="edit-group-desc">{{ _('Description') }}</label>
           <input type="text" id="edit-group-desc" class="rbac-input">
         </div>
 
         <!-- Stream- & Ordner-Zugriff -->
         <div class="rbac-form-group">
-          <label>{{ _('Stream & folder access') }}</label>
+          <span class="rbac-group-label">{{ _('Stream & folder access') }}</span>
           <div style="background: var(--ns-bg-canvas); padding: 14px 16px; border-radius: var(--ns-radius-md); border: 1px solid var(--ns-border-subtle); display: flex; flex-direction: column; gap: 10px;">
             <label class="rbac-checkbox-label" style="font-weight: 600; color: #FFF;">
-              <input type="checkbox" id="edit-group-access-all" onchange="updateChannelMode('edit')">
+              <input type="checkbox" id="edit-group-access-all" data-channel-mode="edit">
               <span>{{ _('Automatically unlock future streams & folders') }}</span>
             </label>
-            <div id="edit-channel-hint" style="font-size: 11px; color: var(--ns-text-muted); margin-left: 26px;">
+            <div id="edit-channel-hint" style="font-size: 12px; color: var(--ns-text-muted); margin-left: 26px;">
               {{ _('Active: new streams are unlocked automatically. Below you can disable / block individual folders.') }}
             </div>
 
             <div id="edit-group-channels-box" style="border-top: 1px solid var(--ns-border-subtle); padding-top: 10px; margin-top: 4px;">
               <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
-                <div id="edit-channel-title" style="font-size: 11px; font-weight: 700; color: #BB78FF; text-transform: uppercase;">
+                <div id="edit-channel-title" style="font-size: 12px; font-weight: 700; color: var(--nebula-accent-highlight); text-transform: uppercase;">
                   {{ _('Disable / enable individual folders:') }}
                 </div>
                 <div style="display: flex; gap: 6px;">
-                  <button type="button" class="ns-btn ns-btn-secondary" style="font-size: 11px; padding: 2px 8px; height: 22px;" onclick="setAllChannels('edit', true)">{{ _('All on') }}</button>
-                  <button type="button" class="ns-btn ns-btn-secondary" style="font-size: 11px; padding: 2px 8px; height: 22px;" onclick="setAllChannels('edit', false)">{{ _('All off') }}</button>
+                  <button type="button" class="ns-btn ns-btn-secondary" style="font-size: 12px; padding: 2px 10px; min-height: 28px;" data-set-all="edit" data-state="true">{{ _('All on') }}</button>
+                  <button type="button" class="ns-btn ns-btn-secondary" style="font-size: 12px; padding: 2px 10px; min-height: 28px;" data-set-all="edit" data-state="false">{{ _('All off') }}</button>
                 </div>
               </div>
               <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; max-height: 180px; overflow-y: auto; padding: 8px; background: rgba(0,0,0,0.3); border-radius: var(--ns-radius-sm);">
@@ -550,7 +552,7 @@ <h3>{{ _('Edit group & permissions') }}</h3>
 
         <!-- Funktionsrechte -->
         <div class="rbac-form-group">
-          <label>{{ _('Feature permissions') }}</label>
+          <span class="rbac-group-label">{{ _('Feature permissions') }}</span>
           <div class="rbac-checkbox-list">
             <label class="rbac-checkbox-label">
               <input type="checkbox" id="edit-perm-view-streams">
@@ -576,60 +578,75 @@ <h3>{{ _('Edit group & permissions') }}</h3>
         </div>
       </div>
       <div class="rbac-modal-foot">
-        <button type="button" class="ns-btn ns-btn-secondary" onclick="closeModal('modal-edit-group')">{{ _('Cancel') }}</button>
+        <button type="button" class="ns-btn ns-btn-secondary" data-close-modal="modal-edit-group">{{ _('Cancel') }}</button>
         <button type="submit" class="ns-btn ns-btn-primary">{{ _('Save group') }}</button>
       </div>
     </form>
   </div>
-</div>
+</dialog>
 
 <!-- MODAL: DELETE GROUP -->
-<div id="modal-delete-group" class="rbac-modal-backdrop">
+<dialog id="modal-delete-group" class="rbac-modal-backdrop" aria-labelledby="modal-delete-group-title">
   <div class="rbac-modal">
     <div class="rbac-modal-head">
-      <h3>{{ _('Delete user group') }}</h3>
-      <button type="button" class="rbac-modal-close" onclick="closeModal('modal-delete-group')">&times;</button>
+      <h2 id="modal-delete-group-title">{{ _('Delete user group') }}</h2>
+      <button type="button" class="rbac-modal-close" data-close-modal="modal-delete-group" aria-label="{{ _('Close') }}">&times;</button>
     </div>
-    <form id="form-delete-group" onsubmit="handleDeleteGroup(event)">
+    <form id="form-delete-group" data-rbac-submit="handleDeleteGroup">
       <input type="hidden" id="delete-group-id">
       <div class="rbac-modal-body">
         <p style="margin: 0; color: var(--ns-text-primary);">
-          {% set delete_group_target %}<strong id="delete-group-display" style="color: #F04458;"></strong>{% endset %}{{ _('Do you really want to delete the group %(name)s?', name=delete_group_target) }}
+          {% set delete_group_target %}<strong id="delete-group-display" style="color: var(--nebula-status-live);"></strong>{% endset %}{{ _('Do you really want to delete the group %(name)s?', name=delete_group_target) }}
         </p>
-        <div style="background: rgba(77, 99, 255, 0.12); border: 1px solid rgba(77, 99, 255, 0.3); border-radius: var(--ns-radius-md); padding: 12px; font-size: 12px; color: #A2AEC8;">
+        <div style="background: rgba(77, 99, 255, 0.12); border: 1px solid rgba(77, 99, 255, 0.3); border-radius: var(--ns-radius-md); padding: 12px; font-size: 12px; color: var(--nebula-text-secondary);">
           <strong style="color: #FFF;">{{ _('Safety migration:') }}</strong> {{ _('Existing members of this group are automatically assigned to the default group <strong>Viewer</strong>.') }}
         </div>
       </div>
       <div class="rbac-modal-foot">
-        <button type="button" class="ns-btn ns-btn-secondary" onclick="closeModal('modal-delete-group')">{{ _('Cancel') }}</button>
+        <button type="button" class="ns-btn ns-btn-secondary" data-close-modal="modal-delete-group">{{ _('Cancel') }}</button>
         <button type="submit" class="ns-btn ns-btn-danger">{{ _('Delete group') }}</button>
       </div>
     </form>
   </div>
-</div>
+</dialog>
 
 <div id="rbac-toast-container"></div>
 {% endblock %}{% block scripts %}
-<script>
+<script nonce="{{ csp_nonce() }}">
   const CSRF_TOKEN = {{ csrf_token()|tojson }};
 
   function showToast(msg, type = 'success') {
     const container = document.getElementById('rbac-toast-container');
     const toast = document.createElement('div');
     toast.className = `rbac-toast ${type}`;
-    toast.innerHTML = `
-      <div style="flex: 1;">${msg}</div>
-      <button type="button" style="background:none;border:none;color:#FFF;cursor:pointer;padding:0 4px;" onclick="this.parentElement.remove()">&times;</button>
-    `;
+    toast.setAttribute('role', type === 'error' ? 'alert' : 'status');
+    const text = document.createElement('div');
+    text.style.flex = '1';
+    text.textContent = String(msg == null ? '' : msg);
+    const close = document.createElement('button');
+    close.type = 'button';
+    close.setAttribute('aria-label', {{ _('Close')|tojson }});
+    close.style.cssText = 'background:none;border:none;color:#FFF;cursor:pointer;padding:0 4px;min-width:24px;min-height:24px;';
+    close.textContent = '\u00d7';
+    close.addEventListener('click', () => toast.remove());
+    toast.appendChild(text);
+    toast.appendChild(close);
     container.appendChild(toast);
     setTimeout(() => { toast.remove(); }, 4000);
   }
 
   function switchRbacTab(tabId) {
-    document.querySelectorAll('.rbac-tab-btn').forEach(b => b.classList.remove('is-active'));
+    document.querySelectorAll('.rbac-tab-btn').forEach(b => {
+      b.classList.remove('is-active');
+      b.setAttribute('aria-selected', 'false');
+      b.setAttribute('tabindex', '-1');
+    });
     document.querySelectorAll('.rbac-tab-section').forEach(s => s.style.display = 'none');
     
-    document.getElementById(`tab-btn-${tabId}`).classList.add('is-active');
+    const activeTab = document.getElementById(`tab-btn-${tabId}`);
+    activeTab.classList.add('is-active');
+    activeTab.setAttribute('aria-selected', 'true');
+    activeTab.removeAttribute('tabindex');
     document.getElementById(`section-${tabId}`).style.display = 'block';
   }
 
@@ -667,28 +684,97 @@ <h3>{{ _('Delete user group') }}</h3>
     });
   }
 
+  const modalOpeners = new Map();
+
   function openModal(id) {
     const m = document.getElementById(id);
-    if (m) m.classList.add('is-open');
+    if (!m) return;
+    modalOpeners.set(id, document.activeElement);
+    m.classList.add('is-open');
+    if (typeof m.showModal === 'function' && !m.open) m.showModal();
+    const first = m.querySelector('.rbac-modal-body input:not([type="hidden"]):not([disabled]), .rbac-modal-body select, .rbac-modal-body textarea, .rbac-modal-foot button');
+    if (first) first.focus();
   }
 
   function closeModal(id) {
     const m = document.getElementById(id);
-    if (m) m.classList.remove('is-open');
-  }
-
-  document.addEventListener('keydown', (e) => {
-    if (e.key === 'Escape') {
-      document.querySelectorAll('.rbac-modal-backdrop.is-open').forEach(m => m.classList.remove('is-open'));
+    if (!m) return;
+    if (m.open && typeof m.close === 'function') {
+      m.close();
+    } else {
+      m.classList.remove('is-open');
     }
-  });
+  }
 
   document.querySelectorAll('.rbac-modal-backdrop').forEach(b => {
+    b.addEventListener('close', () => {
+      b.classList.remove('is-open');
+      const opener = modalOpeners.get(b.id);
+      modalOpeners.delete(b.id);
+      if (opener && typeof opener.focus === 'function') opener.focus();
+    });
     b.addEventListener('click', (e) => {
-      if (e.target === b) b.classList.remove('is-open');
+      if (e.target === b) closeModal(b.id);
     });
   });
 
+  const rbacSubmitHandlers = {
+    handleAddUser: (e) => handleAddUser(e),
+    handleEditUser: (e) => handleEditUser(e),
+    handleDeleteUser: (e) => handleDeleteUser(e),
+    handleAddGroup: (e) => handleAddGroup(e),
+    handleEditGroup: (e) => handleEditGroup(e),
+    handleDeleteGroup: (e) => handleDeleteGroup(e),
+  };
+  document.querySelectorAll('form[data-rbac-submit]').forEach(f => {
+    const fn = rbacSubmitHandlers[f.getAttribute('data-rbac-submit')];
+    if (fn) f.addEventListener('submit', fn);
+  });
+
+  document.addEventListener('click', (e) => {
+    const t = e.target.closest('[data-open-modal], [data-close-modal], [data-rbac-tab], [data-edit-user], [data-delete-user], [data-edit-group], [data-delete-group], [data-set-all]');
+    if (!t) return;
+    if (t.hasAttribute('data-open-modal')) {
+      openModal(t.getAttribute('data-open-modal'));
+    } else if (t.hasAttribute('data-close-modal')) {
+      closeModal(t.getAttribute('data-close-modal'));
+    } else if (t.hasAttribute('data-rbac-tab')) {
+      switchRbacTab(t.getAttribute('data-rbac-tab'));
+    } else if (t.hasAttribute('data-edit-user')) {
+      openEditUserModal(t.getAttribute('data-edit-user'), t.getAttribute('data-email'),
+        parseInt(t.getAttribute('data-group-id'), 10), t.getAttribute('data-active') === '1' ? 1 : 0);
+    } else if (t.hasAttribute('data-delete-user')) {
+      openDeleteUserModal(t.getAttribute('data-delete-user'));
+    } else if (t.hasAttribute('data-edit-group')) {
+      let perms = {};
+      try { perms = JSON.parse(t.getAttribute('data-perms') || '{}'); } catch (err) { perms = {}; }
+      openEditGroupModal(parseInt(t.getAttribute('data-edit-group'), 10), t.getAttribute('data-name'),
+        t.getAttribute('data-desc'), t.getAttribute('data-system') === '1' ? 1 : 0, perms);
+    } else if (t.hasAttribute('data-delete-group')) {
+      openDeleteGroupModal(parseInt(t.getAttribute('data-delete-group'), 10), t.getAttribute('data-name'));
+    } else if (t.hasAttribute('data-set-all')) {
+      setAllChannels(t.getAttribute('data-set-all'), t.getAttribute('data-state') === 'true');
+    }
+  });
+  document.querySelectorAll('[data-channel-mode]').forEach(cb => {
+    cb.addEventListener('change', () => updateChannelMode(cb.getAttribute('data-channel-mode')));
+  });
+  const usersSearch = document.getElementById('users-search-input');
+  if (usersSearch) usersSearch.addEventListener('input', filterUsersTable);
+  const rbacTabList = document.querySelector('.rbac-nav-tabs');
+  if (rbacTabList) {
+    rbacTabList.addEventListener('keydown', (e) => {
+      if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return;
+      const tabs = Array.from(rbacTabList.querySelectorAll('[data-rbac-tab]'));
+      const idx = tabs.indexOf(document.activeElement);
+      if (idx === -1) return;
+      e.preventDefault();
+      const next = tabs[(idx + (e.key === 'ArrowRight' ? 1 : tabs.length - 1)) % tabs.length];
+      next.focus();
+      switchRbacTab(next.getAttribute('data-rbac-tab'));
+    });
+  }
+
   function openEditUserModal(username, email, groupId, active) {
     document.getElementById('edit-user-original').value = username;
     document.getElementById('edit-user-name').value = username;
diff --git a/WEBUI/templates/agb.html b/WEBUI/templates/agb.html
index caecf96..922d606 100644
--- a/WEBUI/templates/agb.html
+++ b/WEBUI/templates/agb.html
@@ -5,8 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>StreamVault · {{ _('Terms') }}</title>
     <link rel="stylesheet" href="{{ UI_FONTS_HREF }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='style.css', v=ASSET_VERSION) }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/tube_design_system.css', v=ASSET_VERSION) }}">
+    {% include 'components/styles.html' %}
   </head>
   <body class="page-agb {{ theme_class }} ns-platform">
     <main class="agb-shell">
@@ -58,7 +57,7 @@ <h2>{{ _('Appendix A — %(title)s', title=rules_title) }}</h2>
         </label>
         <button type="submit" class="btn-primary" id="agbSubmit" disabled>{{ _('Accept terms') }}</button>
       </form>
-      <script>
+      <script nonce="{{ csp_nonce() }}">
         (function () {
           var box = document.getElementById('agbScroll');
           var check = document.getElementById('agbCheck');
diff --git a/WEBUI/templates/base.html b/WEBUI/templates/base.html
index 6a93fcb..e9e47af 100644
--- a/WEBUI/templates/base.html
+++ b/WEBUI/templates/base.html
@@ -7,14 +7,22 @@
     <title>{% block title %}StreamVault{% endblock %}</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link rel="stylesheet" href="{{ UI_FONTS_HREF }}" media="print" onload="this.media='all'">
+    <link rel="stylesheet" id="sv-ui-fonts" href="{{ UI_FONTS_HREF }}" media="print">
+    <script nonce="{{ csp_nonce() }}">
+      (function () {
+        var l = document.getElementById('sv-ui-fonts');
+        if (!l) return;
+        if (l.sheet) { l.media = 'all'; return; }
+        l.addEventListener('load', function () { l.media = 'all'; }, { once: true });
+      })();
+    </script>
     <noscript><link rel="stylesheet" href="{{ UI_FONTS_HREF }}"></noscript>
-    <link rel="stylesheet" href="{{ url_for('static', filename='style.css', v=ASSET_VERSION) }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/tube_design_system.css', v=ASSET_VERSION) }}">
+    {% include 'components/styles.html' %}
     {% include 'components/js_i18n.html' %}
     {% block head %}{% endblock %}
   </head>
   <body class="ns-platform page-{{ request.endpoint or 'index' }} {{ theme_class }}">
+    <a class="sv-skip-link" href="#main-content">{{ _('Skip to content') }}</a>
     {% include 'components/sidebar.html' %}
     
     <div class="ns-app-main">
@@ -27,9 +35,10 @@ <h1>{% block page_title %}StreamVault{% endblock %}</h1>
         
         {% if not is_mobile %}
         <div class="ns-search-box">
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
-          <form action="{{ url_for('search_view') }}" method="get" style="display:flex; width:100%; margin:0;">
-            <input type="search" name="q" placeholder="{{ _('Search VODs, streamers or games...') }}" autocomplete="off">
+          <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+          <form action="{{ url_for('search_view') }}" method="get" role="search" style="display:flex; width:100%; margin:0;">
+            <label for="sv-global-search" class="sr-only">{{ _('Search') }}</label>
+            <input type="search" id="sv-global-search" name="q" placeholder="{{ _('Search VODs, streamers or games…') }}" autocomplete="off">
           </form>
         </div>
         {% endif %}
@@ -40,14 +49,14 @@ <h1>{% block page_title %}StreamVault{% endblock %}</h1>
       </header>
       {% endif %}
 
-      <main class="ns-workspace-content">
+      <main class="ns-workspace-content" id="main-content" tabindex="-1">
         {% block content %}{% endblock %}
       </main>
     </div>
 
     {% block scripts %}{% endblock %}
     <!-- Ultra-Low-Latency Click Feedback & Speculative Navigation -->
-    <script type="speculationrules">
+    <script type="speculationrules" nonce="{{ csp_nonce() }}">
     {
       "prefetch": [
         {
@@ -74,7 +83,7 @@ <h1>{% block page_title %}StreamVault{% endblock %}</h1>
       ]
     }
     </script>
-    <script>
+    <script nonce="{{ csp_nonce() }}">
     (function(){
       if (!('ontouchstart' in window) && !window.PointerEvent) return;
       var activeEl = null;
@@ -97,7 +106,7 @@ <h1>{% block page_title %}StreamVault{% endblock %}</h1>
     </script>
   
     <!-- Universal High-Performance Speculative Prefetcher (Mobile, TV & Desktop) -->
-    <script>
+    <script nonce="{{ csp_nonce() }}">
     (function() {
       var prefetched = new Set();
       function prefetchUrl(url) {
@@ -134,133 +143,111 @@ <h1>{% block page_title %}StreamVault{% endblock %}</h1>
 
     {% if session.username and not is_mobile %}
     <!-- MODAL: CHANGE OWN PASSWORD -->
-    <div id="self-password-modal" style="display: none; position: fixed; inset: 0; background: rgba(4, 8, 16, 0.94); z-index: 99999; align-items: center; justify-content: center; padding: 16px;">
-      <div style="width: 100%; max-width: 440px; background: #0E1626; border: 1px solid #26344F; border-radius: 16px; box-shadow: 0 24px 64px rgba(0,0,0,0.8), 0 0 32px rgba(77,99,255,0.15); overflow: hidden; animation: selfPwFadeIn 0.15s ease;">
-        <div style="background: #141E33; padding: 16px 20px; border-bottom: 1px solid #26344F; display: flex; align-items: center; justify-content: space-between;">
-          <div style="display: flex; align-items: center; gap: 8px;">
-            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#4D63FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
-            <h3 style="margin: 0; font-size: 15px; font-weight: 700; color: #FFF;">{{ _('Change password') }}</h3>
-          </div>
-          <button type="button" onclick="closeSelfPasswordModal()" style="background: transparent; border: none; color: #75839D; font-size: 20px; cursor: pointer; line-height: 1; padding: 4px;">&times;</button>
+    <dialog id="self-password-modal" class="sv-dialog" aria-labelledby="self-pw-title">
+      <div class="sv-dialog__head">
+        <div class="sv-dialog__title-row">
+          <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+          <h2 id="self-pw-title" class="sv-dialog__title">{{ _('Change password') }}</h2>
         </div>
-        <form id="form-self-password" onsubmit="handleSelfPasswordSubmit(event)" style="margin: 0;">
-          <div style="padding: 20px; display: flex; flex-direction: column; gap: 14px;">
-            <div id="self-pw-alert" style="display: none; padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 500;"></div>
-            
-            <div>
-              <label style="display: block; font-size: 12px; font-weight: 600; color: #A2AEC8; margin-bottom: 6px;">{{ _('Current password') }} *</label>
-              <input type="password" id="self-pw-current" required autocomplete="current-password" placeholder="{{ _('Enter current password') }}" style="width: 100%; box-sizing: border-box; background: rgba(11,18,32,0.8); border: 1px solid #26344F; border-radius: 8px; padding: 10px 14px; color: #FFF; font-size: 14px; outline: none;">
-            </div>
-
-            <div>
-              <label style="display: block; font-size: 12px; font-weight: 600; color: #A2AEC8; margin-bottom: 6px;">{{ _('New password * (min. 8 characters)') }}</label>
-              <input type="password" id="self-pw-new" required minlength="8" autocomplete="new-password" placeholder="{{ _('At least 8 characters') }}" style="width: 100%; box-sizing: border-box; background: rgba(11,18,32,0.8); border: 1px solid #26344F; border-radius: 8px; padding: 10px 14px; color: #FFF; font-size: 14px; outline: none;">
-            </div>
-
-            <div>
-              <label style="display: block; font-size: 12px; font-weight: 600; color: #A2AEC8; margin-bottom: 6px;">{{ _('Repeat new password') }} *</label>
-              <input type="password" id="self-pw-confirm" required minlength="8" autocomplete="new-password" placeholder="{{ _('Repeat password') }}" style="width: 100%; box-sizing: border-box; background: rgba(11,18,32,0.8); border: 1px solid #26344F; border-radius: 8px; padding: 10px 14px; color: #FFF; font-size: 14px; outline: none;">
-            </div>
+        <button type="button" class="sv-dialog__close" data-self-pw-close aria-label="{{ _('Close') }}">&times;</button>
+      </div>
+      <form id="form-self-password" class="sv-dialog__form">
+        <div class="sv-dialog__body">
+          <div id="self-pw-alert" class="sv-alert" role="alert" hidden></div>
+          <input type="text" name="username" value="{{ session.username }}" autocomplete="username" readonly hidden>
+          <div class="sv-field">
+            <label for="self-pw-current">{{ _('Current password') }} *</label>
+            <input type="password" id="self-pw-current" required autocomplete="current-password" placeholder="{{ _('Enter current password') }}">
           </div>
-          <div style="background: #141E33; padding: 14px 20px; border-top: 1px solid #26344F; display: flex; justify-content: flex-end; gap: 10px;">
-            <button type="button" onclick="closeSelfPasswordModal()" style="padding: 8px 16px; background: transparent; border: 1px solid #26344F; border-radius: 8px; color: #A2AEC8; font-size: 13px; font-weight: 600; cursor: pointer;">{{ _('Cancel') }}</button>
-            <button type="submit" id="self-pw-submit-btn" style="padding: 8px 18px; background: #4D63FF; border: none; border-radius: 8px; color: #FFF; font-size: 13px; font-weight: 600; cursor: pointer;">{{ _('Save password') }}</button>
+          <div class="sv-field">
+            <label for="self-pw-new">{{ _('New password * (min. 8 characters)') }}</label>
+            <input type="password" id="self-pw-new" required minlength="8" autocomplete="new-password" placeholder="{{ _('At least 8 characters') }}">
           </div>
-        </form>
-      </div>
-    </div>
-    <style>
-      @keyframes selfPwFadeIn { from { opacity: 0; transform: scale(0.97) translateY(-6px); } to { opacity: 1; transform: scale(1) translateY(0); } }
-    </style>
-    <script>
-      function openSelfPasswordModal() {
-        var m = document.getElementById('self-password-modal');
-        if (!m) return;
-        m.style.display = 'flex';
-        var alertBox = document.getElementById('self-pw-alert');
-        if (alertBox) alertBox.style.display = 'none';
+          <div class="sv-field">
+            <label for="self-pw-confirm">{{ _('Repeat new password') }} *</label>
+            <input type="password" id="self-pw-confirm" required minlength="8" autocomplete="new-password" placeholder="{{ _('Repeat password') }}">
+          </div>
+        </div>
+        <div class="sv-dialog__foot">
+          <button type="button" class="sv-btn sv-btn--secondary" data-self-pw-close>{{ _('Cancel') }}</button>
+          <button type="submit" id="self-pw-submit-btn" class="sv-btn sv-btn--primary">{{ _('Save password') }}</button>
+        </div>
+      </form>
+    </dialog>
+    <script nonce="{{ csp_nonce() }}">
+      (function () {
+        var dlg = document.getElementById('self-password-modal');
+        if (!dlg) return;
         var form = document.getElementById('form-self-password');
-        if (form) form.reset();
-        setTimeout(function() {
-          var curr = document.getElementById('self-pw-current');
-          if (curr) curr.focus();
-        }, 50);
-      }
-      function closeSelfPasswordModal() {
-        var m = document.getElementById('self-password-modal');
-        if (m) m.style.display = 'none';
-      }
-      document.addEventListener('keydown', function(e) {
-        if (e.key === 'Escape') closeSelfPasswordModal();
-      });
-      var selfModalBackdrop = document.getElementById('self-password-modal');
-      if (selfModalBackdrop) {
-        selfModalBackdrop.addEventListener('click', function(e) {
-          if (e.target === selfModalBackdrop) closeSelfPasswordModal();
-        });
-      }
-      async function handleSelfPasswordSubmit(e) {
-        e.preventDefault();
         var alertBox = document.getElementById('self-pw-alert');
         var submitBtn = document.getElementById('self-pw-submit-btn');
-        var currentPass = document.getElementById('self-pw-current').value;
-        var newPass = document.getElementById('self-pw-new').value;
-        var confirmPass = document.getElementById('self-pw-confirm').value;
+        var opener = null;
 
-        if (newPass !== confirmPass) {
-          alertBox.style.display = 'block';
-          alertBox.style.background = 'rgba(240,68,88,0.15)';
-          alertBox.style.border = '1px solid rgba(240,68,88,0.4)';
-          alertBox.style.color = '#F04458';
-          alertBox.textContent = {{ _('The passwords do not match.')|tojson }};
-          return;
+        function showAlert(kind, text) {
+          alertBox.hidden = false;
+          alertBox.className = 'sv-alert sv-alert--' + kind;
+          alertBox.textContent = text;
         }
 
-        submitBtn.disabled = true;
-        submitBtn.textContent = {{ _('Saving...')|tojson }};
+        window.openSelfPasswordModal = function () {
+          if (typeof dlg.showModal !== 'function' || !dlg.isConnected) return;
+          opener = document.activeElement;
+          alertBox.hidden = true;
+          form.reset();
+          if (!dlg.open) dlg.showModal();
+          document.getElementById('self-pw-current').focus();
+        };
+        window.closeSelfPasswordModal = function () {
+          if (dlg.open) dlg.close();
+        };
+        dlg.addEventListener('close', function () {
+          if (opener && typeof opener.focus === 'function') opener.focus();
+          opener = null;
+        });
+        dlg.addEventListener('click', function (e) {
+          if (e.target === dlg || (e.target.closest && e.target.closest('[data-self-pw-close]'))) window.closeSelfPasswordModal();
+        });
+        document.addEventListener('click', function (e) {
+          var t = e.target.closest && e.target.closest('[data-open-self-password]');
+          if (t) { e.preventDefault(); window.openSelfPasswordModal(); }
+        });
 
-        var csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
-        try {
-          var resp = await fetch('/api/user/change-password', {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-              'X-CSRFToken': csrfToken,
-            },
-            body: JSON.stringify({
-              current_password: currentPass,
-              new_password: newPass,
-              csrf_token: csrfToken
-            })
-          });
-          var data = await resp.json();
-          alertBox.style.display = 'block';
-          if (resp.ok && data.ok) {
-            alertBox.style.background = 'rgba(34,197,94,0.15)';
-            alertBox.style.border = '1px solid rgba(34,197,94,0.4)';
-            alertBox.style.color = '#4ADE80';
-            alertBox.textContent = data.msg || {{ _('Password changed successfully.')|tojson }};
-            document.getElementById('form-self-password').reset();
-            setTimeout(function() {
-              closeSelfPasswordModal();
-            }, 1400);
-          } else {
-            alertBox.style.background = 'rgba(240,68,88,0.15)';
-            alertBox.style.border = '1px solid rgba(240,68,88,0.4)';
-            alertBox.style.color = '#F04458';
-            alertBox.textContent = data.error || {{ _('Error changing the password.')|tojson }};
+        form.addEventListener('submit', async function (e) {
+          e.preventDefault();
+          var currentPass = document.getElementById('self-pw-current').value;
+          var newPass = document.getElementById('self-pw-new').value;
+          var confirmPass = document.getElementById('self-pw-confirm').value;
+          if (newPass !== confirmPass) {
+            showAlert('error', {{ _('The passwords do not match.')|tojson }});
+            document.getElementById('self-pw-confirm').focus();
+            return;
           }
-        } catch (err) {
-          alertBox.style.display = 'block';
-          alertBox.style.background = 'rgba(240,68,88,0.15)';
-          alertBox.style.border = '1px solid rgba(240,68,88,0.4)';
-          alertBox.style.color = '#F04458';
-          alertBox.textContent = {{ _('Network error:')|tojson }} + ' ' + err.message;
-        } finally {
-          submitBtn.disabled = false;
-          submitBtn.textContent = {{ _('Save password')|tojson }};
-        }
-      }
+          submitBtn.disabled = true;
+          submitBtn.textContent = {{ _('Saving…')|tojson }};
+          var csrfMeta = document.querySelector('meta[name="csrf-token"]');
+          var csrfToken = csrfMeta ? csrfMeta.getAttribute('content') : '';
+          try {
+            var resp = await fetch('/api/user/change-password', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken },
+              body: JSON.stringify({ current_password: currentPass, new_password: newPass, csrf_token: csrfToken })
+            });
+            var data = await resp.json();
+            if (resp.ok && data.ok) {
+              showAlert('success', data.msg || {{ _('Password changed successfully.')|tojson }});
+              form.reset();
+              setTimeout(window.closeSelfPasswordModal, 1400);
+            } else {
+              showAlert('error', data.error || {{ _('Error changing the password.')|tojson }});
+            }
+          } catch (err) {
+            showAlert('error', {{ _('Connection failed. Check your network and try again.')|tojson }});
+          } finally {
+            submitBtn.disabled = false;
+            submitBtn.textContent = {{ _('Save password')|tojson }};
+          }
+        });
+      })();
     </script>
     {% endif %}
   </body>
diff --git a/WEBUI/templates/channels.html b/WEBUI/templates/channels.html
index 8c9c898..0ea6278 100644
--- a/WEBUI/templates/channels.html
+++ b/WEBUI/templates/channels.html
@@ -6,7 +6,7 @@
 
 {% block header_actions %}
   <a href="{{ url_for('admin_view') }}" class="ns-btn ns-btn-secondary">
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
+    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
     {{ _('Options') }}
   </a>
   <a href="{{ url_for('index') }}" class="ns-btn ns-btn-secondary">
@@ -19,43 +19,45 @@
   <section class="ns-card-panel" style="margin-bottom: 28px;">
     <div class="ns-panel-head">
       <h2>{{ _('Add new channel') }}</h2>
-      <span style="font-size: 11px; color: var(--ns-text-muted);">{{ _('Twitch or YouTube supported') }}</span>
+      <span style="font-size: 12px; color: var(--ns-text-muted);">{{ _('Twitch or YouTube supported') }}</span>
     </div>
 
-    <form method="post" action="{{ url_for('channels_add') }}" style="display: flex; flex-direction: column; gap: 14px;">
+    <form id="add-channel-form" method="post" action="{{ url_for('channels_add') }}" style="display: flex; flex-direction: column; gap: 14px;">
       <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
       <div style="display: flex; gap: 12px; flex-wrap: wrap;">
         <div style="flex: 2; min-width: min(260px, 100%);">
-          <input name="channel" placeholder="{{ _('Twitch name (e.g. shroud) or YouTube URL / @handle...') }}" required class="ns-input-field" style="width: 100%;">
+          <label for="add-channel-name" class="sr-only">{{ _('Channel') }}</label>
+          <input id="add-channel-name" name="channel" placeholder="{{ _('Twitch name (e.g. shroud) or YouTube URL / @handle…') }}" required class="ns-input-field" style="width: 100%;">
         </div>
         <div style="flex: 1; min-width: 200px;">
-          <input name="archive_name" placeholder="{{ _('Target archive folder (optional)') }}" class="ns-input-field" style="width: 100%;">
+          <label for="add-channel-archive" class="sr-only">{{ _('Target archive folder (optional)') }}</label>
+          <input id="add-channel-archive" name="archive_name" placeholder="{{ _('Target archive folder (optional)') }}" class="ns-input-field" style="width: 100%;">
         </div>
         <button type="submit" class="ns-btn ns-btn-primary" style="white-space: nowrap;">
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+          <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
           {{ _('Add channel') }}
         </button>
       </div>
 
       <!-- Betriebsmodus Auswahl -->
-      <div style="background: rgba(11, 18, 32, 0.65); padding: 12px 16px; border-radius: var(--ns-radius-md); border: 1px solid var(--ns-border-subtle); display: flex; align-items: center; gap: 24px; flex-wrap: wrap;">
-        <span style="font-size: 12px; font-weight: 700; color: #BB78FF;">{{ _('OPERATING MODE:') }}</span>
+      <fieldset style="margin: 0; min-width: 0; background: rgba(11, 18, 32, 0.65); padding: 12px 16px; border-radius: var(--ns-radius-md); border: 1px solid var(--ns-border-subtle); display: flex; align-items: center; gap: 24px; flex-wrap: wrap;">
+        <legend style="float: left; padding: 0; font-size: 12px; font-weight: 700; color: var(--nebula-accent-highlight);">{{ _('Operating mode') }}</legend>
         <label style="display: flex; align-items: center; gap: 8px; font-size: 13px; color: #FFF; cursor: pointer; margin: 0;">
-          <input type="radio" name="mode" value="record" checked style="accent-color: #BB78FF; cursor: pointer;">
-          <span>🔴 <strong>{{ _('Full mode:') }}</strong> {{ _('Recording + live stream & Discord notification') }}</span>
+          <input type="radio" name="mode" value="record" checked style="accent-color: var(--nebula-accent-highlight); cursor: pointer;">
+          <span><span aria-hidden="true">🔴</span> <strong>{{ _('Full mode:') }}</strong> {{ _('Recording + live stream & Discord notification') }}</span>
         </label>
-        <label style="display: flex; align-items: center; gap: 8px; font-size: 13px; color: #A2AEC8; cursor: pointer; margin: 0;">
-          <input type="radio" name="mode" value="live_only" style="accent-color: #48D6A2; cursor: pointer;">
-          <span>📡 <strong>{{ _('Live & Discord only:') }}</strong> {{ _('Notification + live stream (no recording)') }}</span>
+        <label style="display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--nebula-text-secondary); cursor: pointer; margin: 0;">
+          <input type="radio" name="mode" value="live_only" style="accent-color: var(--nebula-status-success); cursor: pointer;">
+          <span><span aria-hidden="true">📡</span> <strong>{{ _('Live & Discord only:') }}</strong> {{ _('Notification + live stream (no recording)') }}</span>
         </label>
-      </div>
+      </fieldset>
     </form>
     <p style="margin: 10px 0 0; font-size: 12px; color: var(--ns-text-muted);">
       {{ _('Tip: a shared archive folder combines Twitch and YouTube streams of the same streamer.') }}
     </p>
 
     {% if channels_msg %}
-    <div style="margin-top: 16px; padding: 12px 16px; border-radius: var(--ns-radius-md); background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.25); color: #93c5fd; font-size: 13px;">
+    <div role="status" style="margin-top: 16px; padding: 12px 16px; border-radius: var(--ns-radius-md); background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.25); color: #93c5fd; font-size: 13px;">
       {{ channels_msg }}
     </div>
     {% endif %}
@@ -74,49 +76,49 @@ <h2>{{ _('Configured streamers & sources') }}</h2>
       <div class="ns-card-panel" style="padding: 16px 20px;">
         <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; border-bottom: 1px solid var(--ns-border-subtle); padding-bottom: 8px;">
           <strong style="font-size: 15px; color: var(--ns-text-primary); font-family: var(--ns-font-mono);">{{ _('Archive: %(name)s', name=archive) }}</strong>
-          <span style="font-size: 11px; color: var(--ns-text-muted);">{{ ngettext('%(num)d source', '%(num)d sources', configs|length) }}</span>
+          <span style="font-size: 12px; color: var(--ns-text-muted);">{{ ngettext('%(num)d source', '%(num)d sources', configs|length) }}</span>
         </div>
 
         <div style="display: flex; flex-wrap: wrap; gap: 10px;">
           {% for c in configs %}
           <div style="display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--ns-radius-md); background: var(--ns-bg-surface-raised); border: 1px solid var(--ns-border-subtle);">
-            <span class="ns-overlay-chip" style="font-size: 9px; padding: 1px 4px; background-color: {% if c.platform == 'youtube' %}var(--ns-platform-youtube){% else %}var(--ns-platform-twitch){% endif %};">
+            <span class="ns-overlay-chip" style="font-size: 12px; padding: 1px 4px; background-color: {% if c.platform == 'youtube' %}var(--ns-platform-youtube){% else %}var(--ns-platform-twitch){% endif %};">
               {% if c.platform == 'youtube' %}YT{% else %}TW{% endif %}
             </span>
             <strong style="font-size: 13px; color: var(--ns-text-primary);">{{ c.name }}</strong>
             {% if c.archive_name and c.archive_name != c.name %}
-            <span style="font-size: 11px; color: var(--ns-text-muted);">→ {{ c.archive_name }}</span>
+            <span style="font-size: 12px; color: var(--ns-text-muted);">→ {{ c.archive_name }}</span>
             {% endif %}
 
             <!-- Mode Badge & Quick Toggle -->
             {% if c.record %}
-            <span style="font-size: 10px; font-weight: 700; color: #F04458; background: rgba(240,68,88,0.15); border: 1px solid rgba(240,68,88,0.3); padding: 2px 6px; border-radius: 4px;" title="{{ _('VODs are recorded to disk') }}">
-              🔴 {{ _('RECORDING') }}
+            <span style="font-size: 12px; font-weight: 700; color: var(--nebula-status-live-text); background: rgba(240,68,88,0.15); border: 1px solid rgba(240,68,88,0.3); padding: 2px 6px; border-radius: 4px;" title="{{ _('VODs are recorded to disk') }}">
+              <span aria-hidden="true">🔴</span> {{ _('Recording') }}
             </span>
             <form method="post" action="{{ url_for('source_record_toggle', channel=c.name) }}" style="margin: 0;">
               <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
               <input type="hidden" name="enabled" value="0">
-              <button type="submit" class="ns-btn ns-btn-secondary" style="padding: 2px 7px; font-size: 10px;" title="{{ _('Disable recording (live & Discord only)') }}">
+              <button type="submit" class="ns-btn ns-btn-secondary" style="padding: 2px 10px; font-size: 12px; min-height: 28px;" title="{{ _('Disable recording (live & Discord only)') }}">
                 {{ _('Switch to live only') }}
               </button>
             </form>
             {% else %}
-            <span style="font-size: 10px; font-weight: 700; color: #48D6A2; background: rgba(72,214,162,0.15); border: 1px solid rgba(72,214,162,0.3); padding: 2px 6px; border-radius: 4px;" title="{{ _('Live stream and Discord alerts only, no disk recording') }}">
-              📡 {{ _('LIVE & DISCORD ONLY') }}
+            <span style="font-size: 12px; font-weight: 700; color: var(--nebula-status-success); background: rgba(72,214,162,0.15); border: 1px solid rgba(72,214,162,0.3); padding: 2px 6px; border-radius: 4px;" title="{{ _('Live stream and Discord alerts only, no disk recording') }}">
+              <span aria-hidden="true">📡</span> {{ _('Live & Discord only') }}
             </span>
             <form method="post" action="{{ url_for('source_record_toggle', channel=c.name) }}" style="margin: 0;">
               <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
               <input type="hidden" name="enabled" value="1">
-              <button type="submit" class="ns-btn ns-btn-secondary" style="padding: 2px 7px; font-size: 10px;" title="{{ _('Enable recording for this channel') }}">
+              <button type="submit" class="ns-btn ns-btn-secondary" style="padding: 2px 10px; font-size: 12px; min-height: 28px;" title="{{ _('Enable recording for this channel') }}">
                 {{ _('Enable recording') }}
               </button>
             </form>
             {% endif %}
 
-            <form method="post" action="{{ url_for('channels_remove', channel=c.name) }}" style="margin: 0; display: flex; align-items: center;">
+            <form method="post" action="{{ url_for('channels_remove', channel=c.name) }}" style="margin: 0; display: flex; align-items: center;" data-confirm="{{ _('Remove channel %(name)s? Monitoring stops; existing recordings stay in the archive.', name=c.name) }}" data-confirm-ok="{{ _('Remove channel') }}" data-confirm-danger>
               <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-              <button type="submit" class="ns-action-btn-mini" style="width: 22px; height: 22px; color: #ef4444; border: none; background: transparent; cursor: pointer;" title="{{ _('Remove channel') }}" onclick='return confirm({{ _("Really remove channel %(name)s?", name=c.name|safe)|tojson }});'>
-                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+              <button type="submit" class="ns-action-btn-mini" style="width: 28px; height: 28px; color: var(--nebula-status-live-text); border: none; background: transparent; cursor: pointer;" title="{{ _('Remove channel') }}" aria-label="{{ _('Remove channel') }} {{ c.name }}">
+                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
               </button>
             </form>
           </div>
@@ -132,12 +134,12 @@ <h2>{{ _('Configured streamers & sources') }}</h2>
         <div style="display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--ns-radius-md); background: var(--ns-bg-surface-raised); border: 1px solid var(--ns-border-subtle);">
           <strong style="font-size: 13px; color: var(--ns-text-primary);">{{ c }}</strong>
           {% if channel_archives and channel_archives.get(c) and channel_archives.get(c) != c %}
-          <span style="font-size: 11px; color: var(--ns-text-muted);">→ {{ channel_archives.get(c) }}</span>
+          <span style="font-size: 12px; color: var(--ns-text-muted);">→ {{ channel_archives.get(c) }}</span>
           {% endif %}
-          <form method="post" action="{{ url_for('channels_remove', channel=c) }}" style="margin: 0;">
+          <form method="post" action="{{ url_for('channels_remove', channel=c) }}" style="margin: 0;" data-confirm="{{ _('Remove channel %(name)s? Monitoring stops; existing recordings stay in the archive.', name=c) }}" data-confirm-ok="{{ _('Remove channel') }}" data-confirm-danger>
             <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-            <button type="submit" class="ns-action-btn-mini" style="width: 22px; height: 22px; color: #ef4444; border: none; background: transparent; cursor: pointer;" title="{{ _('Remove') }}" onclick='return confirm({{ _("Remove channel %(name)s?", name=c|safe)|tojson }});'>
-              <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+            <button type="submit" class="ns-action-btn-mini" style="width: 28px; height: 28px; color: var(--nebula-status-live-text); border: none; background: transparent; cursor: pointer;" title="{{ _('Remove channel') }}" aria-label="{{ _('Remove channel') }} {{ c }}">
+              <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
             </button>
           </form>
         </div>
@@ -146,7 +148,8 @@ <h2>{{ _('Configured streamers & sources') }}</h2>
     </div>
     {% else %}
     <div class="ns-card-panel" style="text-align: center; padding: 32px; color: var(--ns-text-muted);">
-      {{ _('No monitored channels configured.') }}
+      <p style="margin: 0 0 8px;">{{ _('No channels are monitored yet.') }}</p>
+      <a href="#add-channel-name" style="color: var(--nebula-accent-text); font-weight: 600;">{{ _('Add the first channel above') }}</a>
     </div>
     {% endif %}
   </section>
diff --git a/WEBUI/templates/chat_export.html b/WEBUI/templates/chat_export.html
index 54af354..a1daa5c 100644
--- a/WEBUI/templates/chat_export.html
+++ b/WEBUI/templates/chat_export.html
@@ -4,8 +4,7 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>{{ _('Chat export - %(user)s', user=user) }}</title>
-<link rel="stylesheet" href="{{ url_for('static', filename='style.css', v=ASSET_VERSION) }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/tube_design_system.css', v=ASSET_VERSION) }}">
+{% include 'components/styles.html' %}
 </head>
 <body class="page-chat-export {{ theme_class }} ns-platform">
 <div class="container">
diff --git a/WEBUI/templates/chat_obs.html b/WEBUI/templates/chat_obs.html
index f88fcca..b9c2ade 100644
--- a/WEBUI/templates/chat_obs.html
+++ b/WEBUI/templates/chat_obs.html
@@ -101,7 +101,7 @@
 
   {% include 'components/js_i18n.html' %}
   <script src="{{ url_for('static', filename='chat_emotes.js') }}"></script>
-  <script>
+  <script nonce="{{ csp_nonce() }}">
     (function() {
       const streamer = {{ streamer|tojson }};
       const listEl = document.getElementById("chat-list");
diff --git a/WEBUI/templates/clip_editor.html b/WEBUI/templates/clip_editor.html
index 3c6f12d..405ca03 100644
--- a/WEBUI/templates/clip_editor.html
+++ b/WEBUI/templates/clip_editor.html
@@ -3,18 +3,17 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Clip Editor - {{ filename }}</title>
+    <title>{{ _('Clip Editor') }} - {{ filename }}</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.css">
-    <link rel="stylesheet" href="{{ url_for('static', filename='style.css', v=ASSET_VERSION) }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/tube_design_system.css', v=ASSET_VERSION) }}">
+    {% include 'components/styles.html' %}
   </head>
   <body class="page-clip-editor {{ theme_class }} ns-platform">
     <header>
       <div class="brand">
-        <span>&#9986; Clip Editor</span>
+        <span><span aria-hidden="true">&#9986;</span> {{ _('Clip Editor') }}</span>
         <span style="color:var(--text-muted); font-weight:400; font-size:14px; margin-left: 10px;">{{ filename }}</span>
       </div>
-      <a href="{{ back_url }}" class="close-btn">&times;</a>
+      <a href="{{ back_url }}" class="close-btn" aria-label="{{ _('Close') }}">&times;</a>
     </header>
     
     <div class="main-area">
@@ -23,10 +22,10 @@
 <div class="msg success" style="display: flex; justify-content: space-between; align-items: center;">
   <span>{{ clip_ok }}</span>
   {% if request.args.get('clip_name') %}
-  <button type="button" class="btn-main" onclick='shareClip({{ request.args.get('clip_name')|tojson }})'>{{ _('Share') }}</button>
+  <button type="button" class="btn-main" id="btnShareClip" data-clip-name="{{ request.args.get('clip_name') }}">{{ _('Share') }}</button>
   {% endif %}
 </div>
-<script>
+<script nonce="{{ csp_nonce() }}">
 async function shareClip(filename) {
     const url = "{{ url_for('share_create', streamer=streamer, filename='') }}" + encodeURIComponent(filename);
     try {
@@ -46,6 +45,13 @@
         alert({{ _('Error:')|tojson }} + ' ' + e);
     }
 }
+(function () {
+    const shareBtn = document.getElementById('btnShareClip');
+    if (!shareBtn) return;
+    shareBtn.addEventListener('click', function () {
+        shareClip(shareBtn.getAttribute('data-clip-name') || '');
+    });
+})();
 </script>
 {% endif %}
       
@@ -63,30 +69,30 @@
         <div class="controls-grid">
             <!-- Start Controls -->
             <div class="time-controls">
-                <span style="font-size:12px; color:var(--text-muted); margin-right:5px;">{{ _('START') }}</span>
-                <button class="btn-icon" onclick="adjustTime('start', -1)">-1s</button>
-                <button class="btn-icon" onclick="adjustTime('start', -0.1)">-</button>
+                <span style="font-size:12px; color:var(--text-muted); margin-right:5px;">{{ _('Start') }}</span>
+                <button type="button" class="btn-icon" data-clip-adjust="start" data-clip-amount="-1">-1s</button>
+                <button type="button" class="btn-icon" data-clip-adjust="start" data-clip-amount="-0.1" aria-label="-0.1s">-</button>
                 <span id="lblStart" class="time-label">00:00</span>
-                <button class="btn-icon" onclick="adjustTime('start', 0.1)">+</button>
-                <button class="btn-icon" onclick="adjustTime('start', 1)">+1s</button>
-                <button class="btn-icon" onclick="setStartToCurrent()" title="{{ _('Set start to current position') }}" style="margin-left:5px;">&#8676;</button>
+                <button type="button" class="btn-icon" data-clip-adjust="start" data-clip-amount="0.1" aria-label="+0.1s">+</button>
+                <button type="button" class="btn-icon" data-clip-adjust="start" data-clip-amount="1">+1s</button>
+                <button type="button" class="btn-icon" data-clip-cmd="set-start" title="{{ _('Set start to current position') }}" aria-label="{{ _('Set start to current position') }}" style="margin-left:5px;">&#8676;</button>
             </div>
             
             <!-- Main Controls -->
             <div class="main-controls">
-                <button class="btn-main" id="btnPlayPause" onclick="togglePlay()">&#9654; Play</button>
-                <button class="btn-main" id="btnPreview" onclick="togglePreview()">&#128065; {{ _('Preview') }}</button>
+                <button type="button" class="btn-main" id="btnPlayPause">&#9654; {{ _('Play') }}</button>
+                <button type="button" class="btn-main" id="btnPreview">&#128065; {{ _('Preview') }}</button>
             </div>
             
             <!-- End Controls -->
             <div class="time-controls">
                 <span style="font-size:12px; color:var(--text-muted); margin-right:5px;">{{ _('END') }}</span>
-                <button class="btn-icon" onclick="setEndToCurrent()" title="{{ _('Set end to current position') }}" style="margin-right:5px;">&#8677;</button>
-                <button class="btn-icon" onclick="adjustTime('end', -1)">-1s</button>
-                <button class="btn-icon" onclick="adjustTime('end', -0.1)">-</button>
+                <button type="button" class="btn-icon" data-clip-cmd="set-end" title="{{ _('Set end to current position') }}" aria-label="{{ _('Set end to current position') }}" style="margin-right:5px;">&#8677;</button>
+                <button type="button" class="btn-icon" data-clip-adjust="end" data-clip-amount="-1">-1s</button>
+                <button type="button" class="btn-icon" data-clip-adjust="end" data-clip-amount="-0.1" aria-label="-0.1s">-</button>
                 <span id="lblEnd" class="time-label">00:30</span>
-                <button class="btn-icon" onclick="adjustTime('end', 0.1)">+</button>
-                <button class="btn-icon" onclick="adjustTime('end', 1)">+1s</button>
+                <button type="button" class="btn-icon" data-clip-adjust="end" data-clip-amount="0.1" aria-label="+0.1s">+</button>
+                <button type="button" class="btn-icon" data-clip-adjust="end" data-clip-amount="1">+1s</button>
             </div>
         </div>
         
@@ -96,7 +102,7 @@
           <input type="hidden" name="duration" id="inpDuration">
           <input type="hidden" name="from_editor" value="1">
           
-          <input name="clip_name" placeholder="{{ _('Clip title (optional)') }}">
+          <input name="clip_name" placeholder="{{ _('Clip title (optional)') }}" aria-label="{{ _('Clip title (optional)') }}">
           <button type="submit" class="btn-main btn-primary">{{ _('Create clip') }}</button>
         </form>
         
@@ -109,11 +115,15 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.js"></script>
     {% if is_live %}<script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>{% endif %}
     <script src="{{ url_for('static', filename='hls_support.js', v=ASSET_VERSION) }}"></script>
-    <script>
+    <script nonce="{{ csp_nonce() }}">
       const vPlayer = document.getElementById('vodPlayer');
       const slider = document.getElementById('rangeSlider');
       const isLive = {{ 'true' if is_live else 'false' }};
       const mediaUrl = {{ media_url|tojson }};
+      const LABEL_PLAY = '\u25B6 ' + {{ _('Play')|tojson }};
+      const LABEL_PAUSE = '\u275A\u275A ' + {{ _('Pause')|tojson }};
+      const LABEL_PREVIEW = '\uD83D\uDC41 ' + {{ _('Preview')|tojson }};
+      const LABEL_STOP_PREVIEW = '\u25A0 ' + {{ _('Stop preview')|tojson }};
       
       let duration = 0;
       let clipStart = parseFloat("{{ initial_time|default(0) }}");
@@ -218,10 +228,10 @@
       function togglePlay() {
           if(vPlayer.paused) {
               vPlayer.play();
-              document.getElementById('btnPlayPause').innerHTML = '&#10074;&#10074; Pause';
+              document.getElementById('btnPlayPause').textContent = LABEL_PAUSE;
           } else {
               vPlayer.pause();
-              document.getElementById('btnPlayPause').innerHTML = '&#9654; Play';
+              document.getElementById('btnPlayPause').textContent = LABEL_PLAY;
           }
       }
       
@@ -233,7 +243,7 @@
       function startPreview() {
         isPreviewing = true;
         const btn = document.getElementById('btnPreview');
-        btn.innerHTML = '&#9632; ' + {{ _('Stop preview')|tojson }};
+        btn.textContent = LABEL_STOP_PREVIEW;
         btn.classList.add('btn-primary');
         
         vPlayer.currentTime = clipStart;
@@ -249,7 +259,7 @@
       function stopPreview() {
         isPreviewing = false;
         const btn = document.getElementById('btnPreview');
-        btn.innerHTML = '&#128065; ' + {{ _('Preview')|tojson }};
+        btn.textContent = LABEL_PREVIEW;
         btn.classList.remove('btn-primary');
         
         vPlayer.pause();
@@ -314,10 +324,25 @@
       
       // Sync play button state if video ends or is paused manually
       vPlayer.addEventListener('pause', () => {
-          document.getElementById('btnPlayPause').innerHTML = '&#9654; Play';
+          document.getElementById('btnPlayPause').textContent = LABEL_PLAY;
       });
       vPlayer.addEventListener('play', () => {
-          document.getElementById('btnPlayPause').innerHTML = '&#10074;&#10074; Pause';
+          document.getElementById('btnPlayPause').textContent = LABEL_PAUSE;
+      });
+
+      // Button wiring (replaces inline onclick handlers; CSP script-src-attr 'none').
+      document.getElementById('btnPlayPause').addEventListener('click', togglePlay);
+      document.getElementById('btnPreview').addEventListener('click', togglePreview);
+      document.addEventListener('click', (e) => {
+          const adjustBtn = e.target.closest('[data-clip-adjust]');
+          if (adjustBtn) {
+              adjustTime(adjustBtn.getAttribute('data-clip-adjust'), parseFloat(adjustBtn.getAttribute('data-clip-amount')));
+              return;
+          }
+          const cmdBtn = e.target.closest('[data-clip-cmd]');
+          if (!cmdBtn) return;
+          if (cmdBtn.getAttribute('data-clip-cmd') === 'set-start') setStartToCurrent();
+          else if (cmdBtn.getAttribute('data-clip-cmd') === 'set-end') setEndToCurrent();
       });
     </script>
   </body>
diff --git a/WEBUI/templates/components/archive_filters.html b/WEBUI/templates/components/archive_filters.html
index 99ab71e..e4e254d 100644
--- a/WEBUI/templates/components/archive_filters.html
+++ b/WEBUI/templates/components/archive_filters.html
@@ -2,12 +2,12 @@
   <!-- Search & Primary Filters Row -->
   <form method="get" class="ns-filter-row" style="display: flex; gap: 12px; align-items: center; flex-wrap: wrap;">
     <div style="flex: 1; min-width: 240px; position: relative;">
-      <input type="text" name="q" value="{{ query or '' }}" placeholder="{{ _('Search recordings (title, date, game)...') }}" class="ns-input-field" style="width: 100%; padding-left: 36px;">
+      <input type="search" name="q" value="{{ query or '' }}" aria-label="{{ _('Search recordings') }}" placeholder="{{ _('Search recordings (title, date, game)…') }}" class="ns-input-field" style="width: 100%; padding-left: 36px;">
       <svg style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ns-text-muted);" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
     </div>
 
     {% if categories %}
-    <select name="cat" class="ns-input-field" style="width: auto; cursor: pointer;">
+    <select name="cat" aria-label="{{ _('Category') }}" class="ns-input-field" style="width: auto; cursor: pointer;">
       <option value="">{{ _('All categories') }}</option>
       {% for c in categories %}
       <option value="{{ c.name }}" {% if selected_cat == c.name %}selected{% endif %}>{{ c.name }} ({{ c.count }})</option>
@@ -15,7 +15,7 @@
     </select>
     {% endif %}
 
-    <select name="sort" class="ns-input-field" style="width: auto; cursor: pointer;">
+    <select name="sort" aria-label="{{ _('Sort') }}" class="ns-input-field" style="width: auto; cursor: pointer;">
       <option value="newest" {% if sort == 'newest' %}selected{% endif %}>{{ _('Newest first') }}</option>
       <option value="oldest" {% if sort == 'oldest' %}selected{% endif %}>{{ _('Oldest first') }}</option>
       <option value="duration" {% if sort == 'duration' %}selected{% endif %}>{{ _('Duration') }}</option>
diff --git a/WEBUI/templates/components/js_i18n.html b/WEBUI/templates/components/js_i18n.html
index 4392815..3693ced 100644
--- a/WEBUI/templates/components/js_i18n.html
+++ b/WEBUI/templates/components/js_i18n.html
@@ -1,4 +1,4 @@
-<script>
+<script nonce="{{ csp_nonce() }}">
   window.SV_I18N = {{ js_i18n()|tojson }};
   window.svT = function (text) {
     var t = window.SV_I18N && window.SV_I18N[text];
diff --git a/WEBUI/templates/components/language_switcher.html b/WEBUI/templates/components/language_switcher.html
index c5bc7e1..65531e4 100644
--- a/WEBUI/templates/components/language_switcher.html
+++ b/WEBUI/templates/components/language_switcher.html
@@ -9,7 +9,7 @@
     <span>{{ current_locale.split('_')[0]|upper }}</span>
   </span>
   {% endif %}
-  <select id="ns-lang-select" name="lang" onchange="this.form.submit()">
+  <select id="ns-lang-select" name="lang" data-lang-autosubmit>
     <option value="">{{ _('Automatic (browser)') }}</option>
     {% for code, name in available_locales %}
     <option value="{{ code }}" lang="{{ code|replace('_', '-') }}"{% if request.cookies.get('sv_lang') == code %} selected{% endif %}>{{ name }}</option>
@@ -17,3 +17,14 @@
   </select>
   <noscript><button type="submit">{{ _('Apply') }}</button></noscript>
 </form>
+<script nonce="{{ csp_nonce() }}">
+  (function () {
+    var script = document.currentScript;
+    var form = script && script.previousElementSibling;
+    var select = form && form.querySelector('select[data-lang-autosubmit]');
+    if (!select) return;
+    select.addEventListener('change', function () {
+      if (this.form) this.form.submit();
+    });
+  })();
+</script>
diff --git a/WEBUI/templates/components/logout_everywhere.html b/WEBUI/templates/components/logout_everywhere.html
new file mode 100644
index 0000000..3b819fc
--- /dev/null
+++ b/WEBUI/templates/components/logout_everywhere.html
@@ -0,0 +1,17 @@
+{#- POST /logout/all behind the confirmation dialog.
+    Usage: {% with logout_all_variant = 'rail' %}{% include 'components/logout_everywhere.html' %}{% endwith %}
+    Variants: 'rail' (desktop icon button), 'nav' (item in the bottom navigation). -#}
+{%- set _rail = logout_all_variant == 'rail' -%}
+<form method="post" action="{{ url_for('logout_everywhere') }}" class="{{ 'ns-logout-btn' if _rail else 'sv-bottom-nav__logout' }}" data-confirm="{{ _('Sign out on every device? Every session of this account ends, including this one.') }}" data-confirm-ok="{{ _('Log out everywhere') }}" data-confirm-danger>
+  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+  {%- if _rail %}
+  <button type="submit" class="ns-rail-item" title="{{ _('Log out everywhere') }}" aria-label="{{ _('Log out everywhere') }}" style="width: 40px; height: 36px; border-radius: 8px;">
+    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.77.04"/></svg>
+  </button>
+  {%- else %}
+  <button type="submit" aria-label="{{ _('Log out everywhere') }}">
+    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.77.04"/></svg>
+    <span>{{ _('Everywhere') }}</span>
+  </button>
+  {%- endif %}
+</form>
diff --git a/WEBUI/templates/components/sidebar.html b/WEBUI/templates/components/sidebar.html
index 1e62427..d81c606 100644
--- a/WEBUI/templates/components/sidebar.html
+++ b/WEBUI/templates/components/sidebar.html
@@ -1,18 +1,18 @@
 {% if not is_mobile %}
-<aside class="ns-command-rail">
+<aside class="ns-command-rail" aria-label="{{ _('Main navigation') }}">
   <div class="ns-rail-brand" style="margin-bottom: 14px;">
-    <a href="{{ url_for('index') }}" class="ns-brand-glyph" title="StreamVault" aria-label="StreamVault" style="width: 40px; height: 40px; border-radius: 12px; font-size: 18px; background: linear-gradient(135deg, #4D63FF, #9365FF); border: none; margin: 0 auto; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(77, 99, 255, 0.3);">
-      <span>SV</span>
+    <a href="{{ url_for('index') }}" class="ns-brand-glyph" title="StreamVault" style="width: 40px; height: 40px; border-radius: 12px; font-size: 18px; background: var(--nebula-accent-primary); border: none; margin: 0 auto; display: flex; align-items: center; justify-content: center; box-shadow: var(--nebula-shadow-brand);">
+      <span aria-hidden="true">SV</span><span class="sr-only">StreamVault</span>
     </a>
   </div>
   <nav class="ns-rail-nav">
     <a href="{{ url_for('index') }}" class="ns-rail-item {% if request.endpoint == 'index' %}is-active{% endif %}" title="{{ _('Dashboard') }}" aria-label="{{ _('Dashboard') }}" style="width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center;">
-      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>
+      <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>
     </a>
     {% if not is_mobile %}
     {% if session.user_role == 'admin' or can_manage_users %}
     <a href="{{ url_for('admin_view') }}" class="ns-rail-item {% if request.endpoint in ('admin_view', 'channels_view', 'admin_users_view', 'admin_traffic_view', 'admin_stalk_view', 'admin_stalk_detail') %}is-active{% endif %}" title="{{ _('Options') }}" aria-label="{{ _('Options') }}" style="width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center;">
-      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
+      <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
     </a>
     {% endif %}
     {% endif %}
@@ -24,7 +24,7 @@
     {% set st_avatar = st.avatar_url if st is mapping else None %}
     {% set is_live = (st.twitch_live or st.online) if st is mapping else False %}
     <a href="{{ url_for('streamer_view', streamer=st_name) }}" class="ns-rail-item {% if request.view_args and request.view_args.get('streamer') == st_name %}is-active{% endif %}" title="{{ st_name }}" aria-label="{{ st_name }}" style="position: relative; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center;">
-      <div class="ns-rail-avatar" style="width: 28px; height: 28px; border-radius: 50%; background: #151F33; border: 1.5px solid #3B4E73; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #ffffff; text-transform: uppercase; overflow: hidden; box-shadow: none;">
+      <div class="ns-rail-avatar" style="width: 28px; height: 28px; border-radius: 50%; background: var(--nebula-bg-card); border: 1.5px solid var(--nebula-border-bright); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #ffffff; text-transform: uppercase; overflow: hidden; box-shadow: none;">
         {% if st_avatar %}
         <img src="{{ st_avatar }}" alt="{{ st_name }}" loading="lazy" decoding="async" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;">
         {% else %}
@@ -32,7 +32,7 @@
         {% endif %}
       </div>
       {% if is_live %}
-      <span class="ns-rail-live-dot" style="position: absolute; bottom: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; border: 1.5px solid #070B14; box-shadow: 0 0 10px #ef4444;"></span>
+      <span class="ns-rail-live-dot" role="img" aria-label="{{ _('Live') }}" style="position: absolute; bottom: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; border: 1.5px solid var(--nebula-bg-root); box-shadow: 0 0 10px #ef4444;"></span>
       {% endif %}
     </a>
     {% endfor %}
@@ -42,19 +42,17 @@
   {% if not is_mobile %}
   <div class="ns-rail-footer" style="margin-top: auto; padding-top: 6px;">
     {% if session.username %}
-    <div class="ns-user-badge-mini" title="{{ session.username }} &bull; {{ _('Click to change password') }}" style="display: flex; justify-content: center; margin-bottom: 4px; cursor: pointer;" onclick="openSelfPasswordModal()">
-      <div style="width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #4D63FF, #9365FF); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #FFF; transition: transform 0.15s ease;" onmouseover="this.style.transform='scale(1.08)'" onmouseout="this.style.transform='scale(1)'">
-        {{ session.username[:1].upper() }}
-      </div>
+    <div class="ns-user-badge-mini" title="{{ session.username }}" style="display: flex; justify-content: center; margin-bottom: 4px;">
+      <span class="ns-user-badge-mini__avatar" aria-hidden="true" style="width: 30px; height: 30px; border-radius: 50%; background: var(--nebula-accent-primary); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #FFF;">{{ session.username[:1].upper() }}</span>
     </div>
-    <button type="button" class="ns-rail-item" title="{{ _('Change password') }}" aria-label="{{ _('Change password') }}" onclick="openSelfPasswordModal()" style="background: none; border: none; cursor: pointer; color: var(--ns-text-muted); display: flex; align-items: center; justify-content: center; width: 40px; height: 36px; border-radius: 8px; margin: 0 auto 2px;">
-      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+    <button type="button" class="ns-rail-item" title="{{ _('Change password') }}" aria-label="{{ _('Change password') }}" data-open-self-password style="background: none; border: none; cursor: pointer; color: var(--ns-text-muted); display: flex; align-items: center; justify-content: center; width: 40px; height: 36px; border-radius: 8px; margin: 0 auto 2px;">
+      <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
     </button>
     <style>
       .ns-rail-lang .ns-lang-switch { position: relative; }
-      .ns-rail-lang .ns-lang-compact { display: flex; align-items: center; justify-content: center; gap: 3px; width: 44px; height: 30px; border: 1px solid var(--nebula-border, #26344F); border-radius: 8px; color: var(--ns-text-muted); font-size: 10px; font-weight: 700; letter-spacing: 0.02em; }
+      .ns-rail-lang .ns-lang-compact { display: flex; align-items: center; justify-content: center; gap: 3px; width: 44px; height: 30px; border: 1px solid var(--nebula-border); border-radius: 8px; color: var(--ns-text-muted); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }
       .ns-rail-lang:hover .ns-lang-compact { color: #FFF; }
-      .ns-rail-lang .ns-lang-switch:focus-within .ns-lang-compact { outline: 2px solid #4D63FF; outline-offset: 2px; }
+      .ns-rail-lang .ns-lang-switch:focus-within .ns-lang-compact { outline: 2px solid var(--nebula-focus-ring); outline-offset: 2px; }
       .ns-rail-lang .ns-lang-switch select { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; opacity: 0; cursor: pointer; }
     </style>
     <div class="ns-rail-lang" title="{{ _('Language') }}" style="display: flex; justify-content: center; margin: 0 auto 4px;">
@@ -64,10 +62,35 @@
     <form method="post" action="{{ url_for('logout') }}" class="ns-logout-btn">
       <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
       <button type="submit" class="ns-rail-item" title="{{ _('Log out') }}" aria-label="{{ _('Log out') }}" style="width: 40px; height: 36px; border-radius: 8px;">
-        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/></svg>
+        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/></svg>
       </button>
     </form>
+    {% with logout_all_variant = 'rail' %}{% include 'components/logout_everywhere.html' %}{% endwith %}
   </div>
   {% endif %}
 </aside>
+<div class="mobile-global-nav sv-bottom-nav" role="navigation" aria-label="{{ _('Main navigation') }}">
+  <a href="{{ url_for('index') }}" {% if request.endpoint == 'index' %}class="active" aria-current="page"{% endif %}>
+    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+    <span>{{ _('Home') }}</span>
+  </a>
+  <a href="{{ url_for('search_view') }}" {% if request.endpoint == 'search_view' %}class="active" aria-current="page"{% endif %}>
+    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+    <span>{{ _('Search') }}</span>
+  </a>
+  {% if session.user_role == 'admin' or can_manage_users %}
+  <a href="{{ url_for('admin_view') }}" {% if request.endpoint in ('admin_view', 'channels_view', 'admin_users_view', 'admin_traffic_view', 'admin_storage_view') %}class="active" aria-current="page"{% endif %}>
+    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+    <span>{{ _('Options') }}</span>
+  </a>
+  {% endif %}
+  <form method="post" action="{{ url_for('logout') }}" class="sv-bottom-nav__logout">
+    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+    <button type="submit">
+      <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/></svg>
+      <span>{{ _('Log out') }}</span>
+    </button>
+  </form>
+  {% with logout_all_variant = 'nav' %}{% include 'components/logout_everywhere.html' %}{% endwith %}
+</div>
 {% endif %}
diff --git a/WEBUI/templates/components/styles.html b/WEBUI/templates/components/styles.html
new file mode 100644
index 0000000..91afde6
--- /dev/null
+++ b/WEBUI/templates/components/styles.html
@@ -0,0 +1,8 @@
+{# Stylesheets as parallel <link>s (former @import chain in style.css / tube_design_system.css). tokens.css is the only token layer (no :root blocks elsewhere); a11y.css and reduced-motion.css last so their rules win. #}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/tokens.css', v=ASSET_VERSION) }}">
+<link rel="stylesheet" href="{{ url_for('static', filename='css/mobile.css', v=ASSET_VERSION) }}">
+<link rel="stylesheet" href="{{ url_for('static', filename='style.css', v=ASSET_VERSION) }}">
+<link rel="stylesheet" href="{{ url_for('static', filename='css/tube_design_system.css', v=ASSET_VERSION) }}">
+<link rel="stylesheet" href="{{ url_for('static', filename='css/a11y.css', v=ASSET_VERSION) }}">
+<link rel="stylesheet" href="{{ url_for('static', filename='css/reduced-motion.css', v=ASSET_VERSION) }}">
+<script src="{{ url_for('static', filename='sv_confirm.js', v=ASSET_VERSION) }}" defer></script>
diff --git a/WEBUI/templates/datenschutz.html b/WEBUI/templates/datenschutz.html
index 7aad7bf..ce4eab8 100644
--- a/WEBUI/templates/datenschutz.html
+++ b/WEBUI/templates/datenschutz.html
@@ -5,8 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>StreamVault · {{ _('Privacy') }}</title>
     <link rel="stylesheet" href="{{ UI_FONTS_HREF }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='style.css', v=ASSET_VERSION) }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/tube_design_system.css', v=ASSET_VERSION) }}">
+    {% include 'components/styles.html' %}
   </head>
   <body class="page-agb {{ theme_class }} ns-platform">
     <main class="agb-shell">
diff --git a/WEBUI/templates/files.html b/WEBUI/templates/files.html
index e7c37ec..5af9b71 100644
--- a/WEBUI/templates/files.html
+++ b/WEBUI/templates/files.html
@@ -6,7 +6,7 @@
 
 {% block header_actions %}
   <a href="{{ url_for('index') }}" class="ns-btn ns-btn-secondary">
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
+    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
     {{ _('Back to dashboard') }}
   </a>
 {% endblock %}
@@ -27,15 +27,15 @@
   <section class="ns-card-panel" style="margin-bottom: 28px;">
     <div class="ns-panel-head">
       <h2>{{ _('Upload new file') }}</h2>
-      <span style="font-size: 11px; color: var(--ns-text-muted);">{{ _('Directly into the vault archive') }}</span>
+      <span style="font-size: 12px; color: var(--ns-text-muted);">{{ _('Directly into the vault archive') }}</span>
     </div>
 
     <form method="post" action="{{ url_for('files_upload') }}" enctype="multipart/form-data" style="display: flex; flex-direction: column; gap: 16px;">
       <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
       
       <div style="border: 2px dashed var(--ns-border-medium); border-radius: var(--ns-radius-lg); padding: 24px; text-align: center; cursor: pointer; position: relative; background: var(--ns-bg-surface-raised);">
-        <input type="file" name="file" id="file" required onchange="fileSelected(this)" style="position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;">
-        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: var(--ns-brand-crimson); margin-bottom: 8px;"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+        <input type="file" name="file" id="file" required style="position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;">
+        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: var(--ns-brand-crimson); margin-bottom: 8px;"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
         <div id="file-label" style="font-size: 13px; color: var(--ns-text-secondary); font-weight: 500;">
           {{ _('Drop a file here or click to select') }}
         </div>
@@ -61,7 +61,7 @@ <h2>{{ _('Archived files (%(count)s)', count=files|length) }}</h2>
         <div>
           <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px;">
             <div style="width: 36px; height: 36px; border-radius: var(--ns-radius-md); background: var(--ns-bg-surface-raised); border: 1px solid var(--ns-border-subtle); display: flex; align-items: center; justify-content: center; color: var(--ns-brand-crimson);">
-              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>
+              <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>
             </div>
             <span class="ns-overlay-chip" style="background: var(--ns-bg-surface-raised); border: 1px solid var(--ns-border-subtle); color: var(--ns-text-muted);">{{ f.size_str }}</span>
           </div>
@@ -76,13 +76,13 @@ <h2>{{ _('Archived files (%(count)s)', count=files|length) }}</h2>
           {% endif %}
           
           {% if public_shares_enabled %}
-          <button class="ns-action-btn-mini" onclick="shareFile(this, '{{ url_for('files_share_create', filename=f.name) }}')" title="{{ _('Share') }}">
-            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
+          <button type="button" class="ns-action-btn-mini" data-files-action="share" data-url="{{ url_for('files_share_create', filename=f.name) }}" title="{{ _('Share') }}" aria-label="{{ _('Share') }}">
+            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
           </button>
           {% endif %}
           
-          <button class="ns-action-btn-mini" style="color: #ef4444;" onclick="deleteFile(this, '{{ url_for('files_delete', filename=f.name) }}')" title="{{ _('Delete') }}">
-            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+          <button type="button" class="ns-action-btn-mini" style="color: var(--nebula-status-live-text);" data-files-action="delete" data-url="{{ url_for('files_delete', filename=f.name) }}" data-confirm="{{ _('Delete %(name)s? The file is removed from the archive and cannot be restored.', name=f.name) }}" data-confirm-ok="{{ _('Delete') }}" data-confirm-danger title="{{ _('Delete') }}" aria-label="{{ _('Delete') }}">
+            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
           </button>
         </div>
       </div>
@@ -96,10 +96,14 @@ <h2>{{ _('Archived files (%(count)s)', count=files|length) }}</h2>
 {% endblock %}
 
 {% block scripts %}
-<script>
+<script nonce="{{ csp_nonce() }}">
   function fileSelected(input) {
     if (input.files && input.files[0]) {
-      document.getElementById('file-label').innerHTML = '<span style=\"color:var(--ns-online-green);\">✓ ' + input.files[0].name + '</span>';
+      const label = document.getElementById('file-label');
+      const chosen = document.createElement('span');
+      chosen.style.color = 'var(--ns-online-green)';
+      chosen.textContent = '✓ ' + input.files[0].name;
+      label.replaceChildren(chosen);
     }
   }
 
@@ -119,11 +123,25 @@ <h2>{{ _('Archived files (%(count)s)', count=files|length) }}</h2>
   }
 
   async function deleteFile(btn, url) {
-    if (!confirm({{ _('Really delete file?')|tojson }})) return;
+    const message = btn.getAttribute('data-confirm') || {{ _('Really delete file?')|tojson }};
+    if (!(await window.svConfirm(message, btn.getAttribute('data-confirm-ok'), true))) return;
     const fd = new FormData();
     fd.append('csrf_token', '{{ csrf_token() }}');
     const res = await fetch(url, {method:'POST', body:fd, headers:{'X-Requested-With':'XMLHttpRequest'}});
     if(res.ok) location.reload();
   }
+
+  const fileInput = document.getElementById('file');
+  if (fileInput) {
+    fileInput.addEventListener('change', function () { fileSelected(fileInput); });
+  }
+
+  document.addEventListener('click', function (event) {
+    const btn = event.target.closest('[data-files-action]');
+    if (!btn) return;
+    const url = btn.getAttribute('data-url');
+    if (btn.getAttribute('data-files-action') === 'share') shareFile(btn, url);
+    else if (btn.getAttribute('data-files-action') === 'delete') deleteFile(btn, url);
+  });
 </script>
 {% endblock %}
diff --git a/WEBUI/templates/hls.html b/WEBUI/templates/hls.html
index e391d29..1869af5 100644
--- a/WEBUI/templates/hls.html
+++ b/WEBUI/templates/hls.html
@@ -4,8 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>HLS {{ filename }}</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='style.css', v=ASSET_VERSION) }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/tube_design_system.css', v=ASSET_VERSION) }}">
+    {% include 'components/styles.html' %}
   </head>
   <body class="page-hls {{ theme_class }} ns-platform">
     <header>
@@ -43,7 +42,7 @@
       {% include 'components/js_i18n.html' %}
       <script src="{{ url_for('static', filename='hls_support.js', v=ASSET_VERSION) }}"></script>
       <script src="{{ url_for('static', filename='media_session.js', v=ASSET_VERSION) }}"></script>
-      <script>
+      <script nonce="{{ csp_nonce() }}">
         const video = document.getElementById('player');
         window.StreamVaultMediaSession && window.StreamVaultMediaSession.attach(video);
         const src = {{ (playlist_url or url_for('hls_playlist', streamer=streamer, filename=filename))|tojson }};
diff --git a/WEBUI/templates/index.html b/WEBUI/templates/index.html
index e2c0fb1..79740b1 100644
--- a/WEBUI/templates/index.html
+++ b/WEBUI/templates/index.html
@@ -6,7 +6,7 @@
 
 {% block content %}
   {% if channels_msg %}
-  <div style="padding: 12px 16px; margin-bottom: 20px; border-radius: var(--ns-radius-md); background: rgba(77,99,255,0.15); border: 1px solid rgba(77,99,255,0.35); color: #69C9FF;">
+  <div role="status" style="padding: 12px 16px; margin-bottom: 20px; border-radius: var(--ns-radius-md); background: rgba(77,99,255,0.15); border: 1px solid rgba(77,99,255,0.35); color: var(--nebula-accent-cyan);">
     {{ channels_msg }}
   </div>
   {% endif %}
@@ -25,10 +25,10 @@
         <div class="nebula-hero-content">
           {% if hero_item.is_live %}
           <div class="nebula-live-badge" style="margin-bottom: 14px;">
-            <span class="nebula-live-dot"></span> {{ _('LIVE NOW') }}
+            <span class="nebula-live-dot" aria-hidden="true"></span> {{ _('Live now') }}
           </div>
           {% else %}
-          <div class="nebula-hero-badge">{{ _('FEATURED VOD') }}</div>
+          <div class="nebula-hero-badge">{{ _('Featured VOD') }}</div>
           {% endif %}
           
           <h2 class="nebula-hero-title">{{ hero_item.title }}</h2>
@@ -37,7 +37,7 @@ <h2 class="nebula-hero-title">{{ hero_item.title }}</h2>
             <div class="nebula-hero-streamer">
               <div class="nebula-hero-avatar">
                 {% if hero_item.avatar_url %}
-                <img src="{{ hero_item.avatar_url }}" alt="{{ hero_item.streamer }}" loading="lazy" decoding="async" style="width:100%; height:100%; object-fit:cover; border-radius:50%; display:block;">
+                <img src="{{ hero_item.avatar_url }}" alt="{{ hero_item.streamer }}" loading="eager" style="width:100%; height:100%; object-fit:cover; border-radius:50%; display:block;">
                 {% else %}
                 {{ hero_item.streamer[:2]|upper }}
                 {% endif %}
@@ -46,7 +46,7 @@ <h2 class="nebula-hero-title">{{ hero_item.title }}</h2>
             </div>
             <span class="nebula-hero-cat">{{ hero_item.category }}</span>
             {% if hero_item.is_live and hero_item.viewers %}
-            <span style="color:#F04458; font-weight:600;">{{ _('%(count)s viewers', count=hero_item.viewers) }}</span>
+            <span style="color:var(--nebula-status-live); font-weight:600;">{{ _('%(count)s viewers', count=hero_item.viewers) }}</span>
             {% elif hero_item.duration %}
             <span style="font-family:var(--ns-font-mono);">{{ hero_item.duration }}</span>
             {% endif %}
@@ -54,7 +54,7 @@ <h2 class="nebula-hero-title">{{ hero_item.title }}</h2>
           
           <div style="display:flex; align-items:center; gap:12px;">
             <a href="{{ hero_item.watch_url }}" class="ns-btn ns-btn-primary" style="padding: 10px 24px; font-size: 15px;">
-              {% if hero_item.is_live %}{{ _('WATCH LIVE') }}{% else %}{{ _('Watch now') }}{% endif %}
+              {% if hero_item.is_live %}{{ _('Watch live') }}{% else %}{{ _('Watch now') }}{% endif %}
             </a>
           </div>
         </div>
@@ -64,11 +64,11 @@ <h2 class="nebula-hero-title">{{ hero_item.title }}</h2>
           <a href="{{ hero_item.watch_url }}" class="nebula-hero-preview-frame" aria-label="{{ _('Watch stream directly') }}" style="display:block;">
             <img src="{{ hero_item.thumbnail_url }}" alt="{{ hero_item.title }}" class="nebula-hero-preview-img" decoding="async">
             {% if hero_item.is_live %}
-            <span class="nebula-live-badge" style="position: absolute; top: 10px; left: 10px;"><span class="nebula-live-dot"></span> {{ _('LIVE') }}</span>
+            <span class="nebula-live-badge" style="position: absolute; top: 10px; left: 10px;"><span class="nebula-live-dot"></span> {{ _('Live') }}</span>
             {% endif %}
             {% if not is_mobile %}
             <div class="nebula-hero-play-icon">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><polygon points="6 4 20 12 6 20 6 4"/></svg>
+              <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><polygon points="6 4 20 12 6 20 6 4"/></svg>
             </div>
             {% endif %}
           </a>
@@ -77,8 +77,8 @@ <h2 class="nebula-hero-title">{{ hero_item.title }}</h2>
       </section>
       {% elif not live_channels and not is_mobile %}
       <div class="nebula-empty-live-banner" style="padding: 36px 24px; text-align: center; background: var(--nebula-bg-surface); border: 1px dashed var(--nebula-border); border-radius: 16px; margin-bottom: 24px;">
-        <div style="font-size: 32px; margin-bottom: 10px; opacity: 0.7;">📡</div>
-        <h3 style="color: #FFF; font-size: 18px; margin-bottom: 6px;">{{ _('No live stream active') }}</h3>
+        <div aria-hidden="true" style="font-size: 32px; margin-bottom: 10px; opacity: 0.7;">📡</div>
+        <h2 style="color: #FFF; font-size: 18px; margin-bottom: 6px;">{{ _('No live stream active') }}</h2>
         <p style="color: var(--nebula-text-muted); font-size: 13px; margin: 0;">{{ _('All streamers are currently offline. Past broadcasts can be watched in the archive.') }}</p>
       </div>
       {% endif %}
@@ -87,9 +87,9 @@ <h3 style="color: #FFF; font-size: 18px; margin-bottom: 6px;">{{ _('No live stre
       {% if can_access_vods %}
       <section aria-label="{{ _('VOD archive') }}">
         <div class="nebula-section-header" style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;">
-          <h3 class="nebula-section-title" style="margin:0;">{{ _('Latest VODs') }}</h3>
+          <h2 class="nebula-section-title" style="margin:0;">{{ _('Latest VODs') }}</h2>
           {% if vod_total_pages is defined and vod_total_pages > 1 %}
-          <div class="ns-pagination-inline" style="display:flex; align-items:center; gap:8px; font-size:12px; color:#A2AEC8;">
+          <div class="ns-pagination-inline" style="display:flex; align-items:center; gap:8px; font-size:12px; color:var(--nebula-text-secondary);">
             <span>{{ _('Page <strong>%(page)s</strong> / <strong>%(pages)s</strong> (%(count)s VODs)', page=vod_page, pages=vod_total_pages, count=vod_total_count) }}</span>
             {% if vod_page > 1 %}
             <a href="{{ url_for('index', page=vod_page-1) }}" class="ns-page-btn" style="padding:4px 10px; min-height:28px; height:28px;">&lsaquo; {{ _('Back') }}</a>
@@ -105,9 +105,9 @@ <h3 class="nebula-section-title" style="margin:0;">{{ _('Latest VODs') }}</h3>
           <a href="{{ url_for('vod_view', streamer=vod.streamer_name, filename=vod.name) }}" class="nebula-vod-card">
             <div class="nebula-vod-thumb-box">
               {% if vod.thumb_url %}
-              <img src="{{ vod.thumb_url }}" alt="{{ vod.title or vod.name }}" class="nebula-vod-thumb-img" loading="lazy" decoding="async">
+              <img src="{{ vod.thumb_url }}" alt="" class="nebula-vod-thumb-img" {% if loop.index <= 2 %}{% if loop.first %}fetchpriority="high" {% endif %}loading="eager"{% else %}loading="lazy" decoding="async"{% endif %}>
               {% else %}
-              <div style="width:100%; height:100%; background: linear-gradient(135deg, #111A2B 0%, #151F33 100%); display:flex; align-items:center; justify-content:center; color:#A2AEC8; font-weight:700; font-size:16px;">{{ vod.streamer_name }}</div>
+              <div style="width:100%; height:100%; background: linear-gradient(135deg, var(--nebula-bg-surface) 0%, var(--nebula-bg-card) 100%); display:flex; align-items:center; justify-content:center; color:var(--nebula-text-secondary); font-weight:700; font-size:16px;">{{ vod.streamer_name }}</div>
               {% endif %}
               <span class="nebula-vod-streamer-badge">{{ vod.streamer_name }}</span>
               {% if vod.duration_str %}
@@ -116,13 +116,13 @@ <h3 class="nebula-section-title" style="margin:0;">{{ _('Latest VODs') }}</h3>
               {% if not is_mobile %}
               <div class="nebula-vod-play-overlay">
                 <div class="nebula-vod-play-circle">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+                  <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
                 </div>
               </div>
               {% endif %}
             </div>
             <div class="nebula-vod-body">
-              <h4 class="nebula-vod-title">{{ vod.title or vod.name }}</h4>
+              <h3 class="nebula-vod-title">{{ vod.title or vod.name }}</h3>
               <div class="nebula-vod-footer">
                 <span>{{ vod.category or 'VOD' }}</span>
                 <span>{{ vod.date_str or '' }}</span>
@@ -130,7 +130,10 @@ <h4 class="nebula-vod-title">{{ vod.title or vod.name }}</h4>
             </div>
           </a>
           {% else %}
-          <div style="grid-column: 1/-1; padding: 32px; text-align: center; color: var(--nebula-text-muted); background: var(--nebula-bg-surface); border-radius: 12px; border: 1px dashed var(--nebula-border);">{{ _('No VODs available in the archive') }}</div>
+          <div style="grid-column: 1/-1; padding: 32px; text-align: center; color: var(--nebula-text-muted); background: var(--nebula-bg-surface); border-radius: 12px; border: 1px dashed var(--nebula-border);">
+            <p style="margin: 0 0 8px;">{{ _('No VODs yet. Recordings appear here automatically as soon as a monitored channel goes live.') }}</p>
+            {% if session.user_role == 'admin' %}<a href="{{ url_for('channels_view') }}" style="color: var(--nebula-accent-text); font-weight: 600;">{{ _('Add a channel to record') }}</a>{% endif %}
+          </div>
           {% endfor %}
         </div>
         {% if vod_total_pages is defined and vod_total_pages > 1 %}
@@ -163,7 +166,7 @@ <h4 class="nebula-vod-title">{{ vod.title or vod.name }}</h4>
       <div class="nebula-side-widget">
         <div class="nebula-widget-head" style="display:flex; align-items:center; justify-content:space-between; gap:8px;">
           <h3>{{ _('Channels') }}</h3>
-          <a href="{{ url_for('channels_view') }}" style="font-size:11px; color:#69C9FF; text-decoration:none; font-weight:600;">{{ _('Manage streamers') }}</a>
+          <a href="{{ url_for('channels_view') }}" style="font-size:12px; color:var(--nebula-accent-cyan); text-decoration:none; font-weight:600;">{{ _('Manage streamers') }}</a>
         </div>
         <div class="nebula-category-list ns-compact-streamer-list">
           {% for s in streamers[:6] %}
@@ -212,7 +215,7 @@ <h3>{{ _('New clips') }}</h3>
           {% for clip in recent_clips %}
           <a href="{{ url_for('clip_view', streamer=clip.streamer_name, filename=clip.name) }}" class="nebula-category-item" style="display:flex; flex-direction:column; align-items:flex-start; gap:4px;">
             <div style="font-weight:600; color:#FFF; font-size:12px;">{{ clip.title or clip.name }}</div>
-            <div style="display:flex; justify-content:space-between; width:100%; font-size:11px; color:#A2AEC8;">
+            <div style="display:flex; justify-content:space-between; width:100%; font-size:12px; color:var(--nebula-text-secondary);">
               <span>{{ clip.streamer_name }}</span>
               <span style="font-family:var(--ns-font-mono);">{{ clip.duration_str }}</span>
             </div>
@@ -233,11 +236,11 @@ <h3>{{ _('System telemetry') }}</h3>
             <span class="ns-telemetry-stat">{{ _('Storage: <strong>%(pct)s%%</strong>', pct=storage.pct|int) }}</span>
             <span class="ns-telemetry-stat">{{ _('<strong>%(free)s</strong> free', free=storage.free_str) }}</span>
           </div>
-          <div class="ns-meter-track" role="progressbar" aria-valuenow="{{ storage.pct|int }}" aria-valuemin="0" aria-valuemax="100">
+          <div class="ns-meter-track" role="progressbar" aria-label="{{ _('Storage usage') }}" aria-valuenow="{{ storage.pct|int }}" aria-valuemin="0" aria-valuemax="100">
             <div id="bar-disk" class="ns-meter-fill" style="width: {{ storage.pct|int }}%;"></div>
           </div>
         </div>
-        <div style="font-size:11px; color:var(--nebula-text-muted);">
+        <div style="font-size:12px; color:var(--nebula-text-muted);">
           {{ _('Archive: <strong>%(channels)s</strong> channels • <strong>%(vods)s</strong> VODs', channels=streamers|length, vods=dashboard.vod_count) }}
         </div>
       </div>
@@ -251,8 +254,8 @@ <h3>{{ _('Twitch live stream') }}</h3>
         </div>
         <form action="/live/watch" method="post" style="display:flex; gap:8px; margin-top:8px;">
           <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-          <input type="text" name="channel" placeholder="{{ _('Twitch channel name...') }}" required style="flex:1; min-width:0; padding:7px 10px; background:rgba(11,18,32,0.8); border:1px solid #26344F; border-radius:6px; color:#FFF; font-size:12px;">
-          <button type="submit" style="padding:7px 12px; font-size:12px; font-weight:600; background:var(--nebula-accent, #4D63FF); color:#FFF; border:none; border-radius:6px; cursor:pointer; flex-shrink:0;">{{ _('Watch') }}</button>
+          <input type="text" name="channel" placeholder="{{ _('Twitch channel name…') }}" aria-label="{{ _('Twitch channel name') }}" required style="flex:1; min-width:0; padding:7px 10px; background:rgba(11,18,32,0.8); border:1px solid var(--nebula-field-edge); border-radius:6px; color:#FFF; font-size:13px;">
+          <button type="submit" style="padding:7px 12px; font-size:13px; font-weight:600; background:var(--nebula-accent-primary); color:#FFF; border:none; border-radius:6px; cursor:pointer; flex-shrink:0;">{{ _('Watch') }}</button>
         </form>
       </div>
       {% endif %}
diff --git a/WEBUI/templates/live.html b/WEBUI/templates/live.html
index 54251e2..bd2998b 100644
--- a/WEBUI/templates/live.html
+++ b/WEBUI/templates/live.html
@@ -4,8 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>LIVE {{ streamer }}</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='style.css', v=ASSET_VERSION) }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/tube_design_system.css', v=ASSET_VERSION) }}">
+    {% include 'components/styles.html' %}
   </head>
   <body class="page-live {{ theme_class }} ns-platform">
 
@@ -27,7 +26,7 @@ <h1 class="page-title">{{ streamer }}</h1>
     <div class="content">
       <div class="main-col">
         <div style="flex-shrink:0;">
-            <div class="note" id="liveNote" style="display: {% if ready %}none{% else %}block{% endif %};">{{ _('Live stream is currently unavailable. Searching for stream...') }}</div>
+            <div class="note" id="liveNote" style="display: {% if ready %}none{% else %}block{% endif %};">{{ _('Live stream is currently unavailable. Searching for stream…') }}</div>
         </div>
         
         <div class="player-wrapper" style="position: relative;">
@@ -48,7 +47,7 @@ <h1 class="page-title">{{ streamer }}</h1>
           ></video>
           
           <button id="unmuteOverlay" class="btn-primary" style="display:none; position:absolute; top:20px; right:20px; z-index:10; background:rgba(255,82,82,0.9); padding:8px 16px; border-radius:4px; font-weight:bold; box-shadow: 0 4px 6px rgba(0,0,0,0.3);">
-            &#128263; {{ _('Unmute') }}
+            <span aria-hidden="true">&#128263;</span> {{ _('Unmute') }}
           </button>
         </div>
         
@@ -56,7 +55,7 @@ <h1 class="page-title">{{ streamer }}</h1>
           <div style="display:flex; align-items:center; gap:16px; flex-wrap:wrap;">
             <div style="display:flex; align-items:center; gap:12px;">
                <div style="display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted);">
-                 <span>&#128101;</span>
+                 <span aria-hidden="true">&#128101;</span>
                  <span id="viewerCount" style="color: var(--accent-2); font-weight: 600;">-</span> {{ _('viewers') }}
                </div>
             </div>
@@ -85,9 +84,9 @@ <h1 class="page-title">{{ streamer }}</h1>
             </form>
             
             <div style="text-align:right; margin-left:auto; display:flex; flex-direction:column; justify-content:center;">
-              <div id="hlsStatus" style="color:var(--muted); font-size:11px; font-family:monospace;">HLS: init...</div>
+              <div id="hlsStatus" style="color:var(--muted); font-size:12px; font-family:monospace;">HLS: init...</div>
               {% if ready %}
-                <div style="font-size:9px; color:#2ecc71; font-weight:600; letter-spacing:0.5px;">● LIVE</div>
+                <div style="font-size:12px; color:#2ecc71; font-weight:600; letter-spacing:0.5px;">● LIVE</div>
               {% endif %}
             </div>
           </div>
@@ -178,7 +177,7 @@ <h2 id="vodClipDialogTitle">{{ _('Create clip') }}</h2>
       <script src="{{ url_for('static', filename='media_session.js', v=ASSET_VERSION) }}"></script>
       <script src="{{ url_for('static', filename='chat_emotes.js', v=ASSET_VERSION) }}"></script>
       <script src="{{ url_for('static', filename='live_clip_overlay.js', v=ASSET_VERSION) }}"></script>
-      <script>
+      <script nonce="{{ csp_nonce() }}">
         const video = document.getElementById('player');
         window.StreamVaultMediaSession && window.StreamVaultMediaSession.attach(video, {live: true});
         window.CLIP_SETTINGS = {{ clip_settings|tojson }};
@@ -352,7 +351,7 @@ <h2 id="vodClipDialogTitle">{{ _('Create clip') }}</h2>
                         }
                     }
                     if(liveNote) liveNote.style.display = 'block';
-                    setStatus({{ _('Searching for stream...')|tojson }});
+                    setStatus({{ _('Searching for stream…')|tojson }});
                     return;
                 }
                 const probe = src + (src.indexOf('?') >= 0 ? '&' : '?') + 't=' + Date.now();
@@ -362,7 +361,7 @@ <h2 id="vodClipDialogTitle">{{ _('Create clip') }}</h2>
                     initPlayer();
                 } else {
                     if(liveNote) liveNote.style.display = 'block';
-                    setStatus({{ _('Searching for stream...')|tojson }});
+                    setStatus({{ _('Searching for stream…')|tojson }});
                 }
             } catch(e) {
                 if(liveNote) liveNote.style.display = 'block';
@@ -373,7 +372,7 @@ <h2 id="vodClipDialogTitle">{{ _('Create clip') }}</h2>
         checkStream();
 
         video.addEventListener('playing', () => setStatus('Live'));
-        video.addEventListener('waiting', () => setStatus({{ _('Buffering...')|tojson }}));
+        video.addEventListener('waiting', () => setStatus({{ _('Buffering…')|tojson }}));
         const chatList = document.getElementById('chatList');
         const chatToggle = document.getElementById('chatAutoToggle');
         let autoScroll = true;
diff --git a/WEBUI/templates/live_obs.html b/WEBUI/templates/live_obs.html
index da51918..df86662 100644
--- a/WEBUI/templates/live_obs.html
+++ b/WEBUI/templates/live_obs.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>{{ _('LIVE') }}</title>
+    <title>{{ _('Live') }}</title>
     <!-- StreamVault mobile app -->
     <style>
       html, body {
@@ -26,7 +26,7 @@
   <body>
     <video id="player" autoplay playsinline></video>
     <script src="https://cdn.jsdelivr.net/npm/hls.js@1" referrerpolicy="no-referrer"></script>
-    <script>
+    <script nonce="{{ csp_nonce() }}">
       const video = document.getElementById("player");
       const src = {{ playlist_url|tojson }};
       let hls = null;
diff --git a/WEBUI/templates/login.html b/WEBUI/templates/login.html
index 28c337b..c95434b 100644
--- a/WEBUI/templates/login.html
+++ b/WEBUI/templates/login.html
@@ -5,10 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{{ _('Sign in') }} &middot; StreamVault</title>
     <link rel="stylesheet" href="{{ UI_FONTS_HREF }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='style.css', v=ASSET_VERSION) }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/tube_design_system.css', v=ASSET_VERSION) }}">
+    {% include 'components/styles.html' %}
   </head>
-  <body class="page-login {{ theme_class }} ns-platform" style="background:#070B14; margin:0; padding:0; overflow-x:hidden;">
+  <body class="page-login {{ theme_class }} ns-platform" style="background:var(--nebula-bg-root); margin:0; padding:0; overflow-x:hidden;">
     <main class="nebula-login-wrapper">
       <div class="nebula-login-modal">
         <!-- Logo Glyph -->
@@ -23,23 +22,23 @@ <h1 class="nebula-login-h1">StreamVault</h1>
         <form method="post" class="login-form" id="login-form" style="display:flex; flex-direction:column; gap:12px; text-align:left; margin-top:20px;">
           <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
           <div>
-            <label for="username" style="display:block; font-size:12px; font-weight:600; color:#A2AEC8; margin-bottom:4px;">{{ _('Username') }}</label>
-            <input id="username" name="username" placeholder="{{ _('Username') }}" autocomplete="username" required style="width:100%; box-sizing:border-box; padding:10px 14px; background:rgba(11,18,32,0.8); border:1px solid #26344F; border-radius:8px; color:#FFF; font-size:14px;">
+            <label for="username" style="display:block; font-size:12px; font-weight:600; color:var(--nebula-text-secondary); margin-bottom:4px;">{{ _('Username') }}</label>
+            <input id="username" name="username" placeholder="{{ _('Username') }}" autocomplete="username" required style="width:100%; box-sizing:border-box; padding:10px 14px; background:rgba(11,18,32,0.8); border:1px solid var(--nebula-border); border-radius:8px; color:#FFF; font-size:14px;">
           </div>
           <div>
-            <label for="password" style="display:block; font-size:12px; font-weight:600; color:#A2AEC8; margin-bottom:4px;">{{ _('Password') }}</label>
-            <input id="password" name="password" type="password" placeholder="{{ _('Password') }}" autocomplete="current-password" required style="width:100%; box-sizing:border-box; padding:10px 14px; background:rgba(11,18,32,0.8); border:1px solid #26344F; border-radius:8px; color:#FFF; font-size:14px;">
+            <label for="password" style="display:block; font-size:12px; font-weight:600; color:var(--nebula-text-secondary); margin-bottom:4px;">{{ _('Password') }}</label>
+            <input id="password" name="password" type="password" placeholder="{{ _('Password') }}" autocomplete="current-password" required style="width:100%; box-sizing:border-box; padding:10px 14px; background:rgba(11,18,32,0.8); border:1px solid var(--nebula-border); border-radius:8px; color:#FFF; font-size:14px;">
           </div>
           <button type="submit" id="login-submit" style="width:100%; padding:12px; margin-top:6px; font-size:14px; font-weight:700;">{{ _('Sign in') }}</button>
         </form>
 
         {% if error %}
-        <div class="error" style="margin-top:16px; padding:10px 14px; background:rgba(240,68,88,0.15); border:1px solid rgba(240,68,88,0.4); border-radius:8px; color:#F04458; font-size:13px;">
+        <div class="error" role="alert" style="margin-top:16px; padding:10px 14px; background:rgba(240,68,88,0.15); border:1px solid rgba(240,68,88,0.4); border-radius:8px; color:#F2667A; font-size:13px;">
           {{ error }}
         </div>
         {% endif %}
 
-        <div class="login-register-hint registrierung-info" style="font-size:12px; color:#A2AEC8; margin-top:16px; margin-bottom:12px; text-align:center;">
+        <div class="login-register-hint registrierung-info" style="font-size:12px; color:var(--nebula-text-secondary); margin-top:16px; margin-bottom:12px; text-align:center;">
           {{ _('No account yet? Accounts are issued by the administrators of this instance.') }}
         </div>
         <div class="nebula-login-footer-tag">
@@ -51,7 +50,7 @@ <h1 class="nebula-login-h1">StreamVault</h1>
       </div>
     </main>
 
-    <script>
+    <script nonce="{{ csp_nonce() }}">
       (function () {
         var form = document.getElementById("login-form");
         var btn = document.getElementById("login-submit");
diff --git a/WEBUI/templates/maintenance.html b/WEBUI/templates/maintenance.html
index adb3a86..6e49068 100644
--- a/WEBUI/templates/maintenance.html
+++ b/WEBUI/templates/maintenance.html
@@ -6,8 +6,7 @@
     <title>StreamVault · {{ _('Maintenance') }}</title>
     <meta name="robots" content="noindex,nofollow">
     <link rel="stylesheet" href="{{ UI_FONTS_HREF }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='style.css', v=ASSET_VERSION) }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/tube_design_system.css', v=ASSET_VERSION) }}">
+    {% include 'components/styles.html' %}
   </head>
   <body class="page-login page-maintenance {{ theme_class }} ns-platform">
     <div class="inferno-stage" aria-hidden="true">
diff --git a/WEBUI/templates/mobile_index.html b/WEBUI/templates/mobile_index.html
index fda5599..83757bf 100644
--- a/WEBUI/templates/mobile_index.html
+++ b/WEBUI/templates/mobile_index.html
@@ -2,15 +2,14 @@
 <html lang="{{ html_lang }}">
 <head>
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, maximum-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <title>StreamVault · Mobile</title>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap">
-  <link rel="stylesheet" href="/static/style.css?v={{ asset_version }}">
-  <link rel="stylesheet" href="/static/css/tube_design_system.css?v={{ asset_version }}">
+  {% include 'components/styles.html' %}
   <style>
     body {
-      background: var(--nebula-bg-base, #070B14);
-      color: var(--nebula-text-primary, #F3F5FC);
+      background: var(--nebula-bg-base);
+      color: var(--nebula-text-primary);
       font-family: var(--ns-font-sans);
       margin: 0;
       padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
@@ -30,9 +29,10 @@
 
 
 
-<main class="mobile-shell">
+<main class="mobile-shell" id="main-content">
+  <h1 class="sr-only">{{ _('Dashboard') }}</h1>
   {% if channels_msg %}
-  <div style="background: rgba(77, 99, 255, 0.12); border: 1px solid rgba(77, 99, 255, 0.35); border-radius: 10px; padding: 10px 14px; font-size: 13px; color: #C5D2F6; margin-bottom: 18px;">
+  <div role="status" style="background: rgba(77, 99, 255, 0.12); border: 1px solid rgba(77, 99, 255, 0.35); border-radius: 10px; padding: 10px 14px; font-size: 13px; color: #C5D2F6; margin-bottom: 18px;">
     {{ channels_msg }}
   </div>
   {% endif %}
@@ -40,26 +40,26 @@
   <!-- 1. Mobile Featured Hero -->
   {% if hero_item and hero_item.is_live %}
   <section style="margin-bottom: 24px;">
-    <div style="position: relative; border-radius: 16px; overflow: hidden; background: #111A2B; border: 1px solid var(--nebula-border, #26344F); box-shadow: 0 8px 24px rgba(0,0,0,0.5);">
-      <div style="position: relative; aspect-ratio: 16 / 9; width: 100%; background: #070B14; overflow: hidden;">
+    <div style="position: relative; border-radius: 16px; overflow: hidden; background: var(--nebula-bg-surface); border: 1px solid var(--nebula-border); box-shadow: 0 8px 24px rgba(0,0,0,0.5);">
+      <div style="position: relative; aspect-ratio: 16 / 9; width: 100%; background: var(--nebula-bg-root); overflow: hidden;">
         {% if hero_item.thumbnail or hero_item.thumbnail_url %}
         <img src="{{ hero_item.thumbnail or hero_item.thumbnail_url }}" decoding="async" alt="{{ hero_item.title }}" style="width: 100%; height: 100%; object-fit: cover;">
         {% endif %}
-        <div style="position: absolute; inset: 0; background: linear-gradient(to top, #111A2B 0%, rgba(17, 26, 43, 0.4) 60%, transparent 100%);"></div>
+        <div style="position: absolute; inset: 0; background: linear-gradient(to top, var(--nebula-bg-surface) 0%, rgba(17, 26, 43, 0.4) 60%, transparent 100%);"></div>
         {% if hero_item.is_live %}
-        <span style="position: absolute; top: 12px; left: 12px; background: #F04458; color: #FFF; font-size: 11px; font-weight: 800; padding: 4px 8px; border-radius: 6px; box-shadow: 0 0 10px rgba(240, 68, 88, 0.6); display: inline-flex; align-items: center; gap: 5px;">
-          <span style="width: 6px; height: 6px; border-radius: 50%; background: #FFF;"></span> {{ _('LIVE') }}
+        <span style="position: absolute; top: 12px; left: 12px; background: var(--nebula-status-live); color: #FFF; font-size: 12px; font-weight: 800; padding: 4px 8px; border-radius: 6px; box-shadow: 0 0 10px rgba(240, 68, 88, 0.6); display: inline-flex; align-items: center; gap: 5px;">
+          <span style="width: 6px; height: 6px; border-radius: 50%; background: #FFF;"></span> {{ _('Live') }}
         </span>
         {% endif %}
       </div>
-      <div style="padding: 14px 16px 16px 16px; background: #111A2B;">
+      <div style="padding: 14px 16px 16px 16px; background: var(--nebula-bg-surface);">
         <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
           <span style="font-weight: 700; color: #FFF; font-size: 14px;">{{ hero_item.streamer }}</span>
-          <span style="padding: 2px 8px; background: rgba(187, 120, 255, 0.15); color: #BB78FF; border-radius: 4px; font-size: 11px;">{{ hero_item.category }}</span>
+          <span style="padding: 2px 8px; background: rgba(187, 120, 255, 0.15); color: var(--nebula-accent-highlight); border-radius: 4px; font-size: 12px;">{{ hero_item.category }}</span>
         </div>
-        <h2 style="font-size: 15px; font-weight: 600; line-height: 1.35; color: #F3F5FC; margin: 0 0 14px 0;">{{ hero_item.title }}</h2>
+        <h2 style="font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--nebula-text-main); margin: 0 0 14px 0;">{{ hero_item.title }}</h2>
         <a href="{{ hero_item.watch_url }}" class="ns-btn ns-btn-primary" style="display: block; text-align: center; padding: 10px 0; font-size: 14px; font-weight: 700; box-sizing: border-box;">
-          {% if hero_item.is_live %}{{ _('WATCH LIVE') }}{% else %}{{ _('Watch now') }}{% endif %}
+          {% if hero_item.is_live %}{{ _('Watch live') }}{% else %}{{ _('Watch now') }}{% endif %}
         </a>
       </div>
     </div>
@@ -69,33 +69,33 @@ <h2 style="font-size: 15px; font-weight: 600; line-height: 1.35; color: #F3F5FC;
   <!-- 3. Streamer List -->
   <section style="margin-bottom: 28px;">
     <div style="font-size: 15px; font-weight: 700; color: #FFF; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between;">
-      <span>{% if can_access_vods %}{{ _('My streamers') }}{% else %}{{ _('Live now') }}{% endif %}</span>
-      <span style="font-size: 12px; color: var(--nebula-text-muted, #75839D);">{{ ngettext('%(num)d channel', '%(num)d channels', streamers|length) }}</span>
+      <h2 style="font-size: inherit; font-weight: inherit; margin: 0;">{% if can_access_vods %}{{ _('My streamers') }}{% else %}{{ _('Live now') }}{% endif %}</h2>
+      <span style="font-size: 12px; color: var(--nebula-text-muted);">{{ ngettext('%(num)d channel', '%(num)d channels', streamers|length) }}</span>
     </div>
 
     <div style="display: flex; flex-direction: column; gap: 10px;">
       {% for s in streamers %}
       {% if can_access_vods or s.twitch_live or s.live or s.online %}
-      <div style="background: var(--nebula-bg-surface, #111A2B); border: 1px solid var(--nebula-border, #26344F); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;">
+      <div style="background: var(--nebula-bg-surface); border: 1px solid var(--nebula-border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;">
         <div style="display: flex; align-items: center; justify-content: space-between; gap: 8px;">
           <a href="{% if can_access_vods %}{{ url_for('streamer_view', streamer=s.name) }}{% else %}{{ url_for('twitch_watch', channel=(s.twitch_login or s.name)) }}{% endif %}" style="display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; flex: 1; min-width: 0;">
             <div style="position: relative; flex-shrink: 0;">
               {% if s.avatar_url %}
-              <img src="{{ s.avatar_url }}" loading="lazy" decoding="async" alt="{{ s.name }}" style="width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 1.5px solid #3B4E73;">
+              <img src="{{ s.avatar_url }}" loading="lazy" decoding="async" alt="{{ s.name }}" style="width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--nebula-border-bright);">
               {% else %}
-              <div style="width: 42px; height: 42px; border-radius: 50%; background: #151F33; border: 1.5px solid #3B4E73; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #FFF; font-size: 15px;">
+              <div style="width: 42px; height: 42px; border-radius: 50%; background: var(--nebula-bg-card); border: 1.5px solid var(--nebula-border-bright); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #FFF; font-size: 15px;">
                 {{ s.name[:1]|upper }}
               </div>
               {% endif %}
               {% if s.twitch_live or s.online %}
-              <span style="position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; border-radius: 50%; background: #F04458; border: 2px solid #070B14; box-shadow: 0 0 6px #F04458;"></span>
+              <span style="position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--nebula-status-live); border: 2px solid var(--nebula-bg-root); box-shadow: 0 0 6px var(--nebula-status-live);"></span>
               {% endif %}
             </div>
             <div style="min-width: 0; flex: 1;">
               <div style="font-weight: 700; font-size: 15px; color: #FFF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ s.display_name or s.name }}</div>
-              <div style="font-size: 12px; color: var(--nebula-text-secondary, #A2AEC8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+              <div style="font-size: 12px; color: var(--nebula-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                 {% if s.twitch_live %}
-                <span style="color: #F04458; font-weight: 600;">{{ _('Live on Twitch') }}</span>
+                <span style="color: var(--nebula-status-live); font-weight: 600;">{{ _('Live on Twitch') }}</span>
                 {% elif can_access_vods %}
                 <span>{{ s.count }} VODs</span>
                 {% else %}
@@ -106,12 +106,12 @@ <h2 style="font-size: 15px; font-weight: 600; line-height: 1.35; color: #F3F5FC;
           </a>
 
           {% if s.twitch_live or s.online %}
-          <a href="{{ url_for('twitch_watch', channel=(s.twitch_login or s.name)) }}" class="ns-btn ns-btn-primary" style="padding: 7px 12px; font-size: 11px; font-weight: 700; white-space: nowrap; flex-shrink: 0;">
-            {{ _('WATCH LIVE') }}
+          <a href="{{ url_for('twitch_watch', channel=(s.twitch_login or s.name)) }}" class="ns-btn ns-btn-primary" style="padding: 7px 12px; font-size: 12px; font-weight: 700; white-space: nowrap; flex-shrink: 0;">
+            {{ _('Watch live') }}
           </a>
           {% elif can_access_vods %}
-          <a href="{{ url_for('streamer_view', streamer=s.name) }}" style="color: #75839D; padding: 8px; flex-shrink: 0;">
-            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
+          <a href="{{ url_for('streamer_view', streamer=s.name) }}" aria-label="{{ _('Open streamer %(name)s', name=s.name) }}" style="color: var(--nebula-text-muted); padding: 12px; flex-shrink: 0;">
+            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
           </a>
           {% endif %}
         </div>
@@ -125,28 +125,28 @@ <h2 style="font-size: 15px; font-weight: 600; line-height: 1.35; color: #F3F5FC;
   {% if can_access_vods and recent_vods %}
   <section style="margin-bottom: 24px;">
     <div style="font-size: 15px; font-weight: 700; color: #FFF; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px;">
-      <span>{{ _('Latest VODs') }}</span>
+      <h2 style="font-size: inherit; font-weight: inherit; margin: 0;">{{ _('Latest VODs') }}</h2>
       {% if vod_total_pages is defined and vod_total_pages > 1 %}
-      <span data-vod-page-counter style="font-size: 12px; font-weight: 500; color: #A2AEC8;">{{ _('Page %(page)s / %(total)s', page=vod_page, total=vod_total_pages) }}</span>
+      <span data-vod-page-counter style="font-size: 12px; font-weight: 500; color: var(--nebula-text-secondary);">{{ _('Page %(page)s / %(total)s', page=vod_page, total=vod_total_pages) }}</span>
       {% endif %}
     </div>
     <div id="mobileVodList" data-vod-page="{{ vod_page }}" data-top-vod="{{ recent_vods[0].name if recent_vods else '' }}" style="display: flex; flex-direction: column; gap: 14px;">
       {% for vod in recent_vods %}
-      <a href="{{ url_for('vod_view', streamer=vod.streamer_name, filename=vod.name) }}" style="display: flex; gap: 12px; background: var(--nebula-bg-surface, #111A2B); border: 1px solid var(--nebula-border, #26344F); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; padding: 10px; box-sizing: border-box;">
-        <div style="position: relative; width: 120px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #0B1220; flex-shrink: 0;">
+      <a href="{{ url_for('vod_view', streamer=vod.streamer_name, filename=vod.name) }}" style="display: flex; gap: 12px; background: var(--nebula-bg-surface); border: 1px solid var(--nebula-border); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; padding: 10px; box-sizing: border-box;">
+        <div style="position: relative; width: 120px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--nebula-bg-deep); flex-shrink: 0;">
           {% if vod.thumb_url %}
-          <img src="{{ vod.thumb_url }}" loading="lazy" decoding="async" alt="{{ vod.title or vod.name }}" style="width: 100%; height: 100%; object-fit: cover;">
+          <img src="{{ vod.thumb_url }}" {% if loop.index <= 3 %}{% if loop.first %}fetchpriority="high" {% endif %}loading="eager"{% else %}loading="lazy" decoding="async"{% endif %} alt="{{ vod.title or vod.name }}" style="width: 100%; height: 100%; object-fit: cover;">
           {% else %}
-          <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #A2AEC8; font-weight: 700;">VOD</div>
+          <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--nebula-text-secondary); font-weight: 700;">VOD</div>
           {% endif %}
           {% if vod.duration_str %}
-          <span style="position: absolute; bottom: 4px; right: 4px; background: rgba(0,0,0,0.85); color: #FFF; font-size: 10px; padding: 1px 4px; border-radius: 3px; font-family: var(--ns-font-mono);">{{ vod.duration_str }}</span>
+          <span style="position: absolute; bottom: 4px; right: 4px; background: rgba(0,0,0,0.85); color: #FFF; font-size: 12px; padding: 1px 4px; border-radius: 3px; font-family: var(--ns-font-mono);">{{ vod.duration_str }}</span>
           {% endif %}
         </div>
         <div style="flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center;">
-          <h4 style="font-size: 13px; font-weight: 600; color: #FFF; margin: 0 0 4px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ vod.title or vod.name }}</h4>
-          <div style="font-size: 11px; color: #BB78FF; margin-bottom: 2px;">{{ vod.streamer_name }}</div>
-          <div style="font-size: 10px; color: #75839D;">{{ vod.date_str or '' }}</div>
+          <h3 style="font-size: 13px; font-weight: 600; color: #FFF; margin: 0 0 4px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ vod.title or vod.name }}</h3>
+          <div style="font-size: 12px; color: var(--nebula-accent-highlight); margin-bottom: 2px;">{{ vod.streamer_name }}</div>
+          <div style="font-size: 12px; color: var(--nebula-text-muted);">{{ vod.date_str or '' }}</div>
         </div>
       </a>
       {% endfor %}
@@ -174,21 +174,29 @@ <h4 style="font-size: 13px; font-weight: 600; color: #FFF; margin: 0 0 4px 0; ov
 </main>
 
 <!-- NEBULA Mobile Bottom Navigation -->
-<div class="mobile-global-nav" style="border-top: 1px solid #26344F; background: rgba(7, 11, 20, 0.97); transform: translateZ(0);">
-  <a href="{{ url_for('index') }}" class="active" style="color: #4D63FF;">
-    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<div class="mobile-global-nav" role="navigation" aria-label="{{ _('Main navigation') }}" style="border-top: 1px solid var(--nebula-border); background: rgba(7, 11, 20, 0.97); transform: translateZ(0);">
+  <a href="{{ url_for('index') }}" class="active" aria-current="page">
+    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
     <span>{{ _('Home') }}</span>
   </a>
-  <a href="{{ url_for('twitch_live_hub') }}" style="color: #75839D;">
-    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="2"/><path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"/></svg>
+  <a href="{{ url_for('twitch_live_hub') }}" style="color: var(--nebula-text-muted);">
+    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="2"/><path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"/></svg>
     <span>{{ _('Live') }}</span>
   </a>
   {% if session.user_role == 'admin' %}
-  <a href="{{ url_for('channels_view') }}" style="color: #75839D;">
-    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+  <a href="{{ url_for('channels_view') }}" style="color: var(--nebula-text-muted);">
+    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
     <span>{{ _('Streamer') }}</span>
   </a>
   {% endif %}
+  <form method="post" action="{{ url_for('logout') }}" class="sv-bottom-nav__logout">
+    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+    <button type="submit">
+      <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/></svg>
+      <span>{{ _('Log out') }}</span>
+    </button>
+  </form>
+  {% with logout_all_variant = 'nav' %}{% include 'components/logout_everywhere.html' %}{% endwith %}
 </div>
 
 {% include 'components/js_i18n.html' %}
diff --git a/WEBUI/templates/mobile_player.html b/WEBUI/templates/mobile_player.html
index 91ed6cd..aaf4c3d 100644
--- a/WEBUI/templates/mobile_player.html
+++ b/WEBUI/templates/mobile_player.html
@@ -4,29 +4,28 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
 <title>{{ filename }}</title>
-<link rel="stylesheet" href="{{ url_for('static', filename='style.css', v=ASSET_VERSION) }}">
-<link rel="stylesheet" href="{{ url_for('static', filename='css/tube_design_system.css', v=ASSET_VERSION) }}">
+{% include 'components/styles.html' %}
 </head>
 <body class="page-mobile-player landscape-chat-open {{ theme_class }} ns-platform">
   <div class="video-container">
     <div class="overlay-header">
-      <a href="{{ back_url }}" class="back-btn" aria-label="{{ _('Back') }}"><svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg></a>
+      <a href="{{ back_url }}" class="back-btn" aria-label="{{ _('Back') }}"><svg aria-hidden="true" viewBox="0 0 24 24" width="28" height="28" fill="currentColor"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg></a>
       <div class="overlay-header-meta">
         <span class="overlay-stream-name">{{ display_name or streamer }}</span>
       </div>
       <div class="overlay-header-actions">
         <button type="button" class="mobile-landscape-chat-toggle" id="landscapeChatToggle" aria-label="{{ _('Expand chat') }}" aria-pressed="false" title="{{ _('Expand chat') }}">
           <span class="landscape-chat-toggle-closed-content">
-            <svg class="landscape-chat-pill-icon" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <svg class="landscape-chat-pill-icon" aria-hidden="true" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
             </svg>
-            <svg class="landscape-chat-pill-arrow" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <svg class="landscape-chat-pill-arrow" aria-hidden="true" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
               <polyline points="15 18 9 12 15 6"></polyline>
             </svg>
             <span class="landscape-chat-pill-text">{{ _('Chat') }}</span>
           </span>
           <span class="landscape-chat-toggle-open-content">
-            <svg class="landscape-chat-collapse-icon" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <svg class="landscape-chat-collapse-icon" aria-hidden="true" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
               <polyline points="9 18 15 12 9 6"></polyline>
             </svg>
             <span class="landscape-chat-collapse-text">{{ _('Fullscreen') }}</span>
@@ -68,14 +67,14 @@
     <div class="vod-details-main">
       <div class="vod-title-cluster">
         <a href="{{ back_url or url_for('index') }}" class="mobile-portrait-back-btn" aria-label="{{ _('Back to overview') }}" title="{{ _('Back') }}">
-          <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+          <svg aria-hidden="true" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
             <line x1="19" y1="12" x2="5" y2="12"></line>
             <polyline points="12 19 5 12 12 5"></polyline>
           </svg>
         </a>
         <div class="vod-kicker">
           {% if is_live %}
-          <span class="twitch-live-pill">{{ _('LIVE') }}</span>
+          <span class="twitch-live-pill">{{ _('Live') }}</span>
           {% endif %}
         </div>
         <h1 class="vod-display-title">{{ display_name or streamer }}</h1>
@@ -93,22 +92,22 @@ <h1 class="vod-display-title">{{ display_name or streamer }}</h1>
     </div>
     <div class="vod-file-actions" aria-label="{{ _('Actions') }}">
       <button type="button" class="vod-inline-tool mobile-action-btn" id="livePlayPauseBtn" aria-label="{{ _('Pause playback') }}" title="{{ _('Pause playback') }}">
-        <svg class="icon-pause" viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
+        <svg class="icon-pause" aria-hidden="true" viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
           <rect x="6" y="4" width="4" height="16" rx="1"></rect>
           <rect x="14" y="4" width="4" height="16" rx="1"></rect>
         </svg>
-        <svg class="icon-play" viewBox="0 0 24 24" width="14" height="14" fill="currentColor" style="display:none">
+        <svg class="icon-play" aria-hidden="true" viewBox="0 0 24 24" width="14" height="14" fill="currentColor" style="display:none">
           <polygon points="6 4 20 12 6 20 6 4"></polygon>
         </svg>
         <span class="btn-label">{{ _('Pause') }}</span>
       </button>
 
       <button type="button" class="vod-inline-tool mobile-action-btn" id="liveMuteBtn" aria-label="{{ _('Mute') }}" title="{{ _('Mute') }}">
-        <svg class="icon-unmute" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <svg class="icon-unmute" aria-hidden="true" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
           <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path>
         </svg>
-        <svg class="icon-mute" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none">
+        <svg class="icon-mute" aria-hidden="true" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none">
           <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
           <line x1="23" y1="9" x2="17" y2="15"></line>
           <line x1="17" y1="9" x2="23" y2="15"></line>
@@ -146,7 +145,7 @@ <h1 class="vod-display-title">{{ display_name or streamer }}</h1>
   <script src="{{ url_for('static', filename='vod_seek_hover.js', v=ASSET_VERSION) }}" defer></script>
   <script src="{{ url_for('static', filename='vod_watch_slot.js', v=ASSET_VERSION) }}" defer></script>
   <script src="{{ url_for('static', filename='chat_emotes.js', v=ASSET_VERSION) }}" defer></script>
-  <script>
+  <script nonce="{{ csp_nonce() }}">
     // Tab switching logic: strict display toggling
     (function () {
       const tabBtns = document.querySelectorAll('.chat-tab-row [data-chat-tab]');
@@ -546,6 +545,12 @@ <h1 class="vod-display-title">{{ display_name or streamer }}</h1>
     video.addEventListener('play', () => { updateChat(); });
     video.addEventListener('seeked', () => { updateChat(); });
     
+    function escapeChatText(value) {
+        return String(value == null ? '' : value).replace(/[&<>"']/g, (ch) => ({
+          '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
+        })[ch]);
+    }
+
     function renderMsg(msg) {
         if (!chatList) return;
         if (chatEmpty) chatEmpty.hidden = true;
@@ -554,15 +559,16 @@ <h1 class="vod-display-title">{{ display_name or streamer }}</h1>
         const timestamp = !isLive && Number.isFinite(Number(msg.rel))
           ? `<span class="t">${formatVodTime(msg.rel)}</span>`
           : '';
-        const message = window.StreamVaultChat ? window.StreamVaultChat.renderMessageHtml(msg) : (msg.msg || '');
+        const message = window.StreamVaultChat ? window.StreamVaultChat.renderMessageHtml(msg) : escapeChatText(msg.msg || '');
         if (msg.event) {
           div.innerHTML = `${timestamp}<span class="m">${message}</span>`;
         } else {
-          const user = window.StreamVaultChat ? window.StreamVaultChat.escapeHtml(msg.user || '') : (msg.user || '');
+          const user = window.StreamVaultChat ? window.StreamVaultChat.escapeHtml(msg.user || '') : escapeChatText(msg.user || '');
           const userColor = (window.StreamVaultChat && window.StreamVaultChat.userColor(msg.color)) || '#a970ff';
           const badges = window.StreamVaultChat ? window.StreamVaultChat.renderBadgesHtml(msg) : '';
           const userSuffix = msg.reward ? '' : ':';
-          div.innerHTML = `${timestamp}<span class="chat-badges">${badges}</span><span class="u" style="color:${userColor}">${user}${userSuffix}</span><span class="m">${message}</span>`;
+          div.innerHTML = `${timestamp}<span class="chat-badges">${badges}</span><span class="u">${user}${userSuffix}</span><span class="m">${message}</span>`;
+          div.querySelector('.u').style.color = userColor;
         }
         chatList.appendChild(div);
         
diff --git a/WEBUI/templates/mobile_streamer.html b/WEBUI/templates/mobile_streamer.html
index d37f852..f4e3220 100644
--- a/WEBUI/templates/mobile_streamer.html
+++ b/WEBUI/templates/mobile_streamer.html
@@ -3,26 +3,25 @@
 <head>
   <meta charset="utf-8">
   <title>{{ display_name or streamer }} · StreamVault Mobile</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, viewport-fit=cover">
-  <link rel="stylesheet" href="{{ url_for('static', filename='style.css', v=ASSET_VERSION) }}">
-  <link rel="stylesheet" href="{{ url_for('static', filename='css/tube_design_system.css', v=ASSET_VERSION) }}">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  {% include 'components/styles.html' %}
 </head>
-<body class="mobile-body {{ theme_class }} ns-platform" style="background:#070B14; color:#F3F5FC; padding-bottom:80px; overflow-x:hidden;">
+<body class="mobile-body {{ theme_class }} ns-platform" style="background:var(--nebula-bg-root); color:var(--nebula-text-main); padding-bottom:80px; overflow-x:hidden;">
 
 <!-- Mobile Header -->
-<div class="mobile-header" style="background: rgba(7, 11, 20, 0.95); border-bottom: 1px solid var(--nebula-border, #26344F); padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; backdrop-filter: blur(12px);">
+<div class="mobile-header" style="background: rgba(7, 11, 20, 0.95); border-bottom: 1px solid var(--nebula-border); padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; backdrop-filter: blur(12px);">
   <div style="display: flex; align-items: center; gap: 12px;">
-    <a href="{{ url_for('index') }}" class="mobile-back" aria-label="{{ _('Back to overview') }}" style="color: #A2AEC8; display: flex; align-items: center;">
-      <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
+    <a href="{{ url_for('index') }}" class="mobile-back" aria-label="{{ _('Back to overview') }}" style="color: var(--nebula-text-secondary); display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -11px;">
+      <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
     </a>
     <h1 style="font-size: 17px; font-weight: 700; color: #FFF; margin: 0;">{{ display_name or streamer }}</h1>
   </div>
   {% if twitch_live %}
-  <span class="nebula-live-badge"><span class="nebula-live-dot"></span> {{ _('LIVE') }}</span>
+  <span class="nebula-live-badge"><span class="nebula-live-dot"></span> {{ _('Live') }}</span>
   {% elif online %}
-  <span style="font-size:11px; font-weight:700; padding:3px 8px; border-radius:4px; background:rgba(72,214,162,0.15); color:#48D6A2;">{{ _('ONLINE') }}</span>
+  <span style="font-size:12px; font-weight:700; padding:3px 8px; border-radius:4px; background:rgba(72,214,162,0.15); color:var(--nebula-status-success);">{{ _('Online') }}</span>
   {% else %}
-  <span style="font-size:11px; font-weight:600; padding:3px 8px; border-radius:4px; background:#151F33; color:#75839D;">{{ _('OFFLINE') }}</span>
+  <span style="font-size:12px; font-weight:600; padding:3px 8px; border-radius:4px; background:var(--nebula-bg-card); color:var(--nebula-text-muted);">{{ _('Offline') }}</span>
   {% endif %}
 </div>
 
@@ -31,7 +30,7 @@ <h1 style="font-size: 17px; font-weight: 700; color: #FFF; margin: 0;">{{ displa
   <div class="btn-row" style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;">
     {% if mobile_live_enabled and twitch_login and (twitch_live or online) %}
     <a href="{{ url_for('twitch_watch', channel=twitch_login) }}" class="ns-btn ns-btn-primary" style="padding: 8px 14px; font-size: 13px; font-weight: 700;">
-      {{ _('WATCH LIVE') }}
+      {{ _('Watch live') }}
     </a>
     {% endif %}
     {% if twitch_login %}
@@ -53,18 +52,18 @@ <h1 style="font-size: 17px; font-weight: 700; color: #FFF; margin: 0;">{{ displa
       {% endif %}
     {% endif %}
     {% if session.user_role == 'admin' %}
-    <form method="post" action="{{ url_for('streamer_download_all', streamer=streamer) }}" style="margin:0;">
+    <form method="post" action="{{ url_for('streamer_download_all', streamer=streamer) }}" style="margin:0;" data-confirm="{{ _('Download all VODs of this streamer as one archive? This can take a while for large channels.') }}" data-confirm-ok="{{ _('Download all') }}">
       <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-      <button class="ns-btn ns-btn-secondary" style="padding: 8px 12px; font-size: 13px;" onclick='return confirm({{ _("Download all VODs?")|tojson }})'>{{ _('Download all') }}</button>
+      <button class="ns-btn ns-btn-secondary" style="padding: 8px 12px; font-size: 13px;">{{ _('Download all') }}</button>
     </form>
     {% endif %}
   </div>
 
   <!-- Search & Filter Row -->
-  <form method="get" style="display: flex; gap: 8px; margin-bottom: 16px;">
+  <form method="get" role="search" style="display: flex; gap: 8px; margin-bottom: 16px;">
     <input type="hidden" name="type" value="{{ current_type }}">
-    <input name="q" placeholder="{{ _('Search...') }}" value="{{ q or '' }}" style="flex: 1; padding: 8px 12px; background: #111A2B; border: 1px solid #26344F; border-radius: 8px; color: #FFF; font-size: 13px;">
-    <select name="sort" onchange="this.form.submit()" style="padding: 8px 10px; background: #111A2B; border: 1px solid #26344F; border-radius: 8px; color: #FFF; font-size: 13px;">
+    <input name="q" type="search" aria-label="{{ _('Search') }}" placeholder="{{ _('Search…') }}" value="{{ q or '' }}" style="flex: 1; padding: 8px 12px; background: var(--nebula-bg-surface); border: 1px solid var(--nebula-border); border-radius: 8px; color: #FFF; font-size: 13px;">
+    <select name="sort" data-autosubmit aria-label="{{ _('Sort') }}" style="padding: 8px 10px; background: var(--nebula-bg-surface); border: 1px solid var(--nebula-border); border-radius: 8px; color: #FFF; font-size: 13px;">
       <option value="newest" {% if sort == 'newest' %}selected{% endif %}>{{ _('Newest') }}</option>
       <option value="oldest" {% if sort == 'oldest' %}selected{% endif %}>{{ _('Oldest') }}</option>
       <option value="size_desc" {% if sort == 'size_desc' %}selected{% endif %}>{{ _('Largest') }}</option>
@@ -72,7 +71,7 @@ <h1 style="font-size: 17px; font-weight: 700; color: #FFF; margin: 0;">{{ displa
   </form>
 
   <!-- Tabs -->
-  <div style="display: inline-flex; background: #111A2B; padding: 4px; border-radius: 8px; border: 1px solid #26344F; gap: 4px; margin-bottom: 16px;">
+  <div style="display: inline-flex; background: var(--nebula-bg-surface); padding: 4px; border-radius: 8px; border: 1px solid var(--nebula-border); gap: 4px; margin-bottom: 16px;">
     <a href="?type=vod&q={{ q or '' }}&sort={{ sort }}" class="ns-btn {% if current_type == 'vod' %}ns-btn-primary{% else %}ns-btn-secondary{% endif %}" style="padding: 6px 14px; font-size: 12px; border: none;">
       {{ _('Recordings (%(count)s)', count=cnt_vod) }}
     </a>
@@ -100,24 +99,24 @@ <h1 style="font-size: 17px; font-weight: 700; color: #FFF; margin: 0;">{{ displa
   <!-- Video List -->
   <div style="display: flex; flex-direction: column; gap: 16px;">
     {% for f in files %}
-    <div style="background: var(--nebula-bg-surface, #111A2B); border: 1px solid var(--nebula-border, #26344F); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.4);">
-      <a href="{{ url_for('vod_view' if f.route == 'vod' else 'clip_view', streamer=streamer, filename=f.name) }}" style="display: block; position: relative; aspect-ratio: 16 / 9; background: #0B1220; overflow: hidden;">
-        <img src="{{ f.thumb_url }}" alt="" loading="lazy" decoding="async" style="width: 100%; height: 100%; object-fit: cover;" onerror="this.onerror=null;this.src='{{ url_for('static', filename='img/thumb_fallback.jpg') }}'">
+    <div style="background: var(--nebula-bg-surface); border: 1px solid var(--nebula-border); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.4);">
+      <a href="{{ url_for('vod_view' if f.route == 'vod' else 'clip_view', streamer=streamer, filename=f.name) }}" style="display: block; position: relative; aspect-ratio: 16 / 9; background: var(--nebula-bg-deep); overflow: hidden;">
+        <img src="{{ f.thumb_url }}" alt="" loading="lazy" decoding="async" style="width: 100%; height: 100%; object-fit: cover;" data-fallback-src="{{ url_for('static', filename='img/thumb_fallback.jpg') }}">
         {% if f.duration_str %}
-        <span style="position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.85); color: #FFF; font-size: 11px; padding: 2px 6px; border-radius: 4px; font-family: var(--ns-font-mono);">{{ f.duration_str }}</span>
+        <span style="position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.85); color: #FFF; font-size: 12px; padding: 2px 6px; border-radius: 4px; font-family: var(--ns-font-mono);">{{ f.duration_str }}</span>
         {% endif %}
       </a>
       <div style="padding: 12px 14px;">
         <a href="{{ url_for('vod_view' if f.route == 'vod' else 'clip_view', streamer=streamer, filename=f.name) }}" style="text-decoration: none; color: #FFF; font-size: 14px; font-weight: 600; line-height: 1.35; display: block; margin-bottom: 6px;">
           {{ f.display_title or f.name }}
         </a>
-        <div style="font-size: 11px; color: var(--nebula-text-secondary, #A2AEC8); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px;">
+        <div style="font-size: 12px; color: var(--nebula-text-secondary); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px;">
           <span>{{ f.date_str }}</span>
           <span>•</span>
           <span>{{ f.size_str }}</span>
           {% if f.category %}
           <span>•</span>
-          <span style="color: #BB78FF;">{{ _('Game: %(name)s', name=f.category) }}</span>
+          <span style="color: var(--nebula-accent-highlight);">{{ _('Game: %(name)s', name=f.category) }}</span>
           {% endif %}
           {% if f.viewer_count_str %}
           <span>•</span>
@@ -129,7 +128,10 @@ <h1 style="font-size: 17px; font-weight: 700; color: #FFF; margin: 0;">{{ displa
           <a href="{{ url_for('download' if f.route == 'vod' else 'clip_download', streamer=streamer, filename=f.name) }}" class="ns-btn ns-btn-secondary" style="padding: 6px 12px; font-size: 12px;">{{ _('Download') }}</a>
           {% endif %}
           {% if session.user_role == 'admin' %}
-          <button onclick="deleteItem(this, '{{ url_for('vod_delete' if f.route == 'vod' else 'clip_delete', streamer=streamer, filename=f.name) }}')" class="ns-btn nebula-btn-danger" style="padding: 6px 12px; font-size: 12px;">{{ _('Delete') }}</button>
+          <form method="post" action="{{ url_for('vod_delete' if f.route == 'vod' else 'clip_delete', streamer=streamer, filename=f.name) }}" style="margin:0;" data-confirm="{{ _('Delete %(name)s? The file is removed from the archive and cannot be restored.', name=f.name) }}" data-confirm-ok="{{ _('Delete') }}" data-confirm-danger>
+            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+            <button type="submit" class="ns-btn nebula-btn-danger" style="padding: 6px 12px; font-size: 12px;">{{ _('Delete') }}</button>
+          </form>
           {% endif %}
         </div>
       </div>
@@ -160,22 +162,47 @@ <h1 style="font-size: 17px; font-weight: 700; color: #FFF; margin: 0;">{{ displa
 </main>
 
 <!-- NEBULA Mobile Bottom Navigation -->
-<div class="mobile-global-nav" style="border-top: 1px solid #26344F; background: rgba(7, 11, 20, 0.97); transform: translateZ(0);">
-  <a href="{{ url_for('index') }}" style="color: #75839D;">
-    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+<div class="mobile-global-nav" role="navigation" aria-label="{{ _('Main navigation') }}" style="border-top: 1px solid var(--nebula-border); background: rgba(7, 11, 20, 0.97); transform: translateZ(0);">
+  <a href="{{ url_for('index') }}" style="color: var(--nebula-text-muted);">
+    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
     <span>{{ _('Home') }}</span>
   </a>
-  <a href="{{ url_for('twitch_live_hub') }}" style="color: #75839D;">
-    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="2"/><path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"/></svg>
+  <a href="{{ url_for('twitch_live_hub') }}" style="color: var(--nebula-text-muted);">
+    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="2"/><path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"/></svg>
     <span>{{ _('Live') }}</span>
   </a>
   {% if session.user_role == 'admin' %}
-  <a href="{{ url_for('channels_view') }}" class="active" style="color: #4D63FF;">
-    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+  <a href="{{ url_for('channels_view') }}" class="active" aria-current="page">
+    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
     <span>{{ _('Streamer') }}</span>
   </a>
   {% endif %}
+  <form method="post" action="{{ url_for('logout') }}" class="sv-bottom-nav__logout">
+    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+    <button type="submit">
+      <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/></svg>
+      <span>{{ _('Log out') }}</span>
+    </button>
+  </form>
+  {% with logout_all_variant = 'nav' %}{% include 'components/logout_everywhere.html' %}{% endwith %}
 </div>
+{% include 'components/js_i18n.html' %}
+<script nonce="{{ csp_nonce() }}">
+  (function () {
+    document.querySelectorAll('select[data-autosubmit]').forEach(function (sel) {
+      sel.addEventListener('change', function () { if (sel.form) sel.form.submit(); });
+    });
+    document.querySelectorAll('img[data-fallback-src]').forEach(function (img) {
+      function useFallback() {
+        var fb = img.getAttribute('data-fallback-src');
+        img.removeAttribute('data-fallback-src');
+        if (fb) img.src = fb;
+      }
+      if (img.complete && img.naturalWidth === 0 && img.getAttribute('src')) useFallback();
+      else img.addEventListener('error', useFallback, { once: true });
+    });
+  })();
+</script>
 
 </body>
 </html>
diff --git a/WEBUI/templates/regeln.html b/WEBUI/templates/regeln.html
index f1cfcba..cae51a1 100644
--- a/WEBUI/templates/regeln.html
+++ b/WEBUI/templates/regeln.html
@@ -5,8 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>StreamVault · {{ _('Rules') }}</title>
     <link rel="stylesheet" href="{{ UI_FONTS_HREF }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='style.css', v=ASSET_VERSION) }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/tube_design_system.css', v=ASSET_VERSION) }}">
+    {% include 'components/styles.html' %}
   </head>
   <body class="page-regeln {{ theme_class }} ns-platform">
     <main class="regeln-shell">
@@ -43,7 +42,7 @@ <h1>{{ rules_title }}</h1>
         </label>
         <button type="submit" class="btn-primary" id="regelnSubmit" disabled>{{ _('Accept rules') }}</button>
       </form>
-      <script>
+      <script nonce="{{ csp_nonce() }}">
         (function () {
           var check = document.getElementById('regelnCheck');
           var btn = document.getElementById('regelnSubmit');
diff --git a/WEBUI/templates/search.html b/WEBUI/templates/search.html
index 109f506..cfd6696 100644
--- a/WEBUI/templates/search.html
+++ b/WEBUI/templates/search.html
@@ -16,11 +16,11 @@
   <section class="ns-card-panel" style="margin-bottom: 24px;">
     <div class="ns-panel-head">
       <h2>{{ _('Full-text search query') }}</h2>
-      <span style="font-size: 11px; color: var(--ns-text-muted);">{{ _('Streamers, VODs & chat histories') }}</span>
+      <span style="font-size: 12px; color: var(--ns-text-muted);">{{ _('Streamers, VODs & chat histories') }}</span>
     </div>
     <form method="get" style="display: flex; gap: 12px; flex-wrap: wrap;">
       <div style="flex: 1; min-width: min(260px, 100%);">
-        <input name="global" placeholder="{{ _('Search term (e.g. player name, chat message, date)...') }}" value="{{ global_query }}" class="ns-input-field" style="width: 100%;">
+        <input name="global" type="search" aria-label="{{ _('Full-text search query') }}" placeholder="{{ _('Search term (e.g. player name, chat message, date)…') }}" value="{{ global_query }}" class="ns-input-field" style="width: 100%;">
       </div>
       <button type="submit" class="ns-btn ns-btn-primary">
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
@@ -72,7 +72,7 @@ <h3 style="font-size: 14px; font-weight: 700; color: var(--ns-text-secondary); m
         <tbody>
           {% for r in results %}
           <tr style="border-bottom: 1px solid var(--ns-border-subtle);">
-            <td style="padding: 10px 16px; font-family: var(--ns-font-mono); color: var(--ns-text-muted); font-size: 11px;">{{ r.time }}</td>
+            <td style="padding: 10px 16px; font-family: var(--ns-font-mono); color: var(--ns-text-muted); font-size: 12px;">{{ r.time }}</td>
             <td style="padding: 10px 16px; font-weight: 600; color: var(--ns-text-primary);">{{ r.streamer }}</td>
             <td style="padding: 10px 16px; color: var(--ns-brand-crimson); font-weight: 600;">{{ r.username }}</td>
             <td style="padding: 10px 16px; color: var(--ns-text-secondary);">{{ r.message }}</td>
diff --git a/WEBUI/templates/storage.html b/WEBUI/templates/storage.html
index 11e8e31..64e4211 100644
--- a/WEBUI/templates/storage.html
+++ b/WEBUI/templates/storage.html
@@ -6,11 +6,11 @@
 
 {% block header_actions %}
   <a href="{{ url_for('admin_view') }}" class="ns-btn ns-btn-secondary">
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
+    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
     {{ _('Control panel') }}
   </a>
-  <button type="button" class="ns-btn ns-btn-primary" onclick="openStorageModal('modal-add-provider')">
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+  <button type="button" class="ns-btn ns-btn-primary" data-storage-open="modal-add-provider">
+    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
     {{ _('Add provider') }}
   </button>
 {% endblock %}
@@ -24,7 +24,7 @@
   .storage-alert.warn { background: rgba(255, 184, 76, 0.12); border: 1px solid rgba(255, 184, 76, 0.4); color: #FFD08A; }
   .storage-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
   .storage-stat { background: var(--ns-bg-surface); border: 1px solid var(--ns-border-subtle); border-radius: var(--ns-radius-lg); padding: 16px 18px; }
-  .storage-stat .label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ns-text-muted); }
+  .storage-stat .label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ns-text-muted); }
   .storage-stat .value { font-size: 22px; font-weight: 800; color: var(--ns-text-primary); margin-top: 6px; }
   .storage-stat .sub { font-size: 12px; color: var(--ns-text-secondary); margin-top: 4px; }
   .storage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
@@ -32,10 +32,10 @@
   .storage-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
   .storage-card-title { margin: 0; font-size: 15px; font-weight: 800; color: var(--ns-text-primary); }
   .storage-badges { display: flex; flex-wrap: wrap; gap: 6px; }
-  .storage-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
+  .storage-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
   .storage-badge.default { background: rgba(77, 99, 255, 0.2); color: #9FB0FF; border: 1px solid rgba(77, 99, 255, 0.45); }
   .storage-badge.enabled { background: rgba(72, 214, 162, 0.15); color: #7BEBC2; border: 1px solid rgba(72, 214, 162, 0.35); }
-  .storage-badge.disabled { background: rgba(117, 131, 157, 0.15); color: #A2AEC8; border: 1px solid rgba(117, 131, 157, 0.3); }
+  .storage-badge.disabled { background: rgba(117, 131, 157, 0.15); color: var(--nebula-text-secondary); border: 1px solid rgba(117, 131, 157, 0.3); }
   .storage-badge.ok { background: rgba(72, 214, 162, 0.15); color: #7BEBC2; border: 1px solid rgba(72, 214, 162, 0.35); }
   .storage-badge.err { background: rgba(240, 68, 88, 0.15); color: #FF8A98; border: 1px solid rgba(240, 68, 88, 0.35); }
   .storage-badge.type { background: rgba(105, 201, 255, 0.12); color: #8DD8FF; border: 1px solid rgba(105, 201, 255, 0.3); }
@@ -44,8 +44,8 @@
   .storage-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
   .storage-actions form { margin: 0; }
   .storage-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 8px; border: 1px solid var(--ns-border-medium); background: var(--ns-bg-surface-raised); color: var(--ns-text-primary); font-size: 12px; font-weight: 600; padding: 7px 10px; cursor: pointer; text-decoration: none; }
-  .storage-btn:hover { border-color: #4D63FF; color: #FFF; }
-  .storage-btn.primary { background: #4D63FF; border-color: #4D63FF; color: #FFF; }
+  .storage-btn:hover { border-color: var(--nebula-accent-primary); color: #FFF; }
+  .storage-btn.primary { background: var(--nebula-accent-primary); border-color: var(--nebula-accent-primary); color: #FFF; }
   .storage-btn.danger { border-color: rgba(240, 68, 88, 0.45); color: #FF8A98; }
   .storage-btn.danger:hover { background: rgba(240, 68, 88, 0.15); }
   .storage-panel { background: var(--ns-bg-surface); border: 1px solid var(--ns-border-subtle); border-radius: var(--ns-radius-lg); padding: 18px 20px; }
@@ -53,18 +53,18 @@
   .storage-panel .hint { margin: 0 0 14px 0; font-size: 12px; color: var(--ns-text-secondary); }
   .storage-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
   .storage-field { display: flex; flex-direction: column; gap: 6px; }
-  .storage-field label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ns-text-secondary); }
+  .storage-field label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ns-text-secondary); }
   .storage-field input[type="text"], .storage-field input[type="password"], .storage-field input[type="number"], .storage-field select { background: var(--ns-bg-canvas); border: 1px solid var(--ns-border-medium); border-radius: 8px; color: var(--ns-text-primary); padding: 9px 12px; font-size: 13px; outline: none; width: 100%; box-sizing: border-box; }
-  .storage-field input:focus, .storage-field select:focus { border-color: #4D63FF; box-shadow: 0 0 0 2px rgba(77, 99, 255, 0.18); }
-  .storage-field .help { font-size: 11px; color: var(--ns-text-muted); line-height: 1.45; }
+  .storage-field input:focus, .storage-field select:focus { border-color: var(--nebula-accent-primary); box-shadow: 0 0 0 2px rgba(77, 99, 255, 0.18); }
+  .storage-field .help { font-size: 12px; color: var(--ns-text-muted); line-height: 1.45; }
   .storage-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--ns-text-primary); line-height: 1.4; }
-  .storage-check input { margin-top: 2px; accent-color: #4D63FF; width: 16px; height: 16px; }
+  .storage-check input { margin-top: 2px; accent-color: var(--nebula-accent-primary); width: 16px; height: 16px; }
   .storage-table-wrap { overflow-x: auto; border: 1px solid var(--ns-border-subtle); border-radius: 10px; }
   .storage-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 980px; }
-  .storage-table th { text-align: left; padding: 10px 12px; background: var(--ns-bg-surface-raised); color: var(--ns-text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--ns-border-subtle); white-space: nowrap; }
+  .storage-table th { text-align: left; padding: 10px 12px; background: var(--ns-bg-surface-raised); color: var(--ns-text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--ns-border-subtle); white-space: nowrap; }
   .storage-table td { padding: 10px 12px; border-bottom: 1px solid rgba(38, 52, 79, 0.45); color: var(--ns-text-primary); vertical-align: top; }
   .storage-table tr:last-child td { border-bottom: none; }
-  .storage-table .path { font-family: var(--ns-font-mono, monospace); font-size: 11px; color: var(--ns-text-secondary); word-break: break-all; }
+  .storage-table .path { font-family: var(--ns-font-mono, monospace); font-size: 12px; color: var(--ns-text-secondary); word-break: break-all; }
   .storage-table .actions { display: flex; flex-wrap: wrap; gap: 5px; }
   .storage-table .actions form { margin: 0; }
   .storage-empty { padding: 26px; text-align: center; color: var(--ns-text-secondary); font-size: 13px; }
@@ -85,6 +85,7 @@
 {% endblock %}
 
 {% block content %}
+<h2 class="sr-only">{{ _('Cloud storage') }}</h2>
 <div class="storage-shell">
   {% if msg %}<div class="storage-alert ok">{{ msg }}</div>{% endif %}
   {% if error %}<div class="storage-alert err">{{ error }}</div>{% endif %}
@@ -124,7 +125,7 @@
         <h3>{{ _('Storage providers') }}</h3>
         <p class="hint">{{ _('Google Drive, S3-compatible services, Dropbox, OneDrive and WebDAV. Credentials are stored with AES-GCM encryption.') }}</p>
       </div>
-      <button type="button" class="storage-btn primary" onclick="openStorageModal('modal-add-provider')">+ {{ _('Provider') }}</button>
+      <button type="button" class="storage-btn primary" data-storage-open="modal-add-provider">+ {{ _('Provider') }}</button>
     </div>
 
     {% if providers %}
@@ -176,8 +177,8 @@ <h4 class="storage-card-title">{{ p.name }}</h4>
           {% if p.oauth_supported %}
           <a class="storage-btn" href="{{ url_for('admin_storage_oauth_start', provider_id=p.id) }}">{{ p.oauth_label }}</a>
           {% endif %}
-          <button type="button" class="storage-btn" data-update-url="{{ url_for('admin_storage_provider_update', provider_id=p.id) }}" onclick="openEditProvider({{ p.id }}, this.dataset.updateUrl)">{{ _('Edit') }}</button>
-          <form method="post" action="{{ url_for('admin_storage_provider_delete', provider_id=p.id) }}" onsubmit='return confirm({{ _("Really remove the provider? The cloud files are kept.")|tojson }});'>
+          <button type="button" class="storage-btn" data-storage-edit="{{ p.id }}" data-update-url="{{ url_for('admin_storage_provider_update', provider_id=p.id) }}">{{ _('Edit') }}</button>
+          <form method="post" action="{{ url_for('admin_storage_provider_delete', provider_id=p.id) }}" data-confirm="{{ _('Really remove the provider? The cloud files are kept.') }}" data-confirm-danger>
             <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
             <button type="submit" class="storage-btn danger">{{ _('Remove') }}</button>
           </form>
@@ -200,8 +201,8 @@ <h3>{{ _('Automation & retention') }}</h3>
       <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
       <div class="storage-form-grid">
         <div class="storage-field">
-          <label>{{ _('Default provider') }}</label>
-          <select name="default_provider_id">
+          <label for="storage-default-provider">{{ _('Default provider') }}</label>
+          <select id="storage-default-provider" name="default_provider_id">
             <option value="">{{ _('Automatic (first active)') }}</option>
             {% for p in providers if p.enabled %}
             <option value="{{ p.id }}" {% if settings.default_provider_id == p.id %}selected{% endif %}>{{ p.name }}</option>
@@ -209,22 +210,22 @@ <h3>{{ _('Automation & retention') }}</h3>
           </select>
         </div>
         <div class="storage-field">
-          <label>{{ _('Local retention (days)') }}</label>
-          <input type="number" min="0" max="3650" name="local_retention_days" value="{{ settings.local_retention_days }}">
+          <label for="storage-retention">{{ _('Local retention (days)') }}</label>
+          <input id="storage-retention" type="number" min="0" max="3650" name="local_retention_days" value="{{ settings.local_retention_days }}">
           <span class="help">{{ _('0 = delete immediately once the cloud copy is verified.') }}</span>
         </div>
         <div class="storage-field">
-          <label>{{ _('Auto-sync interval (minutes)') }}</label>
-          <input type="number" min="0" max="10080" name="auto_sync_interval_minutes" value="{{ settings.auto_sync_interval_minutes }}">
+          <label for="storage-sync-interval">{{ _('Auto-sync interval (minutes)') }}</label>
+          <input id="storage-sync-interval" type="number" min="0" max="10080" name="auto_sync_interval_minutes" value="{{ settings.auto_sync_interval_minutes }}">
           <span class="help">{{ _('0 = no automatic sync. Only used when auto-upload is enabled.') }}</span>
         </div>
         <div class="storage-field">
-          <label>{{ _('Cleanup interval (minutes)') }}</label>
-          <input type="number" min="0" max="10080" name="cleanup_interval_minutes" value="{{ settings.cleanup_interval_minutes }}">
+          <label for="storage-cleanup-interval">{{ _('Cleanup interval (minutes)') }}</label>
+          <input id="storage-cleanup-interval" type="number" min="0" max="10080" name="cleanup_interval_minutes" value="{{ settings.cleanup_interval_minutes }}">
         </div>
         <div class="storage-field">
-          <label>{{ _('Max. files per sync') }}</label>
-          <input type="number" min="1" max="5000" name="max_sync_files" value="{{ settings.max_sync_files }}">
+          <label for="storage-max-files">{{ _('Max. files per sync') }}</label>
+          <input id="storage-max-files" type="number" min="1" max="5000" name="max_sync_files" value="{{ settings.max_sync_files }}">
         </div>
       </div>
 
@@ -263,8 +264,8 @@ <h3>{{ _('Manual sync') }}</h3>
     <form method="post" action="{{ url_for('admin_storage_sync') }}" style="display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end;">
       <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
       <div class="storage-field" style="min-width:220px;">
-        <label>{{ _('Provider') }}</label>
-        <select name="provider_id">
+        <label for="storage-sync-provider">{{ _('Provider') }}</label>
+        <select id="storage-sync-provider" name="provider_id">
           <option value="">{{ _('Default') }}</option>
           {% for p in providers if p.enabled %}
           <option value="{{ p.id }}">{{ p.name }}</option>
@@ -272,8 +273,8 @@ <h3>{{ _('Manual sync') }}</h3>
         </select>
       </div>
       <div class="storage-field" style="min-width:220px;">
-        <label>{{ _('Streamer (optional)') }}</label>
-        <input type="text" name="streamer" placeholder="{{ _('e.g. channel_name') }}">
+        <label for="storage-sync-streamer">{{ _('Streamer (optional)') }}</label>
+        <input id="storage-sync-streamer" type="text" name="streamer" placeholder="{{ _('e.g. channel_name') }}">
       </div>
       <button type="submit" class="storage-btn primary">{{ _('Start sync') }}</button>
       <button type="submit" class="storage-btn" formaction="{{ url_for('admin_storage_cleanup') }}">{{ _('Start local cleanup') }}</button>
@@ -325,7 +326,7 @@ <h3>{{ _('Archive objects') }}</h3>
                 </form>
                 {% endif %}
                 {% if o.status in ('uploaded','restored') and o.local_exists and not o.local_deleted_at %}
-                <form method="post" action="{{ url_for('admin_storage_object_delete_local', object_id=o.id) }}" onsubmit='return confirm({{ _("Really delete the local file? The cloud copy is kept.")|tojson }});'>
+                <form method="post" action="{{ url_for('admin_storage_object_delete_local', object_id=o.id) }}" data-confirm="{{ _('Really delete the local file? The cloud copy is kept.') }}" data-confirm-danger>
                   <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                   <button type="submit" class="storage-btn danger">{{ _('Delete locally') }}</button>
                 </form>
@@ -337,12 +338,12 @@ <h3>{{ _('Archive objects') }}</h3>
                 </form>
                 {% endif %}
                 {% if not o.remote_deleted_at and not o.local_deleted_at and o.local_exists and o.status in ('uploaded','restored') %}
-                <form method="post" action="{{ url_for('admin_storage_object_delete_remote', object_id=o.id) }}" onsubmit='return confirm({{ _("Really delete the cloud file? A local copy is kept.")|tojson }});'>
+                <form method="post" action="{{ url_for('admin_storage_object_delete_remote', object_id=o.id) }}" data-confirm="{{ _('Really delete the cloud file? A local copy is kept.') }}" data-confirm-danger>
                   <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                   <button type="submit" class="storage-btn danger">{{ _('Delete from cloud') }}</button>
                 </form>
                 {% endif %}
-                <form method="post" action="{{ url_for('admin_storage_object_forget', object_id=o.id) }}" onsubmit='return confirm({{ _("Remove only the database entry?")|tojson }});'>
+                <form method="post" action="{{ url_for('admin_storage_object_forget', object_id=o.id) }}" data-confirm="{{ _('Remove only the database entry?') }}" data-confirm-danger>
                   <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                   <button type="submit" class="storage-btn">{{ _('Forget') }}</button>
                 </form>
@@ -372,14 +373,14 @@ <h3>{{ _('OAuth note') }}</h3>
   <div class="storage-modal">
     <div class="storage-modal-head">
       <h3>{{ _('Add provider') }}</h3>
-      <button type="button" class="storage-close" onclick="closeStorageModal('modal-add-provider')">&times;</button>
+      <button type="button" class="storage-close" data-storage-close="modal-add-provider" aria-label="{{ _('Close') }}">&times;</button>
     </div>
     <form method="post" action="{{ url_for('admin_storage_provider_add') }}">
       <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
       <div class="storage-modal-body">
         <div class="storage-field">
-          <label>{{ _('Provider type') }}</label>
-          <select id="add-provider-type" name="provider_type" onchange="renderAddFields()">
+          <label for="add-provider-type">{{ _('Provider type') }}</label>
+          <select id="add-provider-type" name="provider_type">
             {% for entry in catalog %}
             <option value="{{ entry.type_id }}">{{ entry.label }}</option>
             {% endfor %}
@@ -387,8 +388,8 @@ <h3>{{ _('Add provider') }}</h3>
           <span class="help" id="add-provider-description"></span>
         </div>
         <div class="storage-field">
-          <label>{{ _('Display name') }}</label>
-          <input type="text" name="name" required maxlength="80" placeholder="{{ _('e.g. Google Drive archive') }}">
+          <label for="add-provider-name">{{ _('Display name') }}</label>
+          <input id="add-provider-name" type="text" name="name" required maxlength="80" placeholder="{{ _('e.g. Google Drive archive') }}">
         </div>
         <div id="add-provider-fields" class="storage-form-grid"></div>
         <label class="storage-check">
@@ -397,7 +398,7 @@ <h3>{{ _('Add provider') }}</h3>
         </label>
       </div>
       <div class="storage-modal-foot">
-        <button type="button" class="storage-btn" onclick="closeStorageModal('modal-add-provider')">{{ _('Cancel') }}</button>
+        <button type="button" class="storage-btn" data-storage-close="modal-add-provider">{{ _('Cancel') }}</button>
         <button type="submit" class="storage-btn primary">{{ _('Create') }}</button>
       </div>
     </form>
@@ -408,13 +409,13 @@ <h3>{{ _('Add provider') }}</h3>
   <div class="storage-modal">
     <div class="storage-modal-head">
       <h3>{{ _('Edit provider') }}</h3>
-      <button type="button" class="storage-close" onclick="closeStorageModal('modal-edit-provider')">&times;</button>
+      <button type="button" class="storage-close" data-storage-close="modal-edit-provider" aria-label="{{ _('Close') }}">&times;</button>
     </div>
     <form method="post" id="edit-provider-form">
       <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
       <div class="storage-modal-body">
         <div class="storage-field">
-          <label>{{ _('Display name') }}</label>
+          <label for="edit-provider-name">{{ _('Display name') }}</label>
           <input type="text" name="name" id="edit-provider-name" required maxlength="80">
         </div>
         <div id="edit-provider-fields" class="storage-form-grid"></div>
@@ -424,14 +425,14 @@ <h3>{{ _('Edit provider') }}</h3>
         </label>
       </div>
       <div class="storage-modal-foot">
-        <button type="button" class="storage-btn" onclick="closeStorageModal('modal-edit-provider')">{{ _('Cancel') }}</button>
+        <button type="button" class="storage-btn" data-storage-close="modal-edit-provider">{{ _('Cancel') }}</button>
         <button type="submit" class="storage-btn primary">{{ _('Save') }}</button>
       </div>
     </form>
   </div>
 </div>
 
-<script>
+<script nonce="{{ csp_nonce() }}">
   const STORAGE_CATALOG = {{ catalog|tojson }};
   const STORAGE_PROVIDERS = {{ providers|tojson }};
 
@@ -462,11 +463,11 @@ <h3>{{ _('Edit provider') }}</h3>
       .replace(/'/g, '&#39;');
   }
 
-  function fieldMarkup(field, values) {
+  function fieldMarkup(field, values, idPrefix) {
     const value = values && values[field.key] !== undefined ? values[field.key] : (field.default || '');
     const setFlag = values && values[field.key + '__set'];
     const key = escapeHtml(field.key);
-    const id = 'cfg_' + key;
+    const id = idPrefix + '-cfg_' + key;  // unique per modal (add and edit render the same fields)
     let input = '';
     if (field.type === 'select') {
       input = '<select id="' + id + '" name="cfg_' + key + '">';
@@ -482,7 +483,7 @@ <h3>{{ _('Edit provider') }}</h3>
     }
     let help = field.help || '';
     if (field.secret && setFlag) help = (help ? help + ' ' : '') + {{ _('A saved value is kept if the field is left empty.')|tojson }};
-    return '<div class="storage-field"><label>' + escapeHtml(field.label) + (field.required ? ' *' : '') + '</label>' + input + (help ? '<span class="help">' + escapeHtml(help) + '</span>' : '') + '</div>';
+    return '<div class="storage-field"><label for="' + id + '">' + escapeHtml(field.label) + (field.required ? ' *' : '') + '</label>' + input + (help ? '<span class="help">' + escapeHtml(help) + '</span>' : '') + '</div>';
   }
 
   function renderFields(containerId, typeId, values) {
@@ -490,7 +491,7 @@ <h3>{{ _('Edit provider') }}</h3>
     const entry = catalogEntry(typeId);
     if (!container || !entry) return;
     container.innerHTML = (entry.fields || []).map(function (field) {
-      return fieldMarkup(field, values || {});
+      return fieldMarkup(field, values || {}, containerId);
     }).join('');
   }
 
@@ -513,7 +514,26 @@ <h3>{{ _('Edit provider') }}</h3>
     openStorageModal('modal-edit-provider');
   }
 
+  document.addEventListener('click', function (event) {
+    const opener = event.target.closest('[data-storage-open]');
+    if (opener) {
+      openStorageModal(opener.getAttribute('data-storage-open'));
+      return;
+    }
+    const closer = event.target.closest('[data-storage-close]');
+    if (closer) {
+      closeStorageModal(closer.getAttribute('data-storage-close'));
+      return;
+    }
+    const editBtn = event.target.closest('[data-storage-edit]');
+    if (editBtn) {
+      openEditProvider(Number(editBtn.getAttribute('data-storage-edit')), editBtn.dataset.updateUrl);
+    }
+  });
+
   document.addEventListener('DOMContentLoaded', function () {
+    const typeSelect = document.getElementById('add-provider-type');
+    if (typeSelect) typeSelect.addEventListener('change', renderAddFields);
     renderAddFields();
   });
 </script>
diff --git a/WEBUI/templates/streamer.html b/WEBUI/templates/streamer.html
index 4152881..a332aec 100644
--- a/WEBUI/templates/streamer.html
+++ b/WEBUI/templates/streamer.html
@@ -5,14 +5,18 @@
 {% block page_subtitle %}{{ _('Channel archive & recording metrics') }}{% endblock %}
 
 {% block content %}
+  {#- CSS url() values go through the css_url filter (webui.css_url: same-origin path or
+      https URL accepted by is_allowed_url, no quote/paren/backslash/angle/whitespace). -#}
+  {% set banner_css_url = banner_url|css_url %}
+  {% set hero_css_url = (hero_stream.thumbnail_url if hero_stream else '')|css_url %}
   <!-- 1. NEBULA Streamer Profile Card (Panel 04) -->
   <section class="nebula-profile-card" aria-label="{{ _('Streamer profile') }}">
     <div class="nebula-profile-banner {% if session.user_role == 'admin' %}is-editable{% endif %}" 
-         style="{% if banner_url %}background: linear-gradient(to bottom, rgba(7, 11, 20, 0.35) 0%, rgba(7, 11, 20, 0.90) 100%), url('{{ banner_url }}') center/cover no-repeat;{% endif %}"
-         {% if session.user_role == 'admin' %}onclick="openBannerModal()" role="button" tabindex="0" title="{{ _('Customize channel banner') }}"{% endif %}>
+         style="{% if banner_css_url %}background: linear-gradient(to bottom, rgba(7, 11, 20, 0.35) 0%, rgba(7, 11, 20, 0.90) 100%), url('{{ banner_css_url }}') center/cover no-repeat;{% endif %}"
+         {% if session.user_role == 'admin' %}data-streamer-open="banner" role="button" tabindex="0" title="{{ _('Customize channel banner') }}"{% endif %}>
       {% if session.user_role == 'admin' %}
       <div class="nebula-banner-edit-badge">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
+        <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
         <span>{{ _('Change banner') }}</span>
       </div>
       {% endif %}
@@ -20,7 +24,7 @@
     <div class="nebula-profile-body">
       <div class="nebula-profile-details">
         <div class="nebula-profile-avatar {% if session.user_role == 'admin' %}is-editable{% endif %}"
-             {% if session.user_role == 'admin' %}onclick="openAvatarModal()" role="button" tabindex="0" title="{{ _('Customize profile picture') }}"{% endif %}>
+             {% if session.user_role == 'admin' %}data-streamer-open="avatar" role="button" tabindex="0" title="{{ _('Customize profile picture') }}"{% endif %}>
           {% if avatar_url %}
           <img src="{{ avatar_url }}" alt="{{ streamer }}" class="nebula-profile-avatar-img" style="width:100%; height:100%; object-fit:cover; border-radius:50%; display:block;">
           {% else %}
@@ -28,8 +32,8 @@
           {% endif %}
           {% if session.user_role == 'admin' %}
           <div class="nebula-avatar-edit-overlay">
-            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
-            <span style="font-size: 10px; font-weight: 800; letter-spacing: 0.5px; margin-top: 3px;">{{ _('CHANGE') }}</span>
+            <svg aria-hidden="true" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
+            <span style="font-size: 12px; font-weight: 800; letter-spacing: 0.5px; margin-top: 3px;">{{ _('Change') }}</span>
           </div>
           {% endif %}
         </div>
@@ -40,7 +44,7 @@ <h2 class="nebula-profile-name">{{ display_name or streamer }}</h2>
               <span class="ns-pulse-dot"></span>
               {% if online %}ON AIR{% else %}OFFLINE{% endif %}
             </span>
-            {% if streamer in live_channels %}<span class="ns-pill ns-pill-live">{{ _('RECORDING ACTIVE') }}</span>{% endif %}
+            {% if streamer in live_channels %}<span class="ns-pill ns-pill-live">{{ _('Recording active') }}</span>{% endif %}
             <span>•</span>
             <span>{{ _('%(count)s recordings', count=cnt_vod) }}</span>
             <span>•</span>
@@ -52,7 +56,7 @@ <h2 class="nebula-profile-name">{{ display_name or streamer }}</h2>
       <div style="display:flex; align-items:center; gap:12px;">
         {% if twitch_login and (twitch_live or online) %}
         <a href="{{ url_for('twitch_watch', channel=twitch_login) }}" class="ns-btn ns-btn-primary" style="padding: 10px 22px;">
-          <span class="nebula-live-dot" style="margin-right:6px;"></span> {{ _('WATCH LIVE') }}
+          <span class="nebula-live-dot" style="margin-right:6px;"></span> {{ _('Watch live') }}
         </a>
         {% elif files and files|length > 0 %}
         <a href="{{ url_for('vod_view', streamer=streamer, filename=files[0].name) }}" class="ns-btn ns-btn-secondary" style="padding: 10px 18px;">
@@ -68,11 +72,11 @@ <h2 class="nebula-profile-name">{{ display_name or streamer }}</h2>
   <section class="nebula-admin-box" aria-label="{{ _('Admin controls') }}">
     <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px;">
       <div style="display:flex; align-items:center; gap:10px;">
-        <span style="font-size: 13px; font-weight: 700; color: #BB78FF;">⚙️ {{ _('CHANNEL MANAGEMENT (ADMIN)') }}</span>
+        <span style="font-size: 13px; font-weight: 700; color: var(--nebula-accent-highlight);"><span aria-hidden="true">⚙️</span> {{ _('Channel management (admin)') }}</span>
         <form method="post" action="{{ url_for('streamer_visibility_update', streamer=streamer) }}" style="display: flex; align-items: center; gap: 8px; margin: 0;">
           <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
           <span style="font-size: 12px; color: var(--ns-text-muted);">{{ _('Visible to:') }}</span>
-          <select name="visibility" class="ns-input-field" style="padding: 4px 10px; font-size: 12px; cursor: pointer;">
+          <select name="visibility" aria-label="{{ _('Visible to:') }}" class="ns-input-field" style="padding: 4px 10px; font-size: 12px; cursor: pointer;">
             <option value="members" {% if folder_visibility != 'admin' %}selected{% endif %}>{{ _('All users') }}</option>
             <option value="admin" {% if folder_visibility == 'admin' %}selected{% endif %}>{{ _('Admins only') }}</option>
           </select>
@@ -83,19 +87,19 @@ <h2 class="nebula-profile-name">{{ display_name or streamer }}</h2>
       <div style="display: flex; gap: 8px; align-items: center; flex-wrap: wrap;">
         <form method="post" action="{{ url_for('stop_recording_route', streamer=streamer) }}" style="margin: 0;">
           <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-          <button type="submit" class="ns-btn nebula-btn-danger" style="font-size: 12px; padding: 6px 12px;" onclick='return confirm({{ _("Really stop the recording?")|tojson }})'>
+          <button type="submit" class="ns-btn nebula-btn-danger" style="font-size: 12px; padding: 6px 12px;" data-confirm="{{ _('Really stop the recording?') }}" data-confirm-ok="{{ _('Stop recording') }}" data-confirm-danger>
             {{ _('Stop recording') }}
           </button>
         </form>
         <form method="post" action="{{ url_for('empty_folder_route', streamer=streamer) }}" style="margin: 0;">
           <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-          <button type="submit" class="ns-btn nebula-btn-danger" style="font-size: 12px; padding: 6px 12px;" onclick='return confirm({{ _("Do you want to empty the entire recording folder?")|tojson }})'>
+          <button type="submit" class="ns-btn nebula-btn-danger" style="font-size: 12px; padding: 6px 12px;" data-confirm="{{ _('Do you want to empty the entire recording folder?') }}" data-confirm-ok="{{ _('Empty folder') }}" data-confirm-danger>
             {{ _('Empty folder') }}
           </button>
         </form>
         <form method="post" action="{{ url_for('delete_folder_route', streamer=streamer) }}" style="margin: 0;">
           <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-          <button type="submit" class="ns-btn nebula-btn-danger" style="font-size: 12px; padding: 6px 12px;" onclick='return confirm({{ _("WARNING: Do you want to permanently delete this streamer and all recordings?")|tojson }})'>
+          <button type="submit" class="ns-btn nebula-btn-danger" style="font-size: 12px; padding: 6px 12px;" data-confirm="{{ _('Delete this streamer folder and all recordings? This cannot be undone.') }}" data-confirm-ok="{{ _('Delete folder') }}" data-confirm-danger>
             {{ _('Delete folder') }}
           </button>
         </form>
@@ -108,27 +112,27 @@ <h2 class="nebula-profile-name">{{ display_name or streamer }}</h2>
   <!-- 3. Analytics Telemetry Cards -->
   <section style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px;">
     <div class="ns-card-panel">
-      <span style="font-size: 11px; font-weight: 700; color: var(--ns-text-muted); text-transform: uppercase;">{{ _('Total recordings') }}</span>
+      <span style="font-size: 12px; font-weight: 700; color: var(--ns-text-muted); text-transform: uppercase;">{{ _('Total recordings') }}</span>
       <div style="font-size: 24px; font-weight: 800; font-family: var(--ns-font-mono); color: #fff; margin-top: 4px;">{{ cnt_vod }}</div>
-      <span style="font-size: 11px; color: var(--ns-text-muted);">{{ _('%(count)s clips archived', count=cnt_clip) }}</span>
+      <span style="font-size: 12px; color: var(--ns-text-muted);">{{ _('%(count)s clips archived', count=cnt_clip) }}</span>
     </div>
 
     <div class="ns-card-panel">
-      <span style="font-size: 11px; font-weight: 700; color: var(--ns-text-muted); text-transform: uppercase;">{{ _('Total runtime') }}</span>
+      <span style="font-size: 12px; font-weight: 700; color: var(--ns-text-muted); text-transform: uppercase;">{{ _('Total runtime') }}</span>
       <div style="font-size: 24px; font-weight: 800; font-family: var(--ns-font-mono); color: #fff; margin-top: 4px;">{{ total_runtime or (analytics and analytics.total_duration_str) or '—' }}</div>
-      <span style="font-size: 11px; color: var(--ns-text-muted);">{{ _('Archived airtime') }}</span>
+      <span style="font-size: 12px; color: var(--ns-text-muted);">{{ _('Archived airtime') }}</span>
     </div>
 
     <div class="ns-card-panel">
-      <span style="font-size: 11px; font-weight: 700; color: var(--ns-text-muted); text-transform: uppercase;">{{ _('Storage') }}</span>
+      <span style="font-size: 12px; font-weight: 700; color: var(--ns-text-muted); text-transform: uppercase;">{{ _('Storage') }}</span>
       <div style="font-size: 24px; font-weight: 800; font-family: var(--ns-font-mono); color: #fff; margin-top: 4px;">{{ total_size or (analytics and analytics.total_size_str) or '—' }}</div>
-      <span style="font-size: 11px; color: var(--ns-text-muted);">{{ _('Used vault volume') }}</span>
+      <span style="font-size: 12px; color: var(--ns-text-muted);">{{ _('Used vault volume') }}</span>
     </div>
 
     <div class="ns-card-panel">
-      <span style="font-size: 11px; font-weight: 700; color: var(--ns-text-muted); text-transform: uppercase;">{{ _('Last broadcast') }}</span>
+      <span style="font-size: 12px; font-weight: 700; color: var(--ns-text-muted); text-transform: uppercase;">{{ _('Last broadcast') }}</span>
       <div style="font-size: 18px; font-weight: 700; color: var(--ns-text-primary); margin-top: 8px;">{{ last_date or (files and files[0].date_str) or '—' }}</div>
-      <span style="font-size: 11px; color: var(--ns-text-muted);">{{ _('Synced') }}</span>
+      <span style="font-size: 12px; color: var(--ns-text-muted);">{{ _('Synced') }}</span>
     </div>
   </section>
 
@@ -136,13 +140,13 @@ <h2 class="nebula-profile-name">{{ display_name or streamer }}</h2>
   {% if hero_stream and (twitch_live or online) %}
   <section class="nebula-hero" aria-label="{{ _('Live stream highlight') }}" style="margin-bottom: 24px;">
     {% if hero_stream.thumbnail_url %}
-    <div class="nebula-hero-backdrop" style="background-image: url('{{ hero_stream.thumbnail_url }}');"></div>
+    <div class="nebula-hero-backdrop"{% if hero_css_url %} style="background-image: url('{{ hero_css_url }}');"{% endif %}></div>
     <div class="nebula-hero-overlay"></div>
     {% endif %}
     <div class="nebula-hero-glow"></div>
     <div class="nebula-hero-content">
       <div class="nebula-live-badge" style="margin-bottom: 14px;">
-        <span class="nebula-live-dot"></span> {{ _('LIVE NOW') }}
+        <span class="nebula-live-dot"></span> {{ _('Live now') }}
       </div>
       
       <h2 class="nebula-hero-title">{{ hero_stream.title }}</h2>
@@ -160,13 +164,13 @@ <h2 class="nebula-hero-title">{{ hero_stream.title }}</h2>
         </div>
         <span class="nebula-hero-cat">{{ hero_stream.category }}</span>
         {% if hero_stream.viewers %}
-        <span style="color:#F04458; font-weight:600;">{{ _('%(count)s viewers', count=hero_stream.viewers) }}</span>
+        <span style="color:var(--nebula-status-live); font-weight:600;">{{ _('%(count)s viewers', count=hero_stream.viewers) }}</span>
         {% endif %}
       </div>
       
       <div style="display:flex; align-items:center; gap:12px;">
         <a href="{{ hero_stream.watch_url }}" class="ns-btn ns-btn-primary" style="padding: 10px 24px; font-size: 15px;">
-          {{ _('WATCH LIVE') }}
+          {{ _('Watch live') }}
         </a>
       </div>
     </div>
@@ -175,10 +179,10 @@ <h2 class="nebula-hero-title">{{ hero_stream.title }}</h2>
     <div class="nebula-hero-preview-col">
       <a href="{{ hero_stream.watch_url }}" class="nebula-hero-preview-frame" aria-label="{{ _('Watch stream directly') }}" style="display:block;">
         <img src="{{ hero_stream.thumbnail_url }}" alt="{{ hero_stream.title }}" class="nebula-hero-preview-img">
-        <span class="nebula-live-badge" style="position: absolute; top: 10px; left: 10px;"><span class="nebula-live-dot"></span> {{ _('LIVE') }}</span>
+        <span class="nebula-live-badge" style="position: absolute; top: 10px; left: 10px;"><span class="nebula-live-dot"></span> {{ _('Live') }}</span>
         {% if not is_mobile %}
         <div class="nebula-hero-play-icon">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><polygon points="6 4 20 12 6 20 6 4"/></svg>
+          <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><polygon points="6 4 20 12 6 20 6 4"/></svg>
         </div>
         {% endif %}
       </a>
@@ -201,10 +205,10 @@ <h2 class="nebula-hero-title">{{ hero_stream.title }}</h2>
     <!-- Filter Form -->
     <form method="get" style="display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0;">
       <input type="hidden" name="type" value="{{ current_type }}">
-      <input type="text" name="q" value="{{ q or '' }}" placeholder="{{ _('Search...') }}" class="ns-input-field" style="padding: 6px 12px; font-size: 12px; width: 220px;">
+      <input type="text" name="q" value="{{ q or '' }}" placeholder="{{ _('Search…') }}" aria-label="{{ _('Search') }}" class="ns-input-field" style="padding: 6px 12px; font-size: 12px; width: 220px;">
       
       {% if categories %}
-      <select name="cat" class="ns-input-field" style="padding: 6px 10px; font-size: 12px; cursor: pointer;">
+      <select name="cat" aria-label="{{ _('Game') }}" class="ns-input-field" style="padding: 6px 10px; font-size: 12px; cursor: pointer;">
         <option value="">{{ _('All categories') }}</option>
         {% for cat in categories %}
         <option value="{{ cat }}" {% if selected_cat == cat %}selected{% endif %}>{{ cat }}</option>
@@ -212,7 +216,7 @@ <h2 class="nebula-hero-title">{{ hero_stream.title }}</h2>
       </select>
       {% endif %}
 
-      <select name="sort" class="ns-input-field" style="padding: 6px 10px; font-size: 12px; cursor: pointer;">
+      <select name="sort" aria-label="{{ _('Sort order') }}" class="ns-input-field" style="padding: 6px 10px; font-size: 12px; cursor: pointer;">
         <option value="newest" {% if sort == 'newest' %}selected{% endif %}>{{ _('Newest') }}</option>
         <option value="oldest" {% if sort == 'oldest' %}selected{% endif %}>{{ _('Oldest') }}</option>
         <option value="duration" {% if sort == 'duration' %}selected{% endif %}>{{ _('Duration') }}</option>
@@ -246,12 +250,23 @@ <h2 class="nebula-hero-title">{{ hero_stream.title }}</h2>
   {% endif %}
 
   <!-- 5. Cinema Video Grid -->
+  <script nonce="{{ csp_nonce() }}">
+  // Thumbnail fallback (replaces inline onerror): img error events do not bubble, so listen in
+  // the capture phase. Registered before the grid is parsed so no early error is missed.
+  document.addEventListener('error', function (event) {
+    var img = event.target;
+    if (!img || img.tagName !== 'IMG' || !img.hasAttribute('data-fallback-src')) return;
+    var fallback = img.getAttribute('data-fallback-src');
+    img.removeAttribute('data-fallback-src');
+    if (fallback) img.src = fallback;
+  }, true);
+  </script>
   <section class="ns-video-grid">
       {% for f in files %}
       <article class="ns-video-card" data-watch-card data-watch-key="{{ f.watch_key }}" data-done-key="{{ f.done_key }}" data-duration-sec="{{ f.duration_sec }}">
         <div class="ns-thumb-frame">
-          <a href="{{ url_for('vod_view' if f.route == 'vod' else 'clip_view', streamer=streamer, filename=f.name) }}" style="display: block; width: 100%; height: 100%;">
-            <img src="{{ f.thumb_url }}" alt="" loading="lazy" decoding="async" onerror="this.onerror=null;this.src='{{ url_for('static', filename='img/thumb_fallback.jpg') }}'">
+          <a href="{{ url_for('vod_view' if f.route == 'vod' else 'clip_view', streamer=streamer, filename=f.name) }}" aria-label="{{ f.title or f.name }}" style="display: block; width: 100%; height: 100%;">
+            <img src="{{ f.thumb_url }}" alt="" loading="lazy" decoding="async" data-fallback-src="{{ url_for('static', filename='img/thumb_fallback.jpg') }}">
           </a>
 
           <div class="ns-card-overlay-top">
@@ -279,7 +294,7 @@ <h2 class="nebula-hero-title">{{ hero_stream.title }}</h2>
             {% endif %}
             {% if f.category %}
             <span>•</span>
-            <span style="color: #BB78FF;">{{ _('Game: %(category)s', category=f.category) }}</span>
+            <span style="color: var(--nebula-accent-highlight);">{{ _('Game: %(category)s', category=f.category) }}</span>
             {% endif %}
             {% if f.viewer_count_str %}
             <span>•</span>
@@ -331,7 +346,7 @@ <h2 class="nebula-hero-title">{{ hero_stream.title }}</h2>
   </nav>
   {% endif %}
 
-<script>
+<script nonce="{{ csp_nonce() }}">
 function updateWatchStates() {
   document.querySelectorAll('[data-watch-card]').forEach(function(card) {
     var watchKey = card.getAttribute('data-watch-key');
@@ -351,38 +366,38 @@ <h2 class="nebula-hero-title">{{ hero_stream.title }}</h2>
   <!-- Modals for Direct Banner & Avatar Customization -->
   {% if session.user_role == 'admin' %}
   <!-- Modal: Banner Anpassen -->
-  <div id="bannerModal" class="nebula-modal-backdrop" onclick="if(event.target===this) closeBannerModal()">
+  <div id="bannerModal" class="nebula-modal-backdrop" data-streamer-backdrop="banner">
     <div class="nebula-modal-card" role="dialog" aria-modal="true" aria-labelledby="bannerModalTitle">
       <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px;">
         <div>
           <h3 id="bannerModalTitle" style="margin: 0; font-size: 18px; font-weight: 800; color: #FFF; display: flex; align-items: center; gap: 8px;">
-            <span>🖼️</span> {{ _('Customize channel banner') }}
+            <span aria-hidden="true">🖼️</span> {{ _('Customize channel banner') }}
           </h3>
           <p style="margin: 4px 0 0 0; font-size: 12px; color: var(--ns-text-muted);">
-            {{ display_name or streamer }} · {{ _('Status:') }} <span style="color: #48D6A2; font-weight: 700;">{{ banner_source or _('Automatic') }}</span>
+            {{ display_name or streamer }} · {{ _('Status:') }} <span style="color: var(--nebula-status-success); font-weight: 700;">{{ banner_source or _('Automatic') }}</span>
           </p>
         </div>
-        <button type="button" onclick="closeBannerModal()" class="ns-btn ns-btn-secondary" style="padding: 4px 10px; font-size: 14px; line-height: 1; border-radius: 50%;" aria-label="{{ _('Close') }}">✕</button>
+        <button type="button" data-streamer-close="banner" class="ns-btn ns-btn-secondary" style="padding: 4px 10px; font-size: 14px; line-height: 1; border-radius: 50%;" aria-label="{{ _('Close') }}">✕</button>
       </div>
 
       <!-- Banner Preview Box -->
-      <div style="width: 100%; height: 90px; border-radius: 10px; overflow: hidden; margin-bottom: 20px; border: 1px solid var(--nebula-border); background: {% if banner_url %}url('{{ banner_url }}') center/cover no-repeat{% else %}linear-gradient(135deg, rgba(77, 99, 255, 0.35) 0%, rgba(147, 101, 255, 0.3) 50%, rgba(11, 18, 32, 0.95) 100%){% endif %}; position: relative;">
-        <span style="position: absolute; bottom: 6px; right: 8px; font-size: 10px; font-weight: 700; background: rgba(0,0,0,0.65); padding: 2px 6px; border-radius: 4px; color: #FFF;">{{ _('Current preview') }}</span>
+      <div style="width: 100%; height: 90px; border-radius: 10px; overflow: hidden; margin-bottom: 20px; border: 1px solid var(--nebula-border); background: {% if banner_css_url %}url('{{ banner_css_url }}') center/cover no-repeat{% else %}linear-gradient(135deg, rgba(77, 99, 255, 0.35) 0%, rgba(147, 101, 255, 0.3) 50%, rgba(11, 18, 32, 0.95) 100%){% endif %}; position: relative;">
+        <span style="position: absolute; bottom: 6px; right: 8px; font-size: 12px; font-weight: 700; background: rgba(0,0,0,0.65); padding: 2px 6px; border-radius: 4px; color: #FFF;">{{ _('Current preview') }}</span>
       </div>
 
       <!-- Upload Form -->
       <form method="post" action="{{ url_for('streamer_banner_update', streamer=streamer) }}" enctype="multipart/form-data" style="margin-bottom: 16px;">
         <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
         <input type="hidden" name="action" value="save">
-        <label style="display: block; font-size: 12px; font-weight: 700; color: #BB78FF; margin-bottom: 6px;">{{ _('OPTION A: UPLOAD IMAGE FILE') }}</label>
+        <label for="bannerFileInput" style="display: block; font-size: 12px; font-weight: 700; color: var(--nebula-accent-highlight); margin-bottom: 6px;">{{ _('Option A: upload image file') }}</label>
         <div style="display: flex; gap: 8px; align-items: center;">
           <input type="file" name="banner_file" id="bannerFileInput" accept="image/jpeg,image/png,image/webp,image/gif" class="ns-input-field" style="flex: 1; padding: 6px 10px; font-size: 12px;">
           <button type="submit" class="ns-btn ns-btn-primary" style="padding: 6px 14px; font-size: 12px; white-space: nowrap;">{{ _('Upload') }}</button>
         </div>
-        <span style="font-size: 10px; color: var(--ns-text-muted); display: block; margin-top: 4px;">{{ _('Supported: JPG, PNG, WEBP, GIF (recommended: 1920x360 or 1200x300)') }}</span>
+        <span style="font-size: 12px; color: var(--ns-text-muted); display: block; margin-top: 4px;">{{ _('Supported: JPG, PNG, WEBP, GIF (recommended: 1920x360 or 1200x300)') }}</span>
       </form>
 
-      <div style="display: flex; align-items: center; text-align: center; margin: 16px 0; color: var(--ns-text-muted); font-size: 11px;">
+      <div style="display: flex; align-items: center; text-align: center; margin: 16px 0; color: var(--ns-text-muted); font-size: 12px;">
         <div style="flex: 1; border-bottom: 1px solid rgba(255,255,255,0.08);"></div>
         <span style="padding: 0 10px;">{{ _('OR') }}</span>
         <div style="flex: 1; border-bottom: 1px solid rgba(255,255,255,0.08);"></div>
@@ -391,19 +406,19 @@ <h3 id="bannerModalTitle" style="margin: 0; font-size: 18px; font-weight: 800; c
       <!-- URL Form -->
       <form method="post" action="{{ url_for('streamer_banner_update', streamer=streamer) }}" style="margin-bottom: 16px;">
         <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-        <label style="display: block; font-size: 12px; font-weight: 700; color: #BB78FF; margin-bottom: 6px;">{{ _('OPTION B: USE IMAGE URL') }}</label>
+        <label for="customBannerUrlInput" style="display: block; font-size: 12px; font-weight: 700; color: var(--nebula-accent-highlight); margin-bottom: 6px;">{{ _('Option B: use image URL') }}</label>
         <div style="display: flex; gap: 8px; align-items: center;">
-          <input type="url" name="custom_banner_url" placeholder="https://example.com/banner.jpg" value="{{ custom_banner_url or '' }}" class="ns-input-field" style="flex: 1; padding: 6px 10px; font-size: 12px;">
+          <input type="url" name="custom_banner_url" id="customBannerUrlInput" placeholder="https://example.com/banner.jpg" value="{{ custom_banner_url or '' }}" class="ns-input-field" style="flex: 1; padding: 6px 10px; font-size: 12px;">
           <button type="submit" name="action" value="save" class="ns-btn ns-btn-primary" style="padding: 6px 14px; font-size: 12px; white-space: nowrap;">{{ _('Save') }}</button>
         </div>
       </form>
 
       {% if has_custom_banner %}
       <div style="padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: space-between; align-items: center;">
-        <span style="font-size: 11px; color: var(--ns-text-muted);">{{ _('Custom banner active') }}</span>
+        <span style="font-size: 12px; color: var(--ns-text-muted);">{{ _('Custom banner active') }}</span>
         <form method="post" action="{{ url_for('streamer_banner_update', streamer=streamer) }}" style="margin: 0;">
           <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-          <button type="submit" name="action" value="reset" class="ns-btn ns-btn-secondary" style="padding: 5px 12px; font-size: 11px; color: #F04458;" onclick='return confirm({{ _("Really reset the custom banner and switch to the default?")|tojson }})'>{{ _('Restore default') }}</button>
+          <button type="submit" name="action" value="reset" class="ns-btn ns-btn-secondary" style="padding: 5px 12px; font-size: 12px; color: var(--nebula-status-live);" data-confirm="{{ _('Really reset the custom banner and switch to the default?') }}" data-confirm-ok="{{ _('Restore default') }}">{{ _('Restore default') }}</button>
         </form>
       </div>
       {% endif %}
@@ -411,23 +426,23 @@ <h3 id="bannerModalTitle" style="margin: 0; font-size: 18px; font-weight: 800; c
   </div>
 
   <!-- Modal: Profilbild Anpassen -->
-  <div id="avatarModal" class="nebula-modal-backdrop" onclick="if(event.target===this) closeAvatarModal()">
+  <div id="avatarModal" class="nebula-modal-backdrop" data-streamer-backdrop="avatar">
     <div class="nebula-modal-card" role="dialog" aria-modal="true" aria-labelledby="avatarModalTitle">
       <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px;">
         <div>
           <h3 id="avatarModalTitle" style="margin: 0; font-size: 18px; font-weight: 800; color: #FFF; display: flex; align-items: center; gap: 8px;">
-            <span>👤</span> {{ _('Customize profile picture') }}
+            <span aria-hidden="true">👤</span> {{ _('Customize profile picture') }}
           </h3>
           <p style="margin: 4px 0 0 0; font-size: 12px; color: var(--ns-text-muted);">
-            {{ display_name or streamer }} · {{ _('Status:') }} <span style="color: #48D6A2; font-weight: 700;">{{ avatar_source or _('Twitch / default') }}</span>
+            {{ display_name or streamer }} · {{ _('Status:') }} <span style="color: var(--nebula-status-success); font-weight: 700;">{{ avatar_source or _('Twitch / default') }}</span>
           </p>
         </div>
-        <button type="button" onclick="closeAvatarModal()" class="ns-btn ns-btn-secondary" style="padding: 4px 10px; font-size: 14px; line-height: 1; border-radius: 50%;" aria-label="{{ _('Close') }}">✕</button>
+        <button type="button" data-streamer-close="avatar" class="ns-btn ns-btn-secondary" style="padding: 4px 10px; font-size: 14px; line-height: 1; border-radius: 50%;" aria-label="{{ _('Close') }}">✕</button>
       </div>
 
       <!-- Avatar Preview Box -->
       <div style="display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding: 12px; background: rgba(0,0,0,0.25); border-radius: 12px; border: 1px solid var(--nebula-border);">
-        <div style="width: 64px; height: 64px; border-radius: 50%; border: 2px solid #9365FF; overflow: hidden; background: #151F33; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; color: #FFF; flex-shrink: 0;">
+        <div style="width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--nebula-accent-secondary); overflow: hidden; background: var(--nebula-bg-card); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; color: #FFF; flex-shrink: 0;">
           {% if avatar_url %}
           <img src="{{ avatar_url }}" alt="{{ streamer }}" style="width: 100%; height: 100%; object-fit: cover;">
           {% else %}
@@ -436,7 +451,7 @@ <h3 id="avatarModalTitle" style="margin: 0; font-size: 18px; font-weight: 800; c
         </div>
         <div>
           <div style="font-size: 13px; font-weight: 700; color: #FFF;">{{ _('Current profile picture') }}</div>
-          <div style="font-size: 11px; color: var(--ns-text-muted); margin-top: 2px;">{{ _('Shown in the navigation, sidebar and on streamer cards.') }}</div>
+          <div style="font-size: 12px; color: var(--ns-text-muted); margin-top: 2px;">{{ _('Shown in the navigation, sidebar and on streamer cards.') }}</div>
         </div>
       </div>
 
@@ -444,15 +459,15 @@ <h3 id="avatarModalTitle" style="margin: 0; font-size: 18px; font-weight: 800; c
       <form method="post" action="{{ url_for('streamer_avatar_update', streamer=streamer) }}" enctype="multipart/form-data" style="margin-bottom: 16px;">
         <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
         <input type="hidden" name="action" value="save">
-        <label style="display: block; font-size: 12px; font-weight: 700; color: #BB78FF; margin-bottom: 6px;">{{ _('OPTION A: UPLOAD PROFILE PICTURE') }}</label>
+        <label for="avatarFileInput" style="display: block; font-size: 12px; font-weight: 700; color: var(--nebula-accent-highlight); margin-bottom: 6px;">{{ _('Option A: upload profile picture') }}</label>
         <div style="display: flex; gap: 8px; align-items: center;">
           <input type="file" name="avatar_file" id="avatarFileInput" accept="image/jpeg,image/png,image/webp,image/gif" class="ns-input-field" style="flex: 1; padding: 6px 10px; font-size: 12px;">
           <button type="submit" class="ns-btn ns-btn-primary" style="padding: 6px 14px; font-size: 12px; white-space: nowrap;">{{ _('Upload') }}</button>
         </div>
-        <span style="font-size: 10px; color: var(--ns-text-muted); display: block; margin-top: 4px;">{{ _('Supported: JPG, PNG, WEBP, GIF (square recommended, e.g. 300x300)') }}</span>
+        <span style="font-size: 12px; color: var(--ns-text-muted); display: block; margin-top: 4px;">{{ _('Supported: JPG, PNG, WEBP, GIF (square recommended, e.g. 300x300)') }}</span>
       </form>
 
-      <div style="display: flex; align-items: center; text-align: center; margin: 16px 0; color: var(--ns-text-muted); font-size: 11px;">
+      <div style="display: flex; align-items: center; text-align: center; margin: 16px 0; color: var(--ns-text-muted); font-size: 12px;">
         <div style="flex: 1; border-bottom: 1px solid rgba(255,255,255,0.08);"></div>
         <span style="padding: 0 10px;">{{ _('OR') }}</span>
         <div style="flex: 1; border-bottom: 1px solid rgba(255,255,255,0.08);"></div>
@@ -461,26 +476,26 @@ <h3 id="avatarModalTitle" style="margin: 0; font-size: 18px; font-weight: 800; c
       <!-- URL Form -->
       <form method="post" action="{{ url_for('streamer_avatar_update', streamer=streamer) }}" style="margin-bottom: 16px;">
         <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-        <label style="display: block; font-size: 12px; font-weight: 700; color: #BB78FF; margin-bottom: 6px;">{{ _('OPTION B: USE IMAGE URL') }}</label>
+        <label for="customAvatarUrlInput" style="display: block; font-size: 12px; font-weight: 700; color: var(--nebula-accent-highlight); margin-bottom: 6px;">{{ _('Option B: use image URL') }}</label>
         <div style="display: flex; gap: 8px; align-items: center;">
-          <input type="url" name="custom_avatar_url" placeholder="https://example.com/avatar.jpg" value="{{ custom_avatar_url or '' }}" class="ns-input-field" style="flex: 1; padding: 6px 10px; font-size: 12px;">
+          <input type="url" name="custom_avatar_url" id="customAvatarUrlInput" placeholder="https://example.com/avatar.jpg" value="{{ custom_avatar_url or '' }}" class="ns-input-field" style="flex: 1; padding: 6px 10px; font-size: 12px;">
           <button type="submit" name="action" value="save" class="ns-btn ns-btn-primary" style="padding: 6px 14px; font-size: 12px; white-space: nowrap;">{{ _('Save') }}</button>
         </div>
       </form>
 
       {% if has_custom_avatar %}
       <div style="padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: space-between; align-items: center;">
-        <span style="font-size: 11px; color: var(--ns-text-muted);">{{ _('Custom profile picture active') }}</span>
+        <span style="font-size: 12px; color: var(--ns-text-muted);">{{ _('Custom profile picture active') }}</span>
         <form method="post" action="{{ url_for('streamer_avatar_update', streamer=streamer) }}" style="margin: 0;">
           <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-          <button type="submit" name="action" value="reset" class="ns-btn ns-btn-secondary" style="padding: 5px 12px; font-size: 11px; color: #F04458;" onclick='return confirm({{ _("Really reset the custom profile picture and switch to the default?")|tojson }})'>{{ _('Restore default') }}</button>
+          <button type="submit" name="action" value="reset" class="ns-btn ns-btn-secondary" style="padding: 5px 12px; font-size: 12px; color: var(--nebula-status-live);" data-confirm="{{ _('Really reset the custom profile picture and switch to the default?') }}" data-confirm-ok="{{ _('Restore default') }}">{{ _('Restore default') }}</button>
         </form>
       </div>
       {% endif %}
     </div>
   </div>
 
-  <script>
+  <script nonce="{{ csp_nonce() }}">
   function openBannerModal() {
     var m = document.getElementById('bannerModal');
     if (m) m.style.display = 'flex';
@@ -503,6 +518,32 @@ <h3 id="avatarModalTitle" style="margin: 0; font-size: 18px; font-weight: 800; c
       closeAvatarModal();
     }
   });
+  var streamerModalOpeners = { banner: openBannerModal, avatar: openAvatarModal };
+  var streamerModalClosers = { banner: closeBannerModal, avatar: closeAvatarModal };
+  document.addEventListener('click', function(e) {
+    var opener = e.target.closest('[data-streamer-open]');
+    if (opener && streamerModalOpeners[opener.getAttribute('data-streamer-open')]) {
+      streamerModalOpeners[opener.getAttribute('data-streamer-open')]();
+      return;
+    }
+    var closer = e.target.closest('[data-streamer-close]');
+    if (closer && streamerModalClosers[closer.getAttribute('data-streamer-close')]) {
+      streamerModalClosers[closer.getAttribute('data-streamer-close')]();
+      return;
+    }
+    var backdrop = e.target.closest('[data-streamer-backdrop]');
+    if (backdrop && e.target === backdrop && streamerModalClosers[backdrop.getAttribute('data-streamer-backdrop')]) {
+      streamerModalClosers[backdrop.getAttribute('data-streamer-backdrop')]();
+      return;
+    }
+  });
+  document.addEventListener('keydown', function(e) {
+    if (e.key !== 'Enter' && e.key !== ' ') return;
+    var opener = e.target.closest ? e.target.closest('[data-streamer-open]') : null;
+    if (!opener || opener !== e.target || !streamerModalOpeners[opener.getAttribute('data-streamer-open')]) return;
+    e.preventDefault();
+    streamerModalOpeners[opener.getAttribute('data-streamer-open')]();
+  });
   </script>
   {% endif %}
 
@@ -511,7 +552,7 @@ <h3 id="avatarModalTitle" style="margin: 0; font-size: 18px; font-weight: 800; c
 
   <!-- Instant Client-Side Live Filter -->
 
-  <script>
+  <script nonce="{{ csp_nonce() }}">
   (function() {
     var qInput = document.querySelector('form input[name="q"]');
     var catSelect = document.querySelector('form select[name="cat"]');
diff --git a/WEBUI/templates/twitch_live_hub.html b/WEBUI/templates/twitch_live_hub.html
index 9da0861..439bf48 100644
--- a/WEBUI/templates/twitch_live_hub.html
+++ b/WEBUI/templates/twitch_live_hub.html
@@ -5,8 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
     <title>Live · StreamVault</title>
     <link rel="stylesheet" href="{{ UI_FONTS_HREF }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='style.css', v=ASSET_VERSION) }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/tube_design_system.css', v=ASSET_VERSION) }}">
+    {% include 'components/styles.html' %}
   </head>
   <body class="page-twitch-live {{ theme_class }} ns-platform">
 
@@ -36,7 +35,7 @@ <h2 id="monitoredHeading">{{ _('Monitored') }}</h2>
             <div class="twitch-thumb-wrap">
               {% if s.is_live %}
               <img src="{{ s.thumbnail_url }}" alt="" loading="lazy" decoding="async" width="640" height="360">
-              <span class="twitch-live-pill">{{ _('LIVE') }}</span>
+              <span class="twitch-live-pill">{{ _('Live') }}</span>
               <span class="twitch-viewers">{{ s.viewer_count }}</span>
               {% else %}
               <div class="twitch-thumb-offline">{{ _('Offline') }}</div>
@@ -74,7 +73,7 @@ <h2 id="discoverHeading">{{ _('Discover') }}</h2>
           <a class="twitch-stream-card is-live" href="{{ url_for('twitch_watch', channel=s.login) }}" data-login="{{ s.login }}">
             <div class="twitch-thumb-wrap">
               <img src="{{ s.thumbnail_url }}" alt="" loading="lazy" decoding="async" width="640" height="360">
-              <span class="twitch-live-pill">{{ _('LIVE') }}</span>
+              <span class="twitch-live-pill">{{ _('Live') }}</span>
               <span class="twitch-viewers">{{ s.viewer_count }}</span>
             </div>
             <div class="twitch-card-body">
@@ -106,7 +105,7 @@ <h2 id="recentHeading">{{ _('Recently watched') }}</h2>
       </section>
     </div>
 
-    <script>
+    <script nonce="{{ csp_nonce() }}">
     (function() {
       const RECENT_KEY = 'streamvault_twitch_recent_v1';
       const watchBase = {{ url_for('twitch_watch', channel='__LOGIN__')|tojson }};
diff --git a/WEBUI/templates/twitch_watch.html b/WEBUI/templates/twitch_watch.html
index 392348d..672a1d8 100644
--- a/WEBUI/templates/twitch_watch.html
+++ b/WEBUI/templates/twitch_watch.html
@@ -5,8 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
     <title>LIVE {{ display_name }} · StreamVault</title>
     <link rel="stylesheet" href="{{ UI_FONTS_HREF }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='style.css', v=ASSET_VERSION) }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/tube_design_system.css', v=ASSET_VERSION) }}">
+    {% include 'components/styles.html' %}
   </head>
   <body class="page-twitch-watch page-vod {{ theme_class }} ns-platform" data-channel="{{ channel }}">
 
@@ -41,7 +40,7 @@
             {% else %}
             <iframe
               src="{{ player_url }}"
-              title="{{ _('LIVE %(name)s (without Twitch login)', name=display_name) }}"
+              title="{{ _('Live: %(name)s (without Twitch login)', name=display_name) }}"
               allow="autoplay; encrypted-media; picture-in-picture; fullscreen"
               allowfullscreen
               credentialless
@@ -53,7 +52,7 @@
           <section class="vod-details" aria-labelledby="watchTitle">
             <div class="vod-details-main">
               <div class="vod-kicker">
-                <span class="twitch-live-pill" id="livePill" {% if not is_live %}hidden{% endif %}>{{ _('LIVE') }}</span>
+                <span class="twitch-live-pill" id="livePill" {% if not is_live %}hidden{% endif %}>{{ _('Live') }}</span>
                 {% if monitored and not is_mobile %}<span class="twitch-monitored-pill">{{ _('Monitored') }}</span>{% endif %}
                 <span class="platform-badge platform-twitch">TW</span>
               </div>
diff --git a/WEBUI/templates/twitch_watch_chat.js.html b/WEBUI/templates/twitch_watch_chat.js.html
index 8edd319..25a3baa 100644
--- a/WEBUI/templates/twitch_watch_chat.js.html
+++ b/WEBUI/templates/twitch_watch_chat.js.html
@@ -1,5 +1,5 @@
 <script src="{{ url_for('static', filename='chat_emotes.js', v=ASSET_VERSION) }}"></script>
-<script>
+<script nonce="{{ csp_nonce() }}">
 (function() {
   const channel = {{ channel|tojson }};
   const displayName = {{ display_name|tojson }};
@@ -43,8 +43,14 @@
     return String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0');
   }
 
+  function escapeChatText(value) {
+    return String(value == null ? '' : value).replace(/[&<>"']/g, (ch) => ({
+      '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
+    })[ch]);
+  }
+
   function processMsg(item) {
-    return (window.StreamVaultChat && window.StreamVaultChat.renderMessageHtml && window.StreamVaultChat.renderMessageHtml(item)) || (item.msg || '');
+    return (window.StreamVaultChat && window.StreamVaultChat.renderMessageHtml && window.StreamVaultChat.renderMessageHtml(item)) || escapeChatText(item.msg || '');
   }
 
   function atBottom(list, thresholdPx) {
@@ -109,7 +115,8 @@
     line.className = (window.StreamVaultChat && window.StreamVaultChat.chatLineClassName && window.StreamVaultChat.chatLineClassName(item))
       || (item.reward ? 'chat-line chat-line-redeem' : 'chat-line');
     line.innerHTML = '<span class="chat-time">' + formatTime(item.t) + '</span>' +
-      '<span class="chat-text"><span class="chat-badges"></span><span class="chat-user" style="color:' + userColor + '"></span><span class="chat-msg"></span></span>';
+      '<span class="chat-text"><span class="chat-badges"></span><span class="chat-user"></span><span class="chat-msg"></span></span>';
+    line.querySelector('.chat-user').style.color = userColor;
     if (!item.event) {
       const badges = line.querySelector('.chat-badges');
       if (badges) badges.innerHTML = (window.StreamVaultChat && window.StreamVaultChat.renderBadgesHtml && window.StreamVaultChat.renderBadgesHtml(item)) || '';
diff --git a/WEBUI/templates/twitch_watch_clip.js.html b/WEBUI/templates/twitch_watch_clip.js.html
index f056f7c..a74eebd 100644
--- a/WEBUI/templates/twitch_watch_clip.js.html
+++ b/WEBUI/templates/twitch_watch_clip.js.html
@@ -1,6 +1,6 @@
 
 <script src="{{ url_for('static', filename='live_clip_overlay.js', v=ASSET_VERSION) }}"></script>
-<script>
+<script nonce="{{ csp_nonce() }}">
 (function() {
   window.CLIP_SETTINGS = {{ clip_settings|tojson }};
   if (!window.StreamVaultLiveClip) return;
diff --git a/WEBUI/templates/twitch_watch_mobile.html b/WEBUI/templates/twitch_watch_mobile.html
index ae6a92a..0c1d8a1 100644
--- a/WEBUI/templates/twitch_watch_mobile.html
+++ b/WEBUI/templates/twitch_watch_mobile.html
@@ -4,30 +4,29 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
 <title>LIVE {{ display_name }}</title>
-<link rel="stylesheet" href="{{ url_for('static', filename='style.css', v=ASSET_VERSION) }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/tube_design_system.css', v=ASSET_VERSION) }}">
+{% include 'components/styles.html' %}
 </head>
 <body class="page-mobile-player page-twitch-watch-mobile landscape-chat-open {{ theme_class }} ns-platform" data-channel="{{ channel }}">
   <div class="video-container">
     <div class="overlay-header">
-      <a href="{{ url_for('index') }}" class="back-btn" aria-label="{{ _('Back') }}"><svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg></a>
+      <a href="{{ url_for('index') }}" class="back-btn" aria-label="{{ _('Back') }}"><svg aria-hidden="true" viewBox="0 0 24 24" width="28" height="28" fill="currentColor"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg></a>
       <div class="overlay-header-meta">
-        <span class="twitch-live-pill" id="livePillOverlay" {% if not is_live %}hidden{% endif %}>{{ _('LIVE') }}</span>
+        <span class="twitch-live-pill" id="livePillOverlay" {% if not is_live %}hidden{% endif %}>{{ _('Live') }}</span>
         <span class="overlay-stream-name" id="watchDisplayNameOverlay">{{ display_name }}</span>
       </div>
       <div class="overlay-header-actions">
         <button type="button" class="mobile-landscape-chat-toggle" id="landscapeChatToggle" aria-label="{{ _('Expand chat') }}" aria-pressed="false" title="{{ _('Expand chat') }}">
           <span class="landscape-chat-toggle-closed-content">
-            <svg class="landscape-chat-pill-icon" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <svg class="landscape-chat-pill-icon" aria-hidden="true" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
             </svg>
-            <svg class="landscape-chat-pill-arrow" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <svg class="landscape-chat-pill-arrow" aria-hidden="true" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
               <polyline points="15 18 9 12 15 6"></polyline>
             </svg>
             <span class="landscape-chat-pill-text">{{ _('Chat') }}</span>
           </span>
           <span class="landscape-chat-toggle-open-content">
-            <svg class="landscape-chat-collapse-icon" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <svg class="landscape-chat-collapse-icon" aria-hidden="true" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
               <polyline points="9 18 15 12 9 6"></polyline>
             </svg>
             <span class="landscape-chat-collapse-text">{{ _('Fullscreen') }}</span>
@@ -61,7 +60,7 @@
         preload="auto"
       ></video>
       <button type="button" id="liveTapUnmute" class="live-tap-unmute" aria-label="{{ _('Unmute') }}" hidden>
-        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <svg aria-hidden="true" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
           <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path>
         </svg>
@@ -70,7 +69,7 @@
       {% else %}
       <iframe
         src="{{ player_url }}"
-        title="{{ _('LIVE %(name)s (without Twitch login)', name=display_name) }}"
+        title="{{ _('Live: %(name)s (without Twitch login)', name=display_name) }}"
         allow="autoplay; encrypted-media; picture-in-picture; fullscreen"
         allowfullscreen
         credentialless
@@ -83,13 +82,13 @@
     <div class="vod-details-main">
       <div class="vod-title-cluster">
         <a href="{{ url_for('index') }}" class="mobile-portrait-back-btn" aria-label="{{ _('Back to overview') }}" title="{{ _('Back') }}">
-          <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+          <svg aria-hidden="true" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
             <line x1="19" y1="12" x2="5" y2="12"></line>
             <polyline points="12 19 5 12 12 5"></polyline>
           </svg>
         </a>
         <div class="vod-kicker">
-          <span class="twitch-live-pill" id="livePill" {% if not is_live %}hidden{% endif %}>{{ _('LIVE') }}</span>
+          <span class="twitch-live-pill" id="livePill" {% if not is_live %}hidden{% endif %}>{{ _('Live') }}</span>
         </div>
         <h1 class="vod-display-title" id="watchDisplayName">{{ display_name }}</h1>
       </div>
@@ -100,22 +99,22 @@ <h1 class="vod-display-title" id="watchDisplayName">{{ display_name }}</h1>
     </div>
     <div class="vod-file-actions" aria-label="{{ _('Actions') }}">
       <button type="button" class="vod-inline-tool mobile-action-btn" id="livePlayPauseBtn" aria-label="{{ _('Pause playback') }}" title="{{ _('Pause playback') }}">
-        <svg class="icon-pause" viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
+        <svg class="icon-pause" aria-hidden="true" viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
           <rect x="6" y="4" width="4" height="16" rx="1"></rect>
           <rect x="14" y="4" width="4" height="16" rx="1"></rect>
         </svg>
-        <svg class="icon-play" viewBox="0 0 24 24" width="14" height="14" fill="currentColor" style="display:none">
+        <svg class="icon-play" aria-hidden="true" viewBox="0 0 24 24" width="14" height="14" fill="currentColor" style="display:none">
           <polygon points="6 4 20 12 6 20 6 4"></polygon>
         </svg>
         <span class="btn-label">{{ _('Pause') }}</span>
       </button>
 
       <button type="button" class="vod-inline-tool mobile-action-btn" id="liveMuteBtn" aria-label="{{ _('Mute') }}" title="{{ _('Mute') }}">
-        <svg class="icon-unmute" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <svg class="icon-unmute" aria-hidden="true" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
           <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path>
         </svg>
-        <svg class="icon-mute" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none">
+        <svg class="icon-mute" aria-hidden="true" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none">
           <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
           <line x1="23" y1="9" x2="17" y2="15"></line>
           <line x1="17" y1="9" x2="23" y2="15"></line>
@@ -133,7 +132,7 @@ <h1 class="vod-display-title" id="watchDisplayName">{{ display_name }}</h1>
         aria-label="{{ _('Create clip') }}"
         title="{{ _('Create clip') }}"
       >
-        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <svg aria-hidden="true" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <circle cx="6" cy="6" r="3"></circle>
           <circle cx="6" cy="18" r="3"></circle>
           <line x1="20" y1="4" x2="8.12" y2="15.88"></line>
diff --git a/WEBUI/templates/twitch_watch_proxy.js.html b/WEBUI/templates/twitch_watch_proxy.js.html
index 242193e..37f60de 100644
--- a/WEBUI/templates/twitch_watch_proxy.js.html
+++ b/WEBUI/templates/twitch_watch_proxy.js.html
@@ -1,7 +1,20 @@
 {% if use_hls_proxy %}
-<script src="{{ url_for('static', filename='mpegts.js', v=ASSET_VERSION) }}" onerror="this.onerror=null;this.src='https://cdn.jsdelivr.net/npm/mpegts.js@1.7.3/dist/mpegts.js'"></script>
+<script src="{{ url_for('static', filename='mpegts.js', v=ASSET_VERSION) }}"></script>
+<script nonce="{{ csp_nonce() }}">
+(function() {
+  // The local mpegts.js above is parser-blocking, so by now it has either run or failed.
+  // On failure load the pinned CDN build once (replaces the former inline onerror handler).
+  if (window.mpegts) return;
+  const fallback = document.createElement('script');
+  fallback.src = 'https://cdn.jsdelivr.net/npm/mpegts.js@1.7.3/dist/mpegts.js';
+  fallback.addEventListener('error', function() {
+    console.warn('[live] mpegts.js unavailable (local and CDN); using HLS fallback');
+  }, { once: true });
+  document.head.appendChild(fallback);
+})();
+</script>
 <script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>
-<script>
+<script nonce="{{ csp_nonce() }}">
 (function() {
   const playlistUrl = {{ (hls_playlist_url or '')|tojson }};
   const readyUrl = {{ (hls_ready_url or '')|tojson }};
diff --git a/WEBUI/templates/vod.html b/WEBUI/templates/vod.html
index 59fa0e5..04fb886 100644
--- a/WEBUI/templates/vod.html
+++ b/WEBUI/templates/vod.html
@@ -5,8 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{{ vod_display_title or filename }}</title>
     <link rel="stylesheet" href="{{ UI_FONTS_HREF }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='style.css', v=ASSET_VERSION) }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/tube_design_system.css', v=ASSET_VERSION) }}">
+    {% include 'components/styles.html' %}
   </head>
   <body class="page-vod {{ theme_class }} ns-platform">
 
@@ -23,8 +22,10 @@
           <div class="controls-panel vod-share-panel">
             <div class="vod-share-label">{{ _('Public link created:') }}</div>
             <div class="vod-share-row">
-              <input id="vodShareInput" class="vod-share-input" readonly value="{{ share_link }}" onclick="this.select()">
-              <button type="button" class="vod-share-copy" onclick="document.getElementById('vodShareInput').select(); document.execCommand('copy');" aria-label="{{ _('Copy link') }}">{{ _('Copy') }}</button>
+              <label for="vodShareInput" class="sr-only">{{ _('Public link created:') }}</label>
+              <input id="vodShareInput" class="vod-share-input" readonly value="{{ share_link }}">
+              <button type="button" class="vod-share-copy" id="vodShareCopy" aria-label="{{ _('Copy link') }}" data-copied-label="{{ _('Copied') }}">{{ _('Copy') }}</button>
+              <span class="sr-only" id="vodShareCopyStatus" role="status"></span>
             </div>
           </div>
         {% endif %}
@@ -46,10 +47,10 @@
         >
           {{ _('Your browser does not support the video tag.') }}
         </video>
-        <div id="vodPlayerError" class="vod-player-error-overlay" hidden>
-          <div style="font-size: 36px; margin-bottom: 8px;">⚠️</div>
+        <div id="vodPlayerError" class="vod-player-error-overlay" role="alert" hidden>
+          <div aria-hidden="true" style="font-size: 36px; margin-bottom: 8px;">⚠️</div>
           <strong style="font-size: 16px; color: #FFF;">{{ _('Playback unavailable') }}</strong>
-          <p style="color: #A2AEC8; max-width: 440px; margin: 0; font-size: 13px;">{{ _('The video file could not be loaded or is still being transcoded.') }}</p>
+          <p style="color: var(--nebula-text-secondary); max-width: 440px; margin: 0; font-size: 13px;">{{ _('The video file could not be loaded or is still being transcoded.') }}</p>
           <a href="{{ back_url }}" class="ns-btn ns-btn-secondary" style="margin-top: 10px;">{{ _('Back to overview') }}</a>
         </div>
         <div class="vod-timeline-heatmap-bar" id="vodHeatmapBar" title="{{ _('Chat density & event timeline (click to jump)') }}">
@@ -175,7 +176,7 @@ <h1 id="vod-title" class="vod-display-title">{{ vod_display_title or filename }}
               </form>
               {% endif %}
               {% if show_share and not is_mobile %}
-              <button class="vod-file-action" type="button" aria-label="{{ _('Share') }}" title="{{ _('Share') }}" onclick="shareItem(this, '{{ url_for('share_create', streamer=streamer, filename=filename) }}', '{{ route_type }}')">
+              <button class="vod-file-action" type="button" aria-label="{{ _('Share') }}" title="{{ _('Share') }}" data-share-url="{{ url_for('share_create', streamer=streamer, filename=filename) }}" data-share-route="{{ route_type }}">
                 <svg aria-hidden="true" viewBox="0 0 24 24" fill="none"><path d="M12 16V5m0 0L8 9m4-4 4 4M5 14v5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                 <span>{{ _('Share') }}</span>
               </button>
@@ -217,7 +218,7 @@ <h2 id="vodTranscriptTitle">{{ _('Transcript') }}</h2>
           <div id="transcriptStatusCard" class="transcript-status-card" data-state="{{ transcript_status.state or 'idle' }}">
             <div class="transcript-status-message" id="transcriptStatusMessage">{{ transcript_status.message or transcript_status }}</div>
             {% if transcript_status.percent is defined %}
-            <div class="transcript-progress">
+            <div class="transcript-progress" role="progressbar" aria-label="{{ _('Transcript progress') }}" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{ transcript_status.percent|int }}">
               <div id="transcriptStatusBar" style="width:{{ transcript_status.percent }}%;"></div>
             </div>
             <span class="transcript-percent" id="transcriptStatusPercent">{{ transcript_status.percent }}%</span>
@@ -254,18 +255,19 @@ <h2 id="vodTranscriptTitle">{{ _('Transcript') }}</h2>
             <button id="chatAutoToggle" class="chat-toggle" type="button">{{ _('Auto') }}</button>
           </div>
           {% if not is_mobile %}
-          <div class="chat-filter-bar" aria-label="{{ _('Chat filter') }}">
-            <input id="chatFilterText" type="search" placeholder="{{ _('Filter chat...') }}">
-            <label><input id="chatFilterMods" type="checkbox"> Mods</label>
-            <label><input id="chatFilterSubs" type="checkbox"> Subs</label>
-            <label><input id="chatFilterEmotes" type="checkbox"> Emotes</label>
-            <button id="chatFilterClear" type="button" title="{{ _('Clear filters') }}">×</button>
+          <div class="chat-filter-bar" role="group" aria-label="{{ _('Chat filter') }}">
+            <label for="chatFilterText" class="sr-only">{{ _('Filter chat') }}</label>
+            <input id="chatFilterText" type="search" placeholder="{{ _('Filter chat…') }}">
+            <label><input id="chatFilterMods" type="checkbox"> {{ _('Mods') }}</label>
+            <label><input id="chatFilterSubs" type="checkbox"> {{ _('Subs') }}</label>
+            <label><input id="chatFilterEmotes" type="checkbox"> {{ _('Emotes') }}</label>
+            <button id="chatFilterClear" type="button" title="{{ _('Clear filters') }}" aria-label="{{ _('Clear filters') }}">×</button>
           </div>
           {% endif %}
           <div id="chatList" class="chat-list">
             <div id="chatEmptyState" class="vod-chat-empty-state">
               <div style="font-size: 24px; margin-bottom: 8px; opacity: 0.7;">💬</div>
-              <span style="font-weight: 600; color: #F3F5FC; margin-bottom: 4px;">{{ _('Chat replay ready') }}</span>
+              <span style="font-weight: 600; color: var(--nebula-text-main); margin-bottom: 4px;">{{ _('Chat replay ready') }}</span>
               <span>{{ _('Start playback or move along the timeline to sync chat messages.') }}</span>
             </div>
           </div>
@@ -361,7 +363,7 @@ <h2 id="vodClipDialogTitle">{{ _('Create clip') }}</h2>
     <script src="{{ url_for('static', filename='vod_watch_slot.js', v=ASSET_VERSION) }}"></script>
     <script src="{{ url_for('static', filename='chat_emotes.js', v=ASSET_VERSION) }}"></script>
     <script src="{{ url_for('static', filename='live_clip_overlay.js', v=ASSET_VERSION) }}"></script>
-    <script>
+    <script nonce="{{ csp_nonce() }}">
       const vPlayer = document.getElementById('vodPlayer');
       if (vPlayer) {
         window.__STREAMVAULT_CSRF = {{ csrf_token()|tojson }};
@@ -1044,23 +1046,34 @@ <h2 id="vodClipDialogTitle">{{ _('Create clip') }}</h2>
       }
       
       function copyToClipboard(text) {
-        if (navigator.clipboard && window.isSecureContext) {
-            return navigator.clipboard.writeText(text);
-        } else {
-            let textArea = document.createElement("textarea");
-            textArea.value = text;
-            textArea.style.position = "fixed";
-            textArea.style.left = "-9999px";
-            textArea.style.top = "0";
-            document.body.appendChild(textArea);
-            textArea.focus();
-            textArea.select();
-            return new Promise((resolve, reject) => {
-                document.execCommand('copy') ? resolve() : reject();
-                textArea.remove();
-            });
+        if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
+          return navigator.clipboard.writeText(text);
         }
+        return Promise.reject(new Error('clipboard unavailable'));
       }
+
+      (function () {
+        const shareCopy = document.getElementById('vodShareCopy');
+        const shareInput = document.getElementById('vodShareInput');
+        const shareStatus = document.getElementById('vodShareCopyStatus');
+        if (shareInput) shareInput.addEventListener('focus', () => shareInput.select());
+        if (shareCopy && shareInput) {
+          const idleLabel = shareCopy.textContent;
+          shareCopy.addEventListener('click', () => {
+            copyToClipboard(shareInput.value).then(() => {
+              shareCopy.textContent = shareCopy.getAttribute('data-copied-label');
+              if (shareStatus) shareStatus.textContent = shareCopy.getAttribute('data-copied-label');
+              setTimeout(() => { shareCopy.textContent = idleLabel; }, 2000);
+            }).catch(() => {
+              shareInput.focus();
+              shareInput.select();
+            });
+          });
+        }
+        document.querySelectorAll('[data-share-url]').forEach((btn) => {
+          btn.addEventListener('click', () => shareItem(btn, btn.getAttribute('data-share-url'), btn.getAttribute('data-share-route')));
+        });
+      })();
       
       function showToast(msg) {
         let t = document.getElementById('toast');
@@ -1076,7 +1089,8 @@ <h2 id="vodClipDialogTitle">{{ _('Create clip') }}</h2>
       }
 
       async function deleteItem(btn, url) {
-        if(!confirm({{ _('Really delete?')|tojson }})) return;
+        const confirmed = await window.svConfirm({{ _('Delete this video? The file is removed from the archive and cannot be restored.')|tojson }}, {{ _('Delete')|tojson }}, true);
+        if (!confirmed) return;
         const card = btn.closest('.video-card');
         btn.disabled = true;
         btn.innerHTML = '&#8987;';
@@ -1130,7 +1144,7 @@ <h2 id="adminMetaDialogTitle" class="vod-admin-title">{{ _('Title & description'
 
         <div class="vod-admin-divider"></div>
 
-        <form method="post" action="{{ url_for('vod_rename' if route_type == 'vod' else 'clip_rename', streamer=streamer, filename=filename) }}" class="vod-admin-rename-form" id="vodAdminRenameForm" onsubmit='return confirm({{ _('Really rename the file?')|tojson }});'>
+        <form method="post" action="{{ url_for('vod_rename' if route_type == 'vod' else 'clip_rename', streamer=streamer, filename=filename) }}" class="vod-admin-rename-form" id="vodAdminRenameForm" data-confirm="{{ _('Rename the file? Existing links and shares to the old file name stop working.') }}" data-confirm-ok="{{ _('Rename file') }}">
           <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
           <label class="vod-admin-field">
             <span>{{ _('File name') }}</span>
@@ -1143,7 +1157,7 @@ <h2 id="adminMetaDialogTitle" class="vod-admin-title">{{ _('Title & description'
       </section>
     </div>
 
-    <script>
+    <script nonce="{{ csp_nonce() }}">
       (function() {
         const toggleBtn = document.getElementById('btnAdminMetaToggle');
         const overlay = document.getElementById('vodAdminMetaOverlay');
diff --git a/WEBUI/translations/de/LC_MESSAGES/messages.mo b/WEBUI/translations/de/LC_MESSAGES/messages.mo
index a3c4cb6..c70e5c5 100644
Binary files a/WEBUI/translations/de/LC_MESSAGES/messages.mo and b/WEBUI/translations/de/LC_MESSAGES/messages.mo differ
diff --git a/WEBUI/translations/de/LC_MESSAGES/messages.po b/WEBUI/translations/de/LC_MESSAGES/messages.po
index 1b75ced..8682ece 100644
--- a/WEBUI/translations/de/LC_MESSAGES/messages.po
+++ b/WEBUI/translations/de/LC_MESSAGES/messages.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: StreamVault VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2026-11-03 19:28+0100\n"
+"POT-Creation-Date: 2026-11-12 15:41+0100\n"
 "PO-Revision-Date: 2026-11-03 19:25+0100\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language: de\n"
@@ -187,9 +187,6 @@ msgstr "Es läuft bereits eine Wiederherstellung."
 msgid "A saved value is kept if the field is left empty."
 msgstr "Ein gespeicherter Wert bleibt erhalten, wenn das Feld leer bleibt."
 
-msgid "ACTIVE (locked)"
-msgstr "AKTIV (Gesperrt)"
-
 msgid "AWS S3, Cloudflare R2, Backblaze B2, Wasabi, MinIO, Hetzner or any S3-compatible endpoint."
 msgstr "AWS S3, Cloudflare R2, Backblaze B2, Wasabi, MinIO, Hetzner oder jeder S3-kompatible Endpunkt."
 
@@ -202,6 +199,9 @@ msgstr "AGB akzeptieren"
 msgid "Account active (access allowed)"
 msgstr "Konto aktiv (Zugriff erlaubt)"
 
+msgid "Accounts"
+msgstr "Konten"
+
 msgid "Action"
 msgstr "Aktion"
 
@@ -214,6 +214,9 @@ msgstr "Konto sofort aktivieren"
 msgid "Active"
 msgstr "Aktiv"
 
+msgid "Active (locked)"
+msgstr "Aktiv (gesperrt)"
+
 msgid "Active shares"
 msgstr "Aktive Freigaben"
 
@@ -226,6 +229,9 @@ msgstr "Aktiv: Neue Streams werden automatisch freigeschaltet. Unten können Sie
 msgid "Actively monitored by the recorder core"
 msgstr "Aktive Überwachung durch den Recorder-Core"
 
+msgid "Add a channel to record"
+msgstr "Kanal zum Aufnehmen hinzufügen"
+
 msgid "Add channel"
 msgstr "Kanal hinzufügen"
 
@@ -235,6 +241,9 @@ msgstr "Neuen Kanal hinzufügen"
 msgid "Add provider"
 msgstr "Anbieter hinzufügen"
 
+msgid "Add the first channel above"
+msgstr "Ersten Kanal oben hinzufügen"
+
 msgid "Addressing"
 msgstr "Adressierung"
 
@@ -247,6 +256,9 @@ msgstr "Admin Steuerung"
 msgid "Admins only"
 msgstr "Nur Admins"
 
+msgid "Alert sound overlay"
+msgstr "Overlay für Alert-Sounds"
+
 msgid "All"
 msgstr "Alle"
 
@@ -486,27 +498,27 @@ msgstr "Puffer noch kurz — das Clip-Fenster wächst mit."
 msgid "Buffer:"
 msgstr "Puffer:"
 
-msgid "Buffering..."
-msgstr "Puffern..."
+msgid "Buffering…"
+msgstr "Puffern…"
 
 msgid "By default nothing is uploaded or deleted automatically. Enable these features deliberately."
 msgstr "Standardmäßig wird nichts automatisch hochgeladen oder gelöscht. Aktiviere die Funktionen bewusst."
 
-msgid "CHANGE"
-msgstr "ÄNDERN"
-
-msgid "CHANNEL MANAGEMENT (ADMIN)"
-msgstr "KANAL-VERWALTUNG (ADMIN)"
-
 msgid "Cancel"
 msgstr "Abbrechen"
 
+msgid "Category"
+msgstr "Kategorie"
+
 msgid "Category search failed."
 msgstr "Kategoriesuche fehlgeschlagen."
 
 msgid "Category search is currently unavailable."
 msgstr "Kategoriesuche derzeit nicht verfügbar."
 
+msgid "Change"
+msgstr "Ändern"
+
 msgid "Change banner"
 msgstr "Banner ändern"
 
@@ -522,6 +534,9 @@ msgstr "Kanal-Aktionen"
 msgid "Channel archive & recording metrics"
 msgstr "Kanalarchiv & Aufzeichnungs-Metriken"
 
+msgid "Channel management (admin)"
+msgstr "Kanalverwaltung (Admin)"
+
 msgid "Channel not found."
 msgstr "Channel nicht gefunden."
 
@@ -578,12 +593,12 @@ msgstr "Aufräumung eingeordnet (Task #%(task)s)."
 msgid "Clear filters"
 msgstr "Filter löschen"
 
-msgid "Click to change password"
-msgstr "Klick für Passwortänderung"
-
 msgid "Clip"
 msgstr "Clip"
 
+msgid "Clip Editor"
+msgstr "Clip-Editor"
+
 msgid "Clip URL is missing on this page."
 msgstr "Clip-URL fehlt auf dieser Seite."
 
@@ -668,6 +683,9 @@ msgstr "Aufnahmekanäle konfigurieren und Archiv-Zuordnungen verwalten"
 msgid "Configured streamers & sources"
 msgstr "Konfigurierte Streamer & Quellen"
 
+msgid "Confirm"
+msgstr "Bestätigen"
+
 msgid "Connect account"
 msgstr "Konto verbinden"
 
@@ -689,6 +707,9 @@ msgstr "Verbindung OK"
 msgid "Connection failed"
 msgstr "Verbindung fehlerhaft"
 
+msgid "Connection failed. Check your network and try again."
+msgstr "Verbindung fehlgeschlagen. Prüfen Sie Ihr Netzwerk und versuchen Sie es erneut."
+
 msgid "Connection lost — reconnecting…"
 msgstr "Verbindung unterbrochen — verbinde neu…"
 
@@ -705,6 +726,9 @@ msgstr "Systemsteuerung"
 msgid "Control the global maintenance mode or lock individual platform areas."
 msgstr "Steuere den globalen Wartungsmodus oder sperre gezielt einzelne Plattformbereiche."
 
+msgid "Copied"
+msgstr "Kopiert"
+
 msgid "Copy"
 msgstr "Kopieren"
 
@@ -821,6 +845,14 @@ msgstr "Standard-Ziel"
 msgid "Delete"
 msgstr "Löschen"
 
+#, python-format
+msgid "Delete %(name)s? The file is removed from the archive and cannot be restored."
+msgstr "%(name)s löschen? Die Datei wird aus dem Archiv entfernt und kann nicht wiederhergestellt werden."
+
+#, python-format
+msgid "Delete backup %(name)s? This cannot be undone."
+msgstr "Backup %(name)s löschen? Das lässt sich nicht rückgängig machen."
+
 msgid "Delete folder"
 msgstr "Ordner löschen"
 
@@ -839,6 +871,12 @@ msgstr "Lokal löschen"
 msgid "Delete permanently"
 msgstr "Endgültig löschen"
 
+msgid "Delete this streamer folder and all recordings? This cannot be undone."
+msgstr "Den Ordner dieses Streamers und alle Aufnahmen löschen? Das lässt sich nicht rückgängig machen."
+
+msgid "Delete this video? The file is removed from the archive and cannot be restored."
+msgstr "Dieses Video löschen? Die Datei wird aus dem Archiv entfernt und kann nicht wiederhergestellt werden."
+
 msgid "Delete user"
 msgstr "Benutzer löschen"
 
@@ -905,7 +943,7 @@ msgid "Do you really want to permanently delete the user %(name)s?"
 msgstr "Möchten Sie den Benutzer %(name)s wirklich unwiderruflich löschen?"
 
 msgid "Do you want to empty the entire recording folder?"
-msgstr "Möchtest du den gesamten Aufnahme-Ordner leeren?"
+msgstr "Möchten Sie den gesamten Aufnahme-Ordner leeren?"
 
 msgid "Done"
 msgstr "Fertig"
@@ -919,8 +957,8 @@ msgstr "TXT herunterladen"
 msgid "Download all"
 msgstr "Alle laden"
 
-msgid "Download all VODs?"
-msgstr "Alle VODs laden?"
+msgid "Download all VODs of this streamer as one archive? This can take a while for large channels."
+msgstr "Alle VODs dieses Streamers als ein Archiv herunterladen? Bei großen Kanälen kann das eine Weile dauern."
 
 msgid "Download archive & VODs"
 msgstr "Archiv & VODs herunterladen"
@@ -939,7 +977,7 @@ msgstr "Download aller VODs im Hintergrund gestartet."
 
 #, python-format
 msgid "Downloading... %(percent)s"
-msgstr "Lade... %(percent)s"
+msgstr "Lade… %(percent)s"
 
 #, python-format
 msgid "Drive quota active — do not press Play again (it extends the block). Seek back into the already loaded part, or wait about %(minutes)s min."
@@ -990,6 +1028,9 @@ msgstr "E-Mail-Adresse"
 msgid "Email address (optional)"
 msgstr "E-Mail-Adresse (Optional)"
 
+msgid "Emotes"
+msgstr "Emotes"
+
 msgid "Empty = AWS. For R2, B2, Wasabi, MinIO etc. enter the S3 endpoint."
 msgstr "Leer = AWS. Für R2, B2, Wasabi, MinIO etc. den S3-Endpunkt eintragen."
 
@@ -1005,6 +1046,9 @@ msgstr "Sofort aktivieren"
 msgid "Enable maintenance mode"
 msgstr "Wartungsmodus aktivieren"
 
+msgid "Enable maintenance mode? Everyone except allowlisted users sees the maintenance page until you end it."
+msgstr "Wartungsmodus aktivieren? Alle außer freigegebenen Benutzern sehen die Wartungsseite, bis Sie ihn beenden."
+
 msgid "Enable recording"
 msgstr "Aufnahme aktivieren"
 
@@ -1102,6 +1146,9 @@ msgstr "Fehler:"
 msgid "Error: %(error)s"
 msgstr "Fehler: %(error)s"
 
+msgid "Everywhere"
+msgstr "Überall"
+
 msgid "Existing members of this group are automatically assigned to the default group <strong>Viewer</strong>."
 msgstr "Bestehende Mitglieder dieser Gruppe werden automatisch der Standardgruppe <strong>Viewer</strong> zugewiesen."
 
@@ -1118,10 +1165,7 @@ msgid "Exported by StreamVault"
 msgstr "Exportiert von StreamVault"
 
 msgid "Extracting audio..."
-msgstr "Audio extrahieren..."
-
-msgid "FEATURED VOD"
-msgstr "EMPFOHLENES VOD"
+msgstr "Audio extrahieren…"
 
 msgid "Failed"
 msgstr "Fehler"
@@ -1132,6 +1176,9 @@ msgstr "Schnell"
 msgid "Feature permissions"
 msgstr "Funktionsrechte"
 
+msgid "Featured VOD"
+msgstr "Empfohlenes VOD"
+
 msgid "Featured highlight"
 msgstr "Empfohlenes Highlight"
 
@@ -1162,8 +1209,11 @@ msgstr "Datei wurde hochgeladen."
 msgid "Filter"
 msgstr "Filtern"
 
-msgid "Filter chat..."
-msgstr "Chat filtern..."
+msgid "Filter chat"
+msgstr "Chat filtern"
+
+msgid "Filter chat…"
+msgstr "Chat filtern…"
 
 msgid "First"
 msgstr "Erste"
@@ -1441,19 +1491,6 @@ msgstr "Juli"
 msgid "June"
 msgstr "Juni"
 
-msgid "LIVE"
-msgstr "LIVE"
-
-#, python-format
-msgid "LIVE %(name)s (without Twitch login)"
-msgstr "LIVE %(name)s (ohne Twitch-Login)"
-
-msgid "LIVE & DISCORD ONLY"
-msgstr "NUR LIVE & DISCORD"
-
-msgid "LIVE NOW"
-msgstr "LIVE JETZT"
-
 msgid "Language"
 msgstr "Sprache"
 
@@ -1502,11 +1539,14 @@ msgstr "Link kopiert:"
 msgid "Live"
 msgstr "Live"
 
+msgid "Live & Discord only"
+msgstr "Nur Live & Discord"
+
 msgid "Live & Discord only:"
 msgstr "Nur Live & Discord:"
 
 msgid "Live (recovering...)"
-msgstr "Live (Wiederherstellung...)"
+msgstr "Live (Wiederherstellung…)"
 
 msgid "Live channels"
 msgstr "Live-Kanäle"
@@ -1541,8 +1581,8 @@ msgstr "Nur Live-Stream und Discord-Alerts, keine Festplattenaufnahme"
 msgid "Live stream highlight"
 msgstr "Live-Stream-Highlight"
 
-msgid "Live stream is currently unavailable. Searching for stream..."
-msgstr "Live-Stream ist aktuell nicht verfügbar. Suche Stream..."
+msgid "Live stream is currently unavailable. Searching for stream…"
+msgstr "Live-Stream ist aktuell nicht verfügbar. Suche Stream…"
 
 msgid "Live stream not available."
 msgstr "Live-Stream nicht verfügbar."
@@ -1559,6 +1599,10 @@ msgstr "Live-Watch"
 msgid "Live-only"
 msgstr "Live-only"
 
+#, python-format
+msgid "Live: %(name)s (without Twitch login)"
+msgstr "Live: %(name)s (ohne Twitch-Login)"
+
 msgid "Load"
 msgstr "Load"
 
@@ -1569,7 +1613,7 @@ msgid "Loading chat…"
 msgstr "Chat wird geladen…"
 
 msgid "Loading model..."
-msgstr "Modell laden..."
+msgstr "Modell laden…"
 
 msgid "Loading streams…"
 msgstr "Lade Streams…"
@@ -1599,6 +1643,9 @@ msgstr "<strong>Mobile Version</strong> sperren"
 msgid "Log out"
 msgstr "Abmelden"
 
+msgid "Log out everywhere"
+msgstr "Überall abmelden"
+
 msgid "Login"
 msgstr "Login"
 
@@ -1611,6 +1658,9 @@ msgstr "Login fehlgeschlagen."
 msgid "MP4 check not possible"
 msgstr "MP4-Prüfung nicht möglich"
 
+msgid "Main navigation"
+msgstr "Hauptnavigation"
+
 msgid "Maintenance"
 msgstr "Wartungsarbeiten"
 
@@ -1676,6 +1726,9 @@ msgstr "Nachricht"
 msgid "Mobile live is temporarily disabled. Please use the desktop version or the installed app."
 msgstr "Mobile Live ist vorübergehend deaktiviert. Bitte Desktop oder die installierte App nutzen."
 
+msgid "Mods"
+msgstr "Mods"
+
 msgid "Monitored"
 msgstr "Überwacht"
 
@@ -1697,9 +1750,6 @@ msgstr "Netzwerkfehler"
 msgid "Network error while loading streams."
 msgstr "Netzwerkfehler beim Laden der Streams."
 
-msgid "Network error:"
-msgstr "Netzwerkfehler:"
-
 msgid "Network is back — reconnecting…"
 msgstr "Netzwerk wieder da — verbinde neu…"
 
@@ -1718,8 +1768,8 @@ msgstr "Neues Passwort (leer lassen für keine Änderung)"
 msgid "New password * (min. 8 characters)"
 msgstr "Neues Passwort * (min. 8 Zeichen)"
 
-msgid "New password..."
-msgstr "Neues Passwort..."
+msgid "New password…"
+msgstr "Neues Passwort…"
 
 msgid "New user"
 msgstr "Neuer Benutzer"
@@ -1742,8 +1792,8 @@ msgstr "Nextcloud, ownCloud, Hetzner Storage Box oder jeder WebDAV-Server mit Ap
 msgid "No (self-signed only)"
 msgstr "Nein (nur bei Self-Signed)"
 
-msgid "No VODs available in the archive"
-msgstr "Keine VODs im Archiv verfügbar"
+msgid "No VODs yet. Recordings appear here automatically as soon as a monitored channel goes live."
+msgstr "Noch keine VODs. Aufnahmen erscheinen hier automatisch, sobald ein überwachter Kanal live geht."
 
 msgid "No acceptances yet."
 msgstr "Noch keine Zustimmungen."
@@ -1778,6 +1828,9 @@ msgstr "Keine Backups vorhanden."
 msgid "No badges received from Twitch."
 msgstr "Keine Badges von Twitch erhalten."
 
+msgid "No channels are monitored yet."
+msgstr "Es werden noch keine Kanäle überwacht."
+
 msgid "No chat"
 msgstr "Kein Chat"
 
@@ -1818,9 +1871,6 @@ msgstr "Keine überwachten Twitch-Kanäle."
 msgid "No monitored Twitch channels. Add streamers under Streamers."
 msgstr "Keine überwachten Twitch-Kanäle. Füge Streamer unter Streamer hinzu."
 
-msgid "No monitored channels configured."
-msgstr "Keine aktiven Überwachungskanäle vorhanden."
-
 msgid "No recently watched streams yet."
 msgstr "Noch keine zuletzt angesehenen Streams."
 
@@ -1875,30 +1925,15 @@ msgstr "OAuth-Hinweis"
 msgid "OAuth state tokens require a strong VOD_SECRET_KEY."
 msgstr "Für OAuth-Status-Token muss ein starker VOD_SECRET_KEY gesetzt sein."
 
+msgid "OBS overlays"
+msgstr "OBS-Overlays"
+
 msgid "OFF (normal operation)"
 msgstr "AUS (Normalbetrieb)"
 
-msgid "OFFLINE"
-msgstr "OFFLINE"
-
 msgid "OK"
 msgstr "OK"
 
-msgid "ONLINE"
-msgstr "ONLINE"
-
-msgid "OPERATING MODE:"
-msgstr "BETRIEBSMODUS:"
-
-msgid "OPTION A: UPLOAD IMAGE FILE"
-msgstr "OPTION A: BILDDATEI HOCHLADEN"
-
-msgid "OPTION A: UPLOAD PROFILE PICTURE"
-msgstr "OPTION A: PROFILBILD HOCHLADEN"
-
-msgid "OPTION B: USE IMAGE URL"
-msgstr "OPTION B: BILD-URL VERWENDEN"
-
 msgid "OR"
 msgstr "ODER"
 
@@ -1924,6 +1959,9 @@ msgstr "Älteste zuerst"
 msgid "OneDrive / Microsoft 365 via Microsoft Graph with OAuth 2.0."
 msgstr "OneDrive / Microsoft 365 über Microsoft Graph mit OAuth 2.0."
 
+msgid "Online"
+msgstr "Online"
+
 msgid "Only after a successful upload and optional cloud verification."
 msgstr "Erst nach erfolgreichem Upload und optionaler Cloud-Verifikation."
 
@@ -1945,6 +1983,22 @@ msgstr "Clip öffnen"
 msgid "Open editor"
 msgstr "Editor öffnen"
 
+#, python-format
+msgid "Open streamer %(name)s"
+msgstr "Streamer %(name)s öffnen"
+
+msgid "Operating mode"
+msgstr "Betriebsmodus"
+
+msgid "Option A: upload image file"
+msgstr "Option A: Bilddatei hochladen"
+
+msgid "Option A: upload profile picture"
+msgstr "Option A: Profilbild hochladen"
+
+msgid "Option B: use image URL"
+msgstr "Option B: Bild-URL verwenden"
+
 msgid "Option sections"
 msgstr "Optionsbereiche"
 
@@ -2055,6 +2109,9 @@ msgstr "Wiedergabe nicht verfügbar"
 msgid "Player error — reconnecting…"
 msgstr "Player-Fehler — verbinde neu…"
 
+msgid "Please confirm"
+msgstr "Bitte bestätigen"
+
 msgid "Please enter a name for the storage provider."
 msgstr "Bitte einen Namen für den Speicher-Anbieter angeben."
 
@@ -2105,10 +2162,10 @@ msgid "Private video and stream archive console."
 msgstr "Private Video- und Stream-Archiv-Konsole."
 
 msgid "Processing video (this may take a while)..."
-msgstr "Verarbeite Video (kann dauern)..."
+msgstr "Verarbeite Video (kann dauern)…"
 
 msgid "Processing video..."
-msgstr "Verarbeite Video..."
+msgstr "Verarbeite Video…"
 
 msgid "Profile picture reset to default."
 msgstr "Profilbild auf Standard zurückgesetzt."
@@ -2153,8 +2210,8 @@ msgstr "Anbieter"
 msgid "Public link created:"
 msgstr "Öffentlicher Link erstellt:"
 
-msgid "Purpose of this user group..."
-msgstr "Zweck dieser Benutzergruppe..."
+msgid "Purpose of this user group…"
+msgstr "Zweck dieser Benutzergruppe…"
 
 msgid "Quality"
 msgstr "Qualität"
@@ -2168,22 +2225,12 @@ msgstr "Queue nicht lesbar"
 msgid "Quiet"
 msgstr "Still"
 
-msgid "RECORDING"
-msgstr "AUFNAHME"
-
-msgid "RECORDING ACTIVE"
-msgstr "AUFNAHME AKTIV"
-
 msgid "Ready"
 msgstr "Bereit"
 
 msgid "Real-time stream error — reconnecting…"
 msgstr "Echtzeit-Stream-Fehler — verbinde neu…"
 
-#, python-format
-msgid "Really delete backup %(name)s?"
-msgstr "Backup %(name)s wirklich löschen?"
-
 msgid "Really delete file?"
 msgstr "Datei wirklich löschen?"
 
@@ -2193,28 +2240,15 @@ msgstr "Cloud-Datei wirklich löschen? Eine lokale Kopie bleibt erhalten."
 msgid "Really delete the local file? The cloud copy is kept."
 msgstr "Lokale Datei wirklich löschen? Die Cloud-Kopie bleibt erhalten."
 
-msgid "Really delete?"
-msgstr "Wirklich löschen?"
-
-#, python-format
-msgid "Really remove channel %(name)s?"
-msgstr "Kanal %(name)s wirklich entfernen?"
-
 msgid "Really remove the provider? The cloud files are kept."
 msgstr "Anbieter wirklich entfernen? Die Cloud-Dateien bleiben erhalten."
 
-msgid "Really rename the file?"
-msgstr "Datei wirklich umbenennen?"
-
 msgid "Really reset the custom banner and switch to the default?"
 msgstr "Custom Banner wirklich zurücksetzen und auf Standard wechseln?"
 
 msgid "Really reset the custom profile picture and switch to the default?"
 msgstr "Custom Profilbild wirklich zurücksetzen und auf Standard wechseln?"
 
-msgid "Really revoke this share?"
-msgstr "Freigabe wirklich widerrufen?"
-
 msgid "Really stop the recording?"
 msgstr "Aufnahme wirklich stoppen?"
 
@@ -2224,6 +2258,9 @@ msgstr "Letzte Task-Fehler"
 msgid "Recently watched"
 msgstr "Zuletzt angesehen"
 
+msgid "Recommended browser-source URLs. Replace TOKEN with the value of TTS_OVERLAY_TOKEN or ALERT_OVERLAY_TOKEN. The part after # stays in OBS and reaches the server only as a request header, never in a log line."
+msgstr "Empfohlene URLs für die Browserquelle. Ersetzen Sie TOKEN durch den Wert von TTS_OVERLAY_TOKEN bzw. ALERT_OVERLAY_TOKEN. Der Teil nach # bleibt in OBS und erreicht den Server nur als Request-Header, nie in einer Logzeile."
+
 msgid "Recommended. Prevents data loss from incomplete uploads."
 msgstr "Empfohlen. Verhindert Datenverlust bei unvollständigen Uploads."
 
@@ -2242,6 +2279,9 @@ msgstr "Aufnahme"
 msgid "Recording + live stream & Discord notification"
 msgstr "Aufnahme + Live-Stream & Discord-Benachrichtigung"
 
+msgid "Recording active"
+msgstr "Aufnahme aktiv"
+
 msgid "Recording disabled (live & Discord only)"
 msgstr "Aufnahme deaktiviert (Nur Live & Discord)"
 
@@ -2291,8 +2331,8 @@ msgid "Remove channel"
 msgstr "Kanal entfernen"
 
 #, python-format
-msgid "Remove channel %(name)s?"
-msgstr "Kanal %(name)s entfernen?"
+msgid "Remove channel %(name)s? Monitoring stops; existing recordings stay in the archive."
+msgstr "Kanal %(name)s entfernen? Die Überwachung endet, vorhandene Aufnahmen bleiben im Archiv."
 
 msgid "Remove only the database entry?"
 msgstr "Nur den Datenbankeintrag entfernen?"
@@ -2307,6 +2347,9 @@ msgstr "Remux-Job gestartet. Fortschritt im Admin-Panel."
 msgid "Rename file"
 msgstr "Datei umbenennen"
 
+msgid "Rename the file? Existing links and shares to the old file name stop working."
+msgstr "Datei umbenennen? Bestehende Links und Freigaben auf den alten Dateinamen funktionieren dann nicht mehr."
+
 msgid "Renamed."
 msgstr "Umbenannt."
 
@@ -2332,6 +2375,9 @@ msgstr "Neustart fehlgeschlagen."
 msgid "Restart services"
 msgstr "Dienste neu starten"
 
+msgid "Restart the recorder and chat logger now? Running recordings are interrupted for a few seconds."
+msgstr "Recorder und Chat-Logger jetzt neu starten? Laufende Aufnahmen werden für einige Sekunden unterbrochen."
+
 msgid "Restore"
 msgstr "Wiederherstellen"
 
@@ -2348,6 +2394,9 @@ msgstr "Wiedergabe fortsetzen"
 msgid "Revoke"
 msgstr "Widerrufen"
 
+msgid "Revoke this share? The link stops working immediately."
+msgstr "Diese Freigabe widerrufen? Der Link funktioniert sofort nicht mehr."
+
 #, python-format
 msgid "Role access '%(slug)s' added."
 msgstr "Rollen-Freigabe '%(slug)s' hinzugefügt."
@@ -2380,9 +2429,6 @@ msgstr "Läuft…"
 msgid "S3-compatible"
 msgstr "S3-kompatibel"
 
-msgid "START"
-msgstr "START"
-
 msgid "Safety migration:"
 msgstr "Sicherheits-Migration:"
 
@@ -2436,10 +2482,7 @@ msgid "Saving transcript failed: %(error)s"
 msgstr "Transkript speichern fehlgeschlagen: %(error)s"
 
 msgid "Saving transcript..."
-msgstr "Transkript speichern..."
-
-msgid "Saving..."
-msgstr "Wird gespeichert..."
+msgstr "Transkript speichern…"
 
 msgid "Saving…"
 msgstr "Speichern…"
@@ -2447,8 +2490,8 @@ msgstr "Speichern…"
 msgid "Search"
 msgstr "Suchen"
 
-msgid "Search VODs, streamers or games..."
-msgstr "VODs, Streamer oder Spiele suchen..."
+msgid "Search VODs, streamers or games…"
+msgstr "VODs, Streamer oder Spiele suchen…"
 
 msgid "Search category"
 msgstr "Kategorie suchen"
@@ -2459,8 +2502,11 @@ msgstr "Kategorie / Game suchen…"
 msgid "Search failed."
 msgstr "Suche fehlgeschlagen."
 
-msgid "Search recordings (title, date, game)..."
-msgstr "Aufnahmen durchsuchen (Titel, Datum, Spiel)..."
+msgid "Search recordings"
+msgstr "Aufnahmen durchsuchen"
+
+msgid "Search recordings (title, date, game)…"
+msgstr "Aufnahmen durchsuchen (Titel, Datum, Spiel)…"
 
 msgid "Search results"
 msgstr "Suchergebnisse"
@@ -2471,21 +2517,21 @@ msgstr "Streamer oder Kanal suchen…"
 msgid "Search streamers"
 msgstr "Streamer suchen"
 
-msgid "Search term (e.g. player name, chat message, date)..."
-msgstr "Suchbegriff (z.B. Spielername, Chatnachricht, Datum)..."
+msgid "Search term (e.g. player name, chat message, date)…"
+msgstr "Suchbegriff (z.B. Spielername, Chatnachricht, Datum)…"
 
-msgid "Search user, email or group..."
-msgstr "Benutzer, E-Mail oder Gruppe suchen..."
+msgid "Search user, email or group…"
+msgstr "Benutzer, E-Mail oder Gruppe suchen…"
 
-msgid "Search..."
-msgstr "Suchen …"
-
-msgid "Searching for stream..."
-msgstr "Suche Stream..."
+msgid "Searching for stream…"
+msgstr "Suche Stream…"
 
 msgid "Searching…"
 msgstr "Suche…"
 
+msgid "Search…"
+msgstr "Suchen …"
+
 msgid "Seconds after trigger"
 msgstr "Sekunden nach Trigger"
 
@@ -2575,9 +2621,21 @@ msgstr "Wird in der Navigation, Seitenleiste und auf Streamer-Karten angezeigt."
 msgid "Sign in"
 msgstr "Anmelden"
 
+msgid "Sign out on every device? Every session of this account ends, including this one."
+msgstr "Auf allen Geräten abmelden? Jede Sitzung dieses Kontos endet, auch diese."
+
 msgid "Size"
 msgstr "Größe"
 
+msgid "Skip to content"
+msgstr "Zum Inhalt springen"
+
+msgid "Sort"
+msgstr "Sortierung"
+
+msgid "Sort order"
+msgstr "Sortierreihenfolge"
+
 msgid "Sound"
 msgstr "Ton"
 
@@ -2619,7 +2677,7 @@ msgid "Starting"
 msgstr "Startet"
 
 msgid "Starting download..."
-msgstr "Starte Download..."
+msgstr "Starte Download…"
 
 msgid "Status"
 msgstr "Status"
@@ -2658,6 +2716,9 @@ msgstr "Speicher-Anbieter nicht gefunden."
 msgid "Storage providers"
 msgstr "Speicher-Anbieter"
 
+msgid "Storage usage"
+msgstr "Speicherbelegung"
+
 #, python-format
 msgid "Storage: <strong>%(pct)s%%</strong>"
 msgstr "Speicher: <strong>%(pct)s%%</strong>"
@@ -2719,6 +2780,9 @@ msgstr "Streamer, VODs & Chatverläufe"
 msgid "Subfolder"
 msgstr "Unterordner"
 
+msgid "Subs"
+msgstr "Subs"
+
 msgid "Success"
 msgstr "Erfolg"
 
@@ -2806,6 +2870,9 @@ msgstr "AGB-Version veraltet — Seite neu laden und erneut akzeptieren."
 msgid "Test"
 msgstr "Testen"
 
+msgid "Text-to-speech overlay"
+msgstr "Text-to-Speech-Overlay"
+
 msgid "Thanks for your understanding. Authorized users can sign in via the login page."
 msgstr "Danke fürs Verständnis. Berechtigte Benutzer können sich über den Login anmelden."
 
@@ -2918,8 +2985,11 @@ msgstr "Heute, %(time)s"
 msgid "Too many VODs are playing right now. Live is not affected. Try again in a few minutes — a slot frees up as soon as someone closes the player."
 msgstr "Gerade laufen zu viele VODs. Live ist davon nicht betroffen. Versuch es in ein paar Minuten nochmal — der Platz wird frei, sobald jemand den Player schließt."
 
-msgid "Too many attempts. IP temporarily blocked. Please try again later."
-msgstr "Zu viele Versuche. IP vorübergehend gesperrt. Bitte später erneut versuchen."
+#, python-format
+msgid "Too many login attempts. Please try again in %(num)d minute."
+msgid_plural "Too many login attempts. Please try again in %(num)d minutes."
+msgstr[0] "Zu viele Anmeldeversuche. Bitte in %(num)d Minute erneut versuchen."
+msgstr[1] "Zu viele Anmeldeversuche. Bitte in %(num)d Minuten erneut versuchen."
 
 msgid "Top streams are currently unavailable. Use monitored channels or the search."
 msgstr "Top-Streams derzeit nicht verfügbar. Nutze überwachte Kanäle oder die Suche."
@@ -2972,6 +3042,9 @@ msgstr "Transkript fertig"
 msgid "Transcript missing despite finished status"
 msgstr "Transkript fehlt trotz fertigem Status"
 
+msgid "Transcript progress"
+msgstr "Transkript-Fortschritt"
+
 msgid "Transcription cancelled"
 msgstr "Transkription abgebrochen"
 
@@ -2995,7 +3068,7 @@ msgid "Transcription queued in the worker. The result appears on the next page l
 msgstr "Transkription zur Ausführung in die Worker-Warteschlange gestellt. Ergebnis erscheint nach Abschluss beim nächsten Laden."
 
 msgid "Transcription running..."
-msgstr "Transkription läuft..."
+msgstr "Transkription läuft…"
 
 msgid "Transcription timed out"
 msgstr "Transkription Timeout"
@@ -3012,8 +3085,11 @@ msgstr "Twitch / Standard"
 msgid "Twitch badge library synchronized."
 msgstr "Twitch-Badge-Bibliothek synchronisiert."
 
-msgid "Twitch channel name..."
-msgstr "Twitch-Kanalname..."
+msgid "Twitch channel name"
+msgstr "Twitch-Kanalname"
+
+msgid "Twitch channel name…"
+msgstr "Twitch-Kanalname…"
 
 msgid "Twitch live chat"
 msgstr "Twitch-Live-Chat"
@@ -3021,8 +3097,8 @@ msgstr "Twitch-Live-Chat"
 msgid "Twitch live stream"
 msgstr "Twitch Live-Stream"
 
-msgid "Twitch name (e.g. shroud) or YouTube URL / @handle..."
-msgstr "Twitch-Name (z.B. shroud) oder YouTube-URL / @Handle..."
+msgid "Twitch name (e.g. shroud) or YouTube URL / @handle…"
+msgstr "Twitch-Name (z.B. shroud) oder YouTube-URL / @Handle…"
 
 msgid "Twitch or YouTube supported"
 msgstr "Twitch oder YouTube Support"
@@ -3240,12 +3316,6 @@ msgstr "Sichtbar:"
 msgid "Volume"
 msgstr "Lautstärke"
 
-msgid "WARNING: Do you want to permanently delete this streamer and all recordings?"
-msgstr "ACHTUNG: Möchtest du diesen Streamer und alle Aufnahmen unwiderruflich löschen?"
-
-msgid "WATCH LIVE"
-msgstr "LIVE ZUSCHAUEN"
-
 msgid "Waiting for server stream…"
 msgstr "Warte auf Server-Stream…"
 
@@ -3258,6 +3328,9 @@ msgstr "Ansehen"
 msgid "Watch latest video"
 msgstr "Neuestes Video ansehen"
 
+msgid "Watch live"
+msgstr "Live ansehen"
+
 msgid "Watch now"
 msgstr "Jetzt ansehen"
 
@@ -3299,7 +3372,7 @@ msgid "Yesterday, %(time)s"
 msgstr "Gestern, %(time)s"
 
 msgid "You can agree now."
-msgstr "Du kannst jetzt zustimmen."
+msgstr "Sie können jetzt zustimmen."
 
 msgid "You cannot deactivate your own administrator account."
 msgstr "Sie können Ihr eigenes Administratorkonto nicht deaktivieren."
@@ -3312,13 +3385,13 @@ msgstr "Sie können sich nicht in eine Gruppe ohne Benutzerverwaltungs-Rechte ve
 
 #, python-format
 msgid "You have accepted version %(version)s."
-msgstr "Du hast Version %(version)s akzeptiert."
+msgstr "Sie haben Version %(version)s akzeptiert."
 
-msgid "Your IP has been temporarily blocked. Please try again later."
-msgstr "Ihre IP wurde vorübergehend gesperrt. Bitte später erneut versuchen."
+msgid "Your IP has been blocked. Please contact the administrator."
+msgstr "Ihre IP wurde gesperrt. Bitte wenden Sie sich an den Administrator."
 
 msgid "Your browser does not support the video tag."
-msgstr "Dein Browser unterstützt das Video-Tag nicht."
+msgstr "Ihr Browser unterstützt das Video-Tag nicht."
 
 msgid "Zoom in"
 msgstr "Hineinzoomen"
@@ -3359,12 +3432,12 @@ msgstr "z.B. VIP-Archiv"
 msgid "e.g. alice, bob"
 msgstr "z.B. alice, bob"
 
-msgid "e.g. john_doe"
-msgstr "z.B. max_mustermann"
-
 msgid "e.g. channel_name"
 msgstr "z. B. channel_name"
 
+msgid "e.g. john_doe"
+msgstr "z.B. max_mustermann"
+
 #, python-format
 msgid "effective from %(date)s"
 msgstr "wirksam ab %(date)s"
@@ -3416,13 +3489,3 @@ msgstr "✓ CLIP GESPEICHERT"
 msgid "✕ CLIP FAILED"
 msgstr "✕ CLIP FEHLGESCHLAGEN"
 
-
-#: WEBUI/webui.py
-msgid "Your IP has been blocked. Please contact the administrator."
-msgstr "Ihre IP wurde gesperrt. Bitte wenden Sie sich an den Administrator."
-
-#: WEBUI/webui.py
-msgid "Too many login attempts. Please try again in %(num)d minute."
-msgid_plural "Too many login attempts. Please try again in %(num)d minutes."
-msgstr[0] "Zu viele Anmeldeversuche. Bitte in %(num)d Minute erneut versuchen."
-msgstr[1] "Zu viele Anmeldeversuche. Bitte in %(num)d Minuten erneut versuchen."
diff --git a/WEBUI/translations/es/LC_MESSAGES/messages.mo b/WEBUI/translations/es/LC_MESSAGES/messages.mo
index 07377a1..b105723 100644
Binary files a/WEBUI/translations/es/LC_MESSAGES/messages.mo and b/WEBUI/translations/es/LC_MESSAGES/messages.mo differ
diff --git a/WEBUI/translations/es/LC_MESSAGES/messages.po b/WEBUI/translations/es/LC_MESSAGES/messages.po
index 3e2add7..8d68611 100644
--- a/WEBUI/translations/es/LC_MESSAGES/messages.po
+++ b/WEBUI/translations/es/LC_MESSAGES/messages.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: StreamVault VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2026-11-03 19:28+0100\n"
+"POT-Creation-Date: 2026-11-12 15:41+0100\n"
 "PO-Revision-Date: 2026-11-03 19:31+0100\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language: es\n"
@@ -187,9 +187,6 @@ msgstr "Ya hay una restauración en curso."
 msgid "A saved value is kept if the field is left empty."
 msgstr "Si el campo se deja vacío, se conserva el valor guardado."
 
-msgid "ACTIVE (locked)"
-msgstr "ACTIVO (bloqueado)"
-
 msgid "AWS S3, Cloudflare R2, Backblaze B2, Wasabi, MinIO, Hetzner or any S3-compatible endpoint."
 msgstr "AWS S3, Cloudflare R2, Backblaze B2, Wasabi, MinIO, Hetzner o cualquier endpoint compatible con S3."
 
@@ -202,6 +199,9 @@ msgstr "Aceptar las condiciones"
 msgid "Account active (access allowed)"
 msgstr "Cuenta activa (acceso permitido)"
 
+msgid "Accounts"
+msgstr "Cuentas"
+
 msgid "Action"
 msgstr "Acción"
 
@@ -214,6 +214,9 @@ msgstr "Activar la cuenta de inmediato"
 msgid "Active"
 msgstr "Activo"
 
+msgid "Active (locked)"
+msgstr "ACTIVO (bloqueado)"
+
 msgid "Active shares"
 msgstr "Elementos compartidos activos"
 
@@ -226,6 +229,9 @@ msgstr "Activo: los nuevos streams se desbloquean automáticamente. Abajo puedes
 msgid "Actively monitored by the recorder core"
 msgstr "Supervisado activamente por el núcleo de grabación"
 
+msgid "Add a channel to record"
+msgstr "Añadir un canal para grabar"
+
 msgid "Add channel"
 msgstr "Añadir canal"
 
@@ -235,6 +241,9 @@ msgstr "Añadir nuevo canal"
 msgid "Add provider"
 msgstr "Añadir proveedor"
 
+msgid "Add the first channel above"
+msgstr "Añade el primer canal arriba"
+
 msgid "Addressing"
 msgstr "Direccionamiento"
 
@@ -247,6 +256,9 @@ msgstr "Controles de administración"
 msgid "Admins only"
 msgstr "Solo administradores"
 
+msgid "Alert sound overlay"
+msgstr "Overlay de sonidos de alerta"
+
 msgid "All"
 msgstr "Todos"
 
@@ -486,27 +498,27 @@ msgstr "El búfer aún es corto: la ventana del clip crece con él."
 msgid "Buffer:"
 msgstr "Búfer:"
 
-msgid "Buffering..."
-msgstr "Cargando búfer..."
+msgid "Buffering…"
+msgstr "Cargando búfer…"
 
 msgid "By default nothing is uploaded or deleted automatically. Enable these features deliberately."
 msgstr "Por defecto no se sube ni se elimina nada automáticamente. Activa estas funciones de forma consciente."
 
-msgid "CHANGE"
-msgstr "CAMBIAR"
-
-msgid "CHANNEL MANAGEMENT (ADMIN)"
-msgstr "GESTIÓN DE CANALES (ADMIN)"
-
 msgid "Cancel"
 msgstr "Cancelar"
 
+msgid "Category"
+msgstr "Categoría"
+
 msgid "Category search failed."
 msgstr "Falló la búsqueda de categorías."
 
 msgid "Category search is currently unavailable."
 msgstr "La búsqueda de categorías no está disponible en este momento."
 
+msgid "Change"
+msgstr "Cambiar"
+
 msgid "Change banner"
 msgstr "Cambiar banner"
 
@@ -522,6 +534,9 @@ msgstr "Acciones del canal"
 msgid "Channel archive & recording metrics"
 msgstr "Archivo de canales y métricas de grabación"
 
+msgid "Channel management (admin)"
+msgstr "Gestión de canales (admin)"
+
 msgid "Channel not found."
 msgstr "Canal no encontrado."
 
@@ -578,12 +593,12 @@ msgstr "Limpieza en cola (tarea n.º %(task)s)."
 msgid "Clear filters"
 msgstr "Borrar filtros"
 
-msgid "Click to change password"
-msgstr "Clic para cambiar la contraseña"
-
 msgid "Clip"
 msgstr "Clip"
 
+msgid "Clip Editor"
+msgstr "Editor de clips"
+
 msgid "Clip URL is missing on this page."
 msgstr "Falta la URL del clip en esta página."
 
@@ -668,6 +683,9 @@ msgstr "Configurar canales de grabación y gestionar asignaciones de archivo"
 msgid "Configured streamers & sources"
 msgstr "Streamers y fuentes configurados"
 
+msgid "Confirm"
+msgstr "Confirmar"
+
 msgid "Connect account"
 msgstr "Conectar cuenta"
 
@@ -689,6 +707,9 @@ msgstr "Conexión correcta"
 msgid "Connection failed"
 msgstr "Error de conexión"
 
+msgid "Connection failed. Check your network and try again."
+msgstr "Error de conexión. Comprueba tu red e inténtalo de nuevo."
+
 msgid "Connection lost — reconnecting…"
 msgstr "Conexión perdida — reconectando…"
 
@@ -705,6 +726,9 @@ msgstr "Panel de control"
 msgid "Control the global maintenance mode or lock individual platform areas."
 msgstr "Controla el modo de mantenimiento global o bloquea áreas concretas de la plataforma."
 
+msgid "Copied"
+msgstr "Copiado"
+
 msgid "Copy"
 msgstr "Copiar"
 
@@ -821,6 +845,14 @@ msgstr "Destino predeterminado"
 msgid "Delete"
 msgstr "Eliminar"
 
+#, python-format
+msgid "Delete %(name)s? The file is removed from the archive and cannot be restored."
+msgstr "¿Eliminar %(name)s? El archivo se quita del archivo y no se puede restaurar."
+
+#, python-format
+msgid "Delete backup %(name)s? This cannot be undone."
+msgstr "¿Eliminar la copia de seguridad %(name)s? No se puede deshacer."
+
 msgid "Delete folder"
 msgstr "Eliminar carpeta"
 
@@ -839,6 +871,12 @@ msgstr "Eliminar localmente"
 msgid "Delete permanently"
 msgstr "Eliminar definitivamente"
 
+msgid "Delete this streamer folder and all recordings? This cannot be undone."
+msgstr "¿Eliminar la carpeta de este streamer y todas las grabaciones? No se puede deshacer."
+
+msgid "Delete this video? The file is removed from the archive and cannot be restored."
+msgstr "¿Eliminar este vídeo? El archivo se quita del archivo y no se puede restaurar."
+
 msgid "Delete user"
 msgstr "Eliminar usuario"
 
@@ -919,8 +957,8 @@ msgstr "Descargar TXT"
 msgid "Download all"
 msgstr "Descargar todo"
 
-msgid "Download all VODs?"
-msgstr "¿Descargar todos los VODs?"
+msgid "Download all VODs of this streamer as one archive? This can take a while for large channels."
+msgstr "¿Descargar todos los VODs de este streamer como un solo archivo? Puede tardar en canales grandes."
 
 msgid "Download archive & VODs"
 msgstr "Descargar archivo y VODs"
@@ -939,7 +977,7 @@ msgstr "Descarga de todos los VODs iniciada en segundo plano."
 
 #, python-format
 msgid "Downloading... %(percent)s"
-msgstr "Descargando... %(percent)s"
+msgstr "Descargando… %(percent)s"
 
 #, python-format
 msgid "Drive quota active — do not press Play again (it extends the block). Seek back into the already loaded part, or wait about %(minutes)s min."
@@ -990,6 +1028,9 @@ msgstr "Dirección de correo electrónico"
 msgid "Email address (optional)"
 msgstr "Correo electrónico (opcional)"
 
+msgid "Emotes"
+msgstr "Emotes"
+
 msgid "Empty = AWS. For R2, B2, Wasabi, MinIO etc. enter the S3 endpoint."
 msgstr "Vacío = AWS. Para R2, B2, Wasabi, MinIO, etc., introduce el endpoint S3."
 
@@ -1005,6 +1046,9 @@ msgstr "Activar de inmediato"
 msgid "Enable maintenance mode"
 msgstr "Activar modo de mantenimiento"
 
+msgid "Enable maintenance mode? Everyone except allowlisted users sees the maintenance page until you end it."
+msgstr "¿Activar el modo de mantenimiento? Todos, salvo los usuarios permitidos, verán la página de mantenimiento hasta que lo desactives."
+
 msgid "Enable recording"
 msgstr "Activar grabación"
 
@@ -1102,6 +1146,9 @@ msgstr "Error:"
 msgid "Error: %(error)s"
 msgstr "Error: %(error)s"
 
+msgid "Everywhere"
+msgstr "En todas partes"
+
 msgid "Existing members of this group are automatically assigned to the default group <strong>Viewer</strong>."
 msgstr "Los miembros actuales de este grupo se asignan automáticamente al grupo predeterminado <strong>Viewer</strong>."
 
@@ -1118,10 +1165,7 @@ msgid "Exported by StreamVault"
 msgstr "Exportado por StreamVault"
 
 msgid "Extracting audio..."
-msgstr "Extrayendo audio..."
-
-msgid "FEATURED VOD"
-msgstr "VOD DESTACADO"
+msgstr "Extrayendo audio…"
 
 msgid "Failed"
 msgstr "Error"
@@ -1132,6 +1176,9 @@ msgstr "Rápido"
 msgid "Feature permissions"
 msgstr "Permisos de funciones"
 
+msgid "Featured VOD"
+msgstr "Vod destacado"
+
 msgid "Featured highlight"
 msgstr "Momento destacado"
 
@@ -1162,8 +1209,11 @@ msgstr "El archivo se ha subido."
 msgid "Filter"
 msgstr "Filtrar"
 
-msgid "Filter chat..."
-msgstr "Filtrar chat..."
+msgid "Filter chat"
+msgstr "Filtrar chat"
+
+msgid "Filter chat…"
+msgstr "Filtrar chat…"
 
 msgid "First"
 msgstr "Primero"
@@ -1441,19 +1491,6 @@ msgstr "Julio"
 msgid "June"
 msgstr "Junio"
 
-msgid "LIVE"
-msgstr "EN DIRECTO"
-
-#, python-format
-msgid "LIVE %(name)s (without Twitch login)"
-msgstr "EN DIRECTO %(name)s (sin iniciar sesión en Twitch)"
-
-msgid "LIVE & DISCORD ONLY"
-msgstr "SOLO DIRECTO Y DISCORD"
-
-msgid "LIVE NOW"
-msgstr "EN DIRECTO AHORA"
-
 msgid "Language"
 msgstr "Idioma"
 
@@ -1502,11 +1539,14 @@ msgstr "Enlace copiado:"
 msgid "Live"
 msgstr "En directo"
 
+msgid "Live & Discord only"
+msgstr "Solo directo y discord"
+
 msgid "Live & Discord only:"
 msgstr "Solo directo y Discord:"
 
 msgid "Live (recovering...)"
-msgstr "En directo (recuperando...)"
+msgstr "En directo (recuperando…)"
 
 msgid "Live channels"
 msgstr "Canales en directo"
@@ -1541,8 +1581,8 @@ msgstr "Solo stream en directo y alertas de Discord, sin grabación en disco"
 msgid "Live stream highlight"
 msgstr "Momento destacado del directo"
 
-msgid "Live stream is currently unavailable. Searching for stream..."
-msgstr "El directo no está disponible en este momento. Buscando el stream..."
+msgid "Live stream is currently unavailable. Searching for stream…"
+msgstr "El directo no está disponible en este momento. Buscando el stream…"
 
 msgid "Live stream not available."
 msgstr "Directo no disponible."
@@ -1559,6 +1599,10 @@ msgstr "Ver en directo"
 msgid "Live-only"
 msgstr "Solo directo"
 
+#, python-format
+msgid "Live: %(name)s (without Twitch login)"
+msgstr "EN DIRECTO %(name)s (sin iniciar sesión en Twitch)"
+
 msgid "Load"
 msgstr "Carga"
 
@@ -1569,7 +1613,7 @@ msgid "Loading chat…"
 msgstr "Cargando chat…"
 
 msgid "Loading model..."
-msgstr "Cargando modelo..."
+msgstr "Cargando modelo…"
 
 msgid "Loading streams…"
 msgstr "Cargando streams…"
@@ -1599,6 +1643,9 @@ msgstr "Bloquear <strong>versión móvil</strong>"
 msgid "Log out"
 msgstr "Cerrar sesión"
 
+msgid "Log out everywhere"
+msgstr "Cerrar sesión en todas partes"
+
 msgid "Login"
 msgstr "Iniciar sesión"
 
@@ -1611,6 +1658,9 @@ msgstr "Error al iniciar sesión."
 msgid "MP4 check not possible"
 msgstr "No es posible comprobar el MP4"
 
+msgid "Main navigation"
+msgstr "Navegación principal"
+
 msgid "Maintenance"
 msgstr "Mantenimiento"
 
@@ -1676,6 +1726,9 @@ msgstr "Mensaje"
 msgid "Mobile live is temporarily disabled. Please use the desktop version or the installed app."
 msgstr "El directo en móvil está desactivado temporalmente. Usa la versión de escritorio o la app instalada."
 
+msgid "Mods"
+msgstr "Mods"
+
 msgid "Monitored"
 msgstr "Supervisado"
 
@@ -1697,9 +1750,6 @@ msgstr "Error de red"
 msgid "Network error while loading streams."
 msgstr "Error de red al cargar los streams."
 
-msgid "Network error:"
-msgstr "Error de red:"
-
 msgid "Network is back — reconnecting…"
 msgstr "Red recuperada — reconectando…"
 
@@ -1718,8 +1768,8 @@ msgstr "Nueva contraseña (déjala vacía para no cambiarla)"
 msgid "New password * (min. 8 characters)"
 msgstr "Nueva contraseña * (mín. 8 caracteres)"
 
-msgid "New password..."
-msgstr "Nueva contraseña..."
+msgid "New password…"
+msgstr "Nueva contraseña…"
 
 msgid "New user"
 msgstr "Nuevo usuario"
@@ -1742,8 +1792,8 @@ msgstr "Nextcloud, ownCloud, Hetzner Storage Box o cualquier servidor WebDAV con
 msgid "No (self-signed only)"
 msgstr "No (solo con autofirmado)"
 
-msgid "No VODs available in the archive"
-msgstr "No hay VODs disponibles en el archivo"
+msgid "No VODs yet. Recordings appear here automatically as soon as a monitored channel goes live."
+msgstr "Aún no hay VODs. Las grabaciones aparecen aquí automáticamente en cuanto un canal vigilado empieza a emitir."
 
 msgid "No acceptances yet."
 msgstr "Aún no hay aceptaciones."
@@ -1778,6 +1828,9 @@ msgstr "No hay copias de seguridad disponibles."
 msgid "No badges received from Twitch."
 msgstr "No se recibieron insignias de Twitch."
 
+msgid "No channels are monitored yet."
+msgstr "Todavía no se vigila ningún canal."
+
 msgid "No chat"
 msgstr "Sin chat"
 
@@ -1818,9 +1871,6 @@ msgstr "No hay canales de Twitch supervisados."
 msgid "No monitored Twitch channels. Add streamers under Streamers."
 msgstr "No hay canales de Twitch supervisados. Añade streamers en Streamers."
 
-msgid "No monitored channels configured."
-msgstr "No hay canales supervisados configurados."
-
 msgid "No recently watched streams yet."
 msgstr "Aún no hay streams vistos recientemente."
 
@@ -1875,30 +1925,15 @@ msgstr "Nota sobre OAuth"
 msgid "OAuth state tokens require a strong VOD_SECRET_KEY."
 msgstr "Los tokens de estado OAuth requieren una VOD_SECRET_KEY robusta."
 
+msgid "OBS overlays"
+msgstr "Overlays de OBS"
+
 msgid "OFF (normal operation)"
 msgstr "DESACTIVADO (funcionamiento normal)"
 
-msgid "OFFLINE"
-msgstr "DESCONECTADO"
-
 msgid "OK"
 msgstr "Aceptar"
 
-msgid "ONLINE"
-msgstr "EN LÍNEA"
-
-msgid "OPERATING MODE:"
-msgstr "MODO DE FUNCIONAMIENTO:"
-
-msgid "OPTION A: UPLOAD IMAGE FILE"
-msgstr "OPCIÓN A: SUBIR ARCHIVO DE IMAGEN"
-
-msgid "OPTION A: UPLOAD PROFILE PICTURE"
-msgstr "OPCIÓN A: SUBIR FOTO DE PERFIL"
-
-msgid "OPTION B: USE IMAGE URL"
-msgstr "OPCIÓN B: USAR URL DE IMAGEN"
-
 msgid "OR"
 msgstr "O"
 
@@ -1924,6 +1959,9 @@ msgstr "Más antiguos primero"
 msgid "OneDrive / Microsoft 365 via Microsoft Graph with OAuth 2.0."
 msgstr "OneDrive / Microsoft 365 mediante Microsoft Graph con OAuth 2.0."
 
+msgid "Online"
+msgstr "En línea"
+
 msgid "Only after a successful upload and optional cloud verification."
 msgstr "Solo tras una subida correcta y la verificación opcional en la nube."
 
@@ -1945,6 +1983,22 @@ msgstr "Abrir clip"
 msgid "Open editor"
 msgstr "Abrir editor"
 
+#, python-format
+msgid "Open streamer %(name)s"
+msgstr "Abrir streamer %(name)s"
+
+msgid "Operating mode"
+msgstr "Modo de funcionamiento:"
+
+msgid "Option A: upload image file"
+msgstr "Opción a: subir archivo de imagen"
+
+msgid "Option A: upload profile picture"
+msgstr "Opción a: subir foto de perfil"
+
+msgid "Option B: use image URL"
+msgstr "Opción b: usar url de imagen"
+
 msgid "Option sections"
 msgstr "Secciones de opciones"
 
@@ -2055,6 +2109,9 @@ msgstr "Reproducción no disponible"
 msgid "Player error — reconnecting…"
 msgstr "Error del reproductor — reconectando…"
 
+msgid "Please confirm"
+msgstr "Confirma, por favor"
+
 msgid "Please enter a name for the storage provider."
 msgstr "Introduce un nombre para el proveedor de almacenamiento."
 
@@ -2105,10 +2162,10 @@ msgid "Private video and stream archive console."
 msgstr "Consola privada de archivo de vídeos y streams."
 
 msgid "Processing video (this may take a while)..."
-msgstr "Procesando vídeo (puede tardar un poco)..."
+msgstr "Procesando vídeo (puede tardar un poco)…"
 
 msgid "Processing video..."
-msgstr "Procesando vídeo..."
+msgstr "Procesando vídeo…"
 
 msgid "Profile picture reset to default."
 msgstr "Foto de perfil restablecida a la predeterminada."
@@ -2153,8 +2210,8 @@ msgstr "Proveedores"
 msgid "Public link created:"
 msgstr "Enlace público creado:"
 
-msgid "Purpose of this user group..."
-msgstr "Finalidad de este grupo de usuarios..."
+msgid "Purpose of this user group…"
+msgstr "Finalidad de este grupo de usuarios…"
 
 msgid "Quality"
 msgstr "Calidad"
@@ -2168,22 +2225,12 @@ msgstr "Cola no legible"
 msgid "Quiet"
 msgstr "Silencioso"
 
-msgid "RECORDING"
-msgstr "GRABANDO"
-
-msgid "RECORDING ACTIVE"
-msgstr "GRABACIÓN ACTIVA"
-
 msgid "Ready"
 msgstr "Listo"
 
 msgid "Real-time stream error — reconnecting…"
 msgstr "Error del stream en tiempo real — reconectando…"
 
-#, python-format
-msgid "Really delete backup %(name)s?"
-msgstr "¿Seguro que quieres eliminar la copia de seguridad %(name)s?"
-
 msgid "Really delete file?"
 msgstr "¿Seguro que quieres eliminar el archivo?"
 
@@ -2193,28 +2240,15 @@ msgstr "¿Seguro que quieres eliminar el archivo de la nube? Se conserva una cop
 msgid "Really delete the local file? The cloud copy is kept."
 msgstr "¿Seguro que quieres eliminar el archivo local? Se conserva la copia en la nube."
 
-msgid "Really delete?"
-msgstr "¿Seguro que quieres eliminarlo?"
-
-#, python-format
-msgid "Really remove channel %(name)s?"
-msgstr "¿Seguro que quieres quitar el canal %(name)s?"
-
 msgid "Really remove the provider? The cloud files are kept."
 msgstr "¿Seguro que quieres quitar el proveedor? Los archivos en la nube se conservan."
 
-msgid "Really rename the file?"
-msgstr "¿Seguro que quieres renombrar el archivo?"
-
 msgid "Really reset the custom banner and switch to the default?"
 msgstr "¿Seguro que quieres restablecer el banner personalizado y volver al predeterminado?"
 
 msgid "Really reset the custom profile picture and switch to the default?"
 msgstr "¿Seguro que quieres restablecer la foto de perfil personalizada y volver a la predeterminada?"
 
-msgid "Really revoke this share?"
-msgstr "¿Seguro que quieres revocar este enlace compartido?"
-
 msgid "Really stop the recording?"
 msgstr "¿Seguro que quieres detener la grabación?"
 
@@ -2224,6 +2258,9 @@ msgstr "Errores recientes de tareas"
 msgid "Recently watched"
 msgstr "Vistos recientemente"
 
+msgid "Recommended browser-source URLs. Replace TOKEN with the value of TTS_OVERLAY_TOKEN or ALERT_OVERLAY_TOKEN. The part after # stays in OBS and reaches the server only as a request header, never in a log line."
+msgstr "URLs recomendadas para la fuente de navegador. Sustituye TOKEN por el valor de TTS_OVERLAY_TOKEN o ALERT_OVERLAY_TOKEN. La parte tras # se queda en OBS y llega al servidor solo como cabecera de la petición, nunca en un registro."
+
 msgid "Recommended. Prevents data loss from incomplete uploads."
 msgstr "Recomendado. Evita la pérdida de datos por subidas incompletas."
 
@@ -2242,6 +2279,9 @@ msgstr "Grabación"
 msgid "Recording + live stream & Discord notification"
 msgstr "Grabación + directo y notificación de Discord"
 
+msgid "Recording active"
+msgstr "Grabación activa"
+
 msgid "Recording disabled (live & Discord only)"
 msgstr "Grabación desactivada (solo directo y Discord)"
 
@@ -2291,8 +2331,8 @@ msgid "Remove channel"
 msgstr "Quitar canal"
 
 #, python-format
-msgid "Remove channel %(name)s?"
-msgstr "¿Quitar el canal %(name)s?"
+msgid "Remove channel %(name)s? Monitoring stops; existing recordings stay in the archive."
+msgstr "¿Quitar el canal %(name)s? La vigilancia se detiene; las grabaciones existentes se quedan en el archivo."
 
 msgid "Remove only the database entry?"
 msgstr "¿Eliminar solo la entrada de la base de datos?"
@@ -2307,6 +2347,9 @@ msgstr "Tarea de remux iniciada. El progreso se muestra en el panel de administr
 msgid "Rename file"
 msgstr "Renombrar archivo"
 
+msgid "Rename the file? Existing links and shares to the old file name stop working."
+msgstr "¿Renombrar el archivo? Los enlaces y comparticiones existentes al nombre anterior dejarán de funcionar."
+
 msgid "Renamed."
 msgstr "Renombrado."
 
@@ -2332,6 +2375,9 @@ msgstr "Falló el reinicio."
 msgid "Restart services"
 msgstr "Reiniciar servicios"
 
+msgid "Restart the recorder and chat logger now? Running recordings are interrupted for a few seconds."
+msgstr "¿Reiniciar ahora el grabador y el registrador de chat? Las grabaciones en curso se interrumpen unos segundos."
+
 msgid "Restore"
 msgstr "Restaurar"
 
@@ -2348,6 +2394,9 @@ msgstr "Reanudar reproducción"
 msgid "Revoke"
 msgstr "Revocar"
 
+msgid "Revoke this share? The link stops working immediately."
+msgstr "¿Revocar este enlace compartido? Deja de funcionar de inmediato."
+
 #, python-format
 msgid "Role access '%(slug)s' added."
 msgstr "Acceso de rol «%(slug)s» añadido."
@@ -2380,9 +2429,6 @@ msgstr "En curso…"
 msgid "S3-compatible"
 msgstr "Compatible con S3"
 
-msgid "START"
-msgstr "INICIO"
-
 msgid "Safety migration:"
 msgstr "Migración de seguridad:"
 
@@ -2436,10 +2482,7 @@ msgid "Saving transcript failed: %(error)s"
 msgstr "Error al guardar la transcripción: %(error)s"
 
 msgid "Saving transcript..."
-msgstr "Guardando transcripción..."
-
-msgid "Saving..."
-msgstr "Guardando..."
+msgstr "Guardando transcripción…"
 
 msgid "Saving…"
 msgstr "Guardando…"
@@ -2447,8 +2490,8 @@ msgstr "Guardando…"
 msgid "Search"
 msgstr "Buscar"
 
-msgid "Search VODs, streamers or games..."
-msgstr "Buscar VODs, streamers o juegos..."
+msgid "Search VODs, streamers or games…"
+msgstr "Buscar VODs, streamers o juegos…"
 
 msgid "Search category"
 msgstr "Buscar categoría"
@@ -2459,8 +2502,11 @@ msgstr "Buscar categoría / juego…"
 msgid "Search failed."
 msgstr "Falló la búsqueda."
 
-msgid "Search recordings (title, date, game)..."
-msgstr "Buscar grabaciones (título, fecha, juego)..."
+msgid "Search recordings"
+msgstr "Buscar grabaciones"
+
+msgid "Search recordings (title, date, game)…"
+msgstr "Buscar grabaciones (título, fecha, juego)…"
 
 msgid "Search results"
 msgstr "Resultados de búsqueda"
@@ -2471,21 +2517,21 @@ msgstr "Buscar streamer o canal…"
 msgid "Search streamers"
 msgstr "Buscar streamers"
 
-msgid "Search term (e.g. player name, chat message, date)..."
-msgstr "Término de búsqueda (p. ej., nombre de jugador, mensaje de chat, fecha)..."
-
-msgid "Search user, email or group..."
-msgstr "Buscar usuario, correo o grupo..."
+msgid "Search term (e.g. player name, chat message, date)…"
+msgstr "Término de búsqueda (p. ej., nombre de jugador, mensaje de chat, fecha)…"
 
-msgid "Search..."
-msgstr "Buscar..."
+msgid "Search user, email or group…"
+msgstr "Buscar usuario, correo o grupo…"
 
-msgid "Searching for stream..."
-msgstr "Buscando el stream..."
+msgid "Searching for stream…"
+msgstr "Buscando el stream…"
 
 msgid "Searching…"
 msgstr "Buscando…"
 
+msgid "Search…"
+msgstr "Buscar…"
+
 msgid "Seconds after trigger"
 msgstr "Segundos después del disparo"
 
@@ -2575,9 +2621,21 @@ msgstr "Se muestra en la navegación, la barra lateral y las tarjetas de streame
 msgid "Sign in"
 msgstr "Iniciar sesión"
 
+msgid "Sign out on every device? Every session of this account ends, including this one."
+msgstr "¿Cerrar sesión en todos los dispositivos? Terminan todas las sesiones de esta cuenta, también esta."
+
 msgid "Size"
 msgstr "Tamaño"
 
+msgid "Skip to content"
+msgstr "Saltar al contenido"
+
+msgid "Sort"
+msgstr "Ordenar"
+
+msgid "Sort order"
+msgstr "Orden"
+
 msgid "Sound"
 msgstr "Sonido"
 
@@ -2619,7 +2677,7 @@ msgid "Starting"
 msgstr "Iniciando"
 
 msgid "Starting download..."
-msgstr "Iniciando descarga..."
+msgstr "Iniciando descarga…"
 
 msgid "Status"
 msgstr "Estado"
@@ -2658,6 +2716,9 @@ msgstr "Proveedor de almacenamiento no encontrado."
 msgid "Storage providers"
 msgstr "Proveedores de almacenamiento"
 
+msgid "Storage usage"
+msgstr "Uso de almacenamiento"
+
 #, python-format
 msgid "Storage: <strong>%(pct)s%%</strong>"
 msgstr "Almacenamiento: <strong>%(pct)s%%</strong>"
@@ -2719,6 +2780,9 @@ msgstr "Streamers, VODs e historiales de chat"
 msgid "Subfolder"
 msgstr "Subcarpeta"
 
+msgid "Subs"
+msgstr "Subs"
+
 msgid "Success"
 msgstr "Éxito"
 
@@ -2806,6 +2870,9 @@ msgstr "Versión de las condiciones obsoleta: recarga la página y acéptalas de
 msgid "Test"
 msgstr "Probar"
 
+msgid "Text-to-speech overlay"
+msgstr "Overlay de texto a voz"
+
 msgid "Thanks for your understanding. Authorized users can sign in via the login page."
 msgstr "Gracias por tu comprensión. Los usuarios autorizados pueden iniciar sesión desde la página de inicio de sesión."
 
@@ -2918,8 +2985,11 @@ msgstr "Hoy, %(time)s"
 msgid "Too many VODs are playing right now. Live is not affected. Try again in a few minutes — a slot frees up as soon as someone closes the player."
 msgstr "Ahora mismo se están reproduciendo demasiados VODs. El directo no se ve afectado. Vuelve a intentarlo en unos minutos: se libera una plaza en cuanto alguien cierra el reproductor."
 
-msgid "Too many attempts. IP temporarily blocked. Please try again later."
-msgstr "Demasiados intentos. IP bloqueada temporalmente. Inténtalo de nuevo más tarde."
+#, python-format
+msgid "Too many login attempts. Please try again in %(num)d minute."
+msgid_plural "Too many login attempts. Please try again in %(num)d minutes."
+msgstr[0] "Demasiados intentos de inicio de sesión. Inténtalo de nuevo en %(num)d minuto."
+msgstr[1] "Demasiados intentos de inicio de sesión. Inténtalo de nuevo en %(num)d minutos."
 
 msgid "Top streams are currently unavailable. Use monitored channels or the search."
 msgstr "Los streams destacados no están disponibles ahora. Usa los canales supervisados o la búsqueda."
@@ -2972,6 +3042,9 @@ msgstr "Transcripción terminada"
 msgid "Transcript missing despite finished status"
 msgstr "Falta la transcripción pese al estado terminado"
 
+msgid "Transcript progress"
+msgstr "Progreso de la transcripción"
+
 msgid "Transcription cancelled"
 msgstr "Transcripción cancelada"
 
@@ -2995,7 +3068,7 @@ msgid "Transcription queued in the worker. The result appears on the next page l
 msgstr "Transcripción puesta en la cola del worker. El resultado aparecerá al recargar la página cuando termine."
 
 msgid "Transcription running..."
-msgstr "Transcripción en curso..."
+msgstr "Transcripción en curso…"
 
 msgid "Transcription timed out"
 msgstr "Tiempo de transcripción agotado"
@@ -3012,8 +3085,11 @@ msgstr "Twitch / predeterminado"
 msgid "Twitch badge library synchronized."
 msgstr "Biblioteca de insignias de Twitch sincronizada."
 
-msgid "Twitch channel name..."
-msgstr "Nombre del canal de Twitch..."
+msgid "Twitch channel name"
+msgstr "Nombre del canal de Twitch"
+
+msgid "Twitch channel name…"
+msgstr "Nombre del canal de Twitch…"
 
 msgid "Twitch live chat"
 msgstr "Chat en directo de Twitch"
@@ -3021,8 +3097,8 @@ msgstr "Chat en directo de Twitch"
 msgid "Twitch live stream"
 msgstr "Directo de Twitch"
 
-msgid "Twitch name (e.g. shroud) or YouTube URL / @handle..."
-msgstr "Nombre de Twitch (p. ej., shroud) o URL de YouTube / @identificador..."
+msgid "Twitch name (e.g. shroud) or YouTube URL / @handle…"
+msgstr "Nombre de Twitch (p. ej., shroud) o URL de YouTube / @identificador…"
 
 msgid "Twitch or YouTube supported"
 msgstr "Compatible con Twitch o YouTube"
@@ -3240,12 +3316,6 @@ msgstr "Visible para:"
 msgid "Volume"
 msgstr "Volumen"
 
-msgid "WARNING: Do you want to permanently delete this streamer and all recordings?"
-msgstr "ATENCIÓN: ¿quieres eliminar definitivamente este streamer y todas sus grabaciones?"
-
-msgid "WATCH LIVE"
-msgstr "VER EN DIRECTO"
-
 msgid "Waiting for server stream…"
 msgstr "Esperando el stream del servidor…"
 
@@ -3258,6 +3328,9 @@ msgstr "Ver"
 msgid "Watch latest video"
 msgstr "Ver el último vídeo"
 
+msgid "Watch live"
+msgstr "Ver en directo"
+
 msgid "Watch now"
 msgstr "Ver ahora"
 
@@ -3314,8 +3387,8 @@ msgstr "No puedes moverte a un grupo sin permisos de gestión de usuarios."
 msgid "You have accepted version %(version)s."
 msgstr "Has aceptado la versión %(version)s."
 
-msgid "Your IP has been temporarily blocked. Please try again later."
-msgstr "Tu IP se ha bloqueado temporalmente. Inténtalo de nuevo más tarde."
+msgid "Your IP has been blocked. Please contact the administrator."
+msgstr "Tu IP ha sido bloqueada. Contacta con el administrador."
 
 msgid "Your browser does not support the video tag."
 msgstr "Tu navegador no admite la etiqueta de vídeo."
@@ -3359,12 +3432,12 @@ msgstr "p. ej., Archivo VIP"
 msgid "e.g. alice, bob"
 msgstr "p. ej., alice, bob"
 
-msgid "e.g. john_doe"
-msgstr "p. ej., juan_perez"
-
 msgid "e.g. channel_name"
 msgstr "p. ej., channel_name"
 
+msgid "e.g. john_doe"
+msgstr "p. ej., juan_perez"
+
 #, python-format
 msgid "effective from %(date)s"
 msgstr "en vigor desde el %(date)s"
diff --git a/WEBUI/translations/fr/LC_MESSAGES/messages.mo b/WEBUI/translations/fr/LC_MESSAGES/messages.mo
index 7e02db5..ad0a4c1 100644
Binary files a/WEBUI/translations/fr/LC_MESSAGES/messages.mo and b/WEBUI/translations/fr/LC_MESSAGES/messages.mo differ
diff --git a/WEBUI/translations/fr/LC_MESSAGES/messages.po b/WEBUI/translations/fr/LC_MESSAGES/messages.po
index 66e748b..9bf6493 100644
--- a/WEBUI/translations/fr/LC_MESSAGES/messages.po
+++ b/WEBUI/translations/fr/LC_MESSAGES/messages.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: StreamVault VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2026-11-03 19:28+0100\n"
+"POT-Creation-Date: 2026-11-12 15:41+0100\n"
 "PO-Revision-Date: 2026-11-03 19:31+0100\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language: fr\n"
@@ -187,9 +187,6 @@ msgstr "Une restauration est déjà en cours."
 msgid "A saved value is kept if the field is left empty."
 msgstr "Une valeur enregistrée est conservée si le champ reste vide."
 
-msgid "ACTIVE (locked)"
-msgstr "ACTIF (verrouillé)"
-
 msgid "AWS S3, Cloudflare R2, Backblaze B2, Wasabi, MinIO, Hetzner or any S3-compatible endpoint."
 msgstr "AWS S3, Cloudflare R2, Backblaze B2, Wasabi, MinIO, Hetzner ou tout point de terminaison compatible S3."
 
@@ -202,6 +199,9 @@ msgstr "Accepter les conditions"
 msgid "Account active (access allowed)"
 msgstr "Compte actif (accès autorisé)"
 
+msgid "Accounts"
+msgstr "Comptes"
+
 msgid "Action"
 msgstr "Action"
 
@@ -214,6 +214,9 @@ msgstr "Activer le compte immédiatement"
 msgid "Active"
 msgstr "Actif"
 
+msgid "Active (locked)"
+msgstr "ACTIF (verrouillé)"
+
 msgid "Active shares"
 msgstr "Partages actifs"
 
@@ -226,6 +229,9 @@ msgstr "Actif : les nouveaux streams sont débloqués automatiquement. Vous pou
 msgid "Actively monitored by the recorder core"
 msgstr "Surveillé activement par le moteur d'enregistrement"
 
+msgid "Add a channel to record"
+msgstr "Ajouter une chaîne à enregistrer"
+
 msgid "Add channel"
 msgstr "Ajouter une chaîne"
 
@@ -235,6 +241,9 @@ msgstr "Ajouter une nouvelle chaîne"
 msgid "Add provider"
 msgstr "Ajouter un fournisseur"
 
+msgid "Add the first channel above"
+msgstr "Ajouter la première chaîne ci-dessus"
+
 msgid "Addressing"
 msgstr "Adressage"
 
@@ -247,6 +256,9 @@ msgstr "Contrôles admin"
 msgid "Admins only"
 msgstr "Admins uniquement"
 
+msgid "Alert sound overlay"
+msgstr "Overlay des sons d’alerte"
+
 msgid "All"
 msgstr "Tous"
 
@@ -486,27 +498,27 @@ msgstr "Le tampon est encore court — la fenêtre de clip s'agrandit avec lui."
 msgid "Buffer:"
 msgstr "Tampon :"
 
-msgid "Buffering..."
-msgstr "Mise en mémoire tampon..."
+msgid "Buffering…"
+msgstr "Mise en mémoire tampon…"
 
 msgid "By default nothing is uploaded or deleted automatically. Enable these features deliberately."
 msgstr "Par défaut, rien n'est envoyé ni supprimé automatiquement. Activez ces fonctions en connaissance de cause."
 
-msgid "CHANGE"
-msgstr "MODIFIER"
-
-msgid "CHANNEL MANAGEMENT (ADMIN)"
-msgstr "GESTION DES CHAÎNES (ADMIN)"
-
 msgid "Cancel"
 msgstr "Annuler"
 
+msgid "Category"
+msgstr "Catégorie"
+
 msgid "Category search failed."
 msgstr "La recherche de catégorie a échoué."
 
 msgid "Category search is currently unavailable."
 msgstr "La recherche de catégorie est actuellement indisponible."
 
+msgid "Change"
+msgstr "Modifier"
+
 msgid "Change banner"
 msgstr "Changer la bannière"
 
@@ -522,6 +534,9 @@ msgstr "Actions de la chaîne"
 msgid "Channel archive & recording metrics"
 msgstr "Archives des chaînes et métriques d'enregistrement"
 
+msgid "Channel management (admin)"
+msgstr "Gestion des chaînes (admin)"
+
 msgid "Channel not found."
 msgstr "Chaîne introuvable."
 
@@ -578,12 +593,12 @@ msgstr "Nettoyage mis en file d'attente (tâche n°%(task)s)."
 msgid "Clear filters"
 msgstr "Effacer les filtres"
 
-msgid "Click to change password"
-msgstr "Cliquer pour changer le mot de passe"
-
 msgid "Clip"
 msgstr "Clip"
 
+msgid "Clip Editor"
+msgstr "Éditeur de clips"
+
 msgid "Clip URL is missing on this page."
 msgstr "L'URL du clip est absente de cette page."
 
@@ -668,6 +683,9 @@ msgstr "Configurer les chaînes d'enregistrement et gérer les affectations d'ar
 msgid "Configured streamers & sources"
 msgstr "Streamers et sources configurés"
 
+msgid "Confirm"
+msgstr "Confirmer"
+
 msgid "Connect account"
 msgstr "Connecter le compte"
 
@@ -689,6 +707,9 @@ msgstr "Connexion OK"
 msgid "Connection failed"
 msgstr "Échec de la connexion"
 
+msgid "Connection failed. Check your network and try again."
+msgstr "Échec de la connexion. Vérifiez votre réseau et réessayez."
+
 msgid "Connection lost — reconnecting…"
 msgstr "Connexion perdue — reconnexion…"
 
@@ -705,6 +726,9 @@ msgstr "Panneau de contrôle"
 msgid "Control the global maintenance mode or lock individual platform areas."
 msgstr "Contrôlez le mode maintenance global ou verrouillez des zones précises de la plateforme."
 
+msgid "Copied"
+msgstr "Copié"
+
 msgid "Copy"
 msgstr "Copier"
 
@@ -821,6 +845,14 @@ msgstr "Cible par défaut"
 msgid "Delete"
 msgstr "Supprimer"
 
+#, python-format
+msgid "Delete %(name)s? The file is removed from the archive and cannot be restored."
+msgstr "Supprimer %(name)s ? Le fichier est retiré de l’archive et ne peut pas être restauré."
+
+#, python-format
+msgid "Delete backup %(name)s? This cannot be undone."
+msgstr "Supprimer la sauvegarde %(name)s ? Cette action est irréversible."
+
 msgid "Delete folder"
 msgstr "Supprimer le dossier"
 
@@ -839,6 +871,12 @@ msgstr "Supprimer localement"
 msgid "Delete permanently"
 msgstr "Supprimer définitivement"
 
+msgid "Delete this streamer folder and all recordings? This cannot be undone."
+msgstr "Supprimer le dossier de ce streamer et tous les enregistrements ? Cette action est irréversible."
+
+msgid "Delete this video? The file is removed from the archive and cannot be restored."
+msgstr "Supprimer cette vidéo ? Le fichier est retiré de l’archive et ne peut pas être restauré."
+
 msgid "Delete user"
 msgstr "Supprimer l'utilisateur"
 
@@ -919,8 +957,8 @@ msgstr "Télécharger le TXT"
 msgid "Download all"
 msgstr "Tout télécharger"
 
-msgid "Download all VODs?"
-msgstr "Télécharger toutes les VOD ?"
+msgid "Download all VODs of this streamer as one archive? This can take a while for large channels."
+msgstr "Télécharger toutes les VODs de ce streamer dans une seule archive ? Cela peut prendre du temps pour les grandes chaînes."
 
 msgid "Download archive & VODs"
 msgstr "Télécharger les archives et VOD"
@@ -939,7 +977,7 @@ msgstr "Téléchargement de toutes les VOD lancé en arrière-plan."
 
 #, python-format
 msgid "Downloading... %(percent)s"
-msgstr "Téléchargement... %(percent)s"
+msgstr "Téléchargement… %(percent)s"
 
 #, python-format
 msgid "Drive quota active — do not press Play again (it extends the block). Seek back into the already loaded part, or wait about %(minutes)s min."
@@ -990,6 +1028,9 @@ msgstr "Adresse e-mail"
 msgid "Email address (optional)"
 msgstr "Adresse e-mail (facultative)"
 
+msgid "Emotes"
+msgstr "Emotes"
+
 msgid "Empty = AWS. For R2, B2, Wasabi, MinIO etc. enter the S3 endpoint."
 msgstr "Vide = AWS. Pour R2, B2, Wasabi, MinIO etc., saisissez le point de terminaison S3."
 
@@ -1005,6 +1046,9 @@ msgstr "Activer immédiatement"
 msgid "Enable maintenance mode"
 msgstr "Activer le mode maintenance"
 
+msgid "Enable maintenance mode? Everyone except allowlisted users sees the maintenance page until you end it."
+msgstr "Activer le mode maintenance ? Tous les utilisateurs hors liste autorisée verront la page de maintenance jusqu’à ce que vous le désactiviez."
+
 msgid "Enable recording"
 msgstr "Activer l'enregistrement"
 
@@ -1102,6 +1146,9 @@ msgstr "Erreur :"
 msgid "Error: %(error)s"
 msgstr "Erreur : %(error)s"
 
+msgid "Everywhere"
+msgstr "Partout"
+
 msgid "Existing members of this group are automatically assigned to the default group <strong>Viewer</strong>."
 msgstr "Les membres actuels de ce groupe sont automatiquement affectés au groupe par défaut <strong>Viewer</strong>."
 
@@ -1118,10 +1165,7 @@ msgid "Exported by StreamVault"
 msgstr "Exporté par StreamVault"
 
 msgid "Extracting audio..."
-msgstr "Extraction de l'audio..."
-
-msgid "FEATURED VOD"
-msgstr "VOD À LA UNE"
+msgstr "Extraction de l'audio…"
 
 msgid "Failed"
 msgstr "Échec"
@@ -1132,6 +1176,9 @@ msgstr "Rapide"
 msgid "Feature permissions"
 msgstr "Autorisations des fonctions"
 
+msgid "Featured VOD"
+msgstr "Vod à la une"
+
 msgid "Featured highlight"
 msgstr "Temps fort à la une"
 
@@ -1162,8 +1209,11 @@ msgstr "Le fichier a été envoyé."
 msgid "Filter"
 msgstr "Filtrer"
 
-msgid "Filter chat..."
-msgstr "Filtrer le chat..."
+msgid "Filter chat"
+msgstr "Filtrer le chat"
+
+msgid "Filter chat…"
+msgstr "Filtrer le chat…"
 
 msgid "First"
 msgstr "Premier"
@@ -1441,19 +1491,6 @@ msgstr "Juillet"
 msgid "June"
 msgstr "Juin"
 
-msgid "LIVE"
-msgstr "EN DIRECT"
-
-#, python-format
-msgid "LIVE %(name)s (without Twitch login)"
-msgstr "EN DIRECT %(name)s (sans connexion Twitch)"
-
-msgid "LIVE & DISCORD ONLY"
-msgstr "DIRECT ET DISCORD UNIQUEMENT"
-
-msgid "LIVE NOW"
-msgstr "EN DIRECT MAINTENANT"
-
 msgid "Language"
 msgstr "Langue"
 
@@ -1502,11 +1539,14 @@ msgstr "Lien copié :"
 msgid "Live"
 msgstr "En direct"
 
+msgid "Live & Discord only"
+msgstr "Direct et discord uniquement"
+
 msgid "Live & Discord only:"
 msgstr "Direct et Discord uniquement :"
 
 msgid "Live (recovering...)"
-msgstr "En direct (rétablissement...)"
+msgstr "En direct (rétablissement…)"
 
 msgid "Live channels"
 msgstr "Chaînes en direct"
@@ -1541,8 +1581,8 @@ msgstr "Stream en direct et alertes Discord uniquement, sans enregistrement sur
 msgid "Live stream highlight"
 msgstr "Temps fort du stream en direct"
 
-msgid "Live stream is currently unavailable. Searching for stream..."
-msgstr "Le stream en direct est actuellement indisponible. Recherche du stream..."
+msgid "Live stream is currently unavailable. Searching for stream…"
+msgstr "Le stream en direct est actuellement indisponible. Recherche du stream…"
 
 msgid "Live stream not available."
 msgstr "Stream en direct indisponible."
@@ -1559,6 +1599,10 @@ msgstr "Visionnage en direct"
 msgid "Live-only"
 msgstr "Direct uniquement"
 
+#, python-format
+msgid "Live: %(name)s (without Twitch login)"
+msgstr "EN DIRECT %(name)s (sans connexion Twitch)"
+
 msgid "Load"
 msgstr "Charge"
 
@@ -1569,7 +1613,7 @@ msgid "Loading chat…"
 msgstr "Chargement du chat…"
 
 msgid "Loading model..."
-msgstr "Chargement du modèle..."
+msgstr "Chargement du modèle…"
 
 msgid "Loading streams…"
 msgstr "Chargement des streams…"
@@ -1599,6 +1643,9 @@ msgstr "Verrouiller <strong>version mobile</strong>"
 msgid "Log out"
 msgstr "Se déconnecter"
 
+msgid "Log out everywhere"
+msgstr "Se déconnecter partout"
+
 msgid "Login"
 msgstr "Connexion"
 
@@ -1611,6 +1658,9 @@ msgstr "Échec de la connexion."
 msgid "MP4 check not possible"
 msgstr "Vérification MP4 impossible"
 
+msgid "Main navigation"
+msgstr "Navigation principale"
+
 msgid "Maintenance"
 msgstr "Maintenance"
 
@@ -1676,6 +1726,9 @@ msgstr "Message"
 msgid "Mobile live is temporarily disabled. Please use the desktop version or the installed app."
 msgstr "Le direct sur mobile est temporairement désactivé. Utilisez la version de bureau ou l'application installée."
 
+msgid "Mods"
+msgstr "Mods"
+
 msgid "Monitored"
 msgstr "Surveillé"
 
@@ -1697,9 +1750,6 @@ msgstr "Erreur réseau"
 msgid "Network error while loading streams."
 msgstr "Erreur réseau lors du chargement des streams."
 
-msgid "Network error:"
-msgstr "Erreur réseau :"
-
 msgid "Network is back — reconnecting…"
 msgstr "Réseau rétabli — reconnexion…"
 
@@ -1718,8 +1768,8 @@ msgstr "Nouveau mot de passe (laisser vide pour ne pas le modifier)"
 msgid "New password * (min. 8 characters)"
 msgstr "Nouveau mot de passe * (8 caractères min.)"
 
-msgid "New password..."
-msgstr "Nouveau mot de passe..."
+msgid "New password…"
+msgstr "Nouveau mot de passe…"
 
 msgid "New user"
 msgstr "Nouvel utilisateur"
@@ -1742,8 +1792,8 @@ msgstr "Nextcloud, ownCloud, Hetzner Storage Box ou tout serveur WebDAV avec un
 msgid "No (self-signed only)"
 msgstr "Non (auto-signé uniquement)"
 
-msgid "No VODs available in the archive"
-msgstr "Aucune VOD disponible dans les archives"
+msgid "No VODs yet. Recordings appear here automatically as soon as a monitored channel goes live."
+msgstr "Pas encore de VODs. Les enregistrements apparaissent ici automatiquement dès qu’une chaîne surveillée passe en direct."
 
 msgid "No acceptances yet."
 msgstr "Aucune acceptation pour le moment."
@@ -1778,6 +1828,9 @@ msgstr "Aucune sauvegarde disponible."
 msgid "No badges received from Twitch."
 msgstr "Aucun badge reçu de Twitch."
 
+msgid "No channels are monitored yet."
+msgstr "Aucune chaîne n’est encore surveillée."
+
 msgid "No chat"
 msgstr "Pas de chat"
 
@@ -1818,9 +1871,6 @@ msgstr "Aucune chaîne Twitch surveillée."
 msgid "No monitored Twitch channels. Add streamers under Streamers."
 msgstr "Aucune chaîne Twitch surveillée. Ajoutez des streamers dans Streamers."
 
-msgid "No monitored channels configured."
-msgstr "Aucune chaîne surveillée configurée."
-
 msgid "No recently watched streams yet."
 msgstr "Aucun stream regardé récemment."
 
@@ -1875,30 +1925,15 @@ msgstr "Remarque OAuth"
 msgid "OAuth state tokens require a strong VOD_SECRET_KEY."
 msgstr "Les jetons d'état OAuth nécessitent une VOD_SECRET_KEY forte."
 
+msgid "OBS overlays"
+msgstr "Overlays OBS"
+
 msgid "OFF (normal operation)"
 msgstr "DÉSACTIVÉ (fonctionnement normal)"
 
-msgid "OFFLINE"
-msgstr "HORS LIGNE"
-
 msgid "OK"
 msgstr "OK"
 
-msgid "ONLINE"
-msgstr "EN LIGNE"
-
-msgid "OPERATING MODE:"
-msgstr "MODE DE FONCTIONNEMENT :"
-
-msgid "OPTION A: UPLOAD IMAGE FILE"
-msgstr "OPTION A : ENVOYER UN FICHIER IMAGE"
-
-msgid "OPTION A: UPLOAD PROFILE PICTURE"
-msgstr "OPTION A : ENVOYER UNE PHOTO DE PROFIL"
-
-msgid "OPTION B: USE IMAGE URL"
-msgstr "OPTION B : UTILISER UNE URL D'IMAGE"
-
 msgid "OR"
 msgstr "OU"
 
@@ -1924,6 +1959,9 @@ msgstr "Plus anciens d'abord"
 msgid "OneDrive / Microsoft 365 via Microsoft Graph with OAuth 2.0."
 msgstr "OneDrive / Microsoft 365 via Microsoft Graph avec OAuth 2.0."
 
+msgid "Online"
+msgstr "En ligne"
+
 msgid "Only after a successful upload and optional cloud verification."
 msgstr "Uniquement après un envoi réussi et une vérification cloud facultative."
 
@@ -1945,6 +1983,22 @@ msgstr "Ouvrir le clip"
 msgid "Open editor"
 msgstr "Ouvrir l'éditeur"
 
+#, python-format
+msgid "Open streamer %(name)s"
+msgstr "Ouvrir le streamer %(name)s"
+
+msgid "Operating mode"
+msgstr "Mode de fonctionnement :"
+
+msgid "Option A: upload image file"
+msgstr "Option a : envoyer un fichier image"
+
+msgid "Option A: upload profile picture"
+msgstr "Option a : envoyer une photo de profil"
+
+msgid "Option B: use image URL"
+msgstr "Option b : utiliser une url d'image"
+
 msgid "Option sections"
 msgstr "Sections d'options"
 
@@ -2055,6 +2109,9 @@ msgstr "Lecture indisponible"
 msgid "Player error — reconnecting…"
 msgstr "Erreur du lecteur — reconnexion…"
 
+msgid "Please confirm"
+msgstr "Veuillez confirmer"
+
 msgid "Please enter a name for the storage provider."
 msgstr "Veuillez saisir un nom pour le fournisseur de stockage."
 
@@ -2105,10 +2162,10 @@ msgid "Private video and stream archive console."
 msgstr "Console privée d'archives vidéo et de streams."
 
 msgid "Processing video (this may take a while)..."
-msgstr "Traitement de la vidéo (cela peut prendre un moment)..."
+msgstr "Traitement de la vidéo (cela peut prendre un moment)…"
 
 msgid "Processing video..."
-msgstr "Traitement de la vidéo..."
+msgstr "Traitement de la vidéo…"
 
 msgid "Profile picture reset to default."
 msgstr "Photo de profil réinitialisée par défaut."
@@ -2153,8 +2210,8 @@ msgstr "Fournisseurs"
 msgid "Public link created:"
 msgstr "Lien public créé :"
 
-msgid "Purpose of this user group..."
-msgstr "Objectif de ce groupe d'utilisateurs..."
+msgid "Purpose of this user group…"
+msgstr "Objectif de ce groupe d'utilisateurs…"
 
 msgid "Quality"
 msgstr "Qualité"
@@ -2168,22 +2225,12 @@ msgstr "File d'attente illisible"
 msgid "Quiet"
 msgstr "Discret"
 
-msgid "RECORDING"
-msgstr "ENREGISTREMENT"
-
-msgid "RECORDING ACTIVE"
-msgstr "ENREGISTREMENT ACTIF"
-
 msgid "Ready"
 msgstr "Prêt"
 
 msgid "Real-time stream error — reconnecting…"
 msgstr "Erreur du stream en temps réel — reconnexion…"
 
-#, python-format
-msgid "Really delete backup %(name)s?"
-msgstr "Vraiment supprimer la sauvegarde %(name)s ?"
-
 msgid "Really delete file?"
 msgstr "Vraiment supprimer le fichier ?"
 
@@ -2193,28 +2240,15 @@ msgstr "Vraiment supprimer le fichier cloud ? Une copie locale est conservée."
 msgid "Really delete the local file? The cloud copy is kept."
 msgstr "Vraiment supprimer le fichier local ? La copie cloud est conservée."
 
-msgid "Really delete?"
-msgstr "Vraiment supprimer ?"
-
-#, python-format
-msgid "Really remove channel %(name)s?"
-msgstr "Vraiment retirer la chaîne %(name)s ?"
-
 msgid "Really remove the provider? The cloud files are kept."
 msgstr "Vraiment supprimer le fournisseur ? Les fichiers cloud sont conservés."
 
-msgid "Really rename the file?"
-msgstr "Vraiment renommer le fichier ?"
-
 msgid "Really reset the custom banner and switch to the default?"
 msgstr "Vraiment réinitialiser la bannière personnalisée et revenir à celle par défaut ?"
 
 msgid "Really reset the custom profile picture and switch to the default?"
 msgstr "Vraiment réinitialiser la photo de profil personnalisée et revenir à celle par défaut ?"
 
-msgid "Really revoke this share?"
-msgstr "Vraiment révoquer ce partage ?"
-
 msgid "Really stop the recording?"
 msgstr "Vraiment arrêter l'enregistrement ?"
 
@@ -2224,6 +2258,9 @@ msgstr "Erreurs récentes des tâches"
 msgid "Recently watched"
 msgstr "Regardés récemment"
 
+msgid "Recommended browser-source URLs. Replace TOKEN with the value of TTS_OVERLAY_TOKEN or ALERT_OVERLAY_TOKEN. The part after # stays in OBS and reaches the server only as a request header, never in a log line."
+msgstr "URL recommandées pour la source navigateur. Remplacez TOKEN par la valeur de TTS_OVERLAY_TOKEN ou ALERT_OVERLAY_TOKEN. La partie après # reste dans OBS et n’atteint le serveur que comme en-tête de requête, jamais dans un journal."
+
 msgid "Recommended. Prevents data loss from incomplete uploads."
 msgstr "Recommandé. Évite la perte de données en cas d'envoi incomplet."
 
@@ -2242,6 +2279,9 @@ msgstr "Enregistrement"
 msgid "Recording + live stream & Discord notification"
 msgstr "Enregistrement + stream en direct et notification Discord"
 
+msgid "Recording active"
+msgstr "Enregistrement actif"
+
 msgid "Recording disabled (live & Discord only)"
 msgstr "Enregistrement désactivé (direct et Discord uniquement)"
 
@@ -2291,8 +2331,8 @@ msgid "Remove channel"
 msgstr "Retirer la chaîne"
 
 #, python-format
-msgid "Remove channel %(name)s?"
-msgstr "Retirer la chaîne %(name)s ?"
+msgid "Remove channel %(name)s? Monitoring stops; existing recordings stay in the archive."
+msgstr "Retirer la chaîne %(name)s ? La surveillance s’arrête ; les enregistrements existants restent dans l’archive."
 
 msgid "Remove only the database entry?"
 msgstr "Supprimer uniquement l'entrée de la base de données ?"
@@ -2307,6 +2347,9 @@ msgstr "Tâche de remux démarrée. La progression s'affiche dans le panneau d'a
 msgid "Rename file"
 msgstr "Renommer le fichier"
 
+msgid "Rename the file? Existing links and shares to the old file name stop working."
+msgstr "Renommer le fichier ? Les liens et partages existants vers l’ancien nom ne fonctionneront plus."
+
 msgid "Renamed."
 msgstr "Renommé."
 
@@ -2332,6 +2375,9 @@ msgstr "Échec du redémarrage."
 msgid "Restart services"
 msgstr "Redémarrer les services"
 
+msgid "Restart the recorder and chat logger now? Running recordings are interrupted for a few seconds."
+msgstr "Redémarrer maintenant l’enregistreur et l’enregistreur de chat ? Les enregistrements en cours sont interrompus quelques secondes."
+
 msgid "Restore"
 msgstr "Restaurer"
 
@@ -2348,6 +2394,9 @@ msgstr "Reprendre la lecture"
 msgid "Revoke"
 msgstr "Révoquer"
 
+msgid "Revoke this share? The link stops working immediately."
+msgstr "Révoquer ce partage ? Le lien cesse de fonctionner immédiatement."
+
 #, python-format
 msgid "Role access '%(slug)s' added."
 msgstr "Accès de rôle « %(slug)s » ajouté."
@@ -2380,9 +2429,6 @@ msgstr "En cours…"
 msgid "S3-compatible"
 msgstr "Compatible S3"
 
-msgid "START"
-msgstr "DÉBUT"
-
 msgid "Safety migration:"
 msgstr "Migration de sécurité :"
 
@@ -2436,10 +2482,7 @@ msgid "Saving transcript failed: %(error)s"
 msgstr "Échec de l'enregistrement de la transcription : %(error)s"
 
 msgid "Saving transcript..."
-msgstr "Enregistrement de la transcription..."
-
-msgid "Saving..."
-msgstr "Enregistrement..."
+msgstr "Enregistrement de la transcription…"
 
 msgid "Saving…"
 msgstr "Enregistrement…"
@@ -2447,8 +2490,8 @@ msgstr "Enregistrement…"
 msgid "Search"
 msgstr "Rechercher"
 
-msgid "Search VODs, streamers or games..."
-msgstr "Rechercher des VOD, streamers ou jeux..."
+msgid "Search VODs, streamers or games…"
+msgstr "Rechercher des VOD, streamers ou jeux…"
 
 msgid "Search category"
 msgstr "Rechercher une catégorie"
@@ -2459,8 +2502,11 @@ msgstr "Rechercher une catégorie / un jeu…"
 msgid "Search failed."
 msgstr "La recherche a échoué."
 
-msgid "Search recordings (title, date, game)..."
-msgstr "Rechercher dans les enregistrements (titre, date, jeu)..."
+msgid "Search recordings"
+msgstr "Rechercher des enregistrements"
+
+msgid "Search recordings (title, date, game)…"
+msgstr "Rechercher dans les enregistrements (titre, date, jeu)…"
 
 msgid "Search results"
 msgstr "Résultats de recherche"
@@ -2471,21 +2517,21 @@ msgstr "Rechercher un streamer ou une chaîne…"
 msgid "Search streamers"
 msgstr "Rechercher des streamers"
 
-msgid "Search term (e.g. player name, chat message, date)..."
-msgstr "Terme de recherche (ex. nom de joueur, message de chat, date)..."
+msgid "Search term (e.g. player name, chat message, date)…"
+msgstr "Terme de recherche (ex. nom de joueur, message de chat, date)…"
 
-msgid "Search user, email or group..."
-msgstr "Rechercher un utilisateur, un e-mail ou un groupe..."
+msgid "Search user, email or group…"
+msgstr "Rechercher un utilisateur, un e-mail ou un groupe…"
 
-msgid "Search..."
-msgstr "Rechercher..."
-
-msgid "Searching for stream..."
-msgstr "Recherche du stream..."
+msgid "Searching for stream…"
+msgstr "Recherche du stream…"
 
 msgid "Searching…"
 msgstr "Recherche…"
 
+msgid "Search…"
+msgstr "Rechercher…"
+
 msgid "Seconds after trigger"
 msgstr "Secondes après le déclenchement"
 
@@ -2575,9 +2621,21 @@ msgstr "Affiché dans la navigation, la barre latérale et sur les cartes des st
 msgid "Sign in"
 msgstr "Se connecter"
 
+msgid "Sign out on every device? Every session of this account ends, including this one."
+msgstr "Se déconnecter sur tous les appareils ? Toutes les sessions de ce compte prennent fin, y compris celle-ci."
+
 msgid "Size"
 msgstr "Taille"
 
+msgid "Skip to content"
+msgstr "Aller au contenu"
+
+msgid "Sort"
+msgstr "Trier"
+
+msgid "Sort order"
+msgstr "Ordre de tri"
+
 msgid "Sound"
 msgstr "Son"
 
@@ -2619,7 +2677,7 @@ msgid "Starting"
 msgstr "Démarrage"
 
 msgid "Starting download..."
-msgstr "Démarrage du téléchargement..."
+msgstr "Démarrage du téléchargement…"
 
 msgid "Status"
 msgstr "Statut"
@@ -2658,6 +2716,9 @@ msgstr "Fournisseur de stockage introuvable."
 msgid "Storage providers"
 msgstr "Fournisseurs de stockage"
 
+msgid "Storage usage"
+msgstr "Utilisation du stockage"
+
 #, python-format
 msgid "Storage: <strong>%(pct)s%%</strong>"
 msgstr "Stockage : <strong>%(pct)s %%</strong>"
@@ -2719,6 +2780,9 @@ msgstr "Streamers, VOD et historiques de chat"
 msgid "Subfolder"
 msgstr "Sous-dossier"
 
+msgid "Subs"
+msgstr "Subs"
+
 msgid "Success"
 msgstr "Succès"
 
@@ -2806,6 +2870,9 @@ msgstr "Version des conditions obsolète — rechargez la page et acceptez à no
 msgid "Test"
 msgstr "Tester"
 
+msgid "Text-to-speech overlay"
+msgstr "Overlay de synthèse vocale"
+
 msgid "Thanks for your understanding. Authorized users can sign in via the login page."
 msgstr "Merci de votre compréhension. Les utilisateurs autorisés peuvent se connecter via la page de connexion."
 
@@ -2918,8 +2985,11 @@ msgstr "Aujourd'hui, %(time)s"
 msgid "Too many VODs are playing right now. Live is not affected. Try again in a few minutes — a slot frees up as soon as someone closes the player."
 msgstr "Trop de VOD sont en cours de lecture. Le direct n'est pas concerné. Réessayez dans quelques minutes — une place se libère dès que quelqu'un ferme le lecteur."
 
-msgid "Too many attempts. IP temporarily blocked. Please try again later."
-msgstr "Trop de tentatives. IP temporairement bloquée. Veuillez réessayer plus tard."
+#, python-format
+msgid "Too many login attempts. Please try again in %(num)d minute."
+msgid_plural "Too many login attempts. Please try again in %(num)d minutes."
+msgstr[0] "Trop de tentatives de connexion. Réessayez dans %(num)d minute."
+msgstr[1] "Trop de tentatives de connexion. Réessayez dans %(num)d minutes."
 
 msgid "Top streams are currently unavailable. Use monitored channels or the search."
 msgstr "Les meilleurs streams sont actuellement indisponibles. Utilisez les chaînes surveillées ou la recherche."
@@ -2972,6 +3042,9 @@ msgstr "Transcription terminée"
 msgid "Transcript missing despite finished status"
 msgstr "Transcription manquante malgré le statut terminé"
 
+msgid "Transcript progress"
+msgstr "Progression de la transcription"
+
 msgid "Transcription cancelled"
 msgstr "Transcription annulée"
 
@@ -2995,7 +3068,7 @@ msgid "Transcription queued in the worker. The result appears on the next page l
 msgstr "Transcription mise en file d'attente du worker. Le résultat apparaît au prochain chargement de la page une fois terminé."
 
 msgid "Transcription running..."
-msgstr "Transcription en cours..."
+msgstr "Transcription en cours…"
 
 msgid "Transcription timed out"
 msgstr "Délai de transcription dépassé"
@@ -3012,8 +3085,11 @@ msgstr "Twitch / par défaut"
 msgid "Twitch badge library synchronized."
 msgstr "Bibliothèque de badges Twitch synchronisée."
 
-msgid "Twitch channel name..."
-msgstr "Nom de la chaîne Twitch..."
+msgid "Twitch channel name"
+msgstr "Nom de la chaîne Twitch"
+
+msgid "Twitch channel name…"
+msgstr "Nom de la chaîne Twitch…"
 
 msgid "Twitch live chat"
 msgstr "Chat en direct Twitch"
@@ -3021,8 +3097,8 @@ msgstr "Chat en direct Twitch"
 msgid "Twitch live stream"
 msgstr "Stream en direct Twitch"
 
-msgid "Twitch name (e.g. shroud) or YouTube URL / @handle..."
-msgstr "Nom Twitch (ex. shroud) ou URL YouTube / @identifiant..."
+msgid "Twitch name (e.g. shroud) or YouTube URL / @handle…"
+msgstr "Nom Twitch (ex. shroud) ou URL YouTube / @identifiant…"
 
 msgid "Twitch or YouTube supported"
 msgstr "Twitch ou YouTube pris en charge"
@@ -3240,12 +3316,6 @@ msgstr "Visible par :"
 msgid "Volume"
 msgstr "Volume"
 
-msgid "WARNING: Do you want to permanently delete this streamer and all recordings?"
-msgstr "ATTENTION : voulez-vous supprimer définitivement ce streamer et tous ses enregistrements ?"
-
-msgid "WATCH LIVE"
-msgstr "REGARDER EN DIRECT"
-
 msgid "Waiting for server stream…"
 msgstr "En attente du stream du serveur…"
 
@@ -3258,6 +3328,9 @@ msgstr "Regarder"
 msgid "Watch latest video"
 msgstr "Regarder la dernière vidéo"
 
+msgid "Watch live"
+msgstr "Regarder en direct"
+
 msgid "Watch now"
 msgstr "Regarder maintenant"
 
@@ -3314,8 +3387,8 @@ msgstr "Vous ne pouvez pas vous déplacer dans un groupe sans autorisation de ge
 msgid "You have accepted version %(version)s."
 msgstr "Vous avez accepté la version %(version)s."
 
-msgid "Your IP has been temporarily blocked. Please try again later."
-msgstr "Votre IP a été temporairement bloquée. Veuillez réessayer plus tard."
+msgid "Your IP has been blocked. Please contact the administrator."
+msgstr "Votre IP a été bloquée. Veuillez contacter l’administrateur."
 
 msgid "Your browser does not support the video tag."
 msgstr "Votre navigateur ne prend pas en charge la balise vidéo."
@@ -3359,12 +3432,12 @@ msgstr "ex. Archives VIP"
 msgid "e.g. alice, bob"
 msgstr "ex. alice, bob"
 
-msgid "e.g. john_doe"
-msgstr "ex. jean_dupont"
-
 msgid "e.g. channel_name"
 msgstr "ex. channel_name"
 
+msgid "e.g. john_doe"
+msgstr "ex. jean_dupont"
+
 #, python-format
 msgid "effective from %(date)s"
 msgstr "en vigueur à partir du %(date)s"
diff --git a/WEBUI/translations/it/LC_MESSAGES/messages.mo b/WEBUI/translations/it/LC_MESSAGES/messages.mo
index 8cabbb7..3d9e29e 100644
Binary files a/WEBUI/translations/it/LC_MESSAGES/messages.mo and b/WEBUI/translations/it/LC_MESSAGES/messages.mo differ
diff --git a/WEBUI/translations/it/LC_MESSAGES/messages.po b/WEBUI/translations/it/LC_MESSAGES/messages.po
index 535abf8..b13127f 100644
--- a/WEBUI/translations/it/LC_MESSAGES/messages.po
+++ b/WEBUI/translations/it/LC_MESSAGES/messages.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: StreamVault VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2026-11-03 19:28+0100\n"
+"POT-Creation-Date: 2026-11-12 15:41+0100\n"
 "PO-Revision-Date: 2026-11-03 19:31+0100\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language: it\n"
@@ -187,9 +187,6 @@ msgstr "È già in corso un ripristino."
 msgid "A saved value is kept if the field is left empty."
 msgstr "Se il campo resta vuoto, il valore salvato viene mantenuto."
 
-msgid "ACTIVE (locked)"
-msgstr "ATTIVO (bloccato)"
-
 msgid "AWS S3, Cloudflare R2, Backblaze B2, Wasabi, MinIO, Hetzner or any S3-compatible endpoint."
 msgstr "AWS S3, Cloudflare R2, Backblaze B2, Wasabi, MinIO, Hetzner o qualsiasi endpoint compatibile con S3."
 
@@ -202,6 +199,9 @@ msgstr "Accetta i termini"
 msgid "Account active (access allowed)"
 msgstr "Account attivo (accesso consentito)"
 
+msgid "Accounts"
+msgstr "Account"
+
 msgid "Action"
 msgstr "Azione"
 
@@ -214,6 +214,9 @@ msgstr "Attiva subito l'account"
 msgid "Active"
 msgstr "Attivo"
 
+msgid "Active (locked)"
+msgstr "ATTIVO (bloccato)"
+
 msgid "Active shares"
 msgstr "Condivisioni attive"
 
@@ -226,6 +229,9 @@ msgstr "Attivo: i nuovi stream vengono sbloccati automaticamente. Qui sotto puoi
 msgid "Actively monitored by the recorder core"
 msgstr "Monitorato attivamente dal core del recorder"
 
+msgid "Add a channel to record"
+msgstr "Aggiungi un canale da registrare"
+
 msgid "Add channel"
 msgstr "Aggiungi canale"
 
@@ -235,6 +241,9 @@ msgstr "Aggiungi nuovo canale"
 msgid "Add provider"
 msgstr "Aggiungi provider"
 
+msgid "Add the first channel above"
+msgstr "Aggiungi il primo canale qui sopra"
+
 msgid "Addressing"
 msgstr "Indirizzamento"
 
@@ -247,6 +256,9 @@ msgstr "Controlli admin"
 msgid "Admins only"
 msgstr "Solo admin"
 
+msgid "Alert sound overlay"
+msgstr "Overlay suoni di avviso"
+
 msgid "All"
 msgstr "Tutti"
 
@@ -486,27 +498,27 @@ msgstr "Il buffer è ancora breve: la finestra della clip cresce insieme a esso.
 msgid "Buffer:"
 msgstr "Buffer:"
 
-msgid "Buffering..."
-msgstr "Buffering..."
+msgid "Buffering…"
+msgstr "Buffering…"
 
 msgid "By default nothing is uploaded or deleted automatically. Enable these features deliberately."
 msgstr "Per impostazione predefinita nulla viene caricato o eliminato automaticamente. Attiva queste funzioni consapevolmente."
 
-msgid "CHANGE"
-msgstr "MODIFICA"
-
-msgid "CHANNEL MANAGEMENT (ADMIN)"
-msgstr "GESTIONE CANALI (ADMIN)"
-
 msgid "Cancel"
 msgstr "Annulla"
 
+msgid "Category"
+msgstr "Categoria"
+
 msgid "Category search failed."
 msgstr "Ricerca categorie non riuscita."
 
 msgid "Category search is currently unavailable."
 msgstr "La ricerca categorie non è al momento disponibile."
 
+msgid "Change"
+msgstr "Modifica"
+
 msgid "Change banner"
 msgstr "Cambia banner"
 
@@ -522,6 +534,9 @@ msgstr "Azioni canale"
 msgid "Channel archive & recording metrics"
 msgstr "Archivio canali e metriche di registrazione"
 
+msgid "Channel management (admin)"
+msgstr "Gestione canali (admin)"
+
 msgid "Channel not found."
 msgstr "Canale non trovato."
 
@@ -578,12 +593,12 @@ msgstr "Pulizia accodata (attività n. %(task)s)."
 msgid "Clear filters"
 msgstr "Cancella filtri"
 
-msgid "Click to change password"
-msgstr "Clicca per cambiare la password"
-
 msgid "Clip"
 msgstr "Clip"
 
+msgid "Clip Editor"
+msgstr "Editor clip"
+
 msgid "Clip URL is missing on this page."
 msgstr "URL della clip mancante in questa pagina."
 
@@ -668,6 +683,9 @@ msgstr "Configura i canali di registrazione e gestisci le assegnazioni dell'arch
 msgid "Configured streamers & sources"
 msgstr "Streamer e sorgenti configurati"
 
+msgid "Confirm"
+msgstr "Conferma"
+
 msgid "Connect account"
 msgstr "Collega account"
 
@@ -689,6 +707,9 @@ msgstr "Connessione OK"
 msgid "Connection failed"
 msgstr "Connessione non riuscita"
 
+msgid "Connection failed. Check your network and try again."
+msgstr "Connessione non riuscita. Controlla la rete e riprova."
+
 msgid "Connection lost — reconnecting…"
 msgstr "Connessione persa — riconnessione…"
 
@@ -705,6 +726,9 @@ msgstr "Pannello di controllo"
 msgid "Control the global maintenance mode or lock individual platform areas."
 msgstr "Gestisci la modalità di manutenzione globale o blocca singole aree della piattaforma."
 
+msgid "Copied"
+msgstr "Copiato"
+
 msgid "Copy"
 msgstr "Copia"
 
@@ -821,6 +845,14 @@ msgstr "Destinazione predefinita"
 msgid "Delete"
 msgstr "Elimina"
 
+#, python-format
+msgid "Delete %(name)s? The file is removed from the archive and cannot be restored."
+msgstr "Eliminare %(name)s? Il file viene rimosso dall’archivio e non può essere ripristinato."
+
+#, python-format
+msgid "Delete backup %(name)s? This cannot be undone."
+msgstr "Eliminare il backup %(name)s? L’operazione non è reversibile."
+
 msgid "Delete folder"
 msgstr "Elimina cartella"
 
@@ -839,6 +871,12 @@ msgstr "Elimina in locale"
 msgid "Delete permanently"
 msgstr "Elimina definitivamente"
 
+msgid "Delete this streamer folder and all recordings? This cannot be undone."
+msgstr "Eliminare la cartella di questo streamer e tutte le registrazioni? L’operazione non è reversibile."
+
+msgid "Delete this video? The file is removed from the archive and cannot be restored."
+msgstr "Eliminare questo video? Il file viene rimosso dall’archivio e non può essere ripristinato."
+
 msgid "Delete user"
 msgstr "Elimina utente"
 
@@ -919,8 +957,8 @@ msgstr "Scarica TXT"
 msgid "Download all"
 msgstr "Scarica tutto"
 
-msgid "Download all VODs?"
-msgstr "Scaricare tutti i VOD?"
+msgid "Download all VODs of this streamer as one archive? This can take a while for large channels."
+msgstr "Scaricare tutti i VOD di questo streamer in un unico archivio? Per i canali grandi può richiedere un po’ di tempo."
 
 msgid "Download archive & VODs"
 msgstr "Scarica archivio e VOD"
@@ -939,7 +977,7 @@ msgstr "Download di tutti i VOD avviato in background."
 
 #, python-format
 msgid "Downloading... %(percent)s"
-msgstr "Download in corso... %(percent)s"
+msgstr "Download in corso… %(percent)s"
 
 #, python-format
 msgid "Drive quota active — do not press Play again (it extends the block). Seek back into the already loaded part, or wait about %(minutes)s min."
@@ -990,6 +1028,9 @@ msgstr "Indirizzo email"
 msgid "Email address (optional)"
 msgstr "Indirizzo email (facoltativo)"
 
+msgid "Emotes"
+msgstr "Emote"
+
 msgid "Empty = AWS. For R2, B2, Wasabi, MinIO etc. enter the S3 endpoint."
 msgstr "Vuoto = AWS. Per R2, B2, Wasabi, MinIO ecc. inserisci l'endpoint S3."
 
@@ -1005,6 +1046,9 @@ msgstr "Attiva subito"
 msgid "Enable maintenance mode"
 msgstr "Attiva modalità manutenzione"
 
+msgid "Enable maintenance mode? Everyone except allowlisted users sees the maintenance page until you end it."
+msgstr "Attivare la modalità manutenzione? Tutti tranne gli utenti autorizzati vedranno la pagina di manutenzione finché non la disattivi."
+
 msgid "Enable recording"
 msgstr "Attiva registrazione"
 
@@ -1102,6 +1146,9 @@ msgstr "Errore:"
 msgid "Error: %(error)s"
 msgstr "Errore: %(error)s"
 
+msgid "Everywhere"
+msgstr "Ovunque"
+
 msgid "Existing members of this group are automatically assigned to the default group <strong>Viewer</strong>."
 msgstr "I membri esistenti di questo gruppo vengono assegnati automaticamente al gruppo predefinito <strong>Viewer</strong>."
 
@@ -1118,10 +1165,7 @@ msgid "Exported by StreamVault"
 msgstr "Esportato da StreamVault"
 
 msgid "Extracting audio..."
-msgstr "Estrazione audio..."
-
-msgid "FEATURED VOD"
-msgstr "VOD IN EVIDENZA"
+msgstr "Estrazione audio…"
 
 msgid "Failed"
 msgstr "Non riuscito"
@@ -1132,6 +1176,9 @@ msgstr "Veloce"
 msgid "Feature permissions"
 msgstr "Permessi funzionalità"
 
+msgid "Featured VOD"
+msgstr "Vod in evidenza"
+
 msgid "Featured highlight"
 msgstr "Highlight in evidenza"
 
@@ -1162,8 +1209,11 @@ msgstr "Il file è stato caricato."
 msgid "Filter"
 msgstr "Filtra"
 
-msgid "Filter chat..."
-msgstr "Filtra chat..."
+msgid "Filter chat"
+msgstr "Filtra chat"
+
+msgid "Filter chat…"
+msgstr "Filtra chat…"
 
 msgid "First"
 msgstr "Prima"
@@ -1441,19 +1491,6 @@ msgstr "Luglio"
 msgid "June"
 msgstr "Giugno"
 
-msgid "LIVE"
-msgstr "LIVE"
-
-#, python-format
-msgid "LIVE %(name)s (without Twitch login)"
-msgstr "LIVE %(name)s (senza login Twitch)"
-
-msgid "LIVE & DISCORD ONLY"
-msgstr "SOLO LIVE E DISCORD"
-
-msgid "LIVE NOW"
-msgstr "IN DIRETTA ORA"
-
 msgid "Language"
 msgstr "Lingua"
 
@@ -1502,11 +1539,14 @@ msgstr "Link copiato:"
 msgid "Live"
 msgstr "Live"
 
+msgid "Live & Discord only"
+msgstr "Solo live e discord"
+
 msgid "Live & Discord only:"
 msgstr "Solo live e Discord:"
 
 msgid "Live (recovering...)"
-msgstr "Live (ripristino...)"
+msgstr "Live (ripristino…)"
 
 msgid "Live channels"
 msgstr "Canali live"
@@ -1541,8 +1581,8 @@ msgstr "Solo live stream e avvisi Discord, nessuna registrazione su disco"
 msgid "Live stream highlight"
 msgstr "Highlight della live"
 
-msgid "Live stream is currently unavailable. Searching for stream..."
-msgstr "La live stream non è al momento disponibile. Ricerca dello stream..."
+msgid "Live stream is currently unavailable. Searching for stream…"
+msgstr "La live stream non è al momento disponibile. Ricerca dello stream…"
 
 msgid "Live stream not available."
 msgstr "Live stream non disponibile."
@@ -1559,6 +1599,10 @@ msgstr "Guarda live"
 msgid "Live-only"
 msgstr "Solo live"
 
+#, python-format
+msgid "Live: %(name)s (without Twitch login)"
+msgstr "LIVE %(name)s (senza login Twitch)"
+
 msgid "Load"
 msgstr "Carico"
 
@@ -1569,7 +1613,7 @@ msgid "Loading chat…"
 msgstr "Caricamento chat…"
 
 msgid "Loading model..."
-msgstr "Caricamento modello..."
+msgstr "Caricamento modello…"
 
 msgid "Loading streams…"
 msgstr "Caricamento stream…"
@@ -1599,6 +1643,9 @@ msgstr "Blocca <strong>versione mobile</strong>"
 msgid "Log out"
 msgstr "Esci"
 
+msgid "Log out everywhere"
+msgstr "Esci ovunque"
+
 msgid "Login"
 msgstr "Login"
 
@@ -1611,6 +1658,9 @@ msgstr "Login non riuscito."
 msgid "MP4 check not possible"
 msgstr "Verifica MP4 non possibile"
 
+msgid "Main navigation"
+msgstr "Navigazione principale"
+
 msgid "Maintenance"
 msgstr "Manutenzione"
 
@@ -1676,6 +1726,9 @@ msgstr "Messaggio"
 msgid "Mobile live is temporarily disabled. Please use the desktop version or the installed app."
 msgstr "La live su mobile è temporaneamente disattivata. Usa la versione desktop o l'app installata."
 
+msgid "Mods"
+msgstr "Mod"
+
 msgid "Monitored"
 msgstr "Monitorato"
 
@@ -1697,9 +1750,6 @@ msgstr "Errore di rete"
 msgid "Network error while loading streams."
 msgstr "Errore di rete durante il caricamento degli stream."
 
-msgid "Network error:"
-msgstr "Errore di rete:"
-
 msgid "Network is back — reconnecting…"
 msgstr "Rete di nuovo disponibile — riconnessione…"
 
@@ -1718,8 +1768,8 @@ msgstr "Nuova password (lascia vuoto per non modificarla)"
 msgid "New password * (min. 8 characters)"
 msgstr "Nuova password * (min. 8 caratteri)"
 
-msgid "New password..."
-msgstr "Nuova password..."
+msgid "New password…"
+msgstr "Nuova password…"
 
 msgid "New user"
 msgstr "Nuovo utente"
@@ -1742,8 +1792,8 @@ msgstr "Nextcloud, ownCloud, Hetzner Storage Box o qualsiasi server WebDAV con p
 msgid "No (self-signed only)"
 msgstr "No (solo self-signed)"
 
-msgid "No VODs available in the archive"
-msgstr "Nessun VOD disponibile nell'archivio"
+msgid "No VODs yet. Recordings appear here automatically as soon as a monitored channel goes live."
+msgstr "Ancora nessun VOD. Le registrazioni compaiono qui automaticamente appena un canale monitorato va in diretta."
 
 msgid "No acceptances yet."
 msgstr "Ancora nessuna accettazione."
@@ -1778,6 +1828,9 @@ msgstr "Nessun backup disponibile."
 msgid "No badges received from Twitch."
 msgstr "Nessun badge ricevuto da Twitch."
 
+msgid "No channels are monitored yet."
+msgstr "Nessun canale monitorato."
+
 msgid "No chat"
 msgstr "Nessuna chat"
 
@@ -1818,9 +1871,6 @@ msgstr "Nessun canale Twitch monitorato."
 msgid "No monitored Twitch channels. Add streamers under Streamers."
 msgstr "Nessun canale Twitch monitorato. Aggiungi streamer in Streamer."
 
-msgid "No monitored channels configured."
-msgstr "Nessun canale monitorato configurato."
-
 msgid "No recently watched streams yet."
 msgstr "Ancora nessuno stream guardato di recente."
 
@@ -1875,30 +1925,15 @@ msgstr "Nota su OAuth"
 msgid "OAuth state tokens require a strong VOD_SECRET_KEY."
 msgstr "I token di stato OAuth richiedono una VOD_SECRET_KEY robusta."
 
+msgid "OBS overlays"
+msgstr "Overlay OBS"
+
 msgid "OFF (normal operation)"
 msgstr "OFF (funzionamento normale)"
 
-msgid "OFFLINE"
-msgstr "OFFLINE"
-
 msgid "OK"
 msgstr "OK"
 
-msgid "ONLINE"
-msgstr "ONLINE"
-
-msgid "OPERATING MODE:"
-msgstr "MODALITÀ OPERATIVA:"
-
-msgid "OPTION A: UPLOAD IMAGE FILE"
-msgstr "OPZIONE A: CARICA FILE IMMAGINE"
-
-msgid "OPTION A: UPLOAD PROFILE PICTURE"
-msgstr "OPZIONE A: CARICA IMMAGINE DEL PROFILO"
-
-msgid "OPTION B: USE IMAGE URL"
-msgstr "OPZIONE B: USA URL IMMAGINE"
-
 msgid "OR"
 msgstr "OPPURE"
 
@@ -1924,6 +1959,9 @@ msgstr "Prima i meno recenti"
 msgid "OneDrive / Microsoft 365 via Microsoft Graph with OAuth 2.0."
 msgstr "OneDrive / Microsoft 365 tramite Microsoft Graph con OAuth 2.0."
 
+msgid "Online"
+msgstr "Online"
+
 msgid "Only after a successful upload and optional cloud verification."
 msgstr "Solo dopo un caricamento riuscito e l'eventuale verifica nel cloud."
 
@@ -1945,6 +1983,22 @@ msgstr "Apri clip"
 msgid "Open editor"
 msgstr "Apri editor"
 
+#, python-format
+msgid "Open streamer %(name)s"
+msgstr "Apri lo streamer %(name)s"
+
+msgid "Operating mode"
+msgstr "Modalità operativa:"
+
+msgid "Option A: upload image file"
+msgstr "Opzione a: carica file immagine"
+
+msgid "Option A: upload profile picture"
+msgstr "Opzione a: carica immagine del profilo"
+
+msgid "Option B: use image URL"
+msgstr "Opzione b: usa url immagine"
+
 msgid "Option sections"
 msgstr "Sezioni delle opzioni"
 
@@ -2055,6 +2109,9 @@ msgstr "Riproduzione non disponibile"
 msgid "Player error — reconnecting…"
 msgstr "Errore del player — riconnessione…"
 
+msgid "Please confirm"
+msgstr "Conferma, per favore"
+
 msgid "Please enter a name for the storage provider."
 msgstr "Inserisci un nome per il provider di archiviazione."
 
@@ -2105,10 +2162,10 @@ msgid "Private video and stream archive console."
 msgstr "Console privata per l'archivio di video e stream."
 
 msgid "Processing video (this may take a while)..."
-msgstr "Elaborazione video (può richiedere tempo)..."
+msgstr "Elaborazione video (può richiedere tempo)…"
 
 msgid "Processing video..."
-msgstr "Elaborazione video..."
+msgstr "Elaborazione video…"
 
 msgid "Profile picture reset to default."
 msgstr "Immagine del profilo ripristinata al predefinito."
@@ -2153,8 +2210,8 @@ msgstr "Provider"
 msgid "Public link created:"
 msgstr "Link pubblico creato:"
 
-msgid "Purpose of this user group..."
-msgstr "Scopo di questo gruppo utenti..."
+msgid "Purpose of this user group…"
+msgstr "Scopo di questo gruppo utenti…"
 
 msgid "Quality"
 msgstr "Qualità"
@@ -2168,22 +2225,12 @@ msgstr "Coda non leggibile"
 msgid "Quiet"
 msgstr "Tranquilla"
 
-msgid "RECORDING"
-msgstr "REGISTRAZIONE"
-
-msgid "RECORDING ACTIVE"
-msgstr "REGISTRAZIONE ATTIVA"
-
 msgid "Ready"
 msgstr "Pronto"
 
 msgid "Real-time stream error — reconnecting…"
 msgstr "Errore dello stream in tempo reale — riconnessione…"
 
-#, python-format
-msgid "Really delete backup %(name)s?"
-msgstr "Eliminare davvero il backup %(name)s?"
-
 msgid "Really delete file?"
 msgstr "Eliminare davvero il file?"
 
@@ -2193,28 +2240,15 @@ msgstr "Eliminare davvero il file nel cloud? La copia locale viene mantenuta."
 msgid "Really delete the local file? The cloud copy is kept."
 msgstr "Eliminare davvero il file locale? La copia nel cloud viene mantenuta."
 
-msgid "Really delete?"
-msgstr "Eliminare davvero?"
-
-#, python-format
-msgid "Really remove channel %(name)s?"
-msgstr "Rimuovere davvero il canale %(name)s?"
-
 msgid "Really remove the provider? The cloud files are kept."
 msgstr "Rimuovere davvero il provider? I file nel cloud vengono mantenuti."
 
-msgid "Really rename the file?"
-msgstr "Rinominare davvero il file?"
-
 msgid "Really reset the custom banner and switch to the default?"
 msgstr "Ripristinare davvero il banner personalizzato e passare a quello predefinito?"
 
 msgid "Really reset the custom profile picture and switch to the default?"
 msgstr "Ripristinare davvero l'immagine del profilo personalizzata e passare a quella predefinita?"
 
-msgid "Really revoke this share?"
-msgstr "Revocare davvero questa condivisione?"
-
 msgid "Really stop the recording?"
 msgstr "Interrompere davvero la registrazione?"
 
@@ -2224,6 +2258,9 @@ msgstr "Errori recenti delle attività"
 msgid "Recently watched"
 msgstr "Guardati di recente"
 
+msgid "Recommended browser-source URLs. Replace TOKEN with the value of TTS_OVERLAY_TOKEN or ALERT_OVERLAY_TOKEN. The part after # stays in OBS and reaches the server only as a request header, never in a log line."
+msgstr "URL consigliati per la sorgente browser. Sostituisci TOKEN con il valore di TTS_OVERLAY_TOKEN o ALERT_OVERLAY_TOKEN. La parte dopo # resta in OBS e arriva al server solo come header della richiesta, mai in un log."
+
 msgid "Recommended. Prevents data loss from incomplete uploads."
 msgstr "Consigliato. Evita perdite di dati dovute a caricamenti incompleti."
 
@@ -2242,6 +2279,9 @@ msgstr "Registrazione"
 msgid "Recording + live stream & Discord notification"
 msgstr "Registrazione + live stream e notifica Discord"
 
+msgid "Recording active"
+msgstr "Registrazione attiva"
+
 msgid "Recording disabled (live & Discord only)"
 msgstr "Registrazione disattivata (solo live e Discord)"
 
@@ -2291,8 +2331,8 @@ msgid "Remove channel"
 msgstr "Rimuovi canale"
 
 #, python-format
-msgid "Remove channel %(name)s?"
-msgstr "Rimuovere il canale %(name)s?"
+msgid "Remove channel %(name)s? Monitoring stops; existing recordings stay in the archive."
+msgstr "Rimuovere il canale %(name)s? Il monitoraggio si interrompe; le registrazioni esistenti restano nell’archivio."
 
 msgid "Remove only the database entry?"
 msgstr "Rimuovere solo la voce nel database?"
@@ -2307,6 +2347,9 @@ msgstr "Job di remux avviato. L'avanzamento è visibile nel pannello admin."
 msgid "Rename file"
 msgstr "Rinomina file"
 
+msgid "Rename the file? Existing links and shares to the old file name stop working."
+msgstr "Rinominare il file? I link e le condivisioni esistenti al vecchio nome smetteranno di funzionare."
+
 msgid "Renamed."
 msgstr "Rinominato."
 
@@ -2332,6 +2375,9 @@ msgstr "Riavvio non riuscito."
 msgid "Restart services"
 msgstr "Riavvia servizi"
 
+msgid "Restart the recorder and chat logger now? Running recordings are interrupted for a few seconds."
+msgstr "Riavviare ora il registratore e il logger della chat? Le registrazioni in corso si interrompono per qualche secondo."
+
 msgid "Restore"
 msgstr "Ripristina"
 
@@ -2348,6 +2394,9 @@ msgstr "Riprendi la riproduzione"
 msgid "Revoke"
 msgstr "Revoca"
 
+msgid "Revoke this share? The link stops working immediately."
+msgstr "Revocare questa condivisione? Il link smette subito di funzionare."
+
 #, python-format
 msgid "Role access '%(slug)s' added."
 msgstr "Accesso per ruolo '%(slug)s' aggiunto."
@@ -2380,9 +2429,6 @@ msgstr "In esecuzione…"
 msgid "S3-compatible"
 msgstr "Compatibile con S3"
 
-msgid "START"
-msgstr "INIZIO"
-
 msgid "Safety migration:"
 msgstr "Migrazione di sicurezza:"
 
@@ -2436,10 +2482,7 @@ msgid "Saving transcript failed: %(error)s"
 msgstr "Salvataggio della trascrizione non riuscito: %(error)s"
 
 msgid "Saving transcript..."
-msgstr "Salvataggio trascrizione..."
-
-msgid "Saving..."
-msgstr "Salvataggio..."
+msgstr "Salvataggio trascrizione…"
 
 msgid "Saving…"
 msgstr "Salvataggio…"
@@ -2447,8 +2490,8 @@ msgstr "Salvataggio…"
 msgid "Search"
 msgstr "Cerca"
 
-msgid "Search VODs, streamers or games..."
-msgstr "Cerca VOD, streamer o giochi..."
+msgid "Search VODs, streamers or games…"
+msgstr "Cerca VOD, streamer o giochi…"
 
 msgid "Search category"
 msgstr "Cerca categoria"
@@ -2459,8 +2502,11 @@ msgstr "Cerca categoria / gioco…"
 msgid "Search failed."
 msgstr "Ricerca non riuscita."
 
-msgid "Search recordings (title, date, game)..."
-msgstr "Cerca registrazioni (titolo, data, gioco)..."
+msgid "Search recordings"
+msgstr "Cerca registrazioni"
+
+msgid "Search recordings (title, date, game)…"
+msgstr "Cerca registrazioni (titolo, data, gioco)…"
 
 msgid "Search results"
 msgstr "Risultati della ricerca"
@@ -2471,21 +2517,21 @@ msgstr "Cerca streamer o canale…"
 msgid "Search streamers"
 msgstr "Cerca streamer"
 
-msgid "Search term (e.g. player name, chat message, date)..."
-msgstr "Termine di ricerca (es. nome del giocatore, messaggio della chat, data)..."
-
-msgid "Search user, email or group..."
-msgstr "Cerca utente, email o gruppo..."
+msgid "Search term (e.g. player name, chat message, date)…"
+msgstr "Termine di ricerca (es. nome del giocatore, messaggio della chat, data)…"
 
-msgid "Search..."
-msgstr "Cerca..."
+msgid "Search user, email or group…"
+msgstr "Cerca utente, email o gruppo…"
 
-msgid "Searching for stream..."
-msgstr "Ricerca dello stream..."
+msgid "Searching for stream…"
+msgstr "Ricerca dello stream…"
 
 msgid "Searching…"
 msgstr "Ricerca…"
 
+msgid "Search…"
+msgstr "Cerca…"
+
 msgid "Seconds after trigger"
 msgstr "Secondi dopo il trigger"
 
@@ -2575,9 +2621,21 @@ msgstr "Mostrato nella navigazione, nella barra laterale e nelle schede degli st
 msgid "Sign in"
 msgstr "Accedi"
 
+msgid "Sign out on every device? Every session of this account ends, including this one."
+msgstr "Uscire su tutti i dispositivi? Tutte le sessioni di questo account terminano, compresa questa."
+
 msgid "Size"
 msgstr "Dimensione"
 
+msgid "Skip to content"
+msgstr "Vai al contenuto"
+
+msgid "Sort"
+msgstr "Ordina"
+
+msgid "Sort order"
+msgstr "Ordinamento"
+
 msgid "Sound"
 msgstr "Audio"
 
@@ -2619,7 +2677,7 @@ msgid "Starting"
 msgstr "Avvio"
 
 msgid "Starting download..."
-msgstr "Avvio del download..."
+msgstr "Avvio del download…"
 
 msgid "Status"
 msgstr "Stato"
@@ -2658,6 +2716,9 @@ msgstr "Provider di archiviazione non trovato."
 msgid "Storage providers"
 msgstr "Provider di archiviazione"
 
+msgid "Storage usage"
+msgstr "Uso dello spazio"
+
 #, python-format
 msgid "Storage: <strong>%(pct)s%%</strong>"
 msgstr "Spazio: <strong>%(pct)s%%</strong>"
@@ -2719,6 +2780,9 @@ msgstr "Streamer, VOD e cronologie della chat"
 msgid "Subfolder"
 msgstr "Sottocartella"
 
+msgid "Subs"
+msgstr "Abbonati"
+
 msgid "Success"
 msgstr "Operazione riuscita"
 
@@ -2806,6 +2870,9 @@ msgstr "Versione dei termini obsoleta — ricarica la pagina e accetta di nuovo.
 msgid "Test"
 msgstr "Testa"
 
+msgid "Text-to-speech overlay"
+msgstr "Overlay sintesi vocale"
+
 msgid "Thanks for your understanding. Authorized users can sign in via the login page."
 msgstr "Grazie per la comprensione. Gli utenti autorizzati possono accedere dalla pagina di login."
 
@@ -2918,8 +2985,11 @@ msgstr "Oggi, %(time)s"
 msgid "Too many VODs are playing right now. Live is not affected. Try again in a few minutes — a slot frees up as soon as someone closes the player."
 msgstr "Ci sono troppi VOD in riproduzione in questo momento. La live non è interessata. Riprova tra qualche minuto: uno slot si libera appena qualcuno chiude il player."
 
-msgid "Too many attempts. IP temporarily blocked. Please try again later."
-msgstr "Troppi tentativi. IP temporaneamente bloccato. Riprova più tardi."
+#, python-format
+msgid "Too many login attempts. Please try again in %(num)d minute."
+msgid_plural "Too many login attempts. Please try again in %(num)d minutes."
+msgstr[0] "Troppi tentativi di accesso. Riprova tra %(num)d minuto."
+msgstr[1] "Troppi tentativi di accesso. Riprova tra %(num)d minuti."
 
 msgid "Top streams are currently unavailable. Use monitored channels or the search."
 msgstr "Gli stream più seguiti non sono al momento disponibili. Usa i canali monitorati o la ricerca."
@@ -2972,6 +3042,9 @@ msgstr "Trascrizione completata"
 msgid "Transcript missing despite finished status"
 msgstr "Trascrizione mancante nonostante lo stato completato"
 
+msgid "Transcript progress"
+msgstr "Avanzamento trascrizione"
+
 msgid "Transcription cancelled"
 msgstr "Trascrizione annullata"
 
@@ -2995,7 +3068,7 @@ msgid "Transcription queued in the worker. The result appears on the next page l
 msgstr "Trascrizione accodata nel worker. Il risultato appare al prossimo caricamento della pagina dopo il completamento."
 
 msgid "Transcription running..."
-msgstr "Trascrizione in corso..."
+msgstr "Trascrizione in corso…"
 
 msgid "Transcription timed out"
 msgstr "Timeout della trascrizione"
@@ -3012,8 +3085,11 @@ msgstr "Twitch / predefinito"
 msgid "Twitch badge library synchronized."
 msgstr "Libreria dei badge Twitch sincronizzata."
 
-msgid "Twitch channel name..."
-msgstr "Nome del canale Twitch..."
+msgid "Twitch channel name"
+msgstr "Nome del canale Twitch"
+
+msgid "Twitch channel name…"
+msgstr "Nome del canale Twitch…"
 
 msgid "Twitch live chat"
 msgstr "Chat live di Twitch"
@@ -3021,8 +3097,8 @@ msgstr "Chat live di Twitch"
 msgid "Twitch live stream"
 msgstr "Live stream di Twitch"
 
-msgid "Twitch name (e.g. shroud) or YouTube URL / @handle..."
-msgstr "Nome Twitch (es. shroud) o URL YouTube / @handle..."
+msgid "Twitch name (e.g. shroud) or YouTube URL / @handle…"
+msgstr "Nome Twitch (es. shroud) o URL YouTube / @handle…"
 
 msgid "Twitch or YouTube supported"
 msgstr "Supporta Twitch o YouTube"
@@ -3240,12 +3316,6 @@ msgstr "Visibile a:"
 msgid "Volume"
 msgstr "Volume"
 
-msgid "WARNING: Do you want to permanently delete this streamer and all recordings?"
-msgstr "ATTENZIONE: vuoi eliminare definitivamente questo streamer e tutte le registrazioni?"
-
-msgid "WATCH LIVE"
-msgstr "GUARDA LIVE"
-
 msgid "Waiting for server stream…"
 msgstr "In attesa dello stream del server…"
 
@@ -3258,6 +3328,9 @@ msgstr "Guarda"
 msgid "Watch latest video"
 msgstr "Guarda l'ultimo video"
 
+msgid "Watch live"
+msgstr "Guarda live"
+
 msgid "Watch now"
 msgstr "Guarda ora"
 
@@ -3314,8 +3387,8 @@ msgstr "Non puoi spostarti in un gruppo senza permessi di gestione utenti."
 msgid "You have accepted version %(version)s."
 msgstr "Hai accettato la versione %(version)s."
 
-msgid "Your IP has been temporarily blocked. Please try again later."
-msgstr "Il tuo IP è stato temporaneamente bloccato. Riprova più tardi."
+msgid "Your IP has been blocked. Please contact the administrator."
+msgstr "Il tuo IP è stato bloccato. Contatta l’amministratore."
 
 msgid "Your browser does not support the video tag."
 msgstr "Il tuo browser non supporta il tag video."
@@ -3359,12 +3432,12 @@ msgstr "es. archivio VIP"
 msgid "e.g. alice, bob"
 msgstr "es. alice, bob"
 
-msgid "e.g. john_doe"
-msgstr "es. mario_rossi"
-
 msgid "e.g. channel_name"
 msgstr "es. channel_name"
 
+msgid "e.g. john_doe"
+msgstr "es. mario_rossi"
+
 #, python-format
 msgid "effective from %(date)s"
 msgstr "in vigore dal %(date)s"
diff --git a/WEBUI/translations/ja/LC_MESSAGES/messages.mo b/WEBUI/translations/ja/LC_MESSAGES/messages.mo
index f8e0010..3f232dd 100644
Binary files a/WEBUI/translations/ja/LC_MESSAGES/messages.mo and b/WEBUI/translations/ja/LC_MESSAGES/messages.mo differ
diff --git a/WEBUI/translations/ja/LC_MESSAGES/messages.po b/WEBUI/translations/ja/LC_MESSAGES/messages.po
index 119d76e..f2b986d 100644
--- a/WEBUI/translations/ja/LC_MESSAGES/messages.po
+++ b/WEBUI/translations/ja/LC_MESSAGES/messages.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: StreamVault VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2026-11-03 19:28+0100\n"
+"POT-Creation-Date: 2026-11-12 15:41+0100\n"
 "PO-Revision-Date: 2026-11-03 19:31+0100\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language: ja\n"
@@ -181,9 +181,6 @@ msgstr "復元はすでに実行中です。"
 msgid "A saved value is kept if the field is left empty."
 msgstr "空欄のままにすると、保存済みの値が維持されます。"
 
-msgid "ACTIVE (locked)"
-msgstr "有効（ロック中）"
-
 msgid "AWS S3, Cloudflare R2, Backblaze B2, Wasabi, MinIO, Hetzner or any S3-compatible endpoint."
 msgstr "AWS S3、Cloudflare R2、Backblaze B2、Wasabi、MinIO、Hetzner、または任意の S3 互換エンドポイント。"
 
@@ -196,6 +193,9 @@ msgstr "利用規約に同意する"
 msgid "Account active (access allowed)"
 msgstr "アカウント有効（アクセス許可）"
 
+msgid "Accounts"
+msgstr "アカウント"
+
 msgid "Action"
 msgstr "操作"
 
@@ -208,6 +208,9 @@ msgstr "アカウントをすぐに有効化"
 msgid "Active"
 msgstr "有効"
 
+msgid "Active (locked)"
+msgstr "有効（ロック中）"
+
 msgid "Active shares"
 msgstr "有効な共有"
 
@@ -220,6 +223,9 @@ msgstr "有効: 新しい配信は自動的に解放されます。下で個別
 msgid "Actively monitored by the recorder core"
 msgstr "録画コアによって監視中"
 
+msgid "Add a channel to record"
+msgstr "録画するチャンネルを追加"
+
 msgid "Add channel"
 msgstr "チャンネルを追加"
 
@@ -229,6 +235,9 @@ msgstr "新しいチャンネルを追加"
 msgid "Add provider"
 msgstr "プロバイダーを追加"
 
+msgid "Add the first channel above"
+msgstr "上で最初のチャンネルを追加"
+
 msgid "Addressing"
 msgstr "アドレス指定"
 
@@ -241,6 +250,9 @@ msgstr "管理者コントロール"
 msgid "Admins only"
 msgstr "管理者のみ"
 
+msgid "Alert sound overlay"
+msgstr "アラート音オーバーレイ"
+
 msgid "All"
 msgstr "すべて"
 
@@ -480,27 +492,27 @@ msgstr "バッファーがまだ短いです。クリップの範囲はバッフ
 msgid "Buffer:"
 msgstr "バッファー:"
 
-msgid "Buffering..."
-msgstr "バッファリング中..."
+msgid "Buffering…"
+msgstr "バッファリング中…"
 
 msgid "By default nothing is uploaded or deleted automatically. Enable these features deliberately."
 msgstr "初期設定では、何も自動でアップロード・削除されません。これらの機能は意図的に有効にしてください。"
 
-msgid "CHANGE"
-msgstr "変更"
-
-msgid "CHANNEL MANAGEMENT (ADMIN)"
-msgstr "チャンネル管理（管理者）"
-
 msgid "Cancel"
 msgstr "キャンセル"
 
+msgid "Category"
+msgstr "カテゴリ"
+
 msgid "Category search failed."
 msgstr "カテゴリ検索に失敗しました。"
 
 msgid "Category search is currently unavailable."
 msgstr "カテゴリ検索は現在利用できません。"
 
+msgid "Change"
+msgstr "変更"
+
 msgid "Change banner"
 msgstr "バナーを変更"
 
@@ -516,6 +528,9 @@ msgstr "チャンネル操作"
 msgid "Channel archive & recording metrics"
 msgstr "チャンネルのアーカイブと録画の指標"
 
+msgid "Channel management (admin)"
+msgstr "チャンネル管理（管理者）"
+
 msgid "Channel not found."
 msgstr "チャンネルが見つかりません。"
 
@@ -572,12 +587,12 @@ msgstr "クリーンアップをキューに追加しました（タスク #%(ta
 msgid "Clear filters"
 msgstr "フィルターをクリア"
 
-msgid "Click to change password"
-msgstr "クリックしてパスワードを変更"
-
 msgid "Clip"
 msgstr "クリップ"
 
+msgid "Clip Editor"
+msgstr "クリップエディター"
+
 msgid "Clip URL is missing on this page."
 msgstr "このページにクリップの URL がありません。"
 
@@ -662,6 +677,9 @@ msgstr "録画チャンネルを設定し、アーカイブの割り当てを管
 msgid "Configured streamers & sources"
 msgstr "設定済みの配信者とソース"
 
+msgid "Confirm"
+msgstr "確認"
+
 msgid "Connect account"
 msgstr "アカウントを連携"
 
@@ -683,6 +701,9 @@ msgstr "接続 OK"
 msgid "Connection failed"
 msgstr "接続に失敗しました"
 
+msgid "Connection failed. Check your network and try again."
+msgstr "接続に失敗しました。ネットワークを確認して、もう一度お試しください。"
+
 msgid "Connection lost — reconnecting…"
 msgstr "接続が切れました — 再接続中…"
 
@@ -699,6 +720,9 @@ msgstr "コントロールパネル"
 msgid "Control the global maintenance mode or lock individual platform areas."
 msgstr "グローバルメンテナンスモードを制御するか、プラットフォームの個別エリアをロックします。"
 
+msgid "Copied"
+msgstr "コピーしました"
+
 msgid "Copy"
 msgstr "コピー"
 
@@ -815,6 +839,14 @@ msgstr "デフォルトの保存先"
 msgid "Delete"
 msgstr "削除"
 
+#, python-format
+msgid "Delete %(name)s? The file is removed from the archive and cannot be restored."
+msgstr "%(name)s を削除しますか？ファイルはアーカイブから削除され、復元できません。"
+
+#, python-format
+msgid "Delete backup %(name)s? This cannot be undone."
+msgstr "バックアップ %(name)s を削除しますか？元に戻せません。"
+
 msgid "Delete folder"
 msgstr "フォルダーを削除"
 
@@ -833,6 +865,12 @@ msgstr "ローカルで削除"
 msgid "Delete permanently"
 msgstr "完全に削除"
 
+msgid "Delete this streamer folder and all recordings? This cannot be undone."
+msgstr "この配信者のフォルダーとすべての録画を削除しますか？元に戻せません。"
+
+msgid "Delete this video? The file is removed from the archive and cannot be restored."
+msgstr "この動画を削除しますか？ファイルはアーカイブから削除され、復元できません。"
+
 msgid "Delete user"
 msgstr "ユーザーを削除"
 
@@ -913,8 +951,8 @@ msgstr "TXT をダウンロード"
 msgid "Download all"
 msgstr "すべてダウンロード"
 
-msgid "Download all VODs?"
-msgstr "すべての VOD をダウンロードしますか？"
+msgid "Download all VODs of this streamer as one archive? This can take a while for large channels."
+msgstr "この配信者のすべての VOD を 1 つのアーカイブとしてダウンロードしますか？大きなチャンネルでは時間がかかる場合があります。"
 
 msgid "Download archive & VODs"
 msgstr "アーカイブと VOD をダウンロード"
@@ -933,7 +971,7 @@ msgstr "すべての VOD のダウンロードをバックグラウンドで開
 
 #, python-format
 msgid "Downloading... %(percent)s"
-msgstr "ダウンロード中... %(percent)s"
+msgstr "ダウンロード中… %(percent)s"
 
 #, python-format
 msgid "Drive quota active — do not press Play again (it extends the block). Seek back into the already loaded part, or wait about %(minutes)s min."
@@ -984,6 +1022,9 @@ msgstr "メールアドレス"
 msgid "Email address (optional)"
 msgstr "メールアドレス（任意）"
 
+msgid "Emotes"
+msgstr "エモート"
+
 msgid "Empty = AWS. For R2, B2, Wasabi, MinIO etc. enter the S3 endpoint."
 msgstr "空欄 = AWS。R2、B2、Wasabi、MinIO などの場合は S3 エンドポイントを入力してください。"
 
@@ -999,6 +1040,9 @@ msgstr "すぐに有効化"
 msgid "Enable maintenance mode"
 msgstr "メンテナンスモードを有効化"
 
+msgid "Enable maintenance mode? Everyone except allowlisted users sees the maintenance page until you end it."
+msgstr "メンテナンスモードを有効にしますか？許可リストのユーザー以外は、終了するまでメンテナンスページが表示されます。"
+
 msgid "Enable recording"
 msgstr "録画を有効化"
 
@@ -1096,6 +1140,9 @@ msgstr "エラー:"
 msgid "Error: %(error)s"
 msgstr "エラー: %(error)s"
 
+msgid "Everywhere"
+msgstr "すべて"
+
 msgid "Existing members of this group are automatically assigned to the default group <strong>Viewer</strong>."
 msgstr "このグループの既存メンバーは、自動的にデフォルトグループ <strong>視聴者</strong> に割り当てられます。"
 
@@ -1112,10 +1159,7 @@ msgid "Exported by StreamVault"
 msgstr "StreamVault によるエクスポート"
 
 msgid "Extracting audio..."
-msgstr "音声を抽出中..."
-
-msgid "FEATURED VOD"
-msgstr "注目の VOD"
+msgstr "音声を抽出中…"
 
 msgid "Failed"
 msgstr "失敗"
@@ -1126,6 +1170,9 @@ msgstr "高速"
 msgid "Feature permissions"
 msgstr "機能の権限"
 
+msgid "Featured VOD"
+msgstr "注目の VOD"
+
 msgid "Featured highlight"
 msgstr "注目のハイライト"
 
@@ -1156,8 +1203,11 @@ msgstr "ファイルをアップロードしました。"
 msgid "Filter"
 msgstr "フィルター"
 
-msgid "Filter chat..."
-msgstr "チャットを絞り込み..."
+msgid "Filter chat"
+msgstr "チャットを絞り込む"
+
+msgid "Filter chat…"
+msgstr "チャットを絞り込み…"
 
 msgid "First"
 msgstr "最初"
@@ -1435,19 +1485,6 @@ msgstr "7月"
 msgid "June"
 msgstr "6月"
 
-msgid "LIVE"
-msgstr "ライブ"
-
-#, python-format
-msgid "LIVE %(name)s (without Twitch login)"
-msgstr "ライブ %(name)s（Twitch ログイン不要）"
-
-msgid "LIVE & DISCORD ONLY"
-msgstr "ライブと Discord のみ"
-
-msgid "LIVE NOW"
-msgstr "ライブ配信中"
-
 msgid "Language"
 msgstr "言語"
 
@@ -1496,11 +1533,14 @@ msgstr "リンクをコピーしました:"
 msgid "Live"
 msgstr "ライブ"
 
+msgid "Live & Discord only"
+msgstr "ライブと Discord のみ"
+
 msgid "Live & Discord only:"
 msgstr "ライブと Discord のみ:"
 
 msgid "Live (recovering...)"
-msgstr "ライブ（復旧中...）"
+msgstr "ライブ（復旧中…）"
 
 msgid "Live channels"
 msgstr "ライブ中のチャンネル"
@@ -1535,8 +1575,8 @@ msgstr "ライブ配信と Discord 通知のみ、ディスクへの録画なし
 msgid "Live stream highlight"
 msgstr "ライブ配信のハイライト"
 
-msgid "Live stream is currently unavailable. Searching for stream..."
-msgstr "ライブ配信は現在利用できません。配信を検索中..."
+msgid "Live stream is currently unavailable. Searching for stream…"
+msgstr "ライブ配信は現在利用できません。配信を検索中…"
 
 msgid "Live stream not available."
 msgstr "ライブ配信は利用できません。"
@@ -1553,6 +1593,10 @@ msgstr "ライブ視聴"
 msgid "Live-only"
 msgstr "ライブのみ"
 
+#, python-format
+msgid "Live: %(name)s (without Twitch login)"
+msgstr "ライブ %(name)s（Twitch ログイン不要）"
+
 msgid "Load"
 msgstr "負荷"
 
@@ -1563,7 +1607,7 @@ msgid "Loading chat…"
 msgstr "チャットを読み込み中…"
 
 msgid "Loading model..."
-msgstr "モデルを読み込み中..."
+msgstr "モデルを読み込み中…"
 
 msgid "Loading streams…"
 msgstr "配信を読み込み中…"
@@ -1593,6 +1637,9 @@ msgstr "<strong>モバイル版</strong>をロック"
 msgid "Log out"
 msgstr "ログアウト"
 
+msgid "Log out everywhere"
+msgstr "すべての端末からログアウト"
+
 msgid "Login"
 msgstr "ログイン"
 
@@ -1605,6 +1652,9 @@ msgstr "ログインに失敗しました。"
 msgid "MP4 check not possible"
 msgstr "MP4 チェックを実行できません"
 
+msgid "Main navigation"
+msgstr "メインナビゲーション"
+
 msgid "Maintenance"
 msgstr "メンテナンス"
 
@@ -1670,6 +1720,9 @@ msgstr "メッセージ"
 msgid "Mobile live is temporarily disabled. Please use the desktop version or the installed app."
 msgstr "モバイルでのライブは一時的に無効です。デスクトップ版またはインストール済みのアプリをご利用ください。"
 
+msgid "Mods"
+msgstr "モデレーター"
+
 msgid "Monitored"
 msgstr "監視中"
 
@@ -1691,9 +1744,6 @@ msgstr "ネットワークエラー"
 msgid "Network error while loading streams."
 msgstr "配信の読み込み中にネットワークエラーが発生しました。"
 
-msgid "Network error:"
-msgstr "ネットワークエラー:"
-
 msgid "Network is back — reconnecting…"
 msgstr "ネットワークが復旧しました — 再接続中…"
 
@@ -1712,8 +1762,8 @@ msgstr "新しいパスワード（変更しない場合は空欄）"
 msgid "New password * (min. 8 characters)"
 msgstr "新しいパスワード *（8 文字以上）"
 
-msgid "New password..."
-msgstr "新しいパスワード..."
+msgid "New password…"
+msgstr "新しいパスワード…"
 
 msgid "New user"
 msgstr "新しいユーザー"
@@ -1736,8 +1786,8 @@ msgstr "アプリパスワードを使用する Nextcloud、ownCloud、Hetzner S
 msgid "No (self-signed only)"
 msgstr "いいえ（自己署名証明書の場合のみ）"
 
-msgid "No VODs available in the archive"
-msgstr "アーカイブに VOD がありません"
+msgid "No VODs yet. Recordings appear here automatically as soon as a monitored channel goes live."
+msgstr "まだ VOD はありません。監視中のチャンネルが配信を始めると、録画がここに自動で表示されます。"
 
 msgid "No acceptances yet."
 msgstr "まだ同意はありません。"
@@ -1772,6 +1822,9 @@ msgstr "利用可能なバックアップはありません。"
 msgid "No badges received from Twitch."
 msgstr "Twitch からバッジを取得できませんでした。"
 
+msgid "No channels are monitored yet."
+msgstr "監視中のチャンネルはまだありません。"
+
 msgid "No chat"
 msgstr "チャットなし"
 
@@ -1812,9 +1865,6 @@ msgstr "監視中の Twitch チャンネルはありません。"
 msgid "No monitored Twitch channels. Add streamers under Streamers."
 msgstr "監視中の Twitch チャンネルはありません。「配信者」から配信者を追加してください。"
 
-msgid "No monitored channels configured."
-msgstr "監視対象のチャンネルが設定されていません。"
-
 msgid "No recently watched streams yet."
 msgstr "最近視聴した配信はまだありません。"
 
@@ -1869,30 +1919,15 @@ msgstr "OAuth に関する注意"
 msgid "OAuth state tokens require a strong VOD_SECRET_KEY."
 msgstr "OAuth の state トークンには強力な VOD_SECRET_KEY が必要です。"
 
+msgid "OBS overlays"
+msgstr "OBS オーバーレイ"
+
 msgid "OFF (normal operation)"
 msgstr "オフ（通常運用）"
 
-msgid "OFFLINE"
-msgstr "オフライン"
-
 msgid "OK"
 msgstr "OK"
 
-msgid "ONLINE"
-msgstr "オンライン"
-
-msgid "OPERATING MODE:"
-msgstr "動作モード:"
-
-msgid "OPTION A: UPLOAD IMAGE FILE"
-msgstr "オプション A: 画像ファイルをアップロード"
-
-msgid "OPTION A: UPLOAD PROFILE PICTURE"
-msgstr "オプション A: プロフィール画像をアップロード"
-
-msgid "OPTION B: USE IMAGE URL"
-msgstr "オプション B: 画像 URL を使用"
-
 msgid "OR"
 msgstr "または"
 
@@ -1918,6 +1953,9 @@ msgstr "古い順"
 msgid "OneDrive / Microsoft 365 via Microsoft Graph with OAuth 2.0."
 msgstr "OAuth 2.0 を使用した Microsoft Graph 経由の OneDrive / Microsoft 365。"
 
+msgid "Online"
+msgstr "オンライン"
+
 msgid "Only after a successful upload and optional cloud verification."
 msgstr "アップロードの成功と、任意のクラウド検証の後にのみ。"
 
@@ -1939,6 +1977,22 @@ msgstr "クリップを開く"
 msgid "Open editor"
 msgstr "エディターを開く"
 
+#, python-format
+msgid "Open streamer %(name)s"
+msgstr "配信者 %(name)s を開く"
+
+msgid "Operating mode"
+msgstr "動作モード:"
+
+msgid "Option A: upload image file"
+msgstr "オプション A: 画像ファイルをアップロード"
+
+msgid "Option A: upload profile picture"
+msgstr "オプション A: プロフィール画像をアップロード"
+
+msgid "Option B: use image URL"
+msgstr "オプション B: 画像 URL を使用"
+
 msgid "Option sections"
 msgstr "オプションセクション"
 
@@ -2049,6 +2103,9 @@ msgstr "再生できません"
 msgid "Player error — reconnecting…"
 msgstr "プレーヤーエラー — 再接続中…"
 
+msgid "Please confirm"
+msgstr "確認してください"
+
 msgid "Please enter a name for the storage provider."
 msgstr "ストレージプロバイダーの名前を入力してください。"
 
@@ -2099,10 +2156,10 @@ msgid "Private video and stream archive console."
 msgstr "プライベートな動画・配信アーカイブコンソール。"
 
 msgid "Processing video (this may take a while)..."
-msgstr "動画を処理中（時間がかかる場合があります）..."
+msgstr "動画を処理中（時間がかかる場合があります）…"
 
 msgid "Processing video..."
-msgstr "動画を処理中..."
+msgstr "動画を処理中…"
 
 msgid "Profile picture reset to default."
 msgstr "プロフィール画像をデフォルトに戻しました。"
@@ -2147,8 +2204,8 @@ msgstr "プロバイダー"
 msgid "Public link created:"
 msgstr "公開リンクを作成しました:"
 
-msgid "Purpose of this user group..."
-msgstr "このユーザーグループの目的..."
+msgid "Purpose of this user group…"
+msgstr "このユーザーグループの目的…"
 
 msgid "Quality"
 msgstr "画質"
@@ -2162,22 +2219,12 @@ msgstr "キューを読み取れません"
 msgid "Quiet"
 msgstr "静か"
 
-msgid "RECORDING"
-msgstr "録画中"
-
-msgid "RECORDING ACTIVE"
-msgstr "録画中"
-
 msgid "Ready"
 msgstr "準備完了"
 
 msgid "Real-time stream error — reconnecting…"
 msgstr "リアルタイム配信エラー — 再接続中…"
 
-#, python-format
-msgid "Really delete backup %(name)s?"
-msgstr "バックアップ %(name)s を本当に削除しますか？"
-
 msgid "Really delete file?"
 msgstr "ファイルを本当に削除しますか？"
 
@@ -2187,28 +2234,15 @@ msgstr "クラウドのファイルを本当に削除しますか？ローカル
 msgid "Really delete the local file? The cloud copy is kept."
 msgstr "ローカルのファイルを本当に削除しますか？クラウドのコピーは保持されます。"
 
-msgid "Really delete?"
-msgstr "本当に削除しますか？"
-
-#, python-format
-msgid "Really remove channel %(name)s?"
-msgstr "チャンネル %(name)s を本当に削除しますか？"
-
 msgid "Really remove the provider? The cloud files are kept."
 msgstr "プロバイダーを本当に削除しますか？クラウドのファイルは保持されます。"
 
-msgid "Really rename the file?"
-msgstr "ファイル名を本当に変更しますか？"
-
 msgid "Really reset the custom banner and switch to the default?"
 msgstr "カスタムバナーをリセットしてデフォルトに戻しますか？"
 
 msgid "Really reset the custom profile picture and switch to the default?"
 msgstr "カスタムプロフィール画像をリセットしてデフォルトに戻しますか？"
 
-msgid "Really revoke this share?"
-msgstr "この共有を本当に取り消しますか？"
-
 msgid "Really stop the recording?"
 msgstr "録画を本当に停止しますか？"
 
@@ -2218,6 +2252,9 @@ msgstr "最近のタスクエラー"
 msgid "Recently watched"
 msgstr "最近視聴した配信"
 
+msgid "Recommended browser-source URLs. Replace TOKEN with the value of TTS_OVERLAY_TOKEN or ALERT_OVERLAY_TOKEN. The part after # stays in OBS and reaches the server only as a request header, never in a log line."
+msgstr "ブラウザソース用の推奨 URL です。TOKEN を TTS_OVERLAY_TOKEN または ALERT_OVERLAY_TOKEN の値に置き換えてください。# 以降の部分は OBS 内に留まり、サーバーにはリクエストヘッダーとしてのみ届き、ログには残りません。"
+
 msgid "Recommended. Prevents data loss from incomplete uploads."
 msgstr "推奨。不完全なアップロードによるデータ損失を防ぎます。"
 
@@ -2236,6 +2273,9 @@ msgstr "録画"
 msgid "Recording + live stream & Discord notification"
 msgstr "録画 + ライブ配信と Discord 通知"
 
+msgid "Recording active"
+msgstr "録画中"
+
 msgid "Recording disabled (live & Discord only)"
 msgstr "録画無効（ライブと Discord のみ）"
 
@@ -2285,8 +2325,8 @@ msgid "Remove channel"
 msgstr "チャンネルを削除"
 
 #, python-format
-msgid "Remove channel %(name)s?"
-msgstr "チャンネル %(name)s を削除しますか？"
+msgid "Remove channel %(name)s? Monitoring stops; existing recordings stay in the archive."
+msgstr "チャンネル %(name)s を削除しますか？監視は停止し、既存の録画はアーカイブに残ります。"
 
 msgid "Remove only the database entry?"
 msgstr "データベースのエントリのみを削除しますか？"
@@ -2301,6 +2341,9 @@ msgstr "リマックスジョブを開始しました。進捗は管理パネル
 msgid "Rename file"
 msgstr "ファイル名を変更"
 
+msgid "Rename the file? Existing links and shares to the old file name stop working."
+msgstr "ファイル名を変更しますか？旧ファイル名へのリンクや共有は使えなくなります。"
+
 msgid "Renamed."
 msgstr "名前を変更しました。"
 
@@ -2326,6 +2369,9 @@ msgstr "再起動に失敗しました。"
 msgid "Restart services"
 msgstr "サービスを再起動"
 
+msgid "Restart the recorder and chat logger now? Running recordings are interrupted for a few seconds."
+msgstr "レコーダーとチャットロガーを今すぐ再起動しますか？進行中の録画は数秒間中断されます。"
+
 msgid "Restore"
 msgstr "復元"
 
@@ -2342,6 +2388,9 @@ msgstr "再生を再開"
 msgid "Revoke"
 msgstr "取り消す"
 
+msgid "Revoke this share? The link stops working immediately."
+msgstr "この共有を取り消しますか？リンクはすぐに使えなくなります。"
+
 #, python-format
 msgid "Role access '%(slug)s' added."
 msgstr "ロールアクセス「%(slug)s」を追加しました。"
@@ -2374,9 +2423,6 @@ msgstr "実行中…"
 msgid "S3-compatible"
 msgstr "S3 互換"
 
-msgid "START"
-msgstr "開始"
-
 msgid "Safety migration:"
 msgstr "安全移行:"
 
@@ -2430,10 +2476,7 @@ msgid "Saving transcript failed: %(error)s"
 msgstr "文字起こしの保存に失敗しました: %(error)s"
 
 msgid "Saving transcript..."
-msgstr "文字起こしを保存中..."
-
-msgid "Saving..."
-msgstr "保存中..."
+msgstr "文字起こしを保存中…"
 
 msgid "Saving…"
 msgstr "保存中…"
@@ -2441,8 +2484,8 @@ msgstr "保存中…"
 msgid "Search"
 msgstr "検索"
 
-msgid "Search VODs, streamers or games..."
-msgstr "VOD、配信者、ゲームを検索..."
+msgid "Search VODs, streamers or games…"
+msgstr "VOD、配信者、ゲームを検索…"
 
 msgid "Search category"
 msgstr "カテゴリを検索"
@@ -2453,8 +2496,11 @@ msgstr "カテゴリ／ゲームを検索…"
 msgid "Search failed."
 msgstr "検索に失敗しました。"
 
-msgid "Search recordings (title, date, game)..."
-msgstr "録画を検索（タイトル、日付、ゲーム）..."
+msgid "Search recordings"
+msgstr "録画を検索"
+
+msgid "Search recordings (title, date, game)…"
+msgstr "録画を検索（タイトル、日付、ゲーム）…"
 
 msgid "Search results"
 msgstr "検索結果"
@@ -2465,21 +2511,21 @@ msgstr "配信者またはチャンネルを検索…"
 msgid "Search streamers"
 msgstr "配信者を検索"
 
-msgid "Search term (e.g. player name, chat message, date)..."
-msgstr "検索語（例: プレイヤー名、チャットメッセージ、日付）..."
-
-msgid "Search user, email or group..."
-msgstr "ユーザー、メール、グループを検索..."
+msgid "Search term (e.g. player name, chat message, date)…"
+msgstr "検索語（例: プレイヤー名、チャットメッセージ、日付）…"
 
-msgid "Search..."
-msgstr "検索..."
+msgid "Search user, email or group…"
+msgstr "ユーザー、メール、グループを検索…"
 
-msgid "Searching for stream..."
-msgstr "配信を検索中..."
+msgid "Searching for stream…"
+msgstr "配信を検索中…"
 
 msgid "Searching…"
 msgstr "検索中…"
 
+msgid "Search…"
+msgstr "検索…"
+
 msgid "Seconds after trigger"
 msgstr "トリガー後の秒数"
 
@@ -2569,9 +2615,21 @@ msgstr "ナビゲーション、サイドバー、配信者カードに表示さ
 msgid "Sign in"
 msgstr "サインイン"
 
+msgid "Sign out on every device? Every session of this account ends, including this one."
+msgstr "すべての端末からログアウトしますか？このセッションを含め、このアカウントのすべてのセッションが終了します。"
+
 msgid "Size"
 msgstr "サイズ"
 
+msgid "Skip to content"
+msgstr "本文へスキップ"
+
+msgid "Sort"
+msgstr "並べ替え"
+
+msgid "Sort order"
+msgstr "並び順"
+
 msgid "Sound"
 msgstr "サウンド"
 
@@ -2613,7 +2671,7 @@ msgid "Starting"
 msgstr "開始中"
 
 msgid "Starting download..."
-msgstr "ダウンロードを開始中..."
+msgstr "ダウンロードを開始中…"
 
 msgid "Status"
 msgstr "ステータス"
@@ -2652,6 +2710,9 @@ msgstr "ストレージプロバイダーが見つかりません。"
 msgid "Storage providers"
 msgstr "ストレージプロバイダー"
 
+msgid "Storage usage"
+msgstr "ストレージ使用量"
+
 #, python-format
 msgid "Storage: <strong>%(pct)s%%</strong>"
 msgstr "ストレージ: <strong>%(pct)s%%</strong>"
@@ -2713,6 +2774,9 @@ msgstr "配信者、VOD、チャット履歴"
 msgid "Subfolder"
 msgstr "サブフォルダー"
 
+msgid "Subs"
+msgstr "サブスク"
+
 msgid "Success"
 msgstr "成功"
 
@@ -2800,6 +2864,9 @@ msgstr "利用規約のバージョンが古くなっています — ページ
 msgid "Test"
 msgstr "テスト"
 
+msgid "Text-to-speech overlay"
+msgstr "読み上げオーバーレイ"
+
 msgid "Thanks for your understanding. Authorized users can sign in via the login page."
 msgstr "ご理解いただきありがとうございます。権限のあるユーザーはログインページからサインインできます。"
 
@@ -2912,8 +2979,10 @@ msgstr "今日 %(time)s"
 msgid "Too many VODs are playing right now. Live is not affected. Try again in a few minutes — a slot frees up as soon as someone closes the player."
 msgstr "現在、再生中の VOD が多すぎます。ライブには影響しません。数分後に再度お試しください。誰かがプレーヤーを閉じるとスロットが空きます。"
 
-msgid "Too many attempts. IP temporarily blocked. Please try again later."
-msgstr "試行回数が多すぎます。IP が一時的にブロックされました。しばらくしてから再度お試しください。"
+#, python-format
+msgid "Too many login attempts. Please try again in %(num)d minute."
+msgid_plural "Too many login attempts. Please try again in %(num)d minutes."
+msgstr[0] "ログイン試行が多すぎます。%(num)d 分後にもう一度お試しください。"
 
 msgid "Top streams are currently unavailable. Use monitored channels or the search."
 msgstr "トップ配信は現在利用できません。監視中のチャンネルまたは検索をご利用ください。"
@@ -2966,6 +3035,9 @@ msgstr "文字起こしが完了しました"
 msgid "Transcript missing despite finished status"
 msgstr "完了ステータスなのに文字起こしがありません"
 
+msgid "Transcript progress"
+msgstr "文字起こしの進捗"
+
 msgid "Transcription cancelled"
 msgstr "文字起こしをキャンセルしました"
 
@@ -2989,7 +3061,7 @@ msgid "Transcription queued in the worker. The result appears on the next page l
 msgstr "文字起こしをワーカーのキューに追加しました。完了後、次回のページ読み込み時に結果が表示されます。"
 
 msgid "Transcription running..."
-msgstr "文字起こしを実行中..."
+msgstr "文字起こしを実行中…"
 
 msgid "Transcription timed out"
 msgstr "文字起こしがタイムアウトしました"
@@ -3006,8 +3078,11 @@ msgstr "Twitch／デフォルト"
 msgid "Twitch badge library synchronized."
 msgstr "Twitch のバッジライブラリを同期しました。"
 
-msgid "Twitch channel name..."
-msgstr "Twitch チャンネル名..."
+msgid "Twitch channel name"
+msgstr "Twitch チャンネル名"
+
+msgid "Twitch channel name…"
+msgstr "Twitch チャンネル名…"
 
 msgid "Twitch live chat"
 msgstr "Twitch ライブチャット"
@@ -3015,8 +3090,8 @@ msgstr "Twitch ライブチャット"
 msgid "Twitch live stream"
 msgstr "Twitch ライブ配信"
 
-msgid "Twitch name (e.g. shroud) or YouTube URL / @handle..."
-msgstr "Twitch 名（例: shroud）または YouTube の URL／@ハンドル..."
+msgid "Twitch name (e.g. shroud) or YouTube URL / @handle…"
+msgstr "Twitch 名（例: shroud）または YouTube の URL／@ハンドル…"
 
 msgid "Twitch or YouTube supported"
 msgstr "Twitch または YouTube に対応"
@@ -3234,12 +3309,6 @@ msgstr "公開対象:"
 msgid "Volume"
 msgstr "音量"
 
-msgid "WARNING: Do you want to permanently delete this streamer and all recordings?"
-msgstr "警告: この配信者とすべての録画を完全に削除しますか？"
-
-msgid "WATCH LIVE"
-msgstr "ライブを視聴"
-
 msgid "Waiting for server stream…"
 msgstr "サーバーの配信を待機中…"
 
@@ -3252,6 +3321,9 @@ msgstr "視聴"
 msgid "Watch latest video"
 msgstr "最新の動画を視聴"
 
+msgid "Watch live"
+msgstr "ライブを視聴"
+
 msgid "Watch now"
 msgstr "今すぐ視聴"
 
@@ -3308,8 +3380,8 @@ msgstr "ユーザー管理権限のないグループに自分を移動するこ
 msgid "You have accepted version %(version)s."
 msgstr "バージョン %(version)s に同意済みです。"
 
-msgid "Your IP has been temporarily blocked. Please try again later."
-msgstr "お使いの IP は一時的にブロックされています。しばらくしてから再度お試しください。"
+msgid "Your IP has been blocked. Please contact the administrator."
+msgstr "お使いの IP はブロックされています。管理者にお問い合わせください。"
 
 msgid "Your browser does not support the video tag."
 msgstr "お使いのブラウザーは video タグに対応していません。"
@@ -3353,12 +3425,12 @@ msgstr "例: VIP アーカイブ"
 msgid "e.g. alice, bob"
 msgstr "例: alice, bob"
 
-msgid "e.g. john_doe"
-msgstr "例: john_doe"
-
 msgid "e.g. channel_name"
 msgstr "例: channel_name"
 
+msgid "e.g. john_doe"
+msgstr "例: john_doe"
+
 #, python-format
 msgid "effective from %(date)s"
 msgstr "%(date)s から有効"
diff --git a/WEBUI/translations/ko/LC_MESSAGES/messages.mo b/WEBUI/translations/ko/LC_MESSAGES/messages.mo
index 5ac6a53..731c6d7 100644
Binary files a/WEBUI/translations/ko/LC_MESSAGES/messages.mo and b/WEBUI/translations/ko/LC_MESSAGES/messages.mo differ
diff --git a/WEBUI/translations/ko/LC_MESSAGES/messages.po b/WEBUI/translations/ko/LC_MESSAGES/messages.po
index c2ab7aa..e11b13f 100644
--- a/WEBUI/translations/ko/LC_MESSAGES/messages.po
+++ b/WEBUI/translations/ko/LC_MESSAGES/messages.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: StreamVault VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2026-11-03 19:28+0100\n"
+"POT-Creation-Date: 2026-11-12 15:41+0100\n"
 "PO-Revision-Date: 2026-11-03 19:31+0100\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language: ko\n"
@@ -181,9 +181,6 @@ msgstr "복원이 이미 실행 중입니다."
 msgid "A saved value is kept if the field is left empty."
 msgstr "필드를 비워 두면 저장된 값이 유지됩니다."
 
-msgid "ACTIVE (locked)"
-msgstr "활성 (잠김)"
-
 msgid "AWS S3, Cloudflare R2, Backblaze B2, Wasabi, MinIO, Hetzner or any S3-compatible endpoint."
 msgstr "AWS S3, Cloudflare R2, Backblaze B2, Wasabi, MinIO, Hetzner 또는 S3 호환 엔드포인트."
 
@@ -196,6 +193,9 @@ msgstr "약관 동의"
 msgid "Account active (access allowed)"
 msgstr "계정 활성 (접근 허용)"
 
+msgid "Accounts"
+msgstr "계정"
+
 msgid "Action"
 msgstr "작업"
 
@@ -208,6 +208,9 @@ msgstr "계정 즉시 활성화"
 msgid "Active"
 msgstr "활성"
 
+msgid "Active (locked)"
+msgstr "활성 (잠김)"
+
 msgid "Active shares"
 msgstr "활성 공유"
 
@@ -220,6 +223,9 @@ msgstr "활성: 새 스트림이 자동으로 허용됩니다. 아래에서 개
 msgid "Actively monitored by the recorder core"
 msgstr "레코더 코어가 실시간 모니터링 중"
 
+msgid "Add a channel to record"
+msgstr "녹화할 채널 추가"
+
 msgid "Add channel"
 msgstr "채널 추가"
 
@@ -229,6 +235,9 @@ msgstr "새 채널 추가"
 msgid "Add provider"
 msgstr "공급자 추가"
 
+msgid "Add the first channel above"
+msgstr "위에서 첫 채널 추가"
+
 msgid "Addressing"
 msgstr "주소 지정"
 
@@ -241,6 +250,9 @@ msgstr "관리자 제어"
 msgid "Admins only"
 msgstr "관리자 전용"
 
+msgid "Alert sound overlay"
+msgstr "알림음 오버레이"
+
 msgid "All"
 msgstr "전체"
 
@@ -480,27 +492,27 @@ msgstr "버퍼가 아직 짧습니다 — 클립 구간도 함께 늘어납니
 msgid "Buffer:"
 msgstr "버퍼:"
 
-msgid "Buffering..."
-msgstr "버퍼링 중..."
+msgid "Buffering…"
+msgstr "버퍼링 중…"
 
 msgid "By default nothing is uploaded or deleted automatically. Enable these features deliberately."
 msgstr "기본적으로 자동 업로드나 삭제는 하지 않습니다. 필요한 기능만 신중하게 켜세요."
 
-msgid "CHANGE"
-msgstr "변경"
-
-msgid "CHANNEL MANAGEMENT (ADMIN)"
-msgstr "채널 관리 (관리자)"
-
 msgid "Cancel"
 msgstr "취소"
 
+msgid "Category"
+msgstr "카테고리"
+
 msgid "Category search failed."
 msgstr "카테고리 검색에 실패했습니다."
 
 msgid "Category search is currently unavailable."
 msgstr "카테고리 검색을 현재 사용할 수 없습니다."
 
+msgid "Change"
+msgstr "변경"
+
 msgid "Change banner"
 msgstr "배너 변경"
 
@@ -516,6 +528,9 @@ msgstr "채널 작업"
 msgid "Channel archive & recording metrics"
 msgstr "채널 아카이브 및 녹화 지표"
 
+msgid "Channel management (admin)"
+msgstr "채널 관리 (관리자)"
+
 msgid "Channel not found."
 msgstr "채널을 찾을 수 없습니다."
 
@@ -572,12 +587,12 @@ msgstr "정리 작업이 대기열에 추가되었습니다 (작업 #%(task)s)."
 msgid "Clear filters"
 msgstr "필터 지우기"
 
-msgid "Click to change password"
-msgstr "클릭하여 비밀번호 변경"
-
 msgid "Clip"
 msgstr "클립"
 
+msgid "Clip Editor"
+msgstr "클립 편집기"
+
 msgid "Clip URL is missing on this page."
 msgstr "이 페이지에 클립 URL이 없습니다."
 
@@ -662,6 +677,9 @@ msgstr "녹화 채널 설정 및 아카이브 할당 관리"
 msgid "Configured streamers & sources"
 msgstr "설정된 스트리머 및 소스"
 
+msgid "Confirm"
+msgstr "확인"
+
 msgid "Connect account"
 msgstr "계정 연결"
 
@@ -683,6 +701,9 @@ msgstr "연결 정상"
 msgid "Connection failed"
 msgstr "연결 실패"
 
+msgid "Connection failed. Check your network and try again."
+msgstr "연결에 실패했습니다. 네트워크를 확인한 뒤 다시 시도하세요."
+
 msgid "Connection lost — reconnecting…"
 msgstr "연결 끊김 — 다시 연결 중…"
 
@@ -699,6 +720,9 @@ msgstr "제어판"
 msgid "Control the global maintenance mode or lock individual platform areas."
 msgstr "전체 점검 모드를 제어하거나 특정 플랫폼 영역을 잠급니다."
 
+msgid "Copied"
+msgstr "복사됨"
+
 msgid "Copy"
 msgstr "복사"
 
@@ -815,6 +839,14 @@ msgstr "기본 대상"
 msgid "Delete"
 msgstr "삭제"
 
+#, python-format
+msgid "Delete %(name)s? The file is removed from the archive and cannot be restored."
+msgstr "%(name)s을(를) 삭제하시겠습니까? 파일이 아카이브에서 제거되며 복구할 수 없습니다."
+
+#, python-format
+msgid "Delete backup %(name)s? This cannot be undone."
+msgstr "백업 %(name)s을(를) 삭제하시겠습니까? 되돌릴 수 없습니다."
+
 msgid "Delete folder"
 msgstr "폴더 삭제"
 
@@ -833,6 +865,12 @@ msgstr "로컬에서 삭제"
 msgid "Delete permanently"
 msgstr "영구 삭제"
 
+msgid "Delete this streamer folder and all recordings? This cannot be undone."
+msgstr "이 스트리머 폴더와 모든 녹화를 삭제하시겠습니까? 되돌릴 수 없습니다."
+
+msgid "Delete this video? The file is removed from the archive and cannot be restored."
+msgstr "이 동영상을 삭제하시겠습니까? 파일이 아카이브에서 제거되며 복구할 수 없습니다."
+
 msgid "Delete user"
 msgstr "사용자 삭제"
 
@@ -913,8 +951,8 @@ msgstr "TXT 다운로드"
 msgid "Download all"
 msgstr "모두 다운로드"
 
-msgid "Download all VODs?"
-msgstr "모든 VOD를 다운로드할까요?"
+msgid "Download all VODs of this streamer as one archive? This can take a while for large channels."
+msgstr "이 스트리머의 모든 VOD를 하나의 아카이브로 다운로드하시겠습니까? 큰 채널은 시간이 걸릴 수 있습니다."
 
 msgid "Download archive & VODs"
 msgstr "아카이브 및 VOD 다운로드"
@@ -933,7 +971,7 @@ msgstr "모든 VOD 다운로드를 백그라운드에서 시작했습니다."
 
 #, python-format
 msgid "Downloading... %(percent)s"
-msgstr "다운로드 중... %(percent)s"
+msgstr "다운로드 중… %(percent)s"
 
 #, python-format
 msgid "Drive quota active — do not press Play again (it extends the block). Seek back into the already loaded part, or wait about %(minutes)s min."
@@ -984,6 +1022,9 @@ msgstr "이메일 주소"
 msgid "Email address (optional)"
 msgstr "이메일 주소 (선택)"
 
+msgid "Emotes"
+msgstr "이모트"
+
 msgid "Empty = AWS. For R2, B2, Wasabi, MinIO etc. enter the S3 endpoint."
 msgstr "비워 두면 AWS. R2, B2, Wasabi, MinIO 등은 S3 엔드포인트를 입력하세요."
 
@@ -999,6 +1040,9 @@ msgstr "즉시 활성화"
 msgid "Enable maintenance mode"
 msgstr "점검 모드 켜기"
 
+msgid "Enable maintenance mode? Everyone except allowlisted users sees the maintenance page until you end it."
+msgstr "점검 모드를 켜시겠습니까? 허용 목록의 사용자를 제외한 모두가 점검을 끝낼 때까지 점검 페이지를 보게 됩니다."
+
 msgid "Enable recording"
 msgstr "녹화 켜기"
 
@@ -1096,6 +1140,9 @@ msgstr "오류:"
 msgid "Error: %(error)s"
 msgstr "오류: %(error)s"
 
+msgid "Everywhere"
+msgstr "모든 기기"
+
 msgid "Existing members of this group are automatically assigned to the default group <strong>Viewer</strong>."
 msgstr "이 그룹의 기존 멤버는 기본 그룹 <strong>Viewer</strong>에 자동으로 배정됩니다."
 
@@ -1112,10 +1159,7 @@ msgid "Exported by StreamVault"
 msgstr "StreamVault에서 내보냄"
 
 msgid "Extracting audio..."
-msgstr "오디오 추출 중..."
-
-msgid "FEATURED VOD"
-msgstr "추천 VOD"
+msgstr "오디오 추출 중…"
 
 msgid "Failed"
 msgstr "실패"
@@ -1126,6 +1170,9 @@ msgstr "빠름"
 msgid "Feature permissions"
 msgstr "기능 권한"
 
+msgid "Featured VOD"
+msgstr "추천 VOD"
+
 msgid "Featured highlight"
 msgstr "추천 하이라이트"
 
@@ -1156,8 +1203,11 @@ msgstr "파일을 업로드했습니다."
 msgid "Filter"
 msgstr "필터"
 
-msgid "Filter chat..."
-msgstr "채팅 필터..."
+msgid "Filter chat"
+msgstr "채팅 필터"
+
+msgid "Filter chat…"
+msgstr "채팅 필터…"
 
 msgid "First"
 msgstr "처음"
@@ -1435,19 +1485,6 @@ msgstr "7월"
 msgid "June"
 msgstr "6월"
 
-msgid "LIVE"
-msgstr "LIVE"
-
-#, python-format
-msgid "LIVE %(name)s (without Twitch login)"
-msgstr "LIVE %(name)s (Twitch 로그인 불필요)"
-
-msgid "LIVE & DISCORD ONLY"
-msgstr "라이브 및 DISCORD 전용"
-
-msgid "LIVE NOW"
-msgstr "지금 LIVE"
-
 msgid "Language"
 msgstr "언어"
 
@@ -1496,11 +1533,14 @@ msgstr "링크 복사됨:"
 msgid "Live"
 msgstr "라이브"
 
+msgid "Live & Discord only"
+msgstr "라이브 및 DISCORD 전용"
+
 msgid "Live & Discord only:"
 msgstr "라이브 및 Discord 전용:"
 
 msgid "Live (recovering...)"
-msgstr "라이브 (복구 중...)"
+msgstr "라이브 (복구 중…)"
 
 msgid "Live channels"
 msgstr "라이브 채널"
@@ -1535,8 +1575,8 @@ msgstr "라이브 스트림과 Discord 알림만, 디스크 녹화 없음"
 msgid "Live stream highlight"
 msgstr "라이브 스트림 하이라이트"
 
-msgid "Live stream is currently unavailable. Searching for stream..."
-msgstr "현재 라이브 스트림을 사용할 수 없습니다. 스트림 검색 중..."
+msgid "Live stream is currently unavailable. Searching for stream…"
+msgstr "현재 라이브 스트림을 사용할 수 없습니다. 스트림 검색 중…"
 
 msgid "Live stream not available."
 msgstr "라이브 스트림을 사용할 수 없습니다."
@@ -1553,6 +1593,10 @@ msgstr "라이브 시청"
 msgid "Live-only"
 msgstr "라이브 전용"
 
+#, python-format
+msgid "Live: %(name)s (without Twitch login)"
+msgstr "LIVE %(name)s (Twitch 로그인 불필요)"
+
 msgid "Load"
 msgstr "부하"
 
@@ -1563,7 +1607,7 @@ msgid "Loading chat…"
 msgstr "채팅 불러오는 중…"
 
 msgid "Loading model..."
-msgstr "모델 불러오는 중..."
+msgstr "모델 불러오는 중…"
 
 msgid "Loading streams…"
 msgstr "스트림 불러오는 중…"
@@ -1593,6 +1637,9 @@ msgstr "<strong>모바일 버전</strong> 잠금"
 msgid "Log out"
 msgstr "로그아웃"
 
+msgid "Log out everywhere"
+msgstr "모든 기기에서 로그아웃"
+
 msgid "Login"
 msgstr "로그인"
 
@@ -1605,6 +1652,9 @@ msgstr "로그인에 실패했습니다."
 msgid "MP4 check not possible"
 msgstr "MP4 검사 불가"
 
+msgid "Main navigation"
+msgstr "주 메뉴"
+
 msgid "Maintenance"
 msgstr "점검 중"
 
@@ -1670,6 +1720,9 @@ msgstr "메시지"
 msgid "Mobile live is temporarily disabled. Please use the desktop version or the installed app."
 msgstr "모바일 라이브가 일시적으로 비활성화되었습니다. 데스크톱 또는 설치된 앱을 이용하세요."
 
+msgid "Mods"
+msgstr "모더레이터"
+
 msgid "Monitored"
 msgstr "모니터링 중"
 
@@ -1691,9 +1744,6 @@ msgstr "네트워크 오류"
 msgid "Network error while loading streams."
 msgstr "스트림을 불러오는 중 네트워크 오류가 발생했습니다."
 
-msgid "Network error:"
-msgstr "네트워크 오류:"
-
 msgid "Network is back — reconnecting…"
 msgstr "네트워크 복구됨 — 다시 연결 중…"
 
@@ -1712,8 +1762,8 @@ msgstr "새 비밀번호 (변경하지 않으려면 비워 두기)"
 msgid "New password * (min. 8 characters)"
 msgstr "새 비밀번호 * (최소 8자)"
 
-msgid "New password..."
-msgstr "새 비밀번호..."
+msgid "New password…"
+msgstr "새 비밀번호…"
 
 msgid "New user"
 msgstr "새 사용자"
@@ -1736,8 +1786,8 @@ msgstr "Nextcloud, ownCloud, Hetzner Storage Box 또는 앱 비밀번호를 사
 msgid "No (self-signed only)"
 msgstr "아니요 (자체 서명 인증서만)"
 
-msgid "No VODs available in the archive"
-msgstr "아카이브에 VOD가 없습니다"
+msgid "No VODs yet. Recordings appear here automatically as soon as a monitored channel goes live."
+msgstr "아직 VOD가 없습니다. 모니터링 중인 채널이 방송을 시작하면 녹화가 여기에 자동으로 표시됩니다."
 
 msgid "No acceptances yet."
 msgstr "아직 동의 내역이 없습니다."
@@ -1772,6 +1822,9 @@ msgstr "백업이 없습니다."
 msgid "No badges received from Twitch."
 msgstr "Twitch에서 받은 배지가 없습니다."
 
+msgid "No channels are monitored yet."
+msgstr "아직 모니터링 중인 채널이 없습니다."
+
 msgid "No chat"
 msgstr "채팅 없음"
 
@@ -1812,9 +1865,6 @@ msgstr "모니터링 중인 Twitch 채널이 없습니다."
 msgid "No monitored Twitch channels. Add streamers under Streamers."
 msgstr "모니터링 중인 Twitch 채널이 없습니다. 스트리머 메뉴에서 스트리머를 추가하세요."
 
-msgid "No monitored channels configured."
-msgstr "모니터링 채널이 설정되지 않았습니다."
-
 msgid "No recently watched streams yet."
 msgstr "최근 시청한 스트림이 없습니다."
 
@@ -1869,30 +1919,15 @@ msgstr "OAuth 안내"
 msgid "OAuth state tokens require a strong VOD_SECRET_KEY."
 msgstr "OAuth 상태 토큰에는 강력한 VOD_SECRET_KEY가 필요합니다."
 
+msgid "OBS overlays"
+msgstr "OBS 오버레이"
+
 msgid "OFF (normal operation)"
 msgstr "꺼짐 (정상 운영)"
 
-msgid "OFFLINE"
-msgstr "오프라인"
-
 msgid "OK"
 msgstr "확인"
 
-msgid "ONLINE"
-msgstr "온라인"
-
-msgid "OPERATING MODE:"
-msgstr "운영 모드:"
-
-msgid "OPTION A: UPLOAD IMAGE FILE"
-msgstr "옵션 A: 이미지 파일 업로드"
-
-msgid "OPTION A: UPLOAD PROFILE PICTURE"
-msgstr "옵션 A: 프로필 사진 업로드"
-
-msgid "OPTION B: USE IMAGE URL"
-msgstr "옵션 B: 이미지 URL 사용"
-
 msgid "OR"
 msgstr "또는"
 
@@ -1918,6 +1953,9 @@ msgstr "오래된 순"
 msgid "OneDrive / Microsoft 365 via Microsoft Graph with OAuth 2.0."
 msgstr "OneDrive / Microsoft 365 (Microsoft Graph, OAuth 2.0)."
 
+msgid "Online"
+msgstr "온라인"
+
 msgid "Only after a successful upload and optional cloud verification."
 msgstr "업로드 성공 및 선택적 클라우드 확인 후에만."
 
@@ -1939,6 +1977,22 @@ msgstr "클립 열기"
 msgid "Open editor"
 msgstr "편집기 열기"
 
+#, python-format
+msgid "Open streamer %(name)s"
+msgstr "스트리머 %(name)s 열기"
+
+msgid "Operating mode"
+msgstr "운영 모드:"
+
+msgid "Option A: upload image file"
+msgstr "옵션 A: 이미지 파일 업로드"
+
+msgid "Option A: upload profile picture"
+msgstr "옵션 A: 프로필 사진 업로드"
+
+msgid "Option B: use image URL"
+msgstr "옵션 B: 이미지 URL 사용"
+
 msgid "Option sections"
 msgstr "옵션 섹션"
 
@@ -2049,6 +2103,9 @@ msgstr "재생할 수 없음"
 msgid "Player error — reconnecting…"
 msgstr "플레이어 오류 — 다시 연결 중…"
 
+msgid "Please confirm"
+msgstr "확인해 주세요"
+
 msgid "Please enter a name for the storage provider."
 msgstr "스토리지 공급자 이름을 입력하세요."
 
@@ -2099,10 +2156,10 @@ msgid "Private video and stream archive console."
 msgstr "비공개 동영상 및 스트림 아카이브 콘솔."
 
 msgid "Processing video (this may take a while)..."
-msgstr "동영상 처리 중 (시간이 걸릴 수 있음)..."
+msgstr "동영상 처리 중 (시간이 걸릴 수 있음)…"
 
 msgid "Processing video..."
-msgstr "동영상 처리 중..."
+msgstr "동영상 처리 중…"
 
 msgid "Profile picture reset to default."
 msgstr "프로필 사진을 기본값으로 재설정했습니다."
@@ -2147,8 +2204,8 @@ msgstr "공급자"
 msgid "Public link created:"
 msgstr "공개 링크를 만들었습니다:"
 
-msgid "Purpose of this user group..."
-msgstr "이 사용자 그룹의 용도..."
+msgid "Purpose of this user group…"
+msgstr "이 사용자 그룹의 용도…"
 
 msgid "Quality"
 msgstr "화질"
@@ -2162,22 +2219,12 @@ msgstr "대기열을 읽을 수 없음"
 msgid "Quiet"
 msgstr "조용"
 
-msgid "RECORDING"
-msgstr "녹화 중"
-
-msgid "RECORDING ACTIVE"
-msgstr "녹화 활성"
-
 msgid "Ready"
 msgstr "준비됨"
 
 msgid "Real-time stream error — reconnecting…"
 msgstr "실시간 스트림 오류 — 다시 연결 중…"
 
-#, python-format
-msgid "Really delete backup %(name)s?"
-msgstr "백업 %(name)s을(를) 삭제하시겠습니까?"
-
 msgid "Really delete file?"
 msgstr "파일을 삭제하시겠습니까?"
 
@@ -2187,28 +2234,15 @@ msgstr "클라우드 파일을 삭제하시겠습니까? 로컬 사본은 유지
 msgid "Really delete the local file? The cloud copy is kept."
 msgstr "로컬 파일을 삭제하시겠습니까? 클라우드 사본은 유지됩니다."
 
-msgid "Really delete?"
-msgstr "삭제하시겠습니까?"
-
-#, python-format
-msgid "Really remove channel %(name)s?"
-msgstr "채널 %(name)s을(를) 제거하시겠습니까?"
-
 msgid "Really remove the provider? The cloud files are kept."
 msgstr "공급자를 제거하시겠습니까? 클라우드 파일은 유지됩니다."
 
-msgid "Really rename the file?"
-msgstr "파일 이름을 변경하시겠습니까?"
-
 msgid "Really reset the custom banner and switch to the default?"
 msgstr "사용자 지정 배너를 재설정하고 기본값으로 바꾸시겠습니까?"
 
 msgid "Really reset the custom profile picture and switch to the default?"
 msgstr "사용자 지정 프로필 사진을 재설정하고 기본값으로 바꾸시겠습니까?"
 
-msgid "Really revoke this share?"
-msgstr "이 공유를 취소하시겠습니까?"
-
 msgid "Really stop the recording?"
 msgstr "녹화를 중지하시겠습니까?"
 
@@ -2218,6 +2252,9 @@ msgstr "최근 작업 오류"
 msgid "Recently watched"
 msgstr "최근 시청"
 
+msgid "Recommended browser-source URLs. Replace TOKEN with the value of TTS_OVERLAY_TOKEN or ALERT_OVERLAY_TOKEN. The part after # stays in OBS and reaches the server only as a request header, never in a log line."
+msgstr "브라우저 소스용 권장 URL입니다. TOKEN을 TTS_OVERLAY_TOKEN 또는 ALERT_OVERLAY_TOKEN 값으로 바꾸세요. # 뒤의 부분은 OBS에 남고 서버에는 요청 헤더로만 전달되며 로그에는 남지 않습니다."
+
 msgid "Recommended. Prevents data loss from incomplete uploads."
 msgstr "권장. 불완전한 업로드로 인한 데이터 손실을 방지합니다."
 
@@ -2236,6 +2273,9 @@ msgstr "녹화"
 msgid "Recording + live stream & Discord notification"
 msgstr "녹화 + 라이브 스트림 및 Discord 알림"
 
+msgid "Recording active"
+msgstr "녹화 활성"
+
 msgid "Recording disabled (live & Discord only)"
 msgstr "녹화 꺼짐 (라이브 및 Discord만)"
 
@@ -2285,8 +2325,8 @@ msgid "Remove channel"
 msgstr "채널 제거"
 
 #, python-format
-msgid "Remove channel %(name)s?"
-msgstr "채널 %(name)s을(를) 제거할까요?"
+msgid "Remove channel %(name)s? Monitoring stops; existing recordings stay in the archive."
+msgstr "채널 %(name)s을(를) 제거하시겠습니까? 모니터링이 중지되며 기존 녹화는 아카이브에 남습니다."
 
 msgid "Remove only the database entry?"
 msgstr "데이터베이스 항목만 제거할까요?"
@@ -2301,6 +2341,9 @@ msgstr "리먹스 작업을 시작했습니다. 진행 상황은 관리자 패
 msgid "Rename file"
 msgstr "파일 이름 변경"
 
+msgid "Rename the file? Existing links and shares to the old file name stop working."
+msgstr "파일 이름을 바꾸시겠습니까? 이전 파일 이름으로 된 링크와 공유는 더 이상 작동하지 않습니다."
+
 msgid "Renamed."
 msgstr "이름을 변경했습니다."
 
@@ -2326,6 +2369,9 @@ msgstr "다시 시작하지 못했습니다."
 msgid "Restart services"
 msgstr "서비스 다시 시작"
 
+msgid "Restart the recorder and chat logger now? Running recordings are interrupted for a few seconds."
+msgstr "지금 레코더와 채팅 로거를 다시 시작하시겠습니까? 진행 중인 녹화가 몇 초간 중단됩니다."
+
 msgid "Restore"
 msgstr "복원"
 
@@ -2342,6 +2388,9 @@ msgstr "재생 계속"
 msgid "Revoke"
 msgstr "취소"
 
+msgid "Revoke this share? The link stops working immediately."
+msgstr "이 공유를 취소하시겠습니까? 링크가 즉시 작동하지 않습니다."
+
 #, python-format
 msgid "Role access '%(slug)s' added."
 msgstr "역할 접근 권한 '%(slug)s'을(를) 추가했습니다."
@@ -2374,9 +2423,6 @@ msgstr "실행 중…"
 msgid "S3-compatible"
 msgstr "S3 호환"
 
-msgid "START"
-msgstr "시작"
-
 msgid "Safety migration:"
 msgstr "안전 마이그레이션:"
 
@@ -2430,10 +2476,7 @@ msgid "Saving transcript failed: %(error)s"
 msgstr "스크립트 저장 실패: %(error)s"
 
 msgid "Saving transcript..."
-msgstr "스크립트 저장 중..."
-
-msgid "Saving..."
-msgstr "저장 중..."
+msgstr "스크립트 저장 중…"
 
 msgid "Saving…"
 msgstr "저장 중…"
@@ -2441,8 +2484,8 @@ msgstr "저장 중…"
 msgid "Search"
 msgstr "검색"
 
-msgid "Search VODs, streamers or games..."
-msgstr "VOD, 스트리머, 게임 검색..."
+msgid "Search VODs, streamers or games…"
+msgstr "VOD, 스트리머, 게임 검색…"
 
 msgid "Search category"
 msgstr "카테고리 검색"
@@ -2453,8 +2496,11 @@ msgstr "카테고리 / 게임 검색…"
 msgid "Search failed."
 msgstr "검색에 실패했습니다."
 
-msgid "Search recordings (title, date, game)..."
-msgstr "녹화 검색 (제목, 날짜, 게임)..."
+msgid "Search recordings"
+msgstr "녹화 검색"
+
+msgid "Search recordings (title, date, game)…"
+msgstr "녹화 검색 (제목, 날짜, 게임)…"
 
 msgid "Search results"
 msgstr "검색 결과"
@@ -2465,21 +2511,21 @@ msgstr "스트리머 또는 채널 검색…"
 msgid "Search streamers"
 msgstr "스트리머 검색"
 
-msgid "Search term (e.g. player name, chat message, date)..."
-msgstr "검색어 (예: 플레이어 이름, 채팅 메시지, 날짜)..."
+msgid "Search term (e.g. player name, chat message, date)…"
+msgstr "검색어 (예: 플레이어 이름, 채팅 메시지, 날짜)…"
 
-msgid "Search user, email or group..."
-msgstr "사용자, 이메일, 그룹 검색..."
+msgid "Search user, email or group…"
+msgstr "사용자, 이메일, 그룹 검색…"
 
-msgid "Search..."
-msgstr "검색..."
-
-msgid "Searching for stream..."
-msgstr "스트림 검색 중..."
+msgid "Searching for stream…"
+msgstr "스트림 검색 중…"
 
 msgid "Searching…"
 msgstr "검색 중…"
 
+msgid "Search…"
+msgstr "검색…"
+
 msgid "Seconds after trigger"
 msgstr "트리거 후 초"
 
@@ -2569,9 +2615,21 @@ msgstr "내비게이션, 사이드바, 스트리머 카드에 표시됩니다."
 msgid "Sign in"
 msgstr "로그인"
 
+msgid "Sign out on every device? Every session of this account ends, including this one."
+msgstr "모든 기기에서 로그아웃하시겠습니까? 현재 세션을 포함해 이 계정의 모든 세션이 종료됩니다."
+
 msgid "Size"
 msgstr "크기"
 
+msgid "Skip to content"
+msgstr "본문으로 건너뛰기"
+
+msgid "Sort"
+msgstr "정렬"
+
+msgid "Sort order"
+msgstr "정렬 순서"
+
 msgid "Sound"
 msgstr "소리"
 
@@ -2613,7 +2671,7 @@ msgid "Starting"
 msgstr "시작 중"
 
 msgid "Starting download..."
-msgstr "다운로드 시작 중..."
+msgstr "다운로드 시작 중…"
 
 msgid "Status"
 msgstr "상태"
@@ -2652,6 +2710,9 @@ msgstr "스토리지 공급자를 찾을 수 없습니다."
 msgid "Storage providers"
 msgstr "스토리지 공급자"
 
+msgid "Storage usage"
+msgstr "저장 공간 사용량"
+
 #, python-format
 msgid "Storage: <strong>%(pct)s%%</strong>"
 msgstr "저장 공간: <strong>%(pct)s%%</strong>"
@@ -2713,6 +2774,9 @@ msgstr "스트리머, VOD 및 채팅 기록"
 msgid "Subfolder"
 msgstr "하위 폴더"
 
+msgid "Subs"
+msgstr "구독자"
+
 msgid "Success"
 msgstr "성공"
 
@@ -2800,6 +2864,9 @@ msgstr "약관 버전이 만료되었습니다 — 페이지를 새로고침하
 msgid "Test"
 msgstr "테스트"
 
+msgid "Text-to-speech overlay"
+msgstr "음성 변환 오버레이"
+
 msgid "Thanks for your understanding. Authorized users can sign in via the login page."
 msgstr "양해해 주셔서 감사합니다. 권한이 있는 사용자는 로그인 페이지에서 로그인할 수 있습니다."
 
@@ -2912,8 +2979,10 @@ msgstr "오늘 %(time)s"
 msgid "Too many VODs are playing right now. Live is not affected. Try again in a few minutes — a slot frees up as soon as someone closes the player."
 msgstr "지금 재생 중인 VOD가 너무 많습니다. 라이브에는 영향이 없습니다. 몇 분 후 다시 시도하세요 — 누군가 플레이어를 닫으면 자리가 납니다."
 
-msgid "Too many attempts. IP temporarily blocked. Please try again later."
-msgstr "시도 횟수가 너무 많습니다. IP가 일시적으로 차단되었습니다. 나중에 다시 시도하세요."
+#, python-format
+msgid "Too many login attempts. Please try again in %(num)d minute."
+msgid_plural "Too many login attempts. Please try again in %(num)d minutes."
+msgstr[0] "로그인 시도가 너무 많습니다. %(num)d분 후에 다시 시도하세요."
 
 msgid "Top streams are currently unavailable. Use monitored channels or the search."
 msgstr "인기 스트림을 현재 사용할 수 없습니다. 모니터링 채널이나 검색을 이용하세요."
@@ -2966,6 +3035,9 @@ msgstr "스크립트 완료"
 msgid "Transcript missing despite finished status"
 msgstr "완료 상태이지만 스크립트가 없음"
 
+msgid "Transcript progress"
+msgstr "자막 변환 진행률"
+
 msgid "Transcription cancelled"
 msgstr "스크립트 생성 취소됨"
 
@@ -2989,7 +3061,7 @@ msgid "Transcription queued in the worker. The result appears on the next page l
 msgstr "스크립트 생성이 워커 대기열에 추가되었습니다. 완료 후 다음 로드 시 결과가 표시됩니다."
 
 msgid "Transcription running..."
-msgstr "스크립트 생성 중..."
+msgstr "스크립트 생성 중…"
 
 msgid "Transcription timed out"
 msgstr "스크립트 생성 시간 초과"
@@ -3006,8 +3078,11 @@ msgstr "Twitch / 기본값"
 msgid "Twitch badge library synchronized."
 msgstr "Twitch 배지 라이브러리를 동기화했습니다."
 
-msgid "Twitch channel name..."
-msgstr "Twitch 채널 이름..."
+msgid "Twitch channel name"
+msgstr "Twitch 채널 이름"
+
+msgid "Twitch channel name…"
+msgstr "Twitch 채널 이름…"
 
 msgid "Twitch live chat"
 msgstr "Twitch 라이브 채팅"
@@ -3015,8 +3090,8 @@ msgstr "Twitch 라이브 채팅"
 msgid "Twitch live stream"
 msgstr "Twitch 라이브 스트림"
 
-msgid "Twitch name (e.g. shroud) or YouTube URL / @handle..."
-msgstr "Twitch 이름 (예: shroud) 또는 YouTube URL / @핸들..."
+msgid "Twitch name (e.g. shroud) or YouTube URL / @handle…"
+msgstr "Twitch 이름 (예: shroud) 또는 YouTube URL / @핸들…"
 
 msgid "Twitch or YouTube supported"
 msgstr "Twitch 또는 YouTube 지원"
@@ -3234,12 +3309,6 @@ msgstr "공개 대상:"
 msgid "Volume"
 msgstr "볼륨"
 
-msgid "WARNING: Do you want to permanently delete this streamer and all recordings?"
-msgstr "경고: 이 스트리머와 모든 녹화를 영구 삭제하시겠습니까?"
-
-msgid "WATCH LIVE"
-msgstr "라이브 시청"
-
 msgid "Waiting for server stream…"
 msgstr "서버 스트림 대기 중…"
 
@@ -3252,6 +3321,9 @@ msgstr "시청"
 msgid "Watch latest video"
 msgstr "최신 동영상 보기"
 
+msgid "Watch live"
+msgstr "라이브 시청"
+
 msgid "Watch now"
 msgstr "지금 시청"
 
@@ -3308,8 +3380,8 @@ msgstr "사용자 관리 권한이 없는 그룹으로 자신을 이동할 수 
 msgid "You have accepted version %(version)s."
 msgstr "버전 %(version)s에 동의했습니다."
 
-msgid "Your IP has been temporarily blocked. Please try again later."
-msgstr "IP가 일시적으로 차단되었습니다. 나중에 다시 시도하세요."
+msgid "Your IP has been blocked. Please contact the administrator."
+msgstr "IP가 차단되었습니다. 관리자에게 문의하세요."
 
 msgid "Your browser does not support the video tag."
 msgstr "브라우저가 video 태그를 지원하지 않습니다."
@@ -3353,12 +3425,12 @@ msgstr "예: VIP 아카이브"
 msgid "e.g. alice, bob"
 msgstr "예: alice, bob"
 
-msgid "e.g. john_doe"
-msgstr "예: hong_gildong"
-
 msgid "e.g. channel_name"
 msgstr "예: channel_name"
 
+msgid "e.g. john_doe"
+msgstr "예: hong_gildong"
+
 #, python-format
 msgid "effective from %(date)s"
 msgstr "%(date)s부터 적용"
diff --git a/WEBUI/translations/messages.pot b/WEBUI/translations/messages.pot
index 1f08211..0afcac0 100644
--- a/WEBUI/translations/messages.pot
+++ b/WEBUI/translations/messages.pot
@@ -1,15 +1,14 @@
-# Translations template for StreamVault.
-# Copyright (C) 2026 StreamVault contributors
-# This file is distributed under the same license as the StreamVault
-# project.
+# Translations template for PROJECT.
+# Copyright (C) 2026 ORGANIZATION
+# This file is distributed under the same license as the PROJECT project.
 # FIRST AUTHOR <EMAIL@ADDRESS>, 2026.
 #
 #, fuzzy
 msgid ""
 msgstr ""
-"Project-Id-Version: StreamVault VERSION\n"
+"Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2026-11-03 19:28+0100\n"
+"POT-Creation-Date: 2026-11-12 15:41+0100\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -75,9 +74,7 @@ msgid "%(count)s viewers"
 msgstr ""
 
 #, python-format
-msgid ""
-"%(day)s: %(total)s (login %(logins)s, pages %(pages)s, video %(media)s, "
-"chat %(chats)s)"
+msgid "%(day)s: %(total)s (login %(logins)s, pages %(pages)s, video %(media)s, chat %(chats)s)"
 msgstr ""
 
 #, python-format
@@ -188,12 +185,7 @@ msgstr ""
 msgid "A saved value is kept if the field is left empty."
 msgstr ""
 
-msgid "ACTIVE (locked)"
-msgstr ""
-
-msgid ""
-"AWS S3, Cloudflare R2, Backblaze B2, Wasabi, MinIO, Hetzner or any "
-"S3-compatible endpoint."
+msgid "AWS S3, Cloudflare R2, Backblaze B2, Wasabi, MinIO, Hetzner or any S3-compatible endpoint."
 msgstr ""
 
 msgid "Accept rules"
@@ -205,6 +197,9 @@ msgstr ""
 msgid "Account active (access allowed)"
 msgstr ""
 
+msgid "Accounts"
+msgstr ""
+
 msgid "Action"
 msgstr ""
 
@@ -217,22 +212,24 @@ msgstr ""
 msgid "Active"
 msgstr ""
 
+msgid "Active (locked)"
+msgstr ""
+
 msgid "Active shares"
 msgstr ""
 
-msgid ""
-"Active: new streams & folders are unlocked automatically. Below you can "
-"disable individual folders (uncheck them)."
+msgid "Active: new streams & folders are unlocked automatically. Below you can disable individual folders (uncheck them)."
 msgstr ""
 
-msgid ""
-"Active: new streams are unlocked automatically. Below you can disable / "
-"block individual folders."
+msgid "Active: new streams are unlocked automatically. Below you can disable / block individual folders."
 msgstr ""
 
 msgid "Actively monitored by the recorder core"
 msgstr ""
 
+msgid "Add a channel to record"
+msgstr ""
+
 msgid "Add channel"
 msgstr ""
 
@@ -242,6 +239,9 @@ msgstr ""
 msgid "Add provider"
 msgstr ""
 
+msgid "Add the first channel above"
+msgstr ""
+
 msgid "Addressing"
 msgstr ""
 
@@ -254,6 +254,9 @@ msgstr ""
 msgid "Admins only"
 msgstr ""
 
+msgid "Alert sound overlay"
+msgstr ""
+
 msgid "All"
 msgstr ""
 
@@ -279,9 +282,7 @@ msgstr ""
 msgid "All saved settings of this account will be deleted completely."
 msgstr ""
 
-msgid ""
-"All streamers are currently offline. Past broadcasts can be watched in "
-"the archive."
+msgid "All streamers are currently offline. Past broadcasts can be watched in the archive."
 msgstr ""
 
 msgid "All streams (+ auto-new)"
@@ -346,9 +347,7 @@ msgid "Archive: %(name)s"
 msgstr ""
 
 #, python-format
-msgid ""
-"Archive: <strong>%(channels)s</strong> channels • "
-"<strong>%(vods)s</strong> VODs"
+msgid "Archive: <strong>%(channels)s</strong> channels • <strong>%(vods)s</strong> VODs"
 msgstr ""
 
 msgid "Archived airtime"
@@ -394,9 +393,7 @@ msgstr ""
 msgid "Automatic (first active)"
 msgstr ""
 
-msgid ""
-"Automatic and manual backups (SQLite database, configuration and "
-"metadata)."
+msgid "Automatic and manual backups (SQLite database, configuration and metadata)."
 msgstr ""
 
 msgid "Automatically unlock future streams & folders"
@@ -499,21 +496,16 @@ msgstr ""
 msgid "Buffer:"
 msgstr ""
 
-msgid "Buffering..."
-msgstr ""
-
-msgid ""
-"By default nothing is uploaded or deleted automatically. Enable these "
-"features deliberately."
+msgid "Buffering…"
 msgstr ""
 
-msgid "CHANGE"
+msgid "By default nothing is uploaded or deleted automatically. Enable these features deliberately."
 msgstr ""
 
-msgid "CHANNEL MANAGEMENT (ADMIN)"
+msgid "Cancel"
 msgstr ""
 
-msgid "Cancel"
+msgid "Category"
 msgstr ""
 
 msgid "Category search failed."
@@ -522,6 +514,9 @@ msgstr ""
 msgid "Category search is currently unavailable."
 msgstr ""
 
+msgid "Change"
+msgstr ""
+
 msgid "Change banner"
 msgstr ""
 
@@ -537,6 +532,9 @@ msgstr ""
 msgid "Channel archive & recording metrics"
 msgstr ""
 
+msgid "Channel management (admin)"
+msgstr ""
+
 msgid "Channel not found."
 msgstr ""
 
@@ -593,10 +591,10 @@ msgstr ""
 msgid "Clear filters"
 msgstr ""
 
-msgid "Click to change password"
+msgid "Clip"
 msgstr ""
 
-msgid "Clip"
+msgid "Clip Editor"
 msgstr ""
 
 msgid "Clip URL is missing on this page."
@@ -674,9 +672,7 @@ msgstr ""
 msgid "Collapse chat"
 msgstr ""
 
-msgid ""
-"Configure dynamic permissions for streams, the video archive and channel "
-"access."
+msgid "Configure dynamic permissions for streams, the video archive and channel access."
 msgstr ""
 
 msgid "Configure recording channels and manage archive assignments"
@@ -685,6 +681,9 @@ msgstr ""
 msgid "Configured streamers & sources"
 msgstr ""
 
+msgid "Confirm"
+msgstr ""
+
 msgid "Connect account"
 msgstr ""
 
@@ -706,6 +705,9 @@ msgstr ""
 msgid "Connection failed"
 msgstr ""
 
+msgid "Connection failed. Check your network and try again."
+msgstr ""
+
 msgid "Connection lost — reconnecting…"
 msgstr ""
 
@@ -722,6 +724,9 @@ msgstr ""
 msgid "Control the global maintenance mode or lock individual platform areas."
 msgstr ""
 
+msgid "Copied"
+msgstr ""
+
 msgid "Copy"
 msgstr ""
 
@@ -838,6 +843,14 @@ msgstr ""
 msgid "Delete"
 msgstr ""
 
+#, python-format
+msgid "Delete %(name)s? The file is removed from the archive and cannot be restored."
+msgstr ""
+
+#, python-format
+msgid "Delete backup %(name)s? This cannot be undone."
+msgstr ""
+
 msgid "Delete folder"
 msgstr ""
 
@@ -856,6 +869,12 @@ msgstr ""
 msgid "Delete permanently"
 msgstr ""
 
+msgid "Delete this streamer folder and all recordings? This cannot be undone."
+msgstr ""
+
+msgid "Delete this video? The file is removed from the archive and cannot be restored."
+msgstr ""
+
 msgid "Delete user"
 msgstr ""
 
@@ -936,7 +955,7 @@ msgstr ""
 msgid "Download all"
 msgstr ""
 
-msgid "Download all VODs?"
+msgid "Download all VODs of this streamer as one archive? This can take a while for large channels."
 msgstr ""
 
 msgid "Download archive & VODs"
@@ -959,9 +978,7 @@ msgid "Downloading... %(percent)s"
 msgstr ""
 
 #, python-format
-msgid ""
-"Drive quota active — do not press Play again (it extends the block). Seek"
-" back into the already loaded part, or wait about %(minutes)s min."
+msgid "Drive quota active — do not press Play again (it extends the block). Seek back into the already loaded part, or wait about %(minutes)s min."
 msgstr ""
 
 msgid "Drop a file here or click to select"
@@ -979,9 +996,7 @@ msgstr ""
 msgid "Duration:"
 msgstr ""
 
-msgid ""
-"Dynamic user account and group management with granular stream and "
-"permission control"
+msgid "Dynamic user account and group management with granular stream and permission control"
 msgstr ""
 
 msgid "END"
@@ -1011,12 +1026,13 @@ msgstr ""
 msgid "Email address (optional)"
 msgstr ""
 
+msgid "Emotes"
+msgstr ""
+
 msgid "Empty = AWS. For R2, B2, Wasabi, MinIO etc. enter the S3 endpoint."
 msgstr ""
 
-msgid ""
-"Empty = us-east-1 for AWS. Cloudflare R2 uses 'auto'; other S3 providers "
-"use their own region."
+msgid "Empty = us-east-1 for AWS. Cloudflare R2 uses 'auto'; other S3 providers use their own region."
 msgstr ""
 
 msgid "Empty folder"
@@ -1028,6 +1044,9 @@ msgstr ""
 msgid "Enable maintenance mode"
 msgstr ""
 
+msgid "Enable maintenance mode? Everyone except allowlisted users sees the maintenance page until you end it."
+msgstr ""
+
 msgid "Enable recording"
 msgstr ""
 
@@ -1125,9 +1144,10 @@ msgstr ""
 msgid "Error: %(error)s"
 msgstr ""
 
-msgid ""
-"Existing members of this group are automatically assigned to the default "
-"group <strong>Viewer</strong>."
+msgid "Everywhere"
+msgstr ""
+
+msgid "Existing members of this group are automatically assigned to the default group <strong>Viewer</strong>."
 msgstr ""
 
 msgid "Exit fullscreen"
@@ -1145,9 +1165,6 @@ msgstr ""
 msgid "Extracting audio..."
 msgstr ""
 
-msgid "FEATURED VOD"
-msgstr ""
-
 msgid "Failed"
 msgstr ""
 
@@ -1157,6 +1174,9 @@ msgstr ""
 msgid "Feature permissions"
 msgstr ""
 
+msgid "Featured VOD"
+msgstr ""
+
 msgid "Featured highlight"
 msgstr ""
 
@@ -1187,7 +1207,10 @@ msgstr ""
 msgid "Filter"
 msgstr ""
 
-msgid "Filter chat..."
+msgid "Filter chat"
+msgstr ""
+
+msgid "Filter chat…"
 msgstr ""
 
 msgid "First"
@@ -1205,15 +1228,10 @@ msgstr ""
 msgid "Folder not found or invalid."
 msgstr ""
 
-msgid ""
-"For Google Drive, Dropbox and OneDrive this callback URL must be "
-"registered with the provider:"
+msgid "For Google Drive, Dropbox and OneDrive this callback URL must be registered with the provider:"
 msgstr ""
 
-msgid ""
-"For encrypted credential storage, VOD_SECRET_KEY (or "
-"STORAGE_ENCRYPTION_KEY) must be set to a strong, unique value (at least "
-"16 characters)."
+msgid "For encrypted credential storage, VOD_SECRET_KEY (or STORAGE_ENCRYPTION_KEY) must be set to a strong, unique value (at least 16 characters)."
 msgstr ""
 
 msgid "Forget"
@@ -1275,17 +1293,13 @@ msgstr ""
 msgid "Go to terms"
 msgstr ""
 
-msgid ""
-"Google Cloud Console → APIs & Services → Credentials → OAuth client (web "
-"application)."
+msgid "Google Cloud Console → APIs & Services → Credentials → OAuth client (web application)."
 msgstr ""
 
 msgid "Google Drive / Workspace Drive with OAuth 2.0 and resumable uploads."
 msgstr ""
 
-msgid ""
-"Google Drive, S3-compatible services, Dropbox, OneDrive and WebDAV. "
-"Credentials are stored with AES-GCM encryption."
+msgid "Google Drive, S3-compatible services, Dropbox, OneDrive and WebDAV. Credentials are stored with AES-GCM encryption."
 msgstr ""
 
 msgid "Group"
@@ -1305,9 +1319,7 @@ msgstr ""
 msgid "Group deleted"
 msgstr ""
 
-msgid ""
-"Group deleted successfully. Existing members were moved to the 'Viewer' "
-"group."
+msgid "Group deleted successfully. Existing members were moved to the 'Viewer' group."
 msgstr ""
 
 msgid "Group name"
@@ -1346,29 +1358,21 @@ msgstr ""
 msgid "Hotkey"
 msgstr ""
 
-msgid ""
-"House rules for the invite-only circle. No “official” framing — just "
-"binding terms of use."
+msgid "House rules for the invite-only circle. No “official” framing — just binding terms of use."
 msgstr ""
 
-msgid ""
-"I have read and accept the StreamVault rules. I understand that "
-"violations lead to immediate revocation of access."
+msgid "I have read and accept the StreamVault rules. I understand that violations lead to immediate revocation of access."
 msgstr ""
 
 #, python-format
-msgid ""
-"I have read and accept the terms (version %(version)s). Violations can "
-"lead to immediate revocation of access."
+msgid "I have read and accept the terms (version %(version)s). Violations can lead to immediate revocation of access."
 msgstr ""
 
 msgid "IP"
 msgstr ""
 
 #, python-format
-msgid ""
-"If needed, set %(var)s to your public HTTPS address so the URL matches "
-"exactly."
+msgid "If needed, set %(var)s to your public HTTPS address so the URL matches exactly."
 msgstr ""
 
 msgid "Image controls"
@@ -1378,9 +1382,7 @@ msgstr ""
 msgid "Inactive (%(count)s)"
 msgstr ""
 
-msgid ""
-"Inactive: new streams stay blocked. Only folders checked below are "
-"unlocked."
+msgid "Inactive: new streams stay blocked. Only folders checked below are unlocked."
 msgstr ""
 
 msgid "Include audio"
@@ -1389,9 +1391,7 @@ msgstr ""
 msgid "Info about the VOD…"
 msgstr ""
 
-msgid ""
-"Information on data processing within the invite-only circle. No legal "
-"notice."
+msgid "Information on data processing within the invite-only circle. No legal notice."
 msgstr ""
 
 msgid "Initial password"
@@ -1489,19 +1489,6 @@ msgstr ""
 msgid "June"
 msgstr ""
 
-msgid "LIVE"
-msgstr ""
-
-#, python-format
-msgid "LIVE %(name)s (without Twitch login)"
-msgstr ""
-
-msgid "LIVE & DISCORD ONLY"
-msgstr ""
-
-msgid "LIVE NOW"
-msgstr ""
-
 msgid "Language"
 msgstr ""
 
@@ -1550,6 +1537,9 @@ msgstr ""
 msgid "Live"
 msgstr ""
 
+msgid "Live & Discord only"
+msgstr ""
+
 msgid "Live & Discord only:"
 msgstr ""
 
@@ -1589,7 +1579,7 @@ msgstr ""
 msgid "Live stream highlight"
 msgstr ""
 
-msgid "Live stream is currently unavailable. Searching for stream..."
+msgid "Live stream is currently unavailable. Searching for stream…"
 msgstr ""
 
 msgid "Live stream not available."
@@ -1607,6 +1597,10 @@ msgstr ""
 msgid "Live-only"
 msgstr ""
 
+#, python-format
+msgid "Live: %(name)s (without Twitch login)"
+msgstr ""
+
 msgid "Load"
 msgstr ""
 
@@ -1647,6 +1641,9 @@ msgstr ""
 msgid "Log out"
 msgstr ""
 
+msgid "Log out everywhere"
+msgstr ""
+
 msgid "Login"
 msgstr ""
 
@@ -1659,6 +1656,9 @@ msgstr ""
 msgid "MP4 check not possible"
 msgstr ""
 
+msgid "Main navigation"
+msgstr ""
+
 msgid "Maintenance"
 msgstr ""
 
@@ -1721,9 +1721,10 @@ msgstr ""
 msgid "Message"
 msgstr ""
 
-msgid ""
-"Mobile live is temporarily disabled. Please use the desktop version or "
-"the installed app."
+msgid "Mobile live is temporarily disabled. Please use the desktop version or the installed app."
+msgstr ""
+
+msgid "Mods"
 msgstr ""
 
 msgid "Monitored"
@@ -1747,9 +1748,6 @@ msgstr ""
 msgid "Network error while loading streams."
 msgstr ""
 
-msgid "Network error:"
-msgstr ""
-
 msgid "Network is back — reconnecting…"
 msgstr ""
 
@@ -1768,7 +1766,7 @@ msgstr ""
 msgid "New password * (min. 8 characters)"
 msgstr ""
 
-msgid "New password..."
+msgid "New password…"
 msgstr ""
 
 msgid "New user"
@@ -1786,23 +1784,19 @@ msgstr ""
 msgid "Next page"
 msgstr ""
 
-msgid ""
-"Nextcloud, ownCloud, Hetzner Storage Box or any WebDAV server with an app"
-" password."
+msgid "Nextcloud, ownCloud, Hetzner Storage Box or any WebDAV server with an app password."
 msgstr ""
 
 msgid "No (self-signed only)"
 msgstr ""
 
-msgid "No VODs available in the archive"
+msgid "No VODs yet. Recordings appear here automatically as soon as a monitored channel goes live."
 msgstr ""
 
 msgid "No acceptances yet."
 msgstr ""
 
-msgid ""
-"No account yet? Accounts are issued by the administrators of this "
-"instance."
+msgid "No account yet? Accounts are issued by the administrators of this instance."
 msgstr ""
 
 msgid "No accounts match this filter."
@@ -1832,15 +1826,16 @@ msgstr ""
 msgid "No badges received from Twitch."
 msgstr ""
 
+msgid "No channels are monitored yet."
+msgstr ""
+
 msgid "No chat"
 msgstr ""
 
 msgid "No cloud storage configured yet. Add a provider or use the console:"
 msgstr ""
 
-msgid ""
-"No connection. As soon as the device is back online, the app continues "
-"loading the page normally."
+msgid "No connection. As soon as the device is back online, the app continues loading the page normally."
 msgstr ""
 
 msgid "No discovery streams right now."
@@ -1861,9 +1856,7 @@ msgstr ""
 msgid "No live streams among the monitored channels. Use the search."
 msgstr ""
 
-msgid ""
-"No local entries found for this search term. Press [Enter] to search the "
-"server."
+msgid "No local entries found for this search term. Press [Enter] to search the server."
 msgstr ""
 
 #, python-format
@@ -1876,9 +1869,6 @@ msgstr ""
 msgid "No monitored Twitch channels. Add streamers under Streamers."
 msgstr ""
 
-msgid "No monitored channels configured."
-msgstr ""
-
 msgid "No recently watched streams yet."
 msgstr ""
 
@@ -1903,9 +1893,7 @@ msgstr ""
 msgid "No transcript output received"
 msgstr ""
 
-msgid ""
-"No transcript yet. It is generated locally on the server and can take a "
-"while for long VODs."
+msgid "No transcript yet. It is generated locally on the server and can take a while for long VODs."
 msgstr ""
 
 msgid "No transcription active"
@@ -1935,30 +1923,15 @@ msgstr ""
 msgid "OAuth state tokens require a strong VOD_SECRET_KEY."
 msgstr ""
 
-msgid "OFF (normal operation)"
+msgid "OBS overlays"
 msgstr ""
 
-msgid "OFFLINE"
+msgid "OFF (normal operation)"
 msgstr ""
 
 msgid "OK"
 msgstr ""
 
-msgid "ONLINE"
-msgstr ""
-
-msgid "OPERATING MODE:"
-msgstr ""
-
-msgid "OPTION A: UPLOAD IMAGE FILE"
-msgstr ""
-
-msgid "OPTION A: UPLOAD PROFILE PICTURE"
-msgstr ""
-
-msgid "OPTION B: USE IMAGE URL"
-msgstr ""
-
 msgid "OR"
 msgstr ""
 
@@ -1984,6 +1957,9 @@ msgstr ""
 msgid "OneDrive / Microsoft 365 via Microsoft Graph with OAuth 2.0."
 msgstr ""
 
+msgid "Online"
+msgstr ""
+
 msgid "Only after a successful upload and optional cloud verification."
 msgstr ""
 
@@ -2005,6 +1981,22 @@ msgstr ""
 msgid "Open editor"
 msgstr ""
 
+#, python-format
+msgid "Open streamer %(name)s"
+msgstr ""
+
+msgid "Operating mode"
+msgstr ""
+
+msgid "Option A: upload image file"
+msgstr ""
+
+msgid "Option A: upload profile picture"
+msgstr ""
+
+msgid "Option B: use image URL"
+msgstr ""
+
 msgid "Option sections"
 msgstr ""
 
@@ -2038,15 +2030,11 @@ msgid "Page %(page)s of %(total)s (%(count)s VODs)"
 msgstr ""
 
 #, python-format
-msgid ""
-"Page <strong>%(page)s</strong> / <strong>%(pages)s</strong> (%(count)s "
-"VODs)"
+msgid "Page <strong>%(page)s</strong> / <strong>%(pages)s</strong> (%(count)s VODs)"
 msgstr ""
 
 #, python-format
-msgid ""
-"Page <strong>%(page)s</strong> of <strong>%(pages)s</strong> &bull; "
-"%(count)s VODs in quick access"
+msgid "Page <strong>%(page)s</strong> of <strong>%(pages)s</strong> &bull; %(count)s VODs in quick access"
 msgstr ""
 
 msgid "Page navigation"
@@ -2119,6 +2107,9 @@ msgstr ""
 msgid "Player error — reconnecting…"
 msgstr ""
 
+msgid "Please confirm"
+msgstr ""
+
 msgid "Please enter a name for the storage provider."
 msgstr ""
 
@@ -2217,7 +2208,7 @@ msgstr ""
 msgid "Public link created:"
 msgstr ""
 
-msgid "Purpose of this user group..."
+msgid "Purpose of this user group…"
 msgstr ""
 
 msgid "Quality"
@@ -2232,22 +2223,12 @@ msgstr ""
 msgid "Quiet"
 msgstr ""
 
-msgid "RECORDING"
-msgstr ""
-
-msgid "RECORDING ACTIVE"
-msgstr ""
-
 msgid "Ready"
 msgstr ""
 
 msgid "Real-time stream error — reconnecting…"
 msgstr ""
 
-#, python-format
-msgid "Really delete backup %(name)s?"
-msgstr ""
-
 msgid "Really delete file?"
 msgstr ""
 
@@ -2257,28 +2238,15 @@ msgstr ""
 msgid "Really delete the local file? The cloud copy is kept."
 msgstr ""
 
-msgid "Really delete?"
-msgstr ""
-
-#, python-format
-msgid "Really remove channel %(name)s?"
-msgstr ""
-
 msgid "Really remove the provider? The cloud files are kept."
 msgstr ""
 
-msgid "Really rename the file?"
-msgstr ""
-
 msgid "Really reset the custom banner and switch to the default?"
 msgstr ""
 
 msgid "Really reset the custom profile picture and switch to the default?"
 msgstr ""
 
-msgid "Really revoke this share?"
-msgstr ""
-
 msgid "Really stop the recording?"
 msgstr ""
 
@@ -2288,6 +2256,9 @@ msgstr ""
 msgid "Recently watched"
 msgstr ""
 
+msgid "Recommended browser-source URLs. Replace TOKEN with the value of TTS_OVERLAY_TOKEN or ALERT_OVERLAY_TOKEN. The part after # stays in OBS and reaches the server only as a request header, never in a log line."
+msgstr ""
+
 msgid "Recommended. Prevents data loss from incomplete uploads."
 msgstr ""
 
@@ -2306,6 +2277,9 @@ msgstr ""
 msgid "Recording + live stream & Discord notification"
 msgstr ""
 
+msgid "Recording active"
+msgstr ""
+
 msgid "Recording disabled (live & Discord only)"
 msgstr ""
 
@@ -2330,9 +2304,7 @@ msgid "Recording not available."
 msgstr ""
 
 #, python-format
-msgid ""
-"Recording stopped: %(count)s source(s) for %(archive)s disabled. The "
-"process will be terminated at the next check."
+msgid "Recording stopped: %(count)s source(s) for %(archive)s disabled. The process will be terminated at the next check."
 msgstr ""
 
 #, python-format
@@ -2357,7 +2329,7 @@ msgid "Remove channel"
 msgstr ""
 
 #, python-format
-msgid "Remove channel %(name)s?"
+msgid "Remove channel %(name)s? Monitoring stops; existing recordings stay in the archive."
 msgstr ""
 
 msgid "Remove only the database entry?"
@@ -2373,6 +2345,9 @@ msgstr ""
 msgid "Rename file"
 msgstr ""
 
+msgid "Rename the file? Existing links and shares to the old file name stop working."
+msgstr ""
+
 msgid "Renamed."
 msgstr ""
 
@@ -2398,6 +2373,9 @@ msgstr ""
 msgid "Restart services"
 msgstr ""
 
+msgid "Restart the recorder and chat logger now? Running recordings are interrupted for a few seconds."
+msgstr ""
+
 msgid "Restore"
 msgstr ""
 
@@ -2414,6 +2392,9 @@ msgstr ""
 msgid "Revoke"
 msgstr ""
 
+msgid "Revoke this share? The link stops working immediately."
+msgstr ""
+
 #, python-format
 msgid "Role access '%(slug)s' added."
 msgstr ""
@@ -2425,10 +2406,7 @@ msgstr ""
 msgid "Role access grant not found."
 msgstr ""
 
-msgid ""
-"Role model: full access (<code>admin</code>), archive viewer "
-"(<code>viewer</code>), live only (<code>live_only</code>) &amp; Discord "
-"member."
+msgid "Role model: full access (<code>admin</code>), archive viewer (<code>viewer</code>), live only (<code>live_only</code>) &amp; Discord member."
 msgstr ""
 
 msgid "Rules"
@@ -2449,9 +2427,6 @@ msgstr ""
 msgid "S3-compatible"
 msgstr ""
 
-msgid "START"
-msgstr ""
-
 msgid "Safety migration:"
 msgstr ""
 
@@ -2507,16 +2482,13 @@ msgstr ""
 msgid "Saving transcript..."
 msgstr ""
 
-msgid "Saving..."
-msgstr ""
-
 msgid "Saving…"
 msgstr ""
 
 msgid "Search"
 msgstr ""
 
-msgid "Search VODs, streamers or games..."
+msgid "Search VODs, streamers or games…"
 msgstr ""
 
 msgid "Search category"
@@ -2528,7 +2500,10 @@ msgstr ""
 msgid "Search failed."
 msgstr ""
 
-msgid "Search recordings (title, date, game)..."
+msgid "Search recordings"
+msgstr ""
+
+msgid "Search recordings (title, date, game)…"
 msgstr ""
 
 msgid "Search results"
@@ -2540,19 +2515,19 @@ msgstr ""
 msgid "Search streamers"
 msgstr ""
 
-msgid "Search term (e.g. player name, chat message, date)..."
+msgid "Search term (e.g. player name, chat message, date)…"
 msgstr ""
 
-msgid "Search user, email or group..."
+msgid "Search user, email or group…"
 msgstr ""
 
-msgid "Search..."
+msgid "Searching for stream…"
 msgstr ""
 
-msgid "Searching for stream..."
+msgid "Searching…"
 msgstr ""
 
-msgid "Searching…"
+msgid "Search…"
 msgstr ""
 
 msgid "Seconds after trigger"
@@ -2602,9 +2577,7 @@ msgid "Set"
 msgstr ""
 
 #, python-format
-msgid ""
-"Set %(key)s (at least 16 characters) or %(alt_key)s before credentials "
-"are saved."
+msgid "Set %(key)s (at least 16 characters) or %(alt_key)s before credentials are saved."
 msgstr ""
 
 msgid "Set end to current position"
@@ -2637,9 +2610,7 @@ msgstr ""
 msgid "Sharing failed:"
 msgstr ""
 
-msgid ""
-"Short rules / Discord house rules. Part of the terms; accepted together "
-"with the consent below."
+msgid "Short rules / Discord house rules. Part of the terms; accepted together with the consent below."
 msgstr ""
 
 msgid "Shown in the navigation, sidebar and on streamer cards."
@@ -2648,9 +2619,21 @@ msgstr ""
 msgid "Sign in"
 msgstr ""
 
+msgid "Sign out on every device? Every session of this account ends, including this one."
+msgstr ""
+
 msgid "Size"
 msgstr ""
 
+msgid "Skip to content"
+msgstr ""
+
+msgid "Sort"
+msgstr ""
+
+msgid "Sort order"
+msgstr ""
+
 msgid "Sound"
 msgstr ""
 
@@ -2664,9 +2647,7 @@ msgstr ""
 msgid "Source %(name)s not found."
 msgstr ""
 
-msgid ""
-"Stale lock removed, transcription queued in the worker. The result "
-"appears on the next page load after completion."
+msgid "Stale lock removed, transcription queued in the worker. The result appears on the next page load after completion."
 msgstr ""
 
 msgid "Start"
@@ -2699,9 +2680,7 @@ msgstr ""
 msgid "Status"
 msgstr ""
 
-msgid ""
-"Status, progress and actions of the most recently synced files. “Forget” "
-"only removes the database entry."
+msgid "Status, progress and actions of the most recently synced files. “Forget” only removes the database entry."
 msgstr ""
 
 msgid "Status:"
@@ -2735,6 +2714,9 @@ msgstr ""
 msgid "Storage providers"
 msgstr ""
 
+msgid "Storage usage"
+msgstr ""
+
 #, python-format
 msgid "Storage: <strong>%(pct)s%%</strong>"
 msgstr ""
@@ -2763,14 +2745,10 @@ msgstr ""
 msgid "Stream stopped — reconnecting…"
 msgstr ""
 
-msgid ""
-"StreamVault is temporarily unavailable due to maintenance. Please be "
-"patient — the site will be back soon."
+msgid "StreamVault is temporarily unavailable due to maintenance. Please be patient — the site will be back soon."
 msgstr ""
 
-msgid ""
-"StreamVault is temporarily unavailable due to ongoing work. Please be "
-"patient — the site will be available again later."
+msgid "StreamVault is temporarily unavailable due to ongoing work. Please be patient — the site will be available again later."
 msgstr ""
 
 msgid "Streamer"
@@ -2800,6 +2778,9 @@ msgstr ""
 msgid "Subfolder"
 msgstr ""
 
+msgid "Subs"
+msgstr ""
+
 msgid "Success"
 msgstr ""
 
@@ -2869,18 +2850,13 @@ msgid "Terms & rules"
 msgstr ""
 
 #, python-format
-msgid ""
-"Terms (version %(terms)s) including house rules (%(rules)s) not yet "
-"accepted — approval only after consent on the website or on re-"
-"registration."
+msgid "Terms (version %(terms)s) including house rules (%(rules)s) not yet accepted — approval only after consent on the website or on re-registration."
 msgstr ""
 
 msgid "Terms accepted. Continuing to the dashboard…"
 msgstr ""
 
-msgid ""
-"Terms of use and house rules for the invite-only circle. No usage rights "
-"towards rights holders or platforms."
+msgid "Terms of use and house rules for the invite-only circle. No usage rights towards rights holders or platforms."
 msgstr ""
 
 msgid "Terms version outdated or not accepted. Acceptance required at /agb."
@@ -2892,14 +2868,13 @@ msgstr ""
 msgid "Test"
 msgstr ""
 
-msgid ""
-"Thanks for your understanding. Authorized users can sign in via the login"
-" page."
+msgid "Text-to-speech overlay"
 msgstr ""
 
-msgid ""
-"The 'can_manage_users' permission cannot be removed from the "
-"Administrator group."
+msgid "Thanks for your understanding. Authorized users can sign in via the login page."
+msgstr ""
+
+msgid "The 'can_manage_users' permission cannot be removed from the Administrator group."
 msgstr ""
 
 msgid "The OAuth link has expired. Please start again."
@@ -2923,9 +2898,7 @@ msgstr ""
 msgid "The local file has already been removed. Please restore it first."
 msgstr ""
 
-msgid ""
-"The mobile version of StreamVault is currently under maintenance. Please "
-"use the desktop version."
+msgid "The mobile version of StreamVault is currently under maintenance. Please use the desktop version."
 msgstr ""
 
 msgid "The name of system groups cannot be changed."
@@ -2946,14 +2919,10 @@ msgstr ""
 msgid "The provider name must be at most 80 characters long."
 msgstr ""
 
-msgid ""
-"The provider type cannot be changed while archive objects are assigned. "
-"Create a new provider instead."
+msgid "The provider type cannot be changed while archive objects are assigned. Create a new provider instead."
 msgstr ""
 
-msgid ""
-"The recorder worker performs the sync. Unchanged files that were already "
-"uploaded are skipped."
+msgid "The recorder worker performs the sync. Unchanged files that were already uploaded are skipped."
 msgstr ""
 
 msgid "The remote path must not be empty."
@@ -2962,17 +2931,13 @@ msgstr ""
 msgid "The selected default provider does not exist."
 msgstr ""
 
-msgid ""
-"The selected default provider is disabled. Enable it first or choose "
-"another provider."
+msgid "The selected default provider is disabled. Enable it first or choose another provider."
 msgstr ""
 
 msgid "The selected group does not exist."
 msgstr ""
 
-msgid ""
-"The system administrator's password can only be changed via environment "
-"variables."
+msgid "The system administrator's password can only be changed via environment variables."
 msgstr ""
 
 msgid "The video file could not be loaded or is still being transcoded."
@@ -2996,9 +2961,7 @@ msgstr ""
 msgid "Time (UTC)"
 msgstr ""
 
-msgid ""
-"Tip: a shared archive folder combines Twitch and YouTube streams of the "
-"same streamer."
+msgid "Tip: a shared archive folder combines Twitch and YouTube streams of the same streamer."
 msgstr ""
 
 msgid "Title & description"
@@ -3017,17 +2980,16 @@ msgstr ""
 msgid "Today, %(time)s"
 msgstr ""
 
-msgid ""
-"Too many VODs are playing right now. Live is not affected. Try again in a"
-" few minutes — a slot frees up as soon as someone closes the player."
+msgid "Too many VODs are playing right now. Live is not affected. Try again in a few minutes — a slot frees up as soon as someone closes the player."
 msgstr ""
 
-msgid "Too many attempts. IP temporarily blocked. Please try again later."
-msgstr ""
+#, python-format
+msgid "Too many login attempts. Please try again in %(num)d minute."
+msgid_plural "Too many login attempts. Please try again in %(num)d minutes."
+msgstr[0] ""
+msgstr[1] ""
 
-msgid ""
-"Top streams are currently unavailable. Use monitored channels or the "
-"search."
+msgid "Top streams are currently unavailable. Use monitored channels or the search."
 msgstr ""
 
 msgid "Total in period"
@@ -3078,6 +3040,9 @@ msgstr ""
 msgid "Transcript missing despite finished status"
 msgstr ""
 
+msgid "Transcript progress"
+msgstr ""
+
 msgid "Transcription cancelled"
 msgstr ""
 
@@ -3097,9 +3062,7 @@ msgstr ""
 msgid "Transcription is already running. Please reload later."
 msgstr ""
 
-msgid ""
-"Transcription queued in the worker. The result appears on the next page "
-"load after completion."
+msgid "Transcription queued in the worker. The result appears on the next page load after completion."
 msgstr ""
 
 msgid "Transcription running..."
@@ -3120,7 +3083,10 @@ msgstr ""
 msgid "Twitch badge library synchronized."
 msgstr ""
 
-msgid "Twitch channel name..."
+msgid "Twitch channel name"
+msgstr ""
+
+msgid "Twitch channel name…"
 msgstr ""
 
 msgid "Twitch live chat"
@@ -3129,7 +3095,7 @@ msgstr ""
 msgid "Twitch live stream"
 msgstr ""
 
-msgid "Twitch name (e.g. shroud) or YouTube URL / @handle..."
+msgid "Twitch name (e.g. shroud) or YouTube URL / @handle…"
 msgstr ""
 
 msgid "Twitch or YouTube supported"
@@ -3262,18 +3228,14 @@ msgstr ""
 msgid "Username is required."
 msgstr ""
 
-msgid ""
-"Username must be 3-32 alphanumeric characters (hyphens and underscores "
-"allowed)."
+msgid "Username must be 3-32 alphanumeric characters (hyphens and underscores allowed)."
 msgstr ""
 
 msgid "Users & groups"
 msgstr ""
 
 #, python-format
-msgid ""
-"Users A–Z · last %(days)s days (%(since)s – %(until)s). Heatmap = "
-"presence, bars = login/pages/video/chat per day."
+msgid "Users A–Z · last %(days)s days (%(since)s – %(until)s). Heatmap = presence, bars = login/pages/video/chat per day."
 msgstr ""
 
 msgid "VOD access grants are currently only available for members."
@@ -3292,9 +3254,7 @@ msgstr ""
 msgid "VOD recordings (%(count)s)"
 msgstr ""
 
-msgid ""
-"VOD_SECRET_KEY must be set to a strong value before credentials can be "
-"stored."
+msgid "VOD_SECRET_KEY must be set to a strong value before credentials can be stored."
 msgstr ""
 
 msgid "VODs are recorded to disk"
@@ -3354,14 +3314,6 @@ msgstr ""
 msgid "Volume"
 msgstr ""
 
-msgid ""
-"WARNING: Do you want to permanently delete this streamer and all "
-"recordings?"
-msgstr ""
-
-msgid "WATCH LIVE"
-msgstr ""
-
 msgid "Waiting for server stream…"
 msgstr ""
 
@@ -3374,6 +3326,9 @@ msgstr ""
 msgid "Watch latest video"
 msgstr ""
 
+msgid "Watch live"
+msgstr ""
+
 msgid "Watch now"
 msgstr ""
 
@@ -3392,9 +3347,7 @@ msgstr ""
 msgid "WebDAV base URL must not contain a query or fragment."
 msgstr ""
 
-msgid ""
-"WebDAV base URL must not contain credentials; use the username and "
-"password fields."
+msgid "WebDAV base URL must not contain credentials; use the username and password fields."
 msgstr ""
 
 msgid "Webhook active."
@@ -3432,7 +3385,7 @@ msgstr ""
 msgid "You have accepted version %(version)s."
 msgstr ""
 
-msgid "Your IP has been temporarily blocked. Please try again later."
+msgid "Your IP has been blocked. Please contact the administrator."
 msgstr ""
 
 msgid "Your browser does not support the video tag."
@@ -3465,9 +3418,7 @@ msgstr ""
 msgid "done – please reload the page"
 msgstr ""
 
-msgid ""
-"drive.file = only files created by StreamVault (recommended). For "
-"existing folders, use https://www.googleapis.com/auth/drive if needed."
+msgid "drive.file = only files created by StreamVault (recommended). For existing folders, use https://www.googleapis.com/auth/drive if needed."
 msgstr ""
 
 msgid "e.g. Google Drive archive"
@@ -3479,10 +3430,10 @@ msgstr ""
 msgid "e.g. alice, bob"
 msgstr ""
 
-msgid "e.g. john_doe"
+msgid "e.g. channel_name"
 msgstr ""
 
-msgid "e.g. channel_name"
+msgid "e.g. john_doe"
 msgstr ""
 
 #, python-format
diff --git a/WEBUI/translations/nl/LC_MESSAGES/messages.mo b/WEBUI/translations/nl/LC_MESSAGES/messages.mo
index 1d8665e..67c9ad2 100644
Binary files a/WEBUI/translations/nl/LC_MESSAGES/messages.mo and b/WEBUI/translations/nl/LC_MESSAGES/messages.mo differ
diff --git a/WEBUI/translations/nl/LC_MESSAGES/messages.po b/WEBUI/translations/nl/LC_MESSAGES/messages.po
index 3d0d81a..e0ee794 100644
--- a/WEBUI/translations/nl/LC_MESSAGES/messages.po
+++ b/WEBUI/translations/nl/LC_MESSAGES/messages.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: StreamVault VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2026-11-03 19:28+0100\n"
+"POT-Creation-Date: 2026-11-12 15:41+0100\n"
 "PO-Revision-Date: 2026-11-03 19:31+0100\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language: nl\n"
@@ -187,9 +187,6 @@ msgstr "Er loopt al een herstel."
 msgid "A saved value is kept if the field is left empty."
 msgstr "Een opgeslagen waarde blijft behouden als het veld leeg blijft."
 
-msgid "ACTIVE (locked)"
-msgstr "ACTIEF (vergrendeld)"
-
 msgid "AWS S3, Cloudflare R2, Backblaze B2, Wasabi, MinIO, Hetzner or any S3-compatible endpoint."
 msgstr "AWS S3, Cloudflare R2, Backblaze B2, Wasabi, MinIO, Hetzner of elk S3-compatibel endpoint."
 
@@ -202,6 +199,9 @@ msgstr "Voorwaarden accepteren"
 msgid "Account active (access allowed)"
 msgstr "Account actief (toegang toegestaan)"
 
+msgid "Accounts"
+msgstr "Accounts"
+
 msgid "Action"
 msgstr "Actie"
 
@@ -214,6 +214,9 @@ msgstr "Account direct activeren"
 msgid "Active"
 msgstr "Actief"
 
+msgid "Active (locked)"
+msgstr "ACTIEF (vergrendeld)"
+
 msgid "Active shares"
 msgstr "Actieve deelacties"
 
@@ -226,6 +229,9 @@ msgstr "Actief: nieuwe streams worden automatisch vrijgegeven. Hieronder kun je
 msgid "Actively monitored by the recorder core"
 msgstr "Actief bewaakt door de recorder-kern"
 
+msgid "Add a channel to record"
+msgstr "Kanaal toevoegen om op te nemen"
+
 msgid "Add channel"
 msgstr "Kanaal toevoegen"
 
@@ -235,6 +241,9 @@ msgstr "Nieuw kanaal toevoegen"
 msgid "Add provider"
 msgstr "Provider toevoegen"
 
+msgid "Add the first channel above"
+msgstr "Voeg hierboven het eerste kanaal toe"
+
 msgid "Addressing"
 msgstr "Adressering"
 
@@ -247,6 +256,9 @@ msgstr "Adminbeheer"
 msgid "Admins only"
 msgstr "Alleen admins"
 
+msgid "Alert sound overlay"
+msgstr "Overlay voor meldingsgeluiden"
+
 msgid "All"
 msgstr "Alle"
 
@@ -486,27 +498,27 @@ msgstr "Buffer is nog kort — het clipvenster groeit mee."
 msgid "Buffer:"
 msgstr "Buffer:"
 
-msgid "Buffering..."
-msgstr "Bufferen..."
+msgid "Buffering…"
+msgstr "Bufferen…"
 
 msgid "By default nothing is uploaded or deleted automatically. Enable these features deliberately."
 msgstr "Standaard wordt er niets automatisch geüpload of verwijderd. Schakel deze functies bewust in."
 
-msgid "CHANGE"
-msgstr "WIJZIGEN"
-
-msgid "CHANNEL MANAGEMENT (ADMIN)"
-msgstr "KANAALBEHEER (ADMIN)"
-
 msgid "Cancel"
 msgstr "Annuleren"
 
+msgid "Category"
+msgstr "Categorie"
+
 msgid "Category search failed."
 msgstr "Zoeken naar categorie mislukt."
 
 msgid "Category search is currently unavailable."
 msgstr "Zoeken naar categorie is momenteel niet beschikbaar."
 
+msgid "Change"
+msgstr "Wijzigen"
+
 msgid "Change banner"
 msgstr "Banner wijzigen"
 
@@ -522,6 +534,9 @@ msgstr "Kanaalacties"
 msgid "Channel archive & recording metrics"
 msgstr "Kanaalarchief & opnamestatistieken"
 
+msgid "Channel management (admin)"
+msgstr "Kanaalbeheer (admin)"
+
 msgid "Channel not found."
 msgstr "Kanaal niet gevonden."
 
@@ -578,12 +593,12 @@ msgstr "Opschoning in wachtrij (taak #%(task)s)."
 msgid "Clear filters"
 msgstr "Filters wissen"
 
-msgid "Click to change password"
-msgstr "Klik om wachtwoord te wijzigen"
-
 msgid "Clip"
 msgstr "Clip"
 
+msgid "Clip Editor"
+msgstr "Clipeditor"
+
 msgid "Clip URL is missing on this page."
 msgstr "Clip-URL ontbreekt op deze pagina."
 
@@ -668,6 +683,9 @@ msgstr "Opnamekanalen configureren en archieftoewijzingen beheren"
 msgid "Configured streamers & sources"
 msgstr "Geconfigureerde streamers & bronnen"
 
+msgid "Confirm"
+msgstr "Bevestigen"
+
 msgid "Connect account"
 msgstr "Account koppelen"
 
@@ -689,6 +707,9 @@ msgstr "Verbinding OK"
 msgid "Connection failed"
 msgstr "Verbinding mislukt"
 
+msgid "Connection failed. Check your network and try again."
+msgstr "Verbinding mislukt. Controleer je netwerk en probeer het opnieuw."
+
 msgid "Connection lost — reconnecting…"
 msgstr "Verbinding verbroken — opnieuw verbinden…"
 
@@ -705,6 +726,9 @@ msgstr "Configuratiescherm"
 msgid "Control the global maintenance mode or lock individual platform areas."
 msgstr "Beheer de globale onderhoudsmodus of vergrendel afzonderlijke onderdelen van het platform."
 
+msgid "Copied"
+msgstr "Gekopieerd"
+
 msgid "Copy"
 msgstr "Kopiëren"
 
@@ -821,6 +845,14 @@ msgstr "Standaarddoel"
 msgid "Delete"
 msgstr "Verwijderen"
 
+#, python-format
+msgid "Delete %(name)s? The file is removed from the archive and cannot be restored."
+msgstr "%(name)s verwijderen? Het bestand wordt uit het archief verwijderd en kan niet worden hersteld."
+
+#, python-format
+msgid "Delete backup %(name)s? This cannot be undone."
+msgstr "Back-up %(name)s verwijderen? Dit kan niet ongedaan worden gemaakt."
+
 msgid "Delete folder"
 msgstr "Map verwijderen"
 
@@ -839,6 +871,12 @@ msgstr "Lokaal verwijderen"
 msgid "Delete permanently"
 msgstr "Definitief verwijderen"
 
+msgid "Delete this streamer folder and all recordings? This cannot be undone."
+msgstr "De map van deze streamer en alle opnames verwijderen? Dit kan niet ongedaan worden gemaakt."
+
+msgid "Delete this video? The file is removed from the archive and cannot be restored."
+msgstr "Deze video verwijderen? Het bestand wordt uit het archief verwijderd en kan niet worden hersteld."
+
 msgid "Delete user"
 msgstr "Gebruiker verwijderen"
 
@@ -919,8 +957,8 @@ msgstr "TXT downloaden"
 msgid "Download all"
 msgstr "Alles downloaden"
 
-msgid "Download all VODs?"
-msgstr "Alle VOD's downloaden?"
+msgid "Download all VODs of this streamer as one archive? This can take a while for large channels."
+msgstr "Alle VOD’s van deze streamer als één archief downloaden? Bij grote kanalen kan dat even duren."
 
 msgid "Download archive & VODs"
 msgstr "Archief & VOD's downloaden"
@@ -939,7 +977,7 @@ msgstr "Download van alle VOD's op de achtergrond gestart."
 
 #, python-format
 msgid "Downloading... %(percent)s"
-msgstr "Downloaden... %(percent)s"
+msgstr "Downloaden… %(percent)s"
 
 #, python-format
 msgid "Drive quota active — do not press Play again (it extends the block). Seek back into the already loaded part, or wait about %(minutes)s min."
@@ -990,6 +1028,9 @@ msgstr "E-mailadres"
 msgid "Email address (optional)"
 msgstr "E-mailadres (optioneel)"
 
+msgid "Emotes"
+msgstr "Emotes"
+
 msgid "Empty = AWS. For R2, B2, Wasabi, MinIO etc. enter the S3 endpoint."
 msgstr "Leeg = AWS. Vul voor R2, B2, Wasabi, MinIO enz. het S3-endpoint in."
 
@@ -1005,6 +1046,9 @@ msgstr "Direct inschakelen"
 msgid "Enable maintenance mode"
 msgstr "Onderhoudsmodus inschakelen"
 
+msgid "Enable maintenance mode? Everyone except allowlisted users sees the maintenance page until you end it."
+msgstr "Onderhoudsmodus inschakelen? Iedereen behalve toegestane gebruikers ziet de onderhoudspagina tot je hem beëindigt."
+
 msgid "Enable recording"
 msgstr "Opname inschakelen"
 
@@ -1102,6 +1146,9 @@ msgstr "Fout:"
 msgid "Error: %(error)s"
 msgstr "Fout: %(error)s"
 
+msgid "Everywhere"
+msgstr "Overal"
+
 msgid "Existing members of this group are automatically assigned to the default group <strong>Viewer</strong>."
 msgstr "Bestaande leden van deze groep worden automatisch toegewezen aan de standaardgroep <strong>Viewer</strong>."
 
@@ -1118,10 +1165,7 @@ msgid "Exported by StreamVault"
 msgstr "Geëxporteerd door StreamVault"
 
 msgid "Extracting audio..."
-msgstr "Audio extraheren..."
-
-msgid "FEATURED VOD"
-msgstr "UITGELICHTE VOD"
+msgstr "Audio extraheren…"
 
 msgid "Failed"
 msgstr "Mislukt"
@@ -1132,6 +1176,9 @@ msgstr "Snel"
 msgid "Feature permissions"
 msgstr "Functierechten"
 
+msgid "Featured VOD"
+msgstr "Uitgelichte vod"
+
 msgid "Featured highlight"
 msgstr "Uitgelicht hoogtepunt"
 
@@ -1162,8 +1209,11 @@ msgstr "Bestand is geüpload."
 msgid "Filter"
 msgstr "Filteren"
 
-msgid "Filter chat..."
-msgstr "Chat filteren..."
+msgid "Filter chat"
+msgstr "Chat filteren"
+
+msgid "Filter chat…"
+msgstr "Chat filteren…"
 
 msgid "First"
 msgstr "Eerste"
@@ -1441,19 +1491,6 @@ msgstr "juli"
 msgid "June"
 msgstr "juni"
 
-msgid "LIVE"
-msgstr "LIVE"
-
-#, python-format
-msgid "LIVE %(name)s (without Twitch login)"
-msgstr "LIVE %(name)s (zonder Twitch-login)"
-
-msgid "LIVE & DISCORD ONLY"
-msgstr "ALLEEN LIVE & DISCORD"
-
-msgid "LIVE NOW"
-msgstr "NU LIVE"
-
 msgid "Language"
 msgstr "Taal"
 
@@ -1502,11 +1539,14 @@ msgstr "Link gekopieerd:"
 msgid "Live"
 msgstr "Live"
 
+msgid "Live & Discord only"
+msgstr "Alleen live & discord"
+
 msgid "Live & Discord only:"
 msgstr "Alleen live & Discord:"
 
 msgid "Live (recovering...)"
-msgstr "Live (herstellen...)"
+msgstr "Live (herstellen…)"
 
 msgid "Live channels"
 msgstr "Livekanalen"
@@ -1541,8 +1581,8 @@ msgstr "Alleen livestream en Discord-meldingen, geen opname op schijf"
 msgid "Live stream highlight"
 msgstr "Hoogtepunt van de livestream"
 
-msgid "Live stream is currently unavailable. Searching for stream..."
-msgstr "Livestream is momenteel niet beschikbaar. Stream wordt gezocht..."
+msgid "Live stream is currently unavailable. Searching for stream…"
+msgstr "Livestream is momenteel niet beschikbaar. Stream wordt gezocht…"
 
 msgid "Live stream not available."
 msgstr "Livestream niet beschikbaar."
@@ -1559,6 +1599,10 @@ msgstr "Live kijken"
 msgid "Live-only"
 msgstr "Alleen live"
 
+#, python-format
+msgid "Live: %(name)s (without Twitch login)"
+msgstr "LIVE %(name)s (zonder Twitch-login)"
+
 msgid "Load"
 msgstr "Belasting"
 
@@ -1569,7 +1613,7 @@ msgid "Loading chat…"
 msgstr "Chat laden…"
 
 msgid "Loading model..."
-msgstr "Model laden..."
+msgstr "Model laden…"
 
 msgid "Loading streams…"
 msgstr "Streams laden…"
@@ -1599,6 +1643,9 @@ msgstr "<strong>Mobiele versie</strong> vergrendelen"
 msgid "Log out"
 msgstr "Uitloggen"
 
+msgid "Log out everywhere"
+msgstr "Overal afmelden"
+
 msgid "Login"
 msgstr "Inloggen"
 
@@ -1611,6 +1658,9 @@ msgstr "Inloggen mislukt."
 msgid "MP4 check not possible"
 msgstr "MP4-controle niet mogelijk"
 
+msgid "Main navigation"
+msgstr "Hoofdnavigatie"
+
 msgid "Maintenance"
 msgstr "Onderhoud"
 
@@ -1676,6 +1726,9 @@ msgstr "Bericht"
 msgid "Mobile live is temporarily disabled. Please use the desktop version or the installed app."
 msgstr "Mobiel live kijken is tijdelijk uitgeschakeld. Gebruik de desktopversie of de geïnstalleerde app."
 
+msgid "Mods"
+msgstr "Mods"
+
 msgid "Monitored"
 msgstr "Bewaakt"
 
@@ -1697,9 +1750,6 @@ msgstr "Netwerkfout"
 msgid "Network error while loading streams."
 msgstr "Netwerkfout bij laden van streams."
 
-msgid "Network error:"
-msgstr "Netwerkfout:"
-
 msgid "Network is back — reconnecting…"
 msgstr "Netwerk is terug — opnieuw verbinden…"
 
@@ -1718,8 +1768,8 @@ msgstr "Nieuw wachtwoord (leeg laten om niet te wijzigen)"
 msgid "New password * (min. 8 characters)"
 msgstr "Nieuw wachtwoord * (min. 8 tekens)"
 
-msgid "New password..."
-msgstr "Nieuw wachtwoord..."
+msgid "New password…"
+msgstr "Nieuw wachtwoord…"
 
 msgid "New user"
 msgstr "Nieuwe gebruiker"
@@ -1742,8 +1792,8 @@ msgstr "Nextcloud, ownCloud, Hetzner Storage Box of elke WebDAV-server met een a
 msgid "No (self-signed only)"
 msgstr "Nee (alleen zelfondertekend)"
 
-msgid "No VODs available in the archive"
-msgstr "Geen VOD's beschikbaar in het archief"
+msgid "No VODs yet. Recordings appear here automatically as soon as a monitored channel goes live."
+msgstr "Nog geen VOD’s. Opnames verschijnen hier automatisch zodra een bewaakt kanaal live gaat."
 
 msgid "No acceptances yet."
 msgstr "Nog geen acceptaties."
@@ -1778,6 +1828,9 @@ msgstr "Geen back-ups beschikbaar."
 msgid "No badges received from Twitch."
 msgstr "Geen badges ontvangen van Twitch."
 
+msgid "No channels are monitored yet."
+msgstr "Er worden nog geen kanalen bewaakt."
+
 msgid "No chat"
 msgstr "Geen chat"
 
@@ -1818,9 +1871,6 @@ msgstr "Geen bewaakte Twitch-kanalen."
 msgid "No monitored Twitch channels. Add streamers under Streamers."
 msgstr "Geen bewaakte Twitch-kanalen. Voeg streamers toe onder Streamers."
 
-msgid "No monitored channels configured."
-msgstr "Geen bewaakte kanalen geconfigureerd."
-
 msgid "No recently watched streams yet."
 msgstr "Nog geen onlangs bekeken streams."
 
@@ -1875,30 +1925,15 @@ msgstr "OAuth-opmerking"
 msgid "OAuth state tokens require a strong VOD_SECRET_KEY."
 msgstr "OAuth-statustokens vereisen een sterke VOD_SECRET_KEY."
 
+msgid "OBS overlays"
+msgstr "OBS-overlays"
+
 msgid "OFF (normal operation)"
 msgstr "UIT (normaal bedrijf)"
 
-msgid "OFFLINE"
-msgstr "OFFLINE"
-
 msgid "OK"
 msgstr "OK"
 
-msgid "ONLINE"
-msgstr "ONLINE"
-
-msgid "OPERATING MODE:"
-msgstr "BEDRIJFSMODUS:"
-
-msgid "OPTION A: UPLOAD IMAGE FILE"
-msgstr "OPTIE A: AFBEELDINGSBESTAND UPLOADEN"
-
-msgid "OPTION A: UPLOAD PROFILE PICTURE"
-msgstr "OPTIE A: PROFIELFOTO UPLOADEN"
-
-msgid "OPTION B: USE IMAGE URL"
-msgstr "OPTIE B: AFBEELDINGS-URL GEBRUIKEN"
-
 msgid "OR"
 msgstr "OF"
 
@@ -1924,6 +1959,9 @@ msgstr "Oudste eerst"
 msgid "OneDrive / Microsoft 365 via Microsoft Graph with OAuth 2.0."
 msgstr "OneDrive / Microsoft 365 via Microsoft Graph met OAuth 2.0."
 
+msgid "Online"
+msgstr "Online"
+
 msgid "Only after a successful upload and optional cloud verification."
 msgstr "Alleen na een geslaagde upload en optionele cloudverificatie."
 
@@ -1945,6 +1983,22 @@ msgstr "Clip openen"
 msgid "Open editor"
 msgstr "Editor openen"
 
+#, python-format
+msgid "Open streamer %(name)s"
+msgstr "Streamer %(name)s openen"
+
+msgid "Operating mode"
+msgstr "Bedrijfsmodus:"
+
+msgid "Option A: upload image file"
+msgstr "Optie a: afbeeldingsbestand uploaden"
+
+msgid "Option A: upload profile picture"
+msgstr "Optie a: profielfoto uploaden"
+
+msgid "Option B: use image URL"
+msgstr "Optie b: afbeeldings-url gebruiken"
+
 msgid "Option sections"
 msgstr "Optiesecties"
 
@@ -2055,6 +2109,9 @@ msgstr "Afspelen niet beschikbaar"
 msgid "Player error — reconnecting…"
 msgstr "Spelerfout — opnieuw verbinden…"
 
+msgid "Please confirm"
+msgstr "Bevestig alsjeblieft"
+
 msgid "Please enter a name for the storage provider."
 msgstr "Voer een naam in voor de opslagprovider."
 
@@ -2105,10 +2162,10 @@ msgid "Private video and stream archive console."
 msgstr "Privéconsole voor video- en streamarchief."
 
 msgid "Processing video (this may take a while)..."
-msgstr "Video verwerken (dit kan even duren)..."
+msgstr "Video verwerken (dit kan even duren)…"
 
 msgid "Processing video..."
-msgstr "Video verwerken..."
+msgstr "Video verwerken…"
 
 msgid "Profile picture reset to default."
 msgstr "Profielfoto teruggezet naar standaard."
@@ -2153,8 +2210,8 @@ msgstr "Providers"
 msgid "Public link created:"
 msgstr "Openbare link aangemaakt:"
 
-msgid "Purpose of this user group..."
-msgstr "Doel van deze gebruikersgroep..."
+msgid "Purpose of this user group…"
+msgstr "Doel van deze gebruikersgroep…"
 
 msgid "Quality"
 msgstr "Kwaliteit"
@@ -2168,22 +2225,12 @@ msgstr "Wachtrij niet leesbaar"
 msgid "Quiet"
 msgstr "Stil"
 
-msgid "RECORDING"
-msgstr "OPNAME"
-
-msgid "RECORDING ACTIVE"
-msgstr "OPNAME ACTIEF"
-
 msgid "Ready"
 msgstr "Klaar"
 
 msgid "Real-time stream error — reconnecting…"
 msgstr "Fout in realtime stream — opnieuw verbinden…"
 
-#, python-format
-msgid "Really delete backup %(name)s?"
-msgstr "Back-up %(name)s echt verwijderen?"
-
 msgid "Really delete file?"
 msgstr "Bestand echt verwijderen?"
 
@@ -2193,28 +2240,15 @@ msgstr "Cloudbestand echt verwijderen? Een lokale kopie blijft behouden."
 msgid "Really delete the local file? The cloud copy is kept."
 msgstr "Lokaal bestand echt verwijderen? De cloudkopie blijft behouden."
 
-msgid "Really delete?"
-msgstr "Echt verwijderen?"
-
-#, python-format
-msgid "Really remove channel %(name)s?"
-msgstr "Kanaal %(name)s echt verwijderen?"
-
 msgid "Really remove the provider? The cloud files are kept."
 msgstr "Provider echt verwijderen? De cloudbestanden blijven behouden."
 
-msgid "Really rename the file?"
-msgstr "Bestand echt hernoemen?"
-
 msgid "Really reset the custom banner and switch to the default?"
 msgstr "Aangepaste banner echt resetten en overschakelen naar de standaard?"
 
 msgid "Really reset the custom profile picture and switch to the default?"
 msgstr "Aangepaste profielfoto echt resetten en overschakelen naar de standaard?"
 
-msgid "Really revoke this share?"
-msgstr "Deze deelactie echt intrekken?"
-
 msgid "Really stop the recording?"
 msgstr "Opname echt stoppen?"
 
@@ -2224,6 +2258,9 @@ msgstr "Recente taakfouten"
 msgid "Recently watched"
 msgstr "Onlangs bekeken"
 
+msgid "Recommended browser-source URLs. Replace TOKEN with the value of TTS_OVERLAY_TOKEN or ALERT_OVERLAY_TOKEN. The part after # stays in OBS and reaches the server only as a request header, never in a log line."
+msgstr "Aanbevolen URL's voor de browserbron. Vervang TOKEN door de waarde van TTS_OVERLAY_TOKEN of ALERT_OVERLAY_TOKEN. Het deel na # blijft in OBS en bereikt de server alleen als request-header, nooit in een logregel."
+
 msgid "Recommended. Prevents data loss from incomplete uploads."
 msgstr "Aanbevolen. Voorkomt gegevensverlies door onvolledige uploads."
 
@@ -2242,6 +2279,9 @@ msgstr "Opname"
 msgid "Recording + live stream & Discord notification"
 msgstr "Opname + livestream & Discord-melding"
 
+msgid "Recording active"
+msgstr "Opname actief"
+
 msgid "Recording disabled (live & Discord only)"
 msgstr "Opname uitgeschakeld (alleen live & Discord)"
 
@@ -2291,8 +2331,8 @@ msgid "Remove channel"
 msgstr "Kanaal verwijderen"
 
 #, python-format
-msgid "Remove channel %(name)s?"
-msgstr "Kanaal %(name)s verwijderen?"
+msgid "Remove channel %(name)s? Monitoring stops; existing recordings stay in the archive."
+msgstr "Kanaal %(name)s verwijderen? Het bewaken stopt; bestaande opnames blijven in het archief."
 
 msgid "Remove only the database entry?"
 msgstr "Alleen het database-item verwijderen?"
@@ -2307,6 +2347,9 @@ msgstr "Remuxtaak gestart. De voortgang wordt in het adminpaneel getoond."
 msgid "Rename file"
 msgstr "Bestand hernoemen"
 
+msgid "Rename the file? Existing links and shares to the old file name stop working."
+msgstr "Bestand hernoemen? Bestaande links en shares naar de oude bestandsnaam werken dan niet meer."
+
 msgid "Renamed."
 msgstr "Hernoemd."
 
@@ -2332,6 +2375,9 @@ msgstr "Herstarten mislukt."
 msgid "Restart services"
 msgstr "Services herstarten"
 
+msgid "Restart the recorder and chat logger now? Running recordings are interrupted for a few seconds."
+msgstr "Recorder en chatlogger nu herstarten? Lopende opnames worden een paar seconden onderbroken."
+
 msgid "Restore"
 msgstr "Herstellen"
 
@@ -2348,6 +2394,9 @@ msgstr "Afspelen hervatten"
 msgid "Revoke"
 msgstr "Intrekken"
 
+msgid "Revoke this share? The link stops working immediately."
+msgstr "Deze share intrekken? De link werkt meteen niet meer."
+
 #, python-format
 msgid "Role access '%(slug)s' added."
 msgstr "Roltoegang '%(slug)s' toegevoegd."
@@ -2380,9 +2429,6 @@ msgstr "Bezig…"
 msgid "S3-compatible"
 msgstr "S3-compatibel"
 
-msgid "START"
-msgstr "START"
-
 msgid "Safety migration:"
 msgstr "Veiligheidsmigratie:"
 
@@ -2436,10 +2482,7 @@ msgid "Saving transcript failed: %(error)s"
 msgstr "Transcript opslaan mislukt: %(error)s"
 
 msgid "Saving transcript..."
-msgstr "Transcript opslaan..."
-
-msgid "Saving..."
-msgstr "Opslaan..."
+msgstr "Transcript opslaan…"
 
 msgid "Saving…"
 msgstr "Opslaan…"
@@ -2447,8 +2490,8 @@ msgstr "Opslaan…"
 msgid "Search"
 msgstr "Zoeken"
 
-msgid "Search VODs, streamers or games..."
-msgstr "Zoek VOD's, streamers of games..."
+msgid "Search VODs, streamers or games…"
+msgstr "Zoek VOD's, streamers of games…"
 
 msgid "Search category"
 msgstr "Categorie zoeken"
@@ -2459,8 +2502,11 @@ msgstr "Categorie / game zoeken…"
 msgid "Search failed."
 msgstr "Zoeken mislukt."
 
-msgid "Search recordings (title, date, game)..."
-msgstr "Opnames zoeken (titel, datum, game)..."
+msgid "Search recordings"
+msgstr "Opnames zoeken"
+
+msgid "Search recordings (title, date, game)…"
+msgstr "Opnames zoeken (titel, datum, game)…"
 
 msgid "Search results"
 msgstr "Zoekresultaten"
@@ -2471,21 +2517,21 @@ msgstr "Streamer of kanaal zoeken…"
 msgid "Search streamers"
 msgstr "Streamers zoeken"
 
-msgid "Search term (e.g. player name, chat message, date)..."
-msgstr "Zoekterm (bijv. spelernaam, chatbericht, datum)..."
+msgid "Search term (e.g. player name, chat message, date)…"
+msgstr "Zoekterm (bijv. spelernaam, chatbericht, datum)…"
 
-msgid "Search user, email or group..."
-msgstr "Gebruiker, e-mail of groep zoeken..."
+msgid "Search user, email or group…"
+msgstr "Gebruiker, e-mail of groep zoeken…"
 
-msgid "Search..."
-msgstr "Zoeken..."
-
-msgid "Searching for stream..."
-msgstr "Stream zoeken..."
+msgid "Searching for stream…"
+msgstr "Stream zoeken…"
 
 msgid "Searching…"
 msgstr "Zoeken…"
 
+msgid "Search…"
+msgstr "Zoeken…"
+
 msgid "Seconds after trigger"
 msgstr "Seconden na trigger"
 
@@ -2575,9 +2621,21 @@ msgstr "Wordt getoond in de navigatie, de zijbalk en op streamerkaarten."
 msgid "Sign in"
 msgstr "Inloggen"
 
+msgid "Sign out on every device? Every session of this account ends, including this one."
+msgstr "Op alle apparaten afmelden? Elke sessie van dit account eindigt, ook deze."
+
 msgid "Size"
 msgstr "Grootte"
 
+msgid "Skip to content"
+msgstr "Naar inhoud springen"
+
+msgid "Sort"
+msgstr "Sorteren"
+
+msgid "Sort order"
+msgstr "Sorteervolgorde"
+
 msgid "Sound"
 msgstr "Geluid"
 
@@ -2619,7 +2677,7 @@ msgid "Starting"
 msgstr "Start op"
 
 msgid "Starting download..."
-msgstr "Download starten..."
+msgstr "Download starten…"
 
 msgid "Status"
 msgstr "Status"
@@ -2658,6 +2716,9 @@ msgstr "Opslagprovider niet gevonden."
 msgid "Storage providers"
 msgstr "Opslagproviders"
 
+msgid "Storage usage"
+msgstr "Opslaggebruik"
+
 #, python-format
 msgid "Storage: <strong>%(pct)s%%</strong>"
 msgstr "Opslag: <strong>%(pct)s%%</strong>"
@@ -2719,6 +2780,9 @@ msgstr "Streamers, VOD's & chatgeschiedenis"
 msgid "Subfolder"
 msgstr "Submap"
 
+msgid "Subs"
+msgstr "Subs"
+
 msgid "Success"
 msgstr "Gelukt"
 
@@ -2806,6 +2870,9 @@ msgstr "Versie van de voorwaarden verouderd — laad de pagina opnieuw en accept
 msgid "Test"
 msgstr "Testen"
 
+msgid "Text-to-speech overlay"
+msgstr "Tekst-naar-spraak-overlay"
+
 msgid "Thanks for your understanding. Authorized users can sign in via the login page."
 msgstr "Bedankt voor je begrip. Bevoegde gebruikers kunnen inloggen via de inlogpagina."
 
@@ -2918,8 +2985,11 @@ msgstr "Vandaag, %(time)s"
 msgid "Too many VODs are playing right now. Live is not affected. Try again in a few minutes — a slot frees up as soon as someone closes the player."
 msgstr "Er worden momenteel te veel VOD's afgespeeld. Live is niet getroffen. Probeer het over een paar minuten opnieuw — er komt een plek vrij zodra iemand de speler sluit."
 
-msgid "Too many attempts. IP temporarily blocked. Please try again later."
-msgstr "Te veel pogingen. IP tijdelijk geblokkeerd. Probeer het later opnieuw."
+#, python-format
+msgid "Too many login attempts. Please try again in %(num)d minute."
+msgid_plural "Too many login attempts. Please try again in %(num)d minutes."
+msgstr[0] "Te veel inlogpogingen. Probeer het over %(num)d minuut opnieuw."
+msgstr[1] "Te veel inlogpogingen. Probeer het over %(num)d minuten opnieuw."
 
 msgid "Top streams are currently unavailable. Use monitored channels or the search."
 msgstr "Topstreams zijn momenteel niet beschikbaar. Gebruik bewaakte kanalen of de zoekfunctie."
@@ -2972,6 +3042,9 @@ msgstr "Transcript voltooid"
 msgid "Transcript missing despite finished status"
 msgstr "Transcript ontbreekt ondanks voltooide status"
 
+msgid "Transcript progress"
+msgstr "Voortgang transcriptie"
+
 msgid "Transcription cancelled"
 msgstr "Transcriptie geannuleerd"
 
@@ -2995,7 +3068,7 @@ msgid "Transcription queued in the worker. The result appears on the next page l
 msgstr "Transcriptie in de wachtrij van de worker geplaatst. Het resultaat verschijnt na afronding bij het volgende laden van de pagina."
 
 msgid "Transcription running..."
-msgstr "Transcriptie bezig..."
+msgstr "Transcriptie bezig…"
 
 msgid "Transcription timed out"
 msgstr "Time-out bij transcriptie"
@@ -3012,8 +3085,11 @@ msgstr "Twitch / standaard"
 msgid "Twitch badge library synchronized."
 msgstr "Twitch-badgebibliotheek gesynchroniseerd."
 
-msgid "Twitch channel name..."
-msgstr "Twitch-kanaalnaam..."
+msgid "Twitch channel name"
+msgstr "Naam van Twitch-kanaal"
+
+msgid "Twitch channel name…"
+msgstr "Twitch-kanaalnaam…"
 
 msgid "Twitch live chat"
 msgstr "Twitch-livechat"
@@ -3021,8 +3097,8 @@ msgstr "Twitch-livechat"
 msgid "Twitch live stream"
 msgstr "Twitch-livestream"
 
-msgid "Twitch name (e.g. shroud) or YouTube URL / @handle..."
-msgstr "Twitch-naam (bijv. shroud) of YouTube-URL / @handle..."
+msgid "Twitch name (e.g. shroud) or YouTube URL / @handle…"
+msgstr "Twitch-naam (bijv. shroud) of YouTube-URL / @handle…"
 
 msgid "Twitch or YouTube supported"
 msgstr "Twitch of YouTube ondersteund"
@@ -3240,12 +3316,6 @@ msgstr "Zichtbaar voor:"
 msgid "Volume"
 msgstr "Volume"
 
-msgid "WARNING: Do you want to permanently delete this streamer and all recordings?"
-msgstr "WAARSCHUWING: Wil je deze streamer en alle opnames definitief verwijderen?"
-
-msgid "WATCH LIVE"
-msgstr "LIVE KIJKEN"
-
 msgid "Waiting for server stream…"
 msgstr "Wachten op serverstream…"
 
@@ -3258,6 +3328,9 @@ msgstr "Bekijken"
 msgid "Watch latest video"
 msgstr "Nieuwste video bekijken"
 
+msgid "Watch live"
+msgstr "Live kijken"
+
 msgid "Watch now"
 msgstr "Nu bekijken"
 
@@ -3314,8 +3387,8 @@ msgstr "Je kunt jezelf niet naar een groep zonder rechten voor gebruikersbeheer
 msgid "You have accepted version %(version)s."
 msgstr "Je hebt versie %(version)s geaccepteerd."
 
-msgid "Your IP has been temporarily blocked. Please try again later."
-msgstr "Je IP is tijdelijk geblokkeerd. Probeer het later opnieuw."
+msgid "Your IP has been blocked. Please contact the administrator."
+msgstr "Je IP-adres is geblokkeerd. Neem contact op met de beheerder."
 
 msgid "Your browser does not support the video tag."
 msgstr "Je browser ondersteunt de video-tag niet."
@@ -3359,12 +3432,12 @@ msgstr "bijv. VIP-archief"
 msgid "e.g. alice, bob"
 msgstr "bijv. alice, bob"
 
-msgid "e.g. john_doe"
-msgstr "bijv. jan_jansen"
-
 msgid "e.g. channel_name"
 msgstr "bijv. channel_name"
 
+msgid "e.g. john_doe"
+msgstr "bijv. jan_jansen"
+
 #, python-format
 msgid "effective from %(date)s"
 msgstr "geldig vanaf %(date)s"
diff --git a/WEBUI/translations/pl/LC_MESSAGES/messages.mo b/WEBUI/translations/pl/LC_MESSAGES/messages.mo
index a0460b3..a61d9f4 100644
Binary files a/WEBUI/translations/pl/LC_MESSAGES/messages.mo and b/WEBUI/translations/pl/LC_MESSAGES/messages.mo differ
diff --git a/WEBUI/translations/pl/LC_MESSAGES/messages.po b/WEBUI/translations/pl/LC_MESSAGES/messages.po
index e13b03a..1e79be6 100644
--- a/WEBUI/translations/pl/LC_MESSAGES/messages.po
+++ b/WEBUI/translations/pl/LC_MESSAGES/messages.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: StreamVault VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2026-11-03 19:28+0100\n"
+"POT-Creation-Date: 2026-11-12 15:41+0100\n"
 "PO-Revision-Date: 2026-11-03 19:31+0100\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language: pl\n"
@@ -193,9 +193,6 @@ msgstr "Przywracanie już trwa."
 msgid "A saved value is kept if the field is left empty."
 msgstr "Zapisana wartość zostanie zachowana, jeśli pole pozostanie puste."
 
-msgid "ACTIVE (locked)"
-msgstr "AKTYWNY (zablokowany)"
-
 msgid "AWS S3, Cloudflare R2, Backblaze B2, Wasabi, MinIO, Hetzner or any S3-compatible endpoint."
 msgstr "AWS S3, Cloudflare R2, Backblaze B2, Wasabi, MinIO, Hetzner lub dowolny endpoint zgodny z S3."
 
@@ -208,6 +205,9 @@ msgstr "Akceptuj warunki"
 msgid "Account active (access allowed)"
 msgstr "Konto aktywne (dostęp dozwolony)"
 
+msgid "Accounts"
+msgstr "Konta"
+
 msgid "Action"
 msgstr "Akcja"
 
@@ -220,6 +220,9 @@ msgstr "Aktywuj konto od razu"
 msgid "Active"
 msgstr "Aktywne"
 
+msgid "Active (locked)"
+msgstr "AKTYWNY (zablokowany)"
+
 msgid "Active shares"
 msgstr "Aktywne udostępnienia"
 
@@ -232,6 +235,9 @@ msgstr "Aktywne: nowe streamy są odblokowywane automatycznie. Poniżej możesz
 msgid "Actively monitored by the recorder core"
 msgstr "Aktywnie monitorowany przez rdzeń nagrywania"
 
+msgid "Add a channel to record"
+msgstr "Dodaj kanał do nagrywania"
+
 msgid "Add channel"
 msgstr "Dodaj kanał"
 
@@ -241,6 +247,9 @@ msgstr "Dodaj nowy kanał"
 msgid "Add provider"
 msgstr "Dodaj dostawcę"
 
+msgid "Add the first channel above"
+msgstr "Dodaj pierwszy kanał powyżej"
+
 msgid "Addressing"
 msgstr "Adresowanie"
 
@@ -253,6 +262,9 @@ msgstr "Panel administratora"
 msgid "Admins only"
 msgstr "Tylko administratorzy"
 
+msgid "Alert sound overlay"
+msgstr "Nakładka dźwięków alertów"
+
 msgid "All"
 msgstr "Wszystkie"
 
@@ -492,27 +504,27 @@ msgstr "Bufor jest jeszcze krótki — okno klipu rośnie razem z nim."
 msgid "Buffer:"
 msgstr "Bufor:"
 
-msgid "Buffering..."
-msgstr "Buforowanie..."
+msgid "Buffering…"
+msgstr "Buforowanie…"
 
 msgid "By default nothing is uploaded or deleted automatically. Enable these features deliberately."
 msgstr "Domyślnie nic nie jest automatycznie przesyłane ani usuwane. Włączaj te funkcje świadomie."
 
-msgid "CHANGE"
-msgstr "ZMIEŃ"
-
-msgid "CHANNEL MANAGEMENT (ADMIN)"
-msgstr "ZARZĄDZANIE KANAŁAMI (ADMIN)"
-
 msgid "Cancel"
 msgstr "Anuluj"
 
+msgid "Category"
+msgstr "Kategoria"
+
 msgid "Category search failed."
 msgstr "Wyszukiwanie kategorii nie powiodło się."
 
 msgid "Category search is currently unavailable."
 msgstr "Wyszukiwanie kategorii jest obecnie niedostępne."
 
+msgid "Change"
+msgstr "Zmień"
+
 msgid "Change banner"
 msgstr "Zmień baner"
 
@@ -528,6 +540,9 @@ msgstr "Akcje kanału"
 msgid "Channel archive & recording metrics"
 msgstr "Archiwum kanału i statystyki nagrań"
 
+msgid "Channel management (admin)"
+msgstr "Zarządzanie kanałami (admin)"
+
 msgid "Channel not found."
 msgstr "Nie znaleziono kanału."
 
@@ -584,12 +599,12 @@ msgstr "Czyszczenie dodane do kolejki (zadanie #%(task)s)."
 msgid "Clear filters"
 msgstr "Wyczyść filtry"
 
-msgid "Click to change password"
-msgstr "Kliknij, aby zmienić hasło"
-
 msgid "Clip"
 msgstr "Klip"
 
+msgid "Clip Editor"
+msgstr "Edytor klipów"
+
 msgid "Clip URL is missing on this page."
 msgstr "Na tej stronie brakuje URL klipu."
 
@@ -674,6 +689,9 @@ msgstr "Konfiguruj kanały nagrywania i zarządzaj przypisaniami archiwum"
 msgid "Configured streamers & sources"
 msgstr "Skonfigurowani streamerzy i źródła"
 
+msgid "Confirm"
+msgstr "Potwierdź"
+
 msgid "Connect account"
 msgstr "Połącz konto"
 
@@ -695,6 +713,9 @@ msgstr "Połączenie OK"
 msgid "Connection failed"
 msgstr "Połączenie nie powiodło się"
 
+msgid "Connection failed. Check your network and try again."
+msgstr "Połączenie nie powiodło się. Sprawdź sieć i spróbuj ponownie."
+
 msgid "Connection lost — reconnecting…"
 msgstr "Utracono połączenie — ponowne łączenie…"
 
@@ -711,6 +732,9 @@ msgstr "Panel sterowania"
 msgid "Control the global maintenance mode or lock individual platform areas."
 msgstr "Zarządzaj globalnym trybem serwisowym lub blokuj poszczególne obszary platformy."
 
+msgid "Copied"
+msgstr "Skopiowano"
+
 msgid "Copy"
 msgstr "Kopiuj"
 
@@ -827,6 +851,14 @@ msgstr "Domyślny cel"
 msgid "Delete"
 msgstr "Usuń"
 
+#, python-format
+msgid "Delete %(name)s? The file is removed from the archive and cannot be restored."
+msgstr "Usunąć %(name)s? Plik zostanie usunięty z archiwum i nie da się go przywrócić."
+
+#, python-format
+msgid "Delete backup %(name)s? This cannot be undone."
+msgstr "Usunąć kopię zapasową %(name)s? Tego nie można cofnąć."
+
 msgid "Delete folder"
 msgstr "Usuń folder"
 
@@ -845,6 +877,12 @@ msgstr "Usuń lokalnie"
 msgid "Delete permanently"
 msgstr "Usuń trwale"
 
+msgid "Delete this streamer folder and all recordings? This cannot be undone."
+msgstr "Usunąć folder tego streamera i wszystkie nagrania? Tego nie można cofnąć."
+
+msgid "Delete this video? The file is removed from the archive and cannot be restored."
+msgstr "Usunąć ten film? Plik zostanie usunięty z archiwum i nie da się go przywrócić."
+
 msgid "Delete user"
 msgstr "Usuń użytkownika"
 
@@ -925,8 +963,8 @@ msgstr "Pobierz TXT"
 msgid "Download all"
 msgstr "Pobierz wszystko"
 
-msgid "Download all VODs?"
-msgstr "Pobrać wszystkie VOD?"
+msgid "Download all VODs of this streamer as one archive? This can take a while for large channels."
+msgstr "Pobrać wszystkie VOD-y tego streamera jako jedno archiwum? Przy dużych kanałach może to chwilę potrwać."
 
 msgid "Download archive & VODs"
 msgstr "Pobierz archiwum i VOD"
@@ -945,7 +983,7 @@ msgstr "Rozpoczęto pobieranie wszystkich VOD w tle."
 
 #, python-format
 msgid "Downloading... %(percent)s"
-msgstr "Pobieranie... %(percent)s"
+msgstr "Pobieranie… %(percent)s"
 
 #, python-format
 msgid "Drive quota active — do not press Play again (it extends the block). Seek back into the already loaded part, or wait about %(minutes)s min."
@@ -996,6 +1034,9 @@ msgstr "Adres e-mail"
 msgid "Email address (optional)"
 msgstr "Adres e-mail (opcjonalnie)"
 
+msgid "Emotes"
+msgstr "Emotki"
+
 msgid "Empty = AWS. For R2, B2, Wasabi, MinIO etc. enter the S3 endpoint."
 msgstr "Puste = AWS. Dla R2, B2, Wasabi, MinIO itp. podaj endpoint S3."
 
@@ -1011,6 +1052,9 @@ msgstr "Włącz od razu"
 msgid "Enable maintenance mode"
 msgstr "Włącz tryb serwisowy"
 
+msgid "Enable maintenance mode? Everyone except allowlisted users sees the maintenance page until you end it."
+msgstr "Włączyć tryb konserwacji? Wszyscy poza dozwolonymi użytkownikami będą widzieć stronę konserwacji, dopóki go nie wyłączysz."
+
 msgid "Enable recording"
 msgstr "Włącz nagrywanie"
 
@@ -1108,6 +1152,9 @@ msgstr "Błąd:"
 msgid "Error: %(error)s"
 msgstr "Błąd: %(error)s"
 
+msgid "Everywhere"
+msgstr "Wszędzie"
+
 msgid "Existing members of this group are automatically assigned to the default group <strong>Viewer</strong>."
 msgstr "Obecni członkowie tej grupy zostaną automatycznie przypisani do domyślnej grupy <strong>Viewer</strong>."
 
@@ -1124,10 +1171,7 @@ msgid "Exported by StreamVault"
 msgstr "Wyeksportowano przez StreamVault"
 
 msgid "Extracting audio..."
-msgstr "Wyodrębnianie dźwięku..."
-
-msgid "FEATURED VOD"
-msgstr "POLECANY VOD"
+msgstr "Wyodrębnianie dźwięku…"
 
 msgid "Failed"
 msgstr "Błąd"
@@ -1138,6 +1182,9 @@ msgstr "Szybko"
 msgid "Feature permissions"
 msgstr "Uprawnienia do funkcji"
 
+msgid "Featured VOD"
+msgstr "Polecany vod"
+
 msgid "Featured highlight"
 msgstr "Polecany highlight"
 
@@ -1168,8 +1215,11 @@ msgstr "Plik został przesłany."
 msgid "Filter"
 msgstr "Filtruj"
 
-msgid "Filter chat..."
-msgstr "Filtruj czat..."
+msgid "Filter chat"
+msgstr "Filtruj czat"
+
+msgid "Filter chat…"
+msgstr "Filtruj czat…"
 
 msgid "First"
 msgstr "Pierwsza"
@@ -1447,19 +1497,6 @@ msgstr "lipiec"
 msgid "June"
 msgstr "czerwiec"
 
-msgid "LIVE"
-msgstr "NA ŻYWO"
-
-#, python-format
-msgid "LIVE %(name)s (without Twitch login)"
-msgstr "NA ŻYWO %(name)s (bez logowania do Twitch)"
-
-msgid "LIVE & DISCORD ONLY"
-msgstr "TYLKO NA ŻYWO I DISCORD"
-
-msgid "LIVE NOW"
-msgstr "TERAZ NA ŻYWO"
-
 msgid "Language"
 msgstr "Język"
 
@@ -1508,11 +1545,14 @@ msgstr "Skopiowano link:"
 msgid "Live"
 msgstr "Na żywo"
 
+msgid "Live & Discord only"
+msgstr "Tylko na żywo i discord"
+
 msgid "Live & Discord only:"
 msgstr "Tylko na żywo i Discord:"
 
 msgid "Live (recovering...)"
-msgstr "Na żywo (przywracanie...)"
+msgstr "Na żywo (przywracanie…)"
 
 msgid "Live channels"
 msgstr "Kanały na żywo"
@@ -1547,8 +1587,8 @@ msgstr "Tylko transmisja na żywo i powiadomienia Discord, bez zapisu na dysk"
 msgid "Live stream highlight"
 msgstr "Highlight transmisji na żywo"
 
-msgid "Live stream is currently unavailable. Searching for stream..."
-msgstr "Transmisja jest obecnie niedostępna. Szukam streamu..."
+msgid "Live stream is currently unavailable. Searching for stream…"
+msgstr "Transmisja jest obecnie niedostępna. Szukam streamu…"
 
 msgid "Live stream not available."
 msgstr "Transmisja niedostępna."
@@ -1565,6 +1605,10 @@ msgstr "Oglądanie na żywo"
 msgid "Live-only"
 msgstr "Tylko na żywo"
 
+#, python-format
+msgid "Live: %(name)s (without Twitch login)"
+msgstr "NA ŻYWO %(name)s (bez logowania do Twitch)"
+
 msgid "Load"
 msgstr "Obciążenie"
 
@@ -1575,7 +1619,7 @@ msgid "Loading chat…"
 msgstr "Wczytywanie czatu…"
 
 msgid "Loading model..."
-msgstr "Wczytywanie modelu..."
+msgstr "Wczytywanie modelu…"
 
 msgid "Loading streams…"
 msgstr "Wczytywanie streamów…"
@@ -1605,6 +1649,9 @@ msgstr "Zablokuj <strong>wersję mobilną</strong>"
 msgid "Log out"
 msgstr "Wyloguj"
 
+msgid "Log out everywhere"
+msgstr "Wyloguj wszędzie"
+
 msgid "Login"
 msgstr "Logowanie"
 
@@ -1617,6 +1664,9 @@ msgstr "Logowanie nie powiodło się."
 msgid "MP4 check not possible"
 msgstr "Sprawdzenie MP4 niemożliwe"
 
+msgid "Main navigation"
+msgstr "Nawigacja główna"
+
 msgid "Maintenance"
 msgstr "Prace serwisowe"
 
@@ -1682,6 +1732,9 @@ msgstr "Wiadomość"
 msgid "Mobile live is temporarily disabled. Please use the desktop version or the installed app."
 msgstr "Oglądanie na żywo na urządzeniach mobilnych jest tymczasowo wyłączone. Użyj wersji desktopowej lub zainstalowanej aplikacji."
 
+msgid "Mods"
+msgstr "Moderatorzy"
+
 msgid "Monitored"
 msgstr "Monitorowane"
 
@@ -1703,9 +1756,6 @@ msgstr "Błąd sieci"
 msgid "Network error while loading streams."
 msgstr "Błąd sieci podczas wczytywania streamów."
 
-msgid "Network error:"
-msgstr "Błąd sieci:"
-
 msgid "Network is back — reconnecting…"
 msgstr "Sieć wróciła — ponowne łączenie…"
 
@@ -1724,8 +1774,8 @@ msgstr "Nowe hasło (pozostaw puste, aby nie zmieniać)"
 msgid "New password * (min. 8 characters)"
 msgstr "Nowe hasło * (min. 8 znaków)"
 
-msgid "New password..."
-msgstr "Nowe hasło..."
+msgid "New password…"
+msgstr "Nowe hasło…"
 
 msgid "New user"
 msgstr "Nowy użytkownik"
@@ -1748,8 +1798,8 @@ msgstr "Nextcloud, ownCloud, Hetzner Storage Box lub dowolny serwer WebDAV z has
 msgid "No (self-signed only)"
 msgstr "Nie (tylko samopodpisany)"
 
-msgid "No VODs available in the archive"
-msgstr "Brak VOD w archiwum"
+msgid "No VODs yet. Recordings appear here automatically as soon as a monitored channel goes live."
+msgstr "Brak VOD-ów. Nagrania pojawią się tu automatycznie, gdy monitorowany kanał zacznie nadawać."
 
 msgid "No acceptances yet."
 msgstr "Brak akceptacji."
@@ -1784,6 +1834,9 @@ msgstr "Brak kopii zapasowych."
 msgid "No badges received from Twitch."
 msgstr "Nie otrzymano odznak z Twitch."
 
+msgid "No channels are monitored yet."
+msgstr "Nie monitorujesz jeszcze żadnego kanału."
+
 msgid "No chat"
 msgstr "Brak czatu"
 
@@ -1824,9 +1877,6 @@ msgstr "Brak monitorowanych kanałów Twitch."
 msgid "No monitored Twitch channels. Add streamers under Streamers."
 msgstr "Brak monitorowanych kanałów Twitch. Dodaj streamerów w sekcji Streamerzy."
 
-msgid "No monitored channels configured."
-msgstr "Nie skonfigurowano monitorowanych kanałów."
-
 msgid "No recently watched streams yet."
 msgstr "Brak ostatnio oglądanych streamów."
 
@@ -1881,30 +1931,15 @@ msgstr "Uwaga dot. OAuth"
 msgid "OAuth state tokens require a strong VOD_SECRET_KEY."
 msgstr "Tokeny stanu OAuth wymagają silnego VOD_SECRET_KEY."
 
+msgid "OBS overlays"
+msgstr "Nakładki OBS"
+
 msgid "OFF (normal operation)"
 msgstr "WYŁ. (normalna praca)"
 
-msgid "OFFLINE"
-msgstr "OFFLINE"
-
 msgid "OK"
 msgstr "OK"
 
-msgid "ONLINE"
-msgstr "ONLINE"
-
-msgid "OPERATING MODE:"
-msgstr "TRYB PRACY:"
-
-msgid "OPTION A: UPLOAD IMAGE FILE"
-msgstr "OPCJA A: PRZEŚLIJ PLIK OBRAZU"
-
-msgid "OPTION A: UPLOAD PROFILE PICTURE"
-msgstr "OPCJA A: PRZEŚLIJ ZDJĘCIE PROFILOWE"
-
-msgid "OPTION B: USE IMAGE URL"
-msgstr "OPCJA B: UŻYJ URL OBRAZU"
-
 msgid "OR"
 msgstr "LUB"
 
@@ -1930,6 +1965,9 @@ msgstr "Najstarsze najpierw"
 msgid "OneDrive / Microsoft 365 via Microsoft Graph with OAuth 2.0."
 msgstr "OneDrive / Microsoft 365 przez Microsoft Graph z OAuth 2.0."
 
+msgid "Online"
+msgstr "Online"
+
 msgid "Only after a successful upload and optional cloud verification."
 msgstr "Tylko po udanym przesłaniu i opcjonalnej weryfikacji w chmurze."
 
@@ -1951,6 +1989,22 @@ msgstr "Otwórz klip"
 msgid "Open editor"
 msgstr "Otwórz edytor"
 
+#, python-format
+msgid "Open streamer %(name)s"
+msgstr "Otwórz streamera %(name)s"
+
+msgid "Operating mode"
+msgstr "Tryb pracy:"
+
+msgid "Option A: upload image file"
+msgstr "Opcja a: prześlij plik obrazu"
+
+msgid "Option A: upload profile picture"
+msgstr "Opcja a: prześlij zdjęcie profilowe"
+
+msgid "Option B: use image URL"
+msgstr "Opcja b: użyj url obrazu"
+
 msgid "Option sections"
 msgstr "Sekcje opcji"
 
@@ -2061,6 +2115,9 @@ msgstr "Odtwarzanie niedostępne"
 msgid "Player error — reconnecting…"
 msgstr "Błąd odtwarzacza — ponowne łączenie…"
 
+msgid "Please confirm"
+msgstr "Potwierdź"
+
 msgid "Please enter a name for the storage provider."
 msgstr "Wpisz nazwę dostawcy pamięci."
 
@@ -2111,10 +2168,10 @@ msgid "Private video and stream archive console."
 msgstr "Prywatna konsola archiwum wideo i streamów."
 
 msgid "Processing video (this may take a while)..."
-msgstr "Przetwarzanie wideo (może to chwilę potrwać)..."
+msgstr "Przetwarzanie wideo (może to chwilę potrwać)…"
 
 msgid "Processing video..."
-msgstr "Przetwarzanie wideo..."
+msgstr "Przetwarzanie wideo…"
 
 msgid "Profile picture reset to default."
 msgstr "Przywrócono domyślne zdjęcie profilowe."
@@ -2159,8 +2216,8 @@ msgstr "Dostawcy"
 msgid "Public link created:"
 msgstr "Utworzono publiczny link:"
 
-msgid "Purpose of this user group..."
-msgstr "Cel tej grupy użytkowników..."
+msgid "Purpose of this user group…"
+msgstr "Cel tej grupy użytkowników…"
 
 msgid "Quality"
 msgstr "Jakość"
@@ -2174,22 +2231,12 @@ msgstr "Nie można odczytać kolejki"
 msgid "Quiet"
 msgstr "Cicho"
 
-msgid "RECORDING"
-msgstr "NAGRYWANIE"
-
-msgid "RECORDING ACTIVE"
-msgstr "NAGRYWANIE AKTYWNE"
-
 msgid "Ready"
 msgstr "Gotowe"
 
 msgid "Real-time stream error — reconnecting…"
 msgstr "Błąd strumienia w czasie rzeczywistym — ponowne łączenie…"
 
-#, python-format
-msgid "Really delete backup %(name)s?"
-msgstr "Na pewno usunąć kopię zapasową %(name)s?"
-
 msgid "Really delete file?"
 msgstr "Na pewno usunąć plik?"
 
@@ -2199,28 +2246,15 @@ msgstr "Na pewno usunąć plik z chmury? Kopia lokalna zostanie zachowana."
 msgid "Really delete the local file? The cloud copy is kept."
 msgstr "Na pewno usunąć plik lokalny? Kopia w chmurze zostanie zachowana."
 
-msgid "Really delete?"
-msgstr "Na pewno usunąć?"
-
-#, python-format
-msgid "Really remove channel %(name)s?"
-msgstr "Na pewno usunąć kanał %(name)s?"
-
 msgid "Really remove the provider? The cloud files are kept."
 msgstr "Na pewno usunąć dostawcę? Pliki w chmurze zostaną zachowane."
 
-msgid "Really rename the file?"
-msgstr "Na pewno zmienić nazwę pliku?"
-
 msgid "Really reset the custom banner and switch to the default?"
 msgstr "Na pewno zresetować niestandardowy baner i przywrócić domyślny?"
 
 msgid "Really reset the custom profile picture and switch to the default?"
 msgstr "Na pewno zresetować niestandardowe zdjęcie profilowe i przywrócić domyślne?"
 
-msgid "Really revoke this share?"
-msgstr "Na pewno cofnąć to udostępnienie?"
-
 msgid "Really stop the recording?"
 msgstr "Na pewno zatrzymać nagrywanie?"
 
@@ -2230,6 +2264,9 @@ msgstr "Ostatnie błędy zadań"
 msgid "Recently watched"
 msgstr "Ostatnio oglądane"
 
+msgid "Recommended browser-source URLs. Replace TOKEN with the value of TTS_OVERLAY_TOKEN or ALERT_OVERLAY_TOKEN. The part after # stays in OBS and reaches the server only as a request header, never in a log line."
+msgstr "Zalecane adresy URL źródła przeglądarki. Zastąp TOKEN wartością TTS_OVERLAY_TOKEN lub ALERT_OVERLAY_TOKEN. Część po # zostaje w OBS i trafia do serwera tylko jako nagłówek żądania, nigdy do logu."
+
 msgid "Recommended. Prevents data loss from incomplete uploads."
 msgstr "Zalecane. Zapobiega utracie danych przez niepełne przesyłanie."
 
@@ -2248,6 +2285,9 @@ msgstr "Nagranie"
 msgid "Recording + live stream & Discord notification"
 msgstr "Nagrywanie + transmisja na żywo i powiadomienie Discord"
 
+msgid "Recording active"
+msgstr "Nagrywanie aktywne"
+
 msgid "Recording disabled (live & Discord only)"
 msgstr "Nagrywanie wyłączone (tylko na żywo i Discord)"
 
@@ -2297,8 +2337,8 @@ msgid "Remove channel"
 msgstr "Usuń kanał"
 
 #, python-format
-msgid "Remove channel %(name)s?"
-msgstr "Usunąć kanał %(name)s?"
+msgid "Remove channel %(name)s? Monitoring stops; existing recordings stay in the archive."
+msgstr "Usunąć kanał %(name)s? Monitorowanie zostanie zatrzymane; istniejące nagrania pozostaną w archiwum."
 
 msgid "Remove only the database entry?"
 msgstr "Usunąć tylko wpis w bazie danych?"
@@ -2313,6 +2353,9 @@ msgstr "Uruchomiono zadanie remuksowania. Postęp jest widoczny w panelu adminis
 msgid "Rename file"
 msgstr "Zmień nazwę pliku"
 
+msgid "Rename the file? Existing links and shares to the old file name stop working."
+msgstr "Zmienić nazwę pliku? Istniejące linki i udostępnienia do starej nazwy przestaną działać."
+
 msgid "Renamed."
 msgstr "Zmieniono nazwę."
 
@@ -2338,6 +2381,9 @@ msgstr "Restart nie powiódł się."
 msgid "Restart services"
 msgstr "Zrestartuj usługi"
 
+msgid "Restart the recorder and chat logger now? Running recordings are interrupted for a few seconds."
+msgstr "Uruchomić ponownie rejestrator i logger czatu? Trwające nagrania zostaną przerwane na kilka sekund."
+
 msgid "Restore"
 msgstr "Przywróć"
 
@@ -2354,6 +2400,9 @@ msgstr "Wznów odtwarzanie"
 msgid "Revoke"
 msgstr "Cofnij"
 
+msgid "Revoke this share? The link stops working immediately."
+msgstr "Cofnąć to udostępnienie? Link natychmiast przestanie działać."
+
 #, python-format
 msgid "Role access '%(slug)s' added."
 msgstr "Dodano dostęp roli '%(slug)s'."
@@ -2386,9 +2435,6 @@ msgstr "Działa…"
 msgid "S3-compatible"
 msgstr "Zgodne z S3"
 
-msgid "START"
-msgstr "START"
-
 msgid "Safety migration:"
 msgstr "Migracja bezpieczeństwa:"
 
@@ -2442,10 +2488,7 @@ msgid "Saving transcript failed: %(error)s"
 msgstr "Zapisywanie transkrypcji nie powiodło się: %(error)s"
 
 msgid "Saving transcript..."
-msgstr "Zapisywanie transkrypcji..."
-
-msgid "Saving..."
-msgstr "Zapisywanie..."
+msgstr "Zapisywanie transkrypcji…"
 
 msgid "Saving…"
 msgstr "Zapisywanie…"
@@ -2453,8 +2496,8 @@ msgstr "Zapisywanie…"
 msgid "Search"
 msgstr "Szukaj"
 
-msgid "Search VODs, streamers or games..."
-msgstr "Szukaj VOD, streamerów lub gier..."
+msgid "Search VODs, streamers or games…"
+msgstr "Szukaj VOD, streamerów lub gier…"
 
 msgid "Search category"
 msgstr "Szukaj kategorii"
@@ -2465,8 +2508,11 @@ msgstr "Szukaj kategorii / gry…"
 msgid "Search failed."
 msgstr "Wyszukiwanie nie powiodło się."
 
-msgid "Search recordings (title, date, game)..."
-msgstr "Szukaj nagrań (tytuł, data, gra)..."
+msgid "Search recordings"
+msgstr "Szukaj nagrań"
+
+msgid "Search recordings (title, date, game)…"
+msgstr "Szukaj nagrań (tytuł, data, gra)…"
 
 msgid "Search results"
 msgstr "Wyniki wyszukiwania"
@@ -2477,21 +2523,21 @@ msgstr "Szukaj streamera lub kanału…"
 msgid "Search streamers"
 msgstr "Szukaj streamerów"
 
-msgid "Search term (e.g. player name, chat message, date)..."
-msgstr "Szukana fraza (np. nazwa gracza, wiadomość czatu, data)..."
+msgid "Search term (e.g. player name, chat message, date)…"
+msgstr "Szukana fraza (np. nazwa gracza, wiadomość czatu, data)…"
 
-msgid "Search user, email or group..."
-msgstr "Szukaj użytkownika, e-maila lub grupy..."
+msgid "Search user, email or group…"
+msgstr "Szukaj użytkownika, e-maila lub grupy…"
 
-msgid "Search..."
-msgstr "Szukaj..."
-
-msgid "Searching for stream..."
-msgstr "Szukam streamu..."
+msgid "Searching for stream…"
+msgstr "Szukam streamu…"
 
 msgid "Searching…"
 msgstr "Wyszukiwanie…"
 
+msgid "Search…"
+msgstr "Szukaj…"
+
 msgid "Seconds after trigger"
 msgstr "Sekundy po wyzwoleniu"
 
@@ -2581,9 +2627,21 @@ msgstr "Wyświetlane w nawigacji, na pasku bocznym i na kartach streamerów."
 msgid "Sign in"
 msgstr "Zaloguj się"
 
+msgid "Sign out on every device? Every session of this account ends, including this one."
+msgstr "Wylogować na wszystkich urządzeniach? Zakończą się wszystkie sesje tego konta, również ta."
+
 msgid "Size"
 msgstr "Rozmiar"
 
+msgid "Skip to content"
+msgstr "Przejdź do treści"
+
+msgid "Sort"
+msgstr "Sortuj"
+
+msgid "Sort order"
+msgstr "Kolejność sortowania"
+
 msgid "Sound"
 msgstr "Dźwięk"
 
@@ -2625,7 +2683,7 @@ msgid "Starting"
 msgstr "Uruchamianie"
 
 msgid "Starting download..."
-msgstr "Rozpoczynanie pobierania..."
+msgstr "Rozpoczynanie pobierania…"
 
 msgid "Status"
 msgstr "Status"
@@ -2664,6 +2722,9 @@ msgstr "Nie znaleziono dostawcy pamięci."
 msgid "Storage providers"
 msgstr "Dostawcy pamięci"
 
+msgid "Storage usage"
+msgstr "Wykorzystanie miejsca"
+
 #, python-format
 msgid "Storage: <strong>%(pct)s%%</strong>"
 msgstr "Pamięć: <strong>%(pct)s%%</strong>"
@@ -2725,6 +2786,9 @@ msgstr "Streamerzy, VOD i historie czatu"
 msgid "Subfolder"
 msgstr "Podfolder"
 
+msgid "Subs"
+msgstr "Subskrybenci"
+
 msgid "Success"
 msgstr "Sukces"
 
@@ -2812,6 +2876,9 @@ msgstr "Wersja warunków nieaktualna — odśwież stronę i zaakceptuj ponownie
 msgid "Test"
 msgstr "Testuj"
 
+msgid "Text-to-speech overlay"
+msgstr "Nakładka zamiany tekstu na mowę"
+
 msgid "Thanks for your understanding. Authorized users can sign in via the login page."
 msgstr "Dziękujemy za wyrozumiałość. Uprawnieni użytkownicy mogą zalogować się na stronie logowania."
 
@@ -2924,8 +2991,12 @@ msgstr "Dzisiaj, %(time)s"
 msgid "Too many VODs are playing right now. Live is not affected. Try again in a few minutes — a slot frees up as soon as someone closes the player."
 msgstr "Obecnie odtwarzanych jest zbyt wiele VOD. Transmisje na żywo nie są objęte limitem. Spróbuj ponownie za kilka minut — miejsce zwolni się, gdy ktoś zamknie odtwarzacz."
 
-msgid "Too many attempts. IP temporarily blocked. Please try again later."
-msgstr "Zbyt wiele prób. IP tymczasowo zablokowane. Spróbuj ponownie później."
+#, python-format
+msgid "Too many login attempts. Please try again in %(num)d minute."
+msgid_plural "Too many login attempts. Please try again in %(num)d minutes."
+msgstr[0] "Zbyt wiele prób logowania. Spróbuj ponownie za %(num)d minutę."
+msgstr[1] "Zbyt wiele prób logowania. Spróbuj ponownie za %(num)d minuty."
+msgstr[2] "Zbyt wiele prób logowania. Spróbuj ponownie za %(num)d minut."
 
 msgid "Top streams are currently unavailable. Use monitored channels or the search."
 msgstr "Najpopularniejsze streamy są obecnie niedostępne. Użyj monitorowanych kanałów lub wyszukiwania."
@@ -2978,6 +3049,9 @@ msgstr "Transkrypcja zakończona"
 msgid "Transcript missing despite finished status"
 msgstr "Brak transkrypcji mimo statusu zakończenia"
 
+msgid "Transcript progress"
+msgstr "Postęp transkrypcji"
+
 msgid "Transcription cancelled"
 msgstr "Transkrypcja anulowana"
 
@@ -3001,7 +3075,7 @@ msgid "Transcription queued in the worker. The result appears on the next page l
 msgstr "Transkrypcję dodano do kolejki workera. Wynik pojawi się po zakończeniu przy następnym wczytaniu strony."
 
 msgid "Transcription running..."
-msgstr "Trwa transkrypcja..."
+msgstr "Trwa transkrypcja…"
 
 msgid "Transcription timed out"
 msgstr "Przekroczono limit czasu transkrypcji"
@@ -3018,8 +3092,11 @@ msgstr "Twitch / domyślne"
 msgid "Twitch badge library synchronized."
 msgstr "Zsynchronizowano bibliotekę odznak Twitch."
 
-msgid "Twitch channel name..."
-msgstr "Nazwa kanału Twitch..."
+msgid "Twitch channel name"
+msgstr "Nazwa kanału Twitch"
+
+msgid "Twitch channel name…"
+msgstr "Nazwa kanału Twitch…"
 
 msgid "Twitch live chat"
 msgstr "Czat na żywo Twitch"
@@ -3027,8 +3104,8 @@ msgstr "Czat na żywo Twitch"
 msgid "Twitch live stream"
 msgstr "Transmisja na żywo Twitch"
 
-msgid "Twitch name (e.g. shroud) or YouTube URL / @handle..."
-msgstr "Nazwa Twitch (np. shroud) lub URL YouTube / @handle..."
+msgid "Twitch name (e.g. shroud) or YouTube URL / @handle…"
+msgstr "Nazwa Twitch (np. shroud) lub URL YouTube / @handle…"
 
 msgid "Twitch or YouTube supported"
 msgstr "Obsługiwane Twitch lub YouTube"
@@ -3246,12 +3323,6 @@ msgstr "Widoczne dla:"
 msgid "Volume"
 msgstr "Głośność"
 
-msgid "WARNING: Do you want to permanently delete this streamer and all recordings?"
-msgstr "UWAGA: Czy na pewno chcesz trwale usunąć tego streamera i wszystkie nagrania?"
-
-msgid "WATCH LIVE"
-msgstr "OGLĄDAJ NA ŻYWO"
-
 msgid "Waiting for server stream…"
 msgstr "Oczekiwanie na stream z serwera…"
 
@@ -3264,6 +3335,9 @@ msgstr "Oglądaj"
 msgid "Watch latest video"
 msgstr "Oglądaj najnowszy film"
 
+msgid "Watch live"
+msgstr "Oglądaj na żywo"
+
 msgid "Watch now"
 msgstr "Oglądaj teraz"
 
@@ -3320,8 +3394,8 @@ msgstr "Nie możesz przenieść siebie do grupy bez uprawnień do zarządzania u
 msgid "You have accepted version %(version)s."
 msgstr "Zaakceptowano wersję %(version)s."
 
-msgid "Your IP has been temporarily blocked. Please try again later."
-msgstr "Twój adres IP został tymczasowo zablokowany. Spróbuj ponownie później."
+msgid "Your IP has been blocked. Please contact the administrator."
+msgstr "Twój adres IP został zablokowany. Skontaktuj się z administratorem."
 
 msgid "Your browser does not support the video tag."
 msgstr "Twoja przeglądarka nie obsługuje znacznika video."
@@ -3365,12 +3439,12 @@ msgstr "np. archiwum VIP"
 msgid "e.g. alice, bob"
 msgstr "np. alice, bob"
 
-msgid "e.g. john_doe"
-msgstr "np. jan_kowalski"
-
 msgid "e.g. channel_name"
 msgstr "np. channel_name"
 
+msgid "e.g. john_doe"
+msgstr "np. jan_kowalski"
+
 #, python-format
 msgid "effective from %(date)s"
 msgstr "obowiązuje od %(date)s"
diff --git a/WEBUI/translations/pt_BR/LC_MESSAGES/messages.mo b/WEBUI/translations/pt_BR/LC_MESSAGES/messages.mo
index 17dc046..da76047 100644
Binary files a/WEBUI/translations/pt_BR/LC_MESSAGES/messages.mo and b/WEBUI/translations/pt_BR/LC_MESSAGES/messages.mo differ
diff --git a/WEBUI/translations/pt_BR/LC_MESSAGES/messages.po b/WEBUI/translations/pt_BR/LC_MESSAGES/messages.po
index 4628000..f160745 100644
--- a/WEBUI/translations/pt_BR/LC_MESSAGES/messages.po
+++ b/WEBUI/translations/pt_BR/LC_MESSAGES/messages.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: StreamVault VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2026-11-03 19:28+0100\n"
+"POT-Creation-Date: 2026-11-12 15:41+0100\n"
 "PO-Revision-Date: 2026-11-03 19:31+0100\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language: pt_BR\n"
@@ -187,9 +187,6 @@ msgstr "Uma restauração já está em andamento."
 msgid "A saved value is kept if the field is left empty."
 msgstr "Se o campo ficar vazio, o valor salvo é mantido."
 
-msgid "ACTIVE (locked)"
-msgstr "ATIVO (bloqueado)"
-
 msgid "AWS S3, Cloudflare R2, Backblaze B2, Wasabi, MinIO, Hetzner or any S3-compatible endpoint."
 msgstr "AWS S3, Cloudflare R2, Backblaze B2, Wasabi, MinIO, Hetzner ou qualquer endpoint compatível com S3."
 
@@ -202,6 +199,9 @@ msgstr "Aceitar os termos"
 msgid "Account active (access allowed)"
 msgstr "Conta ativa (acesso permitido)"
 
+msgid "Accounts"
+msgstr "Contas"
+
 msgid "Action"
 msgstr "Ação"
 
@@ -214,6 +214,9 @@ msgstr "Ativar conta imediatamente"
 msgid "Active"
 msgstr "Ativo"
 
+msgid "Active (locked)"
+msgstr "ATIVO (bloqueado)"
+
 msgid "Active shares"
 msgstr "Compartilhamentos ativos"
 
@@ -226,6 +229,9 @@ msgstr "Ativo: novas transmissões são liberadas automaticamente. Abaixo você
 msgid "Actively monitored by the recorder core"
 msgstr "Monitorado ativamente pelo núcleo do gravador"
 
+msgid "Add a channel to record"
+msgstr "Adicionar um canal para gravar"
+
 msgid "Add channel"
 msgstr "Adicionar canal"
 
@@ -235,6 +241,9 @@ msgstr "Adicionar novo canal"
 msgid "Add provider"
 msgstr "Adicionar provedor"
 
+msgid "Add the first channel above"
+msgstr "Adicione o primeiro canal acima"
+
 msgid "Addressing"
 msgstr "Endereçamento"
 
@@ -247,6 +256,9 @@ msgstr "Controles de admin"
 msgid "Admins only"
 msgstr "Somente admins"
 
+msgid "Alert sound overlay"
+msgstr "Overlay de sons de alerta"
+
 msgid "All"
 msgstr "Todos"
 
@@ -486,27 +498,27 @@ msgstr "O buffer ainda está curto — a janela do clipe cresce junto."
 msgid "Buffer:"
 msgstr "Buffer:"
 
-msgid "Buffering..."
-msgstr "Carregando..."
+msgid "Buffering…"
+msgstr "Carregando…"
 
 msgid "By default nothing is uploaded or deleted automatically. Enable these features deliberately."
 msgstr "Por padrão, nada é enviado ou excluído automaticamente. Ative esses recursos de forma consciente."
 
-msgid "CHANGE"
-msgstr "ALTERAR"
-
-msgid "CHANNEL MANAGEMENT (ADMIN)"
-msgstr "GERENCIAMENTO DE CANAIS (ADMIN)"
-
 msgid "Cancel"
 msgstr "Cancelar"
 
+msgid "Category"
+msgstr "Categoria"
+
 msgid "Category search failed."
 msgstr "Falha na busca de categorias."
 
 msgid "Category search is currently unavailable."
 msgstr "A busca de categorias está indisponível no momento."
 
+msgid "Change"
+msgstr "Alterar"
+
 msgid "Change banner"
 msgstr "Alterar banner"
 
@@ -522,6 +534,9 @@ msgstr "Ações do canal"
 msgid "Channel archive & recording metrics"
 msgstr "Arquivo de canais e métricas de gravação"
 
+msgid "Channel management (admin)"
+msgstr "Gerenciamento de canais (admin)"
+
 msgid "Channel not found."
 msgstr "Canal não encontrado."
 
@@ -578,12 +593,12 @@ msgstr "Limpeza enfileirada (tarefa #%(task)s)."
 msgid "Clear filters"
 msgstr "Limpar filtros"
 
-msgid "Click to change password"
-msgstr "Clique para alterar a senha"
-
 msgid "Clip"
 msgstr "Clipe"
 
+msgid "Clip Editor"
+msgstr "Editor de clipes"
+
 msgid "Clip URL is missing on this page."
 msgstr "URL do clipe ausente nesta página."
 
@@ -668,6 +683,9 @@ msgstr "Configurar canais de gravação e gerenciar as atribuições do arquivo"
 msgid "Configured streamers & sources"
 msgstr "Streamers e fontes configurados"
 
+msgid "Confirm"
+msgstr "Confirmar"
+
 msgid "Connect account"
 msgstr "Conectar conta"
 
@@ -689,6 +707,9 @@ msgstr "Conexão OK"
 msgid "Connection failed"
 msgstr "Falha na conexão"
 
+msgid "Connection failed. Check your network and try again."
+msgstr "Falha na conexão. Verifique sua rede e tente novamente."
+
 msgid "Connection lost — reconnecting…"
 msgstr "Conexão perdida — reconectando…"
 
@@ -705,6 +726,9 @@ msgstr "Painel de controle"
 msgid "Control the global maintenance mode or lock individual platform areas."
 msgstr "Controle o modo de manutenção global ou bloqueie áreas específicas da plataforma."
 
+msgid "Copied"
+msgstr "Copiado"
+
 msgid "Copy"
 msgstr "Copiar"
 
@@ -821,6 +845,14 @@ msgstr "Destino padrão"
 msgid "Delete"
 msgstr "Excluir"
 
+#, python-format
+msgid "Delete %(name)s? The file is removed from the archive and cannot be restored."
+msgstr "Excluir %(name)s? O arquivo é removido do acervo e não pode ser restaurado."
+
+#, python-format
+msgid "Delete backup %(name)s? This cannot be undone."
+msgstr "Excluir o backup %(name)s? Isso não pode ser desfeito."
+
 msgid "Delete folder"
 msgstr "Excluir pasta"
 
@@ -839,6 +871,12 @@ msgstr "Excluir localmente"
 msgid "Delete permanently"
 msgstr "Excluir permanentemente"
 
+msgid "Delete this streamer folder and all recordings? This cannot be undone."
+msgstr "Excluir a pasta deste streamer e todas as gravações? Isso não pode ser desfeito."
+
+msgid "Delete this video? The file is removed from the archive and cannot be restored."
+msgstr "Excluir este vídeo? O arquivo é removido do acervo e não pode ser restaurado."
+
 msgid "Delete user"
 msgstr "Excluir usuário"
 
@@ -919,8 +957,8 @@ msgstr "Baixar TXT"
 msgid "Download all"
 msgstr "Baixar tudo"
 
-msgid "Download all VODs?"
-msgstr "Baixar todos os VODs?"
+msgid "Download all VODs of this streamer as one archive? This can take a while for large channels."
+msgstr "Baixar todos os VODs deste streamer em um único arquivo? Em canais grandes isso pode demorar."
 
 msgid "Download archive & VODs"
 msgstr "Baixar arquivo e VODs"
@@ -939,7 +977,7 @@ msgstr "Download de todos os VODs iniciado em segundo plano."
 
 #, python-format
 msgid "Downloading... %(percent)s"
-msgstr "Baixando... %(percent)s"
+msgstr "Baixando… %(percent)s"
 
 #, python-format
 msgid "Drive quota active — do not press Play again (it extends the block). Seek back into the already loaded part, or wait about %(minutes)s min."
@@ -990,6 +1028,9 @@ msgstr "Endereço de e-mail"
 msgid "Email address (optional)"
 msgstr "Endereço de e-mail (opcional)"
 
+msgid "Emotes"
+msgstr "Emotes"
+
 msgid "Empty = AWS. For R2, B2, Wasabi, MinIO etc. enter the S3 endpoint."
 msgstr "Vazio = AWS. Para R2, B2, Wasabi, MinIO etc., informe o endpoint S3."
 
@@ -1005,6 +1046,9 @@ msgstr "Ativar imediatamente"
 msgid "Enable maintenance mode"
 msgstr "Ativar modo de manutenção"
 
+msgid "Enable maintenance mode? Everyone except allowlisted users sees the maintenance page until you end it."
+msgstr "Ativar o modo de manutenção? Todos, exceto os usuários liberados, verão a página de manutenção até você encerrá-lo."
+
 msgid "Enable recording"
 msgstr "Ativar gravação"
 
@@ -1102,6 +1146,9 @@ msgstr "Erro:"
 msgid "Error: %(error)s"
 msgstr "Erro: %(error)s"
 
+msgid "Everywhere"
+msgstr "Em todo lugar"
+
 msgid "Existing members of this group are automatically assigned to the default group <strong>Viewer</strong>."
 msgstr "Os membros atuais deste grupo são atribuídos automaticamente ao grupo padrão <strong>Viewer</strong>."
 
@@ -1118,10 +1165,7 @@ msgid "Exported by StreamVault"
 msgstr "Exportado pelo StreamVault"
 
 msgid "Extracting audio..."
-msgstr "Extraindo áudio..."
-
-msgid "FEATURED VOD"
-msgstr "VOD EM DESTAQUE"
+msgstr "Extraindo áudio…"
 
 msgid "Failed"
 msgstr "Falhou"
@@ -1132,6 +1176,9 @@ msgstr "Rápido"
 msgid "Feature permissions"
 msgstr "Permissões de recursos"
 
+msgid "Featured VOD"
+msgstr "Vod em destaque"
+
 msgid "Featured highlight"
 msgstr "Destaque em evidência"
 
@@ -1162,8 +1209,11 @@ msgstr "O arquivo foi enviado."
 msgid "Filter"
 msgstr "Filtrar"
 
-msgid "Filter chat..."
-msgstr "Filtrar chat..."
+msgid "Filter chat"
+msgstr "Filtrar chat"
+
+msgid "Filter chat…"
+msgstr "Filtrar chat…"
 
 msgid "First"
 msgstr "Primeira"
@@ -1441,19 +1491,6 @@ msgstr "Julho"
 msgid "June"
 msgstr "Junho"
 
-msgid "LIVE"
-msgstr "AO VIVO"
-
-#, python-format
-msgid "LIVE %(name)s (without Twitch login)"
-msgstr "AO VIVO %(name)s (sem login da Twitch)"
-
-msgid "LIVE & DISCORD ONLY"
-msgstr "SOMENTE AO VIVO E DISCORD"
-
-msgid "LIVE NOW"
-msgstr "AO VIVO AGORA"
-
 msgid "Language"
 msgstr "Idioma"
 
@@ -1502,11 +1539,14 @@ msgstr "Link copiado:"
 msgid "Live"
 msgstr "Ao vivo"
 
+msgid "Live & Discord only"
+msgstr "Somente ao vivo e discord"
+
 msgid "Live & Discord only:"
 msgstr "Somente ao vivo e Discord:"
 
 msgid "Live (recovering...)"
-msgstr "Ao vivo (recuperando...)"
+msgstr "Ao vivo (recuperando…)"
 
 msgid "Live channels"
 msgstr "Canais ao vivo"
@@ -1541,8 +1581,8 @@ msgstr "Somente transmissão ao vivo e alertas do Discord, sem gravação em dis
 msgid "Live stream highlight"
 msgstr "Destaque da transmissão ao vivo"
 
-msgid "Live stream is currently unavailable. Searching for stream..."
-msgstr "A transmissão ao vivo está indisponível no momento. Procurando transmissão..."
+msgid "Live stream is currently unavailable. Searching for stream…"
+msgstr "A transmissão ao vivo está indisponível no momento. Procurando transmissão…"
 
 msgid "Live stream not available."
 msgstr "Transmissão ao vivo indisponível."
@@ -1559,6 +1599,10 @@ msgstr "Assistir ao vivo"
 msgid "Live-only"
 msgstr "Somente ao vivo"
 
+#, python-format
+msgid "Live: %(name)s (without Twitch login)"
+msgstr "AO VIVO %(name)s (sem login da Twitch)"
+
 msgid "Load"
 msgstr "Carga"
 
@@ -1569,7 +1613,7 @@ msgid "Loading chat…"
 msgstr "Carregando chat…"
 
 msgid "Loading model..."
-msgstr "Carregando modelo..."
+msgstr "Carregando modelo…"
 
 msgid "Loading streams…"
 msgstr "Carregando transmissões…"
@@ -1599,6 +1643,9 @@ msgstr "Bloquear <strong>versão móvel</strong>"
 msgid "Log out"
 msgstr "Sair"
 
+msgid "Log out everywhere"
+msgstr "Sair em todos os dispositivos"
+
 msgid "Login"
 msgstr "Login"
 
@@ -1611,6 +1658,9 @@ msgstr "Falha no login."
 msgid "MP4 check not possible"
 msgstr "Verificação de MP4 não é possível"
 
+msgid "Main navigation"
+msgstr "Navegação principal"
+
 msgid "Maintenance"
 msgstr "Manutenção"
 
@@ -1676,6 +1726,9 @@ msgstr "Mensagem"
 msgid "Mobile live is temporarily disabled. Please use the desktop version or the installed app."
 msgstr "A transmissão ao vivo no celular está temporariamente desativada. Use a versão para desktop ou o app instalado."
 
+msgid "Mods"
+msgstr "Mods"
+
 msgid "Monitored"
 msgstr "Monitorado"
 
@@ -1697,9 +1750,6 @@ msgstr "Erro de rede"
 msgid "Network error while loading streams."
 msgstr "Erro de rede ao carregar as transmissões."
 
-msgid "Network error:"
-msgstr "Erro de rede:"
-
 msgid "Network is back — reconnecting…"
 msgstr "A rede voltou — reconectando…"
 
@@ -1718,8 +1768,8 @@ msgstr "Nova senha (deixe vazio para não alterar)"
 msgid "New password * (min. 8 characters)"
 msgstr "Nova senha * (mín. 8 caracteres)"
 
-msgid "New password..."
-msgstr "Nova senha..."
+msgid "New password…"
+msgstr "Nova senha…"
 
 msgid "New user"
 msgstr "Novo usuário"
@@ -1742,8 +1792,8 @@ msgstr "Nextcloud, ownCloud, Hetzner Storage Box ou qualquer servidor WebDAV com
 msgid "No (self-signed only)"
 msgstr "Não (somente autoassinado)"
 
-msgid "No VODs available in the archive"
-msgstr "Nenhum VOD disponível no arquivo"
+msgid "No VODs yet. Recordings appear here automatically as soon as a monitored channel goes live."
+msgstr "Ainda não há VODs. As gravações aparecem aqui automaticamente assim que um canal monitorado entra ao vivo."
 
 msgid "No acceptances yet."
 msgstr "Nenhuma aceitação ainda."
@@ -1778,6 +1828,9 @@ msgstr "Nenhum backup disponível."
 msgid "No badges received from Twitch."
 msgstr "Nenhum badge recebido da Twitch."
 
+msgid "No channels are monitored yet."
+msgstr "Nenhum canal é monitorado ainda."
+
 msgid "No chat"
 msgstr "Sem chat"
 
@@ -1818,9 +1871,6 @@ msgstr "Nenhum canal da Twitch monitorado."
 msgid "No monitored Twitch channels. Add streamers under Streamers."
 msgstr "Nenhum canal da Twitch monitorado. Adicione streamers em Streamers."
 
-msgid "No monitored channels configured."
-msgstr "Nenhum canal monitorado configurado."
-
 msgid "No recently watched streams yet."
 msgstr "Nenhuma transmissão assistida recentemente."
 
@@ -1875,30 +1925,15 @@ msgstr "Observação sobre OAuth"
 msgid "OAuth state tokens require a strong VOD_SECRET_KEY."
 msgstr "Os tokens de estado OAuth exigem uma VOD_SECRET_KEY forte."
 
+msgid "OBS overlays"
+msgstr "Overlays do OBS"
+
 msgid "OFF (normal operation)"
 msgstr "DESLIGADO (operação normal)"
 
-msgid "OFFLINE"
-msgstr "OFFLINE"
-
 msgid "OK"
 msgstr "OK"
 
-msgid "ONLINE"
-msgstr "ONLINE"
-
-msgid "OPERATING MODE:"
-msgstr "MODO DE OPERAÇÃO:"
-
-msgid "OPTION A: UPLOAD IMAGE FILE"
-msgstr "OPÇÃO A: ENVIAR ARQUIVO DE IMAGEM"
-
-msgid "OPTION A: UPLOAD PROFILE PICTURE"
-msgstr "OPÇÃO A: ENVIAR FOTO DE PERFIL"
-
-msgid "OPTION B: USE IMAGE URL"
-msgstr "OPÇÃO B: USAR URL DE IMAGEM"
-
 msgid "OR"
 msgstr "OU"
 
@@ -1924,6 +1959,9 @@ msgstr "Mais antigos primeiro"
 msgid "OneDrive / Microsoft 365 via Microsoft Graph with OAuth 2.0."
 msgstr "OneDrive / Microsoft 365 via Microsoft Graph com OAuth 2.0."
 
+msgid "Online"
+msgstr "Online"
+
 msgid "Only after a successful upload and optional cloud verification."
 msgstr "Somente após um envio bem-sucedido e a verificação opcional na nuvem."
 
@@ -1945,6 +1983,22 @@ msgstr "Abrir clipe"
 msgid "Open editor"
 msgstr "Abrir editor"
 
+#, python-format
+msgid "Open streamer %(name)s"
+msgstr "Abrir streamer %(name)s"
+
+msgid "Operating mode"
+msgstr "Modo de operação:"
+
+msgid "Option A: upload image file"
+msgstr "Opção a: enviar arquivo de imagem"
+
+msgid "Option A: upload profile picture"
+msgstr "Opção a: enviar foto de perfil"
+
+msgid "Option B: use image URL"
+msgstr "Opção b: usar url de imagem"
+
 msgid "Option sections"
 msgstr "Seções de opções"
 
@@ -2055,6 +2109,9 @@ msgstr "Reprodução indisponível"
 msgid "Player error — reconnecting…"
 msgstr "Erro no player — reconectando…"
 
+msgid "Please confirm"
+msgstr "Confirme, por favor"
+
 msgid "Please enter a name for the storage provider."
 msgstr "Informe um nome para o provedor de armazenamento."
 
@@ -2105,10 +2162,10 @@ msgid "Private video and stream archive console."
 msgstr "Console privado de arquivo de vídeos e transmissões."
 
 msgid "Processing video (this may take a while)..."
-msgstr "Processando vídeo (pode demorar)..."
+msgstr "Processando vídeo (pode demorar)…"
 
 msgid "Processing video..."
-msgstr "Processando vídeo..."
+msgstr "Processando vídeo…"
 
 msgid "Profile picture reset to default."
 msgstr "Foto de perfil redefinida para o padrão."
@@ -2153,8 +2210,8 @@ msgstr "Provedores"
 msgid "Public link created:"
 msgstr "Link público criado:"
 
-msgid "Purpose of this user group..."
-msgstr "Finalidade deste grupo de usuários..."
+msgid "Purpose of this user group…"
+msgstr "Finalidade deste grupo de usuários…"
 
 msgid "Quality"
 msgstr "Qualidade"
@@ -2168,22 +2225,12 @@ msgstr "Fila ilegível"
 msgid "Quiet"
 msgstr "Tranquilo"
 
-msgid "RECORDING"
-msgstr "GRAVANDO"
-
-msgid "RECORDING ACTIVE"
-msgstr "GRAVAÇÃO ATIVA"
-
 msgid "Ready"
 msgstr "Pronto"
 
 msgid "Real-time stream error — reconnecting…"
 msgstr "Erro na transmissão em tempo real — reconectando…"
 
-#, python-format
-msgid "Really delete backup %(name)s?"
-msgstr "Excluir mesmo o backup %(name)s?"
-
 msgid "Really delete file?"
 msgstr "Excluir mesmo o arquivo?"
 
@@ -2193,28 +2240,15 @@ msgstr "Excluir mesmo o arquivo na nuvem? A cópia local é mantida."
 msgid "Really delete the local file? The cloud copy is kept."
 msgstr "Excluir mesmo o arquivo local? A cópia na nuvem é mantida."
 
-msgid "Really delete?"
-msgstr "Excluir mesmo?"
-
-#, python-format
-msgid "Really remove channel %(name)s?"
-msgstr "Remover mesmo o canal %(name)s?"
-
 msgid "Really remove the provider? The cloud files are kept."
 msgstr "Remover mesmo o provedor? Os arquivos na nuvem são mantidos."
 
-msgid "Really rename the file?"
-msgstr "Renomear mesmo o arquivo?"
-
 msgid "Really reset the custom banner and switch to the default?"
 msgstr "Redefinir mesmo o banner personalizado e voltar ao padrão?"
 
 msgid "Really reset the custom profile picture and switch to the default?"
 msgstr "Redefinir mesmo a foto de perfil personalizada e voltar ao padrão?"
 
-msgid "Really revoke this share?"
-msgstr "Revogar mesmo este compartilhamento?"
-
 msgid "Really stop the recording?"
 msgstr "Parar mesmo a gravação?"
 
@@ -2224,6 +2258,9 @@ msgstr "Erros recentes de tarefas"
 msgid "Recently watched"
 msgstr "Assistidos recentemente"
 
+msgid "Recommended browser-source URLs. Replace TOKEN with the value of TTS_OVERLAY_TOKEN or ALERT_OVERLAY_TOKEN. The part after # stays in OBS and reaches the server only as a request header, never in a log line."
+msgstr "URLs recomendadas para a fonte de navegador. Substitua TOKEN pelo valor de TTS_OVERLAY_TOKEN ou ALERT_OVERLAY_TOKEN. A parte depois de # fica no OBS e chega ao servidor só como cabeçalho da requisição, nunca em um log."
+
 msgid "Recommended. Prevents data loss from incomplete uploads."
 msgstr "Recomendado. Evita perda de dados por envios incompletos."
 
@@ -2242,6 +2279,9 @@ msgstr "Gravação"
 msgid "Recording + live stream & Discord notification"
 msgstr "Gravação + transmissão ao vivo e notificação no Discord"
 
+msgid "Recording active"
+msgstr "Gravação ativa"
+
 msgid "Recording disabled (live & Discord only)"
 msgstr "Gravação desativada (somente ao vivo e Discord)"
 
@@ -2291,8 +2331,8 @@ msgid "Remove channel"
 msgstr "Remover canal"
 
 #, python-format
-msgid "Remove channel %(name)s?"
-msgstr "Remover o canal %(name)s?"
+msgid "Remove channel %(name)s? Monitoring stops; existing recordings stay in the archive."
+msgstr "Remover o canal %(name)s? O monitoramento para; as gravações existentes ficam no acervo."
 
 msgid "Remove only the database entry?"
 msgstr "Remover apenas a entrada do banco de dados?"
@@ -2307,6 +2347,9 @@ msgstr "Tarefa de remux iniciada. O progresso aparece no painel de admin."
 msgid "Rename file"
 msgstr "Renomear arquivo"
 
+msgid "Rename the file? Existing links and shares to the old file name stop working."
+msgstr "Renomear o arquivo? Links e compartilhamentos existentes para o nome antigo deixarão de funcionar."
+
 msgid "Renamed."
 msgstr "Renomeado."
 
@@ -2332,6 +2375,9 @@ msgstr "Falha ao reiniciar."
 msgid "Restart services"
 msgstr "Reiniciar serviços"
 
+msgid "Restart the recorder and chat logger now? Running recordings are interrupted for a few seconds."
+msgstr "Reiniciar agora o gravador e o registrador de chat? As gravações em andamento são interrompidas por alguns segundos."
+
 msgid "Restore"
 msgstr "Restaurar"
 
@@ -2348,6 +2394,9 @@ msgstr "Retomar reprodução"
 msgid "Revoke"
 msgstr "Revogar"
 
+msgid "Revoke this share? The link stops working immediately."
+msgstr "Revogar este compartilhamento? O link para de funcionar imediatamente."
+
 #, python-format
 msgid "Role access '%(slug)s' added."
 msgstr "Acesso por função '%(slug)s' adicionado."
@@ -2380,9 +2429,6 @@ msgstr "Em execução…"
 msgid "S3-compatible"
 msgstr "Compatível com S3"
 
-msgid "START"
-msgstr "INÍCIO"
-
 msgid "Safety migration:"
 msgstr "Migração de segurança:"
 
@@ -2436,10 +2482,7 @@ msgid "Saving transcript failed: %(error)s"
 msgstr "Falha ao salvar a transcrição: %(error)s"
 
 msgid "Saving transcript..."
-msgstr "Salvando transcrição..."
-
-msgid "Saving..."
-msgstr "Salvando..."
+msgstr "Salvando transcrição…"
 
 msgid "Saving…"
 msgstr "Salvando…"
@@ -2447,8 +2490,8 @@ msgstr "Salvando…"
 msgid "Search"
 msgstr "Buscar"
 
-msgid "Search VODs, streamers or games..."
-msgstr "Buscar VODs, streamers ou jogos..."
+msgid "Search VODs, streamers or games…"
+msgstr "Buscar VODs, streamers ou jogos…"
 
 msgid "Search category"
 msgstr "Buscar categoria"
@@ -2459,8 +2502,11 @@ msgstr "Buscar categoria / jogo…"
 msgid "Search failed."
 msgstr "Falha na busca."
 
-msgid "Search recordings (title, date, game)..."
-msgstr "Buscar gravações (título, data, jogo)..."
+msgid "Search recordings"
+msgstr "Buscar gravações"
+
+msgid "Search recordings (title, date, game)…"
+msgstr "Buscar gravações (título, data, jogo)…"
 
 msgid "Search results"
 msgstr "Resultados da busca"
@@ -2471,21 +2517,21 @@ msgstr "Buscar streamer ou canal…"
 msgid "Search streamers"
 msgstr "Buscar streamers"
 
-msgid "Search term (e.g. player name, chat message, date)..."
-msgstr "Termo de busca (ex.: nome do jogador, mensagem do chat, data)..."
-
-msgid "Search user, email or group..."
-msgstr "Buscar usuário, e-mail ou grupo..."
+msgid "Search term (e.g. player name, chat message, date)…"
+msgstr "Termo de busca (ex.: nome do jogador, mensagem do chat, data)…"
 
-msgid "Search..."
-msgstr "Buscar..."
+msgid "Search user, email or group…"
+msgstr "Buscar usuário, e-mail ou grupo…"
 
-msgid "Searching for stream..."
-msgstr "Procurando transmissão..."
+msgid "Searching for stream…"
+msgstr "Procurando transmissão…"
 
 msgid "Searching…"
 msgstr "Buscando…"
 
+msgid "Search…"
+msgstr "Buscar…"
+
 msgid "Seconds after trigger"
 msgstr "Segundos após o gatilho"
 
@@ -2575,9 +2621,21 @@ msgstr "Exibido na navegação, na barra lateral e nos cards de streamers."
 msgid "Sign in"
 msgstr "Entrar"
 
+msgid "Sign out on every device? Every session of this account ends, including this one."
+msgstr "Sair em todos os dispositivos? Todas as sessões desta conta terminam, inclusive esta."
+
 msgid "Size"
 msgstr "Tamanho"
 
+msgid "Skip to content"
+msgstr "Pular para o conteúdo"
+
+msgid "Sort"
+msgstr "Ordenar"
+
+msgid "Sort order"
+msgstr "Ordem"
+
 msgid "Sound"
 msgstr "Som"
 
@@ -2619,7 +2677,7 @@ msgid "Starting"
 msgstr "Iniciando"
 
 msgid "Starting download..."
-msgstr "Iniciando download..."
+msgstr "Iniciando download…"
 
 msgid "Status"
 msgstr "Status"
@@ -2658,6 +2716,9 @@ msgstr "Provedor de armazenamento não encontrado."
 msgid "Storage providers"
 msgstr "Provedores de armazenamento"
 
+msgid "Storage usage"
+msgstr "Uso de armazenamento"
+
 #, python-format
 msgid "Storage: <strong>%(pct)s%%</strong>"
 msgstr "Armazenamento: <strong>%(pct)s%%</strong>"
@@ -2719,6 +2780,9 @@ msgstr "Streamers, VODs e históricos de chat"
 msgid "Subfolder"
 msgstr "Subpasta"
 
+msgid "Subs"
+msgstr "Subs"
+
 msgid "Success"
 msgstr "Sucesso"
 
@@ -2806,6 +2870,9 @@ msgstr "Versão dos termos desatualizada — recarregue a página e aceite novam
 msgid "Test"
 msgstr "Testar"
 
+msgid "Text-to-speech overlay"
+msgstr "Overlay de texto para fala"
+
 msgid "Thanks for your understanding. Authorized users can sign in via the login page."
 msgstr "Obrigado pela compreensão. Usuários autorizados podem entrar pela página de login."
 
@@ -2918,8 +2985,11 @@ msgstr "Hoje, %(time)s"
 msgid "Too many VODs are playing right now. Live is not affected. Try again in a few minutes — a slot frees up as soon as someone closes the player."
 msgstr "Há VODs demais sendo reproduzidos no momento. O ao vivo não é afetado. Tente novamente em alguns minutos — um slot é liberado assim que alguém fechar o player."
 
-msgid "Too many attempts. IP temporarily blocked. Please try again later."
-msgstr "Tentativas demais. IP bloqueado temporariamente. Tente novamente mais tarde."
+#, python-format
+msgid "Too many login attempts. Please try again in %(num)d minute."
+msgid_plural "Too many login attempts. Please try again in %(num)d minutes."
+msgstr[0] "Muitas tentativas de login. Tente novamente em %(num)d minuto."
+msgstr[1] "Muitas tentativas de login. Tente novamente em %(num)d minutos."
 
 msgid "Top streams are currently unavailable. Use monitored channels or the search."
 msgstr "As principais transmissões estão indisponíveis no momento. Use os canais monitorados ou a busca."
@@ -2972,6 +3042,9 @@ msgstr "Transcrição concluída"
 msgid "Transcript missing despite finished status"
 msgstr "Transcrição ausente apesar do status concluído"
 
+msgid "Transcript progress"
+msgstr "Progresso da transcrição"
+
 msgid "Transcription cancelled"
 msgstr "Transcrição cancelada"
 
@@ -2995,7 +3068,7 @@ msgid "Transcription queued in the worker. The result appears on the next page l
 msgstr "Transcrição enfileirada no worker. O resultado aparece no próximo carregamento da página após a conclusão."
 
 msgid "Transcription running..."
-msgstr "Transcrição em andamento..."
+msgstr "Transcrição em andamento…"
 
 msgid "Transcription timed out"
 msgstr "Tempo limite da transcrição esgotado"
@@ -3012,8 +3085,11 @@ msgstr "Twitch / padrão"
 msgid "Twitch badge library synchronized."
 msgstr "Biblioteca de badges da Twitch sincronizada."
 
-msgid "Twitch channel name..."
-msgstr "Nome do canal da Twitch..."
+msgid "Twitch channel name"
+msgstr "Nome do canal na Twitch"
+
+msgid "Twitch channel name…"
+msgstr "Nome do canal da Twitch…"
 
 msgid "Twitch live chat"
 msgstr "Chat ao vivo da Twitch"
@@ -3021,8 +3097,8 @@ msgstr "Chat ao vivo da Twitch"
 msgid "Twitch live stream"
 msgstr "Transmissão ao vivo da Twitch"
 
-msgid "Twitch name (e.g. shroud) or YouTube URL / @handle..."
-msgstr "Nome na Twitch (ex.: shroud) ou URL do YouTube / @handle..."
+msgid "Twitch name (e.g. shroud) or YouTube URL / @handle…"
+msgstr "Nome na Twitch (ex.: shroud) ou URL do YouTube / @handle…"
 
 msgid "Twitch or YouTube supported"
 msgstr "Twitch ou YouTube suportados"
@@ -3240,12 +3316,6 @@ msgstr "Visível para:"
 msgid "Volume"
 msgstr "Volume"
 
-msgid "WARNING: Do you want to permanently delete this streamer and all recordings?"
-msgstr "ATENÇÃO: deseja excluir permanentemente este streamer e todas as gravações?"
-
-msgid "WATCH LIVE"
-msgstr "ASSISTIR AO VIVO"
-
 msgid "Waiting for server stream…"
 msgstr "Aguardando a transmissão do servidor…"
 
@@ -3258,6 +3328,9 @@ msgstr "Assistir"
 msgid "Watch latest video"
 msgstr "Assistir ao vídeo mais recente"
 
+msgid "Watch live"
+msgstr "Assistir ao vivo"
+
 msgid "Watch now"
 msgstr "Assistir agora"
 
@@ -3314,8 +3387,8 @@ msgstr "Você não pode se mover para um grupo sem permissões de gerenciamento
 msgid "You have accepted version %(version)s."
 msgstr "Você aceitou a versão %(version)s."
 
-msgid "Your IP has been temporarily blocked. Please try again later."
-msgstr "Seu IP foi bloqueado temporariamente. Tente novamente mais tarde."
+msgid "Your IP has been blocked. Please contact the administrator."
+msgstr "Seu IP foi bloqueado. Entre em contato com o administrador."
 
 msgid "Your browser does not support the video tag."
 msgstr "Seu navegador não oferece suporte à tag de vídeo."
@@ -3359,12 +3432,12 @@ msgstr "ex.: arquivo VIP"
 msgid "e.g. alice, bob"
 msgstr "ex.: alice, bob"
 
-msgid "e.g. john_doe"
-msgstr "ex.: joao_silva"
-
 msgid "e.g. channel_name"
 msgstr "ex.: channel_name"
 
+msgid "e.g. john_doe"
+msgstr "ex.: joao_silva"
+
 #, python-format
 msgid "effective from %(date)s"
 msgstr "em vigor a partir de %(date)s"
diff --git a/WEBUI/translations/tr/LC_MESSAGES/messages.mo b/WEBUI/translations/tr/LC_MESSAGES/messages.mo
index b3606e3..27df36b 100644
Binary files a/WEBUI/translations/tr/LC_MESSAGES/messages.mo and b/WEBUI/translations/tr/LC_MESSAGES/messages.mo differ
diff --git a/WEBUI/translations/tr/LC_MESSAGES/messages.po b/WEBUI/translations/tr/LC_MESSAGES/messages.po
index e7746ee..35bb06f 100644
--- a/WEBUI/translations/tr/LC_MESSAGES/messages.po
+++ b/WEBUI/translations/tr/LC_MESSAGES/messages.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: StreamVault VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2026-11-03 19:28+0100\n"
+"POT-Creation-Date: 2026-11-12 15:41+0100\n"
 "PO-Revision-Date: 2026-11-03 19:31+0100\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language: tr\n"
@@ -181,9 +181,6 @@ msgstr "Zaten bir geri yükleme çalışıyor."
 msgid "A saved value is kept if the field is left empty."
 msgstr "Alan boş bırakılırsa kayıtlı değer korunur."
 
-msgid "ACTIVE (locked)"
-msgstr "ETKİN (kilitli)"
-
 msgid "AWS S3, Cloudflare R2, Backblaze B2, Wasabi, MinIO, Hetzner or any S3-compatible endpoint."
 msgstr "AWS S3, Cloudflare R2, Backblaze B2, Wasabi, MinIO, Hetzner veya S3 uyumlu herhangi bir uç nokta."
 
@@ -196,6 +193,9 @@ msgstr "Koşulları kabul et"
 msgid "Account active (access allowed)"
 msgstr "Hesap etkin (erişim izinli)"
 
+msgid "Accounts"
+msgstr "Hesaplar"
+
 msgid "Action"
 msgstr "İşlem"
 
@@ -208,6 +208,9 @@ msgstr "Hesabı hemen etkinleştir"
 msgid "Active"
 msgstr "Etkin"
 
+msgid "Active (locked)"
+msgstr "ETKİN (kilitli)"
+
 msgid "Active shares"
 msgstr "Etkin paylaşımlar"
 
@@ -220,6 +223,9 @@ msgstr "Etkin: yeni yayınlar otomatik olarak açılır. Aşağıdan tek tek kla
 msgid "Actively monitored by the recorder core"
 msgstr "Kayıt çekirdeği tarafından etkin olarak izleniyor"
 
+msgid "Add a channel to record"
+msgstr "Kaydedilecek kanal ekle"
+
 msgid "Add channel"
 msgstr "Kanal ekle"
 
@@ -229,6 +235,9 @@ msgstr "Yeni kanal ekle"
 msgid "Add provider"
 msgstr "Sağlayıcı ekle"
 
+msgid "Add the first channel above"
+msgstr "İlk kanalı yukarıdan ekleyin"
+
 msgid "Addressing"
 msgstr "Adresleme"
 
@@ -241,6 +250,9 @@ msgstr "Yönetici kontrolleri"
 msgid "Admins only"
 msgstr "Yalnızca yöneticiler"
 
+msgid "Alert sound overlay"
+msgstr "Uyarı sesi katmanı"
+
 msgid "All"
 msgstr "Tümü"
 
@@ -480,27 +492,27 @@ msgstr "Arabellek henüz kısa — klip aralığı onunla birlikte büyür."
 msgid "Buffer:"
 msgstr "Arabellek:"
 
-msgid "Buffering..."
-msgstr "Arabelleğe alınıyor..."
+msgid "Buffering…"
+msgstr "Arabelleğe alınıyor…"
 
 msgid "By default nothing is uploaded or deleted automatically. Enable these features deliberately."
 msgstr "Varsayılan olarak hiçbir şey otomatik yüklenmez veya silinmez. Bu özellikleri bilinçli olarak etkinleştirin."
 
-msgid "CHANGE"
-msgstr "DEĞİŞTİR"
-
-msgid "CHANNEL MANAGEMENT (ADMIN)"
-msgstr "KANAL YÖNETİMİ (YÖNETİCİ)"
-
 msgid "Cancel"
 msgstr "İptal"
 
+msgid "Category"
+msgstr "Kategori"
+
 msgid "Category search failed."
 msgstr "Kategori araması başarısız."
 
 msgid "Category search is currently unavailable."
 msgstr "Kategori araması şu anda kullanılamıyor."
 
+msgid "Change"
+msgstr "Deği̇şti̇r"
+
 msgid "Change banner"
 msgstr "Banner'ı değiştir"
 
@@ -516,6 +528,9 @@ msgstr "Kanal işlemleri"
 msgid "Channel archive & recording metrics"
 msgstr "Kanal arşivi ve kayıt metrikleri"
 
+msgid "Channel management (admin)"
+msgstr "Kanal yöneti̇mi̇ (yöneti̇ci̇)"
+
 msgid "Channel not found."
 msgstr "Kanal bulunamadı."
 
@@ -572,12 +587,12 @@ msgstr "Temizleme kuyruğa alındı (görev #%(task)s)."
 msgid "Clear filters"
 msgstr "Filtreleri temizle"
 
-msgid "Click to change password"
-msgstr "Şifreyi değiştirmek için tıklayın"
-
 msgid "Clip"
 msgstr "Klip"
 
+msgid "Clip Editor"
+msgstr "Klip düzenleyici"
+
 msgid "Clip URL is missing on this page."
 msgstr "Bu sayfada klip URL'si eksik."
 
@@ -662,6 +677,9 @@ msgstr "Kayıt kanallarını yapılandırın ve arşiv atamalarını yönetin"
 msgid "Configured streamers & sources"
 msgstr "Yapılandırılmış yayıncılar ve kaynaklar"
 
+msgid "Confirm"
+msgstr "Onayla"
+
 msgid "Connect account"
 msgstr "Hesap bağla"
 
@@ -683,6 +701,9 @@ msgstr "Bağlantı tamam"
 msgid "Connection failed"
 msgstr "Bağlantı başarısız"
 
+msgid "Connection failed. Check your network and try again."
+msgstr "Bağlantı kurulamadı. Ağınızı kontrol edip tekrar deneyin."
+
 msgid "Connection lost — reconnecting…"
 msgstr "Bağlantı koptu — yeniden bağlanılıyor…"
 
@@ -699,6 +720,9 @@ msgstr "Kontrol paneli"
 msgid "Control the global maintenance mode or lock individual platform areas."
 msgstr "Genel bakım modunu yönetin veya platformun belirli alanlarını kilitleyin."
 
+msgid "Copied"
+msgstr "Kopyalandı"
+
 msgid "Copy"
 msgstr "Kopyala"
 
@@ -815,6 +839,14 @@ msgstr "Varsayılan hedef"
 msgid "Delete"
 msgstr "Sil"
 
+#, python-format
+msgid "Delete %(name)s? The file is removed from the archive and cannot be restored."
+msgstr "%(name)s silinsin mi? Dosya arşivden kaldırılır ve geri yüklenemez."
+
+#, python-format
+msgid "Delete backup %(name)s? This cannot be undone."
+msgstr "%(name)s yedeği silinsin mi? Bu işlem geri alınamaz."
+
 msgid "Delete folder"
 msgstr "Klasörü sil"
 
@@ -833,6 +865,12 @@ msgstr "Yerel olarak sil"
 msgid "Delete permanently"
 msgstr "Kalıcı olarak sil"
 
+msgid "Delete this streamer folder and all recordings? This cannot be undone."
+msgstr "Bu yayıncının klasörü ve tüm kayıtlar silinsin mi? Bu işlem geri alınamaz."
+
+msgid "Delete this video? The file is removed from the archive and cannot be restored."
+msgstr "Bu video silinsin mi? Dosya arşivden kaldırılır ve geri yüklenemez."
+
 msgid "Delete user"
 msgstr "Kullanıcıyı sil"
 
@@ -913,8 +951,8 @@ msgstr "TXT indir"
 msgid "Download all"
 msgstr "Tümünü indir"
 
-msgid "Download all VODs?"
-msgstr "Tüm VOD'lar indirilsin mi?"
+msgid "Download all VODs of this streamer as one archive? This can take a while for large channels."
+msgstr "Bu yayıncının tüm VOD'ları tek bir arşiv olarak indirilsin mi? Büyük kanallarda bu biraz sürebilir."
 
 msgid "Download archive & VODs"
 msgstr "Arşivi ve VOD'ları indir"
@@ -933,7 +971,7 @@ msgstr "Tüm VOD'ların indirilmesi arka planda başlatıldı."
 
 #, python-format
 msgid "Downloading... %(percent)s"
-msgstr "İndiriliyor... %(percent)s"
+msgstr "İndiriliyor… %(percent)s"
 
 #, python-format
 msgid "Drive quota active — do not press Play again (it extends the block). Seek back into the already loaded part, or wait about %(minutes)s min."
@@ -984,6 +1022,9 @@ msgstr "E-posta adresi"
 msgid "Email address (optional)"
 msgstr "E-posta adresi (isteğe bağlı)"
 
+msgid "Emotes"
+msgstr "Emote'lar"
+
 msgid "Empty = AWS. For R2, B2, Wasabi, MinIO etc. enter the S3 endpoint."
 msgstr "Boş = AWS. R2, B2, Wasabi, MinIO vb. için S3 uç noktasını girin."
 
@@ -999,6 +1040,9 @@ msgstr "Hemen etkinleştir"
 msgid "Enable maintenance mode"
 msgstr "Bakım modunu etkinleştir"
 
+msgid "Enable maintenance mode? Everyone except allowlisted users sees the maintenance page until you end it."
+msgstr "Bakım modu açılsın mı? İzin listesindekiler dışında herkes, siz kapatana kadar bakım sayfasını görür."
+
 msgid "Enable recording"
 msgstr "Kaydı etkinleştir"
 
@@ -1096,6 +1140,9 @@ msgstr "Hata:"
 msgid "Error: %(error)s"
 msgstr "Hata: %(error)s"
 
+msgid "Everywhere"
+msgstr "Her yerde"
+
 msgid "Existing members of this group are automatically assigned to the default group <strong>Viewer</strong>."
 msgstr "Bu grubun mevcut üyeleri otomatik olarak varsayılan <strong>İzleyici</strong> grubuna atanır."
 
@@ -1112,10 +1159,7 @@ msgid "Exported by StreamVault"
 msgstr "StreamVault tarafından dışa aktarıldı"
 
 msgid "Extracting audio..."
-msgstr "Ses çıkarılıyor..."
-
-msgid "FEATURED VOD"
-msgstr "ÖNE ÇIKAN VOD"
+msgstr "Ses çıkarılıyor…"
 
 msgid "Failed"
 msgstr "Başarısız"
@@ -1126,6 +1170,9 @@ msgstr "Hızlı"
 msgid "Feature permissions"
 msgstr "Özellik izinleri"
 
+msgid "Featured VOD"
+msgstr "Öne çikan vod"
+
 msgid "Featured highlight"
 msgstr "Öne çıkan"
 
@@ -1156,8 +1203,11 @@ msgstr "Dosya yüklendi."
 msgid "Filter"
 msgstr "Filtre"
 
-msgid "Filter chat..."
-msgstr "Sohbeti filtrele..."
+msgid "Filter chat"
+msgstr "Sohbeti filtrele"
+
+msgid "Filter chat…"
+msgstr "Sohbeti filtrele…"
 
 msgid "First"
 msgstr "İlk"
@@ -1435,19 +1485,6 @@ msgstr "Temmuz"
 msgid "June"
 msgstr "Haziran"
 
-msgid "LIVE"
-msgstr "CANLI"
-
-#, python-format
-msgid "LIVE %(name)s (without Twitch login)"
-msgstr "CANLI %(name)s (Twitch girişi olmadan)"
-
-msgid "LIVE & DISCORD ONLY"
-msgstr "YALNIZCA CANLI VE DISCORD"
-
-msgid "LIVE NOW"
-msgstr "ŞU AN CANLI"
-
 msgid "Language"
 msgstr "Dil"
 
@@ -1496,11 +1533,14 @@ msgstr "Bağlantı kopyalandı:"
 msgid "Live"
 msgstr "Canlı"
 
+msgid "Live & Discord only"
+msgstr "Yalnizca canli ve discord"
+
 msgid "Live & Discord only:"
 msgstr "Yalnızca canlı ve Discord:"
 
 msgid "Live (recovering...)"
-msgstr "Canlı (kurtarılıyor...)"
+msgstr "Canlı (kurtarılıyor…)"
 
 msgid "Live channels"
 msgstr "Canlı kanallar"
@@ -1535,8 +1575,8 @@ msgstr "Yalnızca canlı yayın ve Discord bildirimleri, diske kayıt yok"
 msgid "Live stream highlight"
 msgstr "Canlı yayın öne çıkanı"
 
-msgid "Live stream is currently unavailable. Searching for stream..."
-msgstr "Canlı yayın şu anda kullanılamıyor. Yayın aranıyor..."
+msgid "Live stream is currently unavailable. Searching for stream…"
+msgstr "Canlı yayın şu anda kullanılamıyor. Yayın aranıyor…"
 
 msgid "Live stream not available."
 msgstr "Canlı yayın mevcut değil."
@@ -1553,6 +1593,10 @@ msgstr "Canlı izle"
 msgid "Live-only"
 msgstr "Yalnızca canlı"
 
+#, python-format
+msgid "Live: %(name)s (without Twitch login)"
+msgstr "CANLI %(name)s (Twitch girişi olmadan)"
+
 msgid "Load"
 msgstr "Yük"
 
@@ -1563,7 +1607,7 @@ msgid "Loading chat…"
 msgstr "Sohbet yükleniyor…"
 
 msgid "Loading model..."
-msgstr "Model yükleniyor..."
+msgstr "Model yükleniyor…"
 
 msgid "Loading streams…"
 msgstr "Yayınlar yükleniyor…"
@@ -1593,6 +1637,9 @@ msgstr "<strong>Mobil sürümü</strong> kilitle"
 msgid "Log out"
 msgstr "Çıkış yap"
 
+msgid "Log out everywhere"
+msgstr "Her yerden çıkış yap"
+
 msgid "Login"
 msgstr "Giriş"
 
@@ -1605,6 +1652,9 @@ msgstr "Giriş başarısız."
 msgid "MP4 check not possible"
 msgstr "MP4 kontrolü yapılamıyor"
 
+msgid "Main navigation"
+msgstr "Ana gezinme"
+
 msgid "Maintenance"
 msgstr "Bakım"
 
@@ -1670,6 +1720,9 @@ msgstr "Mesaj"
 msgid "Mobile live is temporarily disabled. Please use the desktop version or the installed app."
 msgstr "Mobil canlı geçici olarak devre dışı. Lütfen masaüstü sürümünü veya yüklü uygulamayı kullanın."
 
+msgid "Mods"
+msgstr "Moderatörler"
+
 msgid "Monitored"
 msgstr "İzleniyor"
 
@@ -1691,9 +1744,6 @@ msgstr "Ağ hatası"
 msgid "Network error while loading streams."
 msgstr "Yayınlar yüklenirken ağ hatası."
 
-msgid "Network error:"
-msgstr "Ağ hatası:"
-
 msgid "Network is back — reconnecting…"
 msgstr "Ağ geri geldi — yeniden bağlanılıyor…"
 
@@ -1712,8 +1762,8 @@ msgstr "Yeni şifre (değiştirmemek için boş bırakın)"
 msgid "New password * (min. 8 characters)"
 msgstr "Yeni şifre * (en az 8 karakter)"
 
-msgid "New password..."
-msgstr "Yeni şifre..."
+msgid "New password…"
+msgstr "Yeni şifre…"
 
 msgid "New user"
 msgstr "Yeni kullanıcı"
@@ -1736,8 +1786,8 @@ msgstr "Uygulama şifresi olan Nextcloud, ownCloud, Hetzner Storage Box veya her
 msgid "No (self-signed only)"
 msgstr "Hayır (yalnızca kendinden imzalı için)"
 
-msgid "No VODs available in the archive"
-msgstr "Arşivde VOD yok"
+msgid "No VODs yet. Recordings appear here automatically as soon as a monitored channel goes live."
+msgstr "Henüz VOD yok. İzlenen bir kanal yayına başladığında kayıtlar burada otomatik olarak görünür."
 
 msgid "No acceptances yet."
 msgstr "Henüz onay yok."
@@ -1772,6 +1822,9 @@ msgstr "Kullanılabilir yedek yok."
 msgid "No badges received from Twitch."
 msgstr "Twitch'ten rozet alınamadı."
 
+msgid "No channels are monitored yet."
+msgstr "Henüz izlenen kanal yok."
+
 msgid "No chat"
 msgstr "Sohbet yok"
 
@@ -1812,9 +1865,6 @@ msgstr "İzlenen Twitch kanalı yok."
 msgid "No monitored Twitch channels. Add streamers under Streamers."
 msgstr "İzlenen Twitch kanalı yok. Yayıncılar bölümünden yayıncı ekleyin."
 
-msgid "No monitored channels configured."
-msgstr "İzlenen kanal yapılandırılmamış."
-
 msgid "No recently watched streams yet."
 msgstr "Henüz yakın zamanda izlenen yayın yok."
 
@@ -1869,30 +1919,15 @@ msgstr "OAuth notu"
 msgid "OAuth state tokens require a strong VOD_SECRET_KEY."
 msgstr "OAuth durum belirteçleri güçlü bir VOD_SECRET_KEY gerektirir."
 
+msgid "OBS overlays"
+msgstr "OBS katmanları"
+
 msgid "OFF (normal operation)"
 msgstr "KAPALI (normal çalışma)"
 
-msgid "OFFLINE"
-msgstr "ÇEVRİMDIŞI"
-
 msgid "OK"
 msgstr "Tamam"
 
-msgid "ONLINE"
-msgstr "ÇEVRİMİÇİ"
-
-msgid "OPERATING MODE:"
-msgstr "ÇALIŞMA MODU:"
-
-msgid "OPTION A: UPLOAD IMAGE FILE"
-msgstr "SEÇENEK A: GÖRSEL DOSYASI YÜKLE"
-
-msgid "OPTION A: UPLOAD PROFILE PICTURE"
-msgstr "SEÇENEK A: PROFİL RESMİ YÜKLE"
-
-msgid "OPTION B: USE IMAGE URL"
-msgstr "SEÇENEK B: GÖRSEL URL'Sİ KULLAN"
-
 msgid "OR"
 msgstr "VEYA"
 
@@ -1918,6 +1953,9 @@ msgstr "Önce en eski"
 msgid "OneDrive / Microsoft 365 via Microsoft Graph with OAuth 2.0."
 msgstr "OAuth 2.0 ile Microsoft Graph üzerinden OneDrive / Microsoft 365."
 
+msgid "Online"
+msgstr "Çevri̇mi̇çi̇"
+
 msgid "Only after a successful upload and optional cloud verification."
 msgstr "Yalnızca başarılı bir yüklemeden ve isteğe bağlı bulut doğrulamasından sonra."
 
@@ -1939,6 +1977,22 @@ msgstr "Klibi aç"
 msgid "Open editor"
 msgstr "Düzenleyiciyi aç"
 
+#, python-format
+msgid "Open streamer %(name)s"
+msgstr "%(name)s yayıncısını aç"
+
+msgid "Operating mode"
+msgstr "Çalişma modu:"
+
+msgid "Option A: upload image file"
+msgstr "Seçenek a: görsel dosyasi yükle"
+
+msgid "Option A: upload profile picture"
+msgstr "Seçenek a: profi̇l resmi̇ yükle"
+
+msgid "Option B: use image URL"
+msgstr "Seçenek b: görsel url'si̇ kullan"
+
 msgid "Option sections"
 msgstr "Seçenek bölümleri"
 
@@ -2049,6 +2103,9 @@ msgstr "Oynatma kullanılamıyor"
 msgid "Player error — reconnecting…"
 msgstr "Oynatıcı hatası — yeniden bağlanılıyor…"
 
+msgid "Please confirm"
+msgstr "Lütfen onaylayın"
+
 msgid "Please enter a name for the storage provider."
 msgstr "Lütfen depolama sağlayıcısı için bir ad girin."
 
@@ -2099,10 +2156,10 @@ msgid "Private video and stream archive console."
 msgstr "Özel video ve yayın arşivi konsolu."
 
 msgid "Processing video (this may take a while)..."
-msgstr "Video işleniyor (bu biraz sürebilir)..."
+msgstr "Video işleniyor (bu biraz sürebilir)…"
 
 msgid "Processing video..."
-msgstr "Video işleniyor..."
+msgstr "Video işleniyor…"
 
 msgid "Profile picture reset to default."
 msgstr "Profil resmi varsayılana sıfırlandı."
@@ -2147,8 +2204,8 @@ msgstr "Sağlayıcılar"
 msgid "Public link created:"
 msgstr "Herkese açık bağlantı oluşturuldu:"
 
-msgid "Purpose of this user group..."
-msgstr "Bu kullanıcı grubunun amacı..."
+msgid "Purpose of this user group…"
+msgstr "Bu kullanıcı grubunun amacı…"
 
 msgid "Quality"
 msgstr "Kalite"
@@ -2162,22 +2219,12 @@ msgstr "Kuyruk okunamıyor"
 msgid "Quiet"
 msgstr "Sakin"
 
-msgid "RECORDING"
-msgstr "KAYDEDİLİYOR"
-
-msgid "RECORDING ACTIVE"
-msgstr "KAYIT ETKİN"
-
 msgid "Ready"
 msgstr "Hazır"
 
 msgid "Real-time stream error — reconnecting…"
 msgstr "Gerçek zamanlı yayın hatası — yeniden bağlanılıyor…"
 
-#, python-format
-msgid "Really delete backup %(name)s?"
-msgstr "%(name)s yedeği gerçekten silinsin mi?"
-
 msgid "Really delete file?"
 msgstr "Dosya gerçekten silinsin mi?"
 
@@ -2187,28 +2234,15 @@ msgstr "Bulut dosyası gerçekten silinsin mi? Yerel kopya korunur."
 msgid "Really delete the local file? The cloud copy is kept."
 msgstr "Yerel dosya gerçekten silinsin mi? Bulut kopyası korunur."
 
-msgid "Really delete?"
-msgstr "Gerçekten silinsin mi?"
-
-#, python-format
-msgid "Really remove channel %(name)s?"
-msgstr "%(name)s kanalı gerçekten kaldırılsın mı?"
-
 msgid "Really remove the provider? The cloud files are kept."
 msgstr "Sağlayıcı gerçekten kaldırılsın mı? Bulut dosyaları korunur."
 
-msgid "Really rename the file?"
-msgstr "Dosya gerçekten yeniden adlandırılsın mı?"
-
 msgid "Really reset the custom banner and switch to the default?"
 msgstr "Özel banner gerçekten sıfırlanıp varsayılana geçilsin mi?"
 
 msgid "Really reset the custom profile picture and switch to the default?"
 msgstr "Özel profil resmi gerçekten sıfırlanıp varsayılana geçilsin mi?"
 
-msgid "Really revoke this share?"
-msgstr "Bu paylaşım gerçekten iptal edilsin mi?"
-
 msgid "Really stop the recording?"
 msgstr "Kayıt gerçekten durdurulsun mu?"
 
@@ -2218,6 +2252,9 @@ msgstr "Son görev hataları"
 msgid "Recently watched"
 msgstr "Son izlenenler"
 
+msgid "Recommended browser-source URLs. Replace TOKEN with the value of TTS_OVERLAY_TOKEN or ALERT_OVERLAY_TOKEN. The part after # stays in OBS and reaches the server only as a request header, never in a log line."
+msgstr "Tarayıcı kaynağı için önerilen URL'ler. TOKEN yerine TTS_OVERLAY_TOKEN veya ALERT_OVERLAY_TOKEN değerini yazın. # işaretinden sonraki kısım OBS'te kalır ve sunucuya yalnızca istek başlığı olarak ulaşır, asla günlüğe yazılmaz."
+
 msgid "Recommended. Prevents data loss from incomplete uploads."
 msgstr "Önerilir. Eksik yüklemelerden kaynaklanan veri kaybını önler."
 
@@ -2236,6 +2273,9 @@ msgstr "Kayıt"
 msgid "Recording + live stream & Discord notification"
 msgstr "Kayıt + canlı yayın ve Discord bildirimi"
 
+msgid "Recording active"
+msgstr "Kayit etki̇n"
+
 msgid "Recording disabled (live & Discord only)"
 msgstr "Kayıt devre dışı (yalnızca canlı ve Discord)"
 
@@ -2285,8 +2325,8 @@ msgid "Remove channel"
 msgstr "Kanalı kaldır"
 
 #, python-format
-msgid "Remove channel %(name)s?"
-msgstr "%(name)s kanalı kaldırılsın mı?"
+msgid "Remove channel %(name)s? Monitoring stops; existing recordings stay in the archive."
+msgstr "%(name)s kanalı kaldırılsın mı? İzleme durur; mevcut kayıtlar arşivde kalır."
 
 msgid "Remove only the database entry?"
 msgstr "Yalnızca veritabanı kaydı kaldırılsın mı?"
@@ -2301,6 +2341,9 @@ msgstr "Remux işi başlatıldı. İlerleme yönetim panelinde gösterilir."
 msgid "Rename file"
 msgstr "Dosyayı yeniden adlandır"
 
+msgid "Rename the file? Existing links and shares to the old file name stop working."
+msgstr "Dosya yeniden adlandırılsın mı? Eski dosya adına giden bağlantılar ve paylaşımlar artık çalışmaz."
+
 msgid "Renamed."
 msgstr "Yeniden adlandırıldı."
 
@@ -2326,6 +2369,9 @@ msgstr "Yeniden başlatma başarısız."
 msgid "Restart services"
 msgstr "Hizmetleri yeniden başlat"
 
+msgid "Restart the recorder and chat logger now? Running recordings are interrupted for a few seconds."
+msgstr "Kaydedici ve sohbet kaydedici şimdi yeniden başlatılsın mı? Süren kayıtlar birkaç saniye kesilir."
+
 msgid "Restore"
 msgstr "Geri yükle"
 
@@ -2342,6 +2388,9 @@ msgstr "Oynatmayı sürdür"
 msgid "Revoke"
 msgstr "İptal et"
 
+msgid "Revoke this share? The link stops working immediately."
+msgstr "Bu paylaşım iptal edilsin mi? Bağlantı hemen çalışmaz hale gelir."
+
 #, python-format
 msgid "Role access '%(slug)s' added."
 msgstr "'%(slug)s' rol erişimi eklendi."
@@ -2374,9 +2423,6 @@ msgstr "Çalışıyor…"
 msgid "S3-compatible"
 msgstr "S3 uyumlu"
 
-msgid "START"
-msgstr "BAŞLANGIÇ"
-
 msgid "Safety migration:"
 msgstr "Güvenlik geçişi:"
 
@@ -2430,10 +2476,7 @@ msgid "Saving transcript failed: %(error)s"
 msgstr "Transkript kaydedilemedi: %(error)s"
 
 msgid "Saving transcript..."
-msgstr "Transkript kaydediliyor..."
-
-msgid "Saving..."
-msgstr "Kaydediliyor..."
+msgstr "Transkript kaydediliyor…"
 
 msgid "Saving…"
 msgstr "Kaydediliyor…"
@@ -2441,8 +2484,8 @@ msgstr "Kaydediliyor…"
 msgid "Search"
 msgstr "Ara"
 
-msgid "Search VODs, streamers or games..."
-msgstr "VOD, yayıncı veya oyun ara..."
+msgid "Search VODs, streamers or games…"
+msgstr "VOD, yayıncı veya oyun ara…"
 
 msgid "Search category"
 msgstr "Kategori ara"
@@ -2453,8 +2496,11 @@ msgstr "Kategori / oyun ara…"
 msgid "Search failed."
 msgstr "Arama başarısız."
 
-msgid "Search recordings (title, date, game)..."
-msgstr "Kayıtlarda ara (başlık, tarih, oyun)..."
+msgid "Search recordings"
+msgstr "Kayıtlarda ara"
+
+msgid "Search recordings (title, date, game)…"
+msgstr "Kayıtlarda ara (başlık, tarih, oyun)…"
 
 msgid "Search results"
 msgstr "Arama sonuçları"
@@ -2465,21 +2511,21 @@ msgstr "Yayıncı veya kanal ara…"
 msgid "Search streamers"
 msgstr "Yayıncı ara"
 
-msgid "Search term (e.g. player name, chat message, date)..."
-msgstr "Arama terimi (ör. oyuncu adı, sohbet mesajı, tarih)..."
+msgid "Search term (e.g. player name, chat message, date)…"
+msgstr "Arama terimi (ör. oyuncu adı, sohbet mesajı, tarih)…"
 
-msgid "Search user, email or group..."
-msgstr "Kullanıcı, e-posta veya grup ara..."
+msgid "Search user, email or group…"
+msgstr "Kullanıcı, e-posta veya grup ara…"
 
-msgid "Search..."
-msgstr "Ara..."
-
-msgid "Searching for stream..."
-msgstr "Yayın aranıyor..."
+msgid "Searching for stream…"
+msgstr "Yayın aranıyor…"
 
 msgid "Searching…"
 msgstr "Aranıyor…"
 
+msgid "Search…"
+msgstr "Ara…"
+
 msgid "Seconds after trigger"
 msgstr "Tetikleyiciden sonraki saniye"
 
@@ -2569,9 +2615,21 @@ msgstr "Gezinme çubuğunda, kenar çubuğunda ve yayıncı kartlarında göster
 msgid "Sign in"
 msgstr "Oturum aç"
 
+msgid "Sign out on every device? Every session of this account ends, including this one."
+msgstr "Tüm cihazlarda oturum kapatılsın mı? Bu hesabın bu oturum dahil tüm oturumları sona erer."
+
 msgid "Size"
 msgstr "Boyut"
 
+msgid "Skip to content"
+msgstr "İçeriğe geç"
+
+msgid "Sort"
+msgstr "Sırala"
+
+msgid "Sort order"
+msgstr "Sıralama düzeni"
+
 msgid "Sound"
 msgstr "Ses"
 
@@ -2613,7 +2671,7 @@ msgid "Starting"
 msgstr "Başlatılıyor"
 
 msgid "Starting download..."
-msgstr "İndirme başlatılıyor..."
+msgstr "İndirme başlatılıyor…"
 
 msgid "Status"
 msgstr "Durum"
@@ -2652,6 +2710,9 @@ msgstr "Depolama sağlayıcısı bulunamadı."
 msgid "Storage providers"
 msgstr "Depolama sağlayıcıları"
 
+msgid "Storage usage"
+msgstr "Depolama kullanımı"
+
 #, python-format
 msgid "Storage: <strong>%(pct)s%%</strong>"
 msgstr "Depolama: <strong>%%%(pct)s</strong>"
@@ -2713,6 +2774,9 @@ msgstr "Yayıncılar, VOD'lar ve sohbet geçmişleri"
 msgid "Subfolder"
 msgstr "Alt klasör"
 
+msgid "Subs"
+msgstr "Aboneler"
+
 msgid "Success"
 msgstr "Başarılı"
 
@@ -2800,6 +2864,9 @@ msgstr "Koşullar sürümü eski — sayfayı yenileyin ve yeniden kabul edin."
 msgid "Test"
 msgstr "Test et"
 
+msgid "Text-to-speech overlay"
+msgstr "Metin okuma katmanı"
+
 msgid "Thanks for your understanding. Authorized users can sign in via the login page."
 msgstr "Anlayışınız için teşekkürler. Yetkili kullanıcılar giriş sayfasından oturum açabilir."
 
@@ -2912,8 +2979,10 @@ msgstr "Bugün, %(time)s"
 msgid "Too many VODs are playing right now. Live is not affected. Try again in a few minutes — a slot frees up as soon as someone closes the player."
 msgstr "Şu anda çok fazla VOD oynatılıyor. Canlı yayın etkilenmez. Birkaç dakika sonra tekrar deneyin — biri oynatıcıyı kapattığında bir yuva boşalır."
 
-msgid "Too many attempts. IP temporarily blocked. Please try again later."
-msgstr "Çok fazla deneme. IP geçici olarak engellendi. Lütfen daha sonra tekrar deneyin."
+#, python-format
+msgid "Too many login attempts. Please try again in %(num)d minute."
+msgid_plural "Too many login attempts. Please try again in %(num)d minutes."
+msgstr[0] "Çok fazla giriş denemesi. Lütfen %(num)d dakika sonra tekrar deneyin."
 
 msgid "Top streams are currently unavailable. Use monitored channels or the search."
 msgstr "Popüler yayınlar şu anda kullanılamıyor. İzlenen kanalları veya aramayı kullanın."
@@ -2966,6 +3035,9 @@ msgstr "Transkript tamamlandı"
 msgid "Transcript missing despite finished status"
 msgstr "Tamamlandı durumuna rağmen transkript eksik"
 
+msgid "Transcript progress"
+msgstr "Transkript ilerlemesi"
+
 msgid "Transcription cancelled"
 msgstr "Transkripsiyon iptal edildi"
 
@@ -2989,7 +3061,7 @@ msgid "Transcription queued in the worker. The result appears on the next page l
 msgstr "Transkripsiyon worker kuyruğuna alındı. Sonuç, tamamlandıktan sonraki ilk sayfa yüklemesinde görünür."
 
 msgid "Transcription running..."
-msgstr "Transkripsiyon çalışıyor..."
+msgstr "Transkripsiyon çalışıyor…"
 
 msgid "Transcription timed out"
 msgstr "Transkripsiyon zaman aşımına uğradı"
@@ -3006,8 +3078,11 @@ msgstr "Twitch / varsayılan"
 msgid "Twitch badge library synchronized."
 msgstr "Twitch rozet kitaplığı senkronize edildi."
 
-msgid "Twitch channel name..."
-msgstr "Twitch kanal adı..."
+msgid "Twitch channel name"
+msgstr "Twitch kanal adı"
+
+msgid "Twitch channel name…"
+msgstr "Twitch kanal adı…"
 
 msgid "Twitch live chat"
 msgstr "Twitch canlı sohbet"
@@ -3015,8 +3090,8 @@ msgstr "Twitch canlı sohbet"
 msgid "Twitch live stream"
 msgstr "Twitch canlı yayını"
 
-msgid "Twitch name (e.g. shroud) or YouTube URL / @handle..."
-msgstr "Twitch adı (ör. shroud) veya YouTube URL'si / @kullanıcı adı..."
+msgid "Twitch name (e.g. shroud) or YouTube URL / @handle…"
+msgstr "Twitch adı (ör. shroud) veya YouTube URL'si / @kullanıcı adı…"
 
 msgid "Twitch or YouTube supported"
 msgstr "Twitch veya YouTube desteklenir"
@@ -3234,12 +3309,6 @@ msgstr "Görebilenler:"
 msgid "Volume"
 msgstr "Ses düzeyi"
 
-msgid "WARNING: Do you want to permanently delete this streamer and all recordings?"
-msgstr "UYARI: Bu yayıncıyı ve tüm kayıtları kalıcı olarak silmek istiyor musunuz?"
-
-msgid "WATCH LIVE"
-msgstr "CANLI İZLE"
-
 msgid "Waiting for server stream…"
 msgstr "Sunucu yayını bekleniyor…"
 
@@ -3252,6 +3321,9 @@ msgstr "İzle"
 msgid "Watch latest video"
 msgstr "En son videoyu izle"
 
+msgid "Watch live"
+msgstr "Canli i̇zle"
+
 msgid "Watch now"
 msgstr "Şimdi izle"
 
@@ -3308,8 +3380,8 @@ msgstr "Kendinizi kullanıcı yönetimi izni olmayan bir gruba taşıyamazsını
 msgid "You have accepted version %(version)s."
 msgstr "%(version)s sürümünü kabul ettiniz."
 
-msgid "Your IP has been temporarily blocked. Please try again later."
-msgstr "IP adresiniz geçici olarak engellendi. Lütfen daha sonra tekrar deneyin."
+msgid "Your IP has been blocked. Please contact the administrator."
+msgstr "IP adresiniz engellendi. Lütfen yöneticiyle iletişime geçin."
 
 msgid "Your browser does not support the video tag."
 msgstr "Tarayıcınız video etiketini desteklemiyor."
@@ -3353,12 +3425,12 @@ msgstr "ör. VIP arşivi"
 msgid "e.g. alice, bob"
 msgstr "ör. alice, bob"
 
-msgid "e.g. john_doe"
-msgstr "ör. john_doe"
-
 msgid "e.g. channel_name"
 msgstr "ör. channel_name"
 
+msgid "e.g. john_doe"
+msgstr "ör. john_doe"
+
 #, python-format
 msgid "effective from %(date)s"
 msgstr "%(date)s tarihinden itibaren geçerli"
diff --git a/WEBUI/translations/zh_Hans/LC_MESSAGES/messages.mo b/WEBUI/translations/zh_Hans/LC_MESSAGES/messages.mo
index 1abce46..9684ac6 100644
Binary files a/WEBUI/translations/zh_Hans/LC_MESSAGES/messages.mo and b/WEBUI/translations/zh_Hans/LC_MESSAGES/messages.mo differ
diff --git a/WEBUI/translations/zh_Hans/LC_MESSAGES/messages.po b/WEBUI/translations/zh_Hans/LC_MESSAGES/messages.po
index e235842..91b9d47 100644
--- a/WEBUI/translations/zh_Hans/LC_MESSAGES/messages.po
+++ b/WEBUI/translations/zh_Hans/LC_MESSAGES/messages.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: StreamVault VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2026-11-03 19:28+0100\n"
+"POT-Creation-Date: 2026-11-12 15:41+0100\n"
 "PO-Revision-Date: 2026-11-03 19:31+0100\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language: zh_Hans\n"
@@ -181,9 +181,6 @@ msgstr "已有恢复任务正在运行。"
 msgid "A saved value is kept if the field is left empty."
 msgstr "字段留空时将保留已保存的值。"
 
-msgid "ACTIVE (locked)"
-msgstr "活跃（已锁定）"
-
 msgid "AWS S3, Cloudflare R2, Backblaze B2, Wasabi, MinIO, Hetzner or any S3-compatible endpoint."
 msgstr "AWS S3、Cloudflare R2、Backblaze B2、Wasabi、MinIO、Hetzner 或任何兼容 S3 的端点。"
 
@@ -196,6 +193,9 @@ msgstr "接受条款"
 msgid "Account active (access allowed)"
 msgstr "账户已启用（允许访问）"
 
+msgid "Accounts"
+msgstr "账户"
+
 msgid "Action"
 msgstr "操作"
 
@@ -208,6 +208,9 @@ msgstr "立即激活账户"
 msgid "Active"
 msgstr "活跃"
 
+msgid "Active (locked)"
+msgstr "活跃（已锁定）"
+
 msgid "Active shares"
 msgstr "当前共享"
 
@@ -220,6 +223,9 @@ msgstr "已启用：新直播将自动开放。可在下方停用/屏蔽单个
 msgid "Actively monitored by the recorder core"
 msgstr "由录制核心主动监控"
 
+msgid "Add a channel to record"
+msgstr "添加要录制的频道"
+
 msgid "Add channel"
 msgstr "添加频道"
 
@@ -229,6 +235,9 @@ msgstr "添加新频道"
 msgid "Add provider"
 msgstr "添加提供商"
 
+msgid "Add the first channel above"
+msgstr "在上方添加第一个频道"
+
 msgid "Addressing"
 msgstr "寻址"
 
@@ -241,6 +250,9 @@ msgstr "管理员控制"
 msgid "Admins only"
 msgstr "仅限管理员"
 
+msgid "Alert sound overlay"
+msgstr "提示音叠加层"
+
 msgid "All"
 msgstr "全部"
 
@@ -480,27 +492,27 @@ msgstr "缓冲仍较短——剪辑时间窗口会随之增长。"
 msgid "Buffer:"
 msgstr "缓冲："
 
-msgid "Buffering..."
-msgstr "缓冲中..."
+msgid "Buffering…"
+msgstr "缓冲中…"
 
 msgid "By default nothing is uploaded or deleted automatically. Enable these features deliberately."
 msgstr "默认情况下不会自动上传或删除任何内容。请谨慎启用这些功能。"
 
-msgid "CHANGE"
-msgstr "更改"
-
-msgid "CHANNEL MANAGEMENT (ADMIN)"
-msgstr "频道管理（管理员）"
-
 msgid "Cancel"
 msgstr "取消"
 
+msgid "Category"
+msgstr "分类"
+
 msgid "Category search failed."
 msgstr "分类搜索失败。"
 
 msgid "Category search is currently unavailable."
 msgstr "分类搜索暂不可用。"
 
+msgid "Change"
+msgstr "更改"
+
 msgid "Change banner"
 msgstr "更换横幅"
 
@@ -516,6 +528,9 @@ msgstr "频道操作"
 msgid "Channel archive & recording metrics"
 msgstr "频道存档与录制指标"
 
+msgid "Channel management (admin)"
+msgstr "频道管理（管理员）"
+
 msgid "Channel not found."
 msgstr "未找到频道。"
 
@@ -572,12 +587,12 @@ msgstr "清理已加入队列（任务 #%(task)s）。"
 msgid "Clear filters"
 msgstr "清除筛选"
 
-msgid "Click to change password"
-msgstr "点击修改密码"
-
 msgid "Clip"
 msgstr "剪辑"
 
+msgid "Clip Editor"
+msgstr "剪辑编辑器"
+
 msgid "Clip URL is missing on this page."
 msgstr "此页面缺少剪辑 URL。"
 
@@ -662,6 +677,9 @@ msgstr "配置录制频道并管理存档分配"
 msgid "Configured streamers & sources"
 msgstr "已配置的主播与来源"
 
+msgid "Confirm"
+msgstr "确认"
+
 msgid "Connect account"
 msgstr "连接账户"
 
@@ -683,6 +701,9 @@ msgstr "连接正常"
 msgid "Connection failed"
 msgstr "连接失败"
 
+msgid "Connection failed. Check your network and try again."
+msgstr "连接失败。请检查网络后重试。"
+
 msgid "Connection lost — reconnecting…"
 msgstr "连接中断——正在重连…"
 
@@ -699,6 +720,9 @@ msgstr "控制面板"
 msgid "Control the global maintenance mode or lock individual platform areas."
 msgstr "控制全局维护模式，或锁定特定平台区域。"
 
+msgid "Copied"
+msgstr "已复制"
+
 msgid "Copy"
 msgstr "复制"
 
@@ -815,6 +839,14 @@ msgstr "默认目标"
 msgid "Delete"
 msgstr "删除"
 
+#, python-format
+msgid "Delete %(name)s? The file is removed from the archive and cannot be restored."
+msgstr "删除 %(name)s？文件将从存档中移除且无法恢复。"
+
+#, python-format
+msgid "Delete backup %(name)s? This cannot be undone."
+msgstr "删除备份 %(name)s？此操作无法撤销。"
+
 msgid "Delete folder"
 msgstr "删除文件夹"
 
@@ -833,6 +865,12 @@ msgstr "本地删除"
 msgid "Delete permanently"
 msgstr "永久删除"
 
+msgid "Delete this streamer folder and all recordings? This cannot be undone."
+msgstr "删除该主播的文件夹及所有录像？此操作无法撤销。"
+
+msgid "Delete this video? The file is removed from the archive and cannot be restored."
+msgstr "删除此视频？文件将从存档中移除且无法恢复。"
+
 msgid "Delete user"
 msgstr "删除用户"
 
@@ -913,8 +951,8 @@ msgstr "下载 TXT"
 msgid "Download all"
 msgstr "全部下载"
 
-msgid "Download all VODs?"
-msgstr "下载全部 VOD？"
+msgid "Download all VODs of this streamer as one archive? This can take a while for large channels."
+msgstr "将该主播的所有 VOD 下载为一个压缩包？大型频道可能需要一些时间。"
 
 msgid "Download archive & VODs"
 msgstr "下载存档和 VOD"
@@ -933,7 +971,7 @@ msgstr "已在后台开始下载全部 VOD。"
 
 #, python-format
 msgid "Downloading... %(percent)s"
-msgstr "下载中... %(percent)s"
+msgstr "下载中… %(percent)s"
 
 #, python-format
 msgid "Drive quota active — do not press Play again (it extends the block). Seek back into the already loaded part, or wait about %(minutes)s min."
@@ -984,6 +1022,9 @@ msgstr "电子邮件地址"
 msgid "Email address (optional)"
 msgstr "电子邮件地址（可选）"
 
+msgid "Emotes"
+msgstr "表情"
+
 msgid "Empty = AWS. For R2, B2, Wasabi, MinIO etc. enter the S3 endpoint."
 msgstr "留空 = AWS。对于 R2、B2、Wasabi、MinIO 等，请填写 S3 端点。"
 
@@ -999,6 +1040,9 @@ msgstr "立即启用"
 msgid "Enable maintenance mode"
 msgstr "启用维护模式"
 
+msgid "Enable maintenance mode? Everyone except allowlisted users sees the maintenance page until you end it."
+msgstr "启用维护模式？除允许列表中的用户外，所有人都会看到维护页面，直到你关闭它。"
+
 msgid "Enable recording"
 msgstr "启用录制"
 
@@ -1096,6 +1140,9 @@ msgstr "错误："
 msgid "Error: %(error)s"
 msgstr "错误：%(error)s"
 
+msgid "Everywhere"
+msgstr "所有设备"
+
 msgid "Existing members of this group are automatically assigned to the default group <strong>Viewer</strong>."
 msgstr "该用户组的现有成员将自动分配到默认用户组 <strong>Viewer</strong>。"
 
@@ -1112,10 +1159,7 @@ msgid "Exported by StreamVault"
 msgstr "由 StreamVault 导出"
 
 msgid "Extracting audio..."
-msgstr "正在提取音频..."
-
-msgid "FEATURED VOD"
-msgstr "精选 VOD"
+msgstr "正在提取音频…"
 
 msgid "Failed"
 msgstr "失败"
@@ -1126,6 +1170,9 @@ msgstr "快速"
 msgid "Feature permissions"
 msgstr "功能权限"
 
+msgid "Featured VOD"
+msgstr "精选 VOD"
+
 msgid "Featured highlight"
 msgstr "精选亮点"
 
@@ -1156,8 +1203,11 @@ msgstr "文件已上传。"
 msgid "Filter"
 msgstr "筛选"
 
-msgid "Filter chat..."
-msgstr "筛选聊天..."
+msgid "Filter chat"
+msgstr "筛选聊天"
+
+msgid "Filter chat…"
+msgstr "筛选聊天…"
 
 msgid "First"
 msgstr "第一个"
@@ -1435,19 +1485,6 @@ msgstr "七月"
 msgid "June"
 msgstr "六月"
 
-msgid "LIVE"
-msgstr "直播"
-
-#, python-format
-msgid "LIVE %(name)s (without Twitch login)"
-msgstr "直播 %(name)s（无需 Twitch 登录）"
-
-msgid "LIVE & DISCORD ONLY"
-msgstr "仅直播和 DISCORD"
-
-msgid "LIVE NOW"
-msgstr "正在直播"
-
 msgid "Language"
 msgstr "语言"
 
@@ -1496,11 +1533,14 @@ msgstr "链接已复制："
 msgid "Live"
 msgstr "直播"
 
+msgid "Live & Discord only"
+msgstr "仅直播和 DISCORD"
+
 msgid "Live & Discord only:"
 msgstr "仅直播和 Discord："
 
 msgid "Live (recovering...)"
-msgstr "直播（恢复中...）"
+msgstr "直播（恢复中…）"
 
 msgid "Live channels"
 msgstr "直播频道"
@@ -1535,8 +1575,8 @@ msgstr "仅直播流和 Discord 提醒，不录制到磁盘"
 msgid "Live stream highlight"
 msgstr "直播亮点"
 
-msgid "Live stream is currently unavailable. Searching for stream..."
-msgstr "直播流当前不可用。正在搜索直播流..."
+msgid "Live stream is currently unavailable. Searching for stream…"
+msgstr "直播流当前不可用。正在搜索直播流…"
 
 msgid "Live stream not available."
 msgstr "直播流不可用。"
@@ -1553,6 +1593,10 @@ msgstr "观看直播"
 msgid "Live-only"
 msgstr "仅直播"
 
+#, python-format
+msgid "Live: %(name)s (without Twitch login)"
+msgstr "直播 %(name)s（无需 Twitch 登录）"
+
 msgid "Load"
 msgstr "负载"
 
@@ -1563,7 +1607,7 @@ msgid "Loading chat…"
 msgstr "正在加载聊天…"
 
 msgid "Loading model..."
-msgstr "正在加载模型..."
+msgstr "正在加载模型…"
 
 msgid "Loading streams…"
 msgstr "正在加载直播…"
@@ -1593,6 +1637,9 @@ msgstr "锁定<strong>移动版</strong>"
 msgid "Log out"
 msgstr "退出登录"
 
+msgid "Log out everywhere"
+msgstr "在所有设备上退出"
+
 msgid "Login"
 msgstr "登录"
 
@@ -1605,6 +1652,9 @@ msgstr "登录失败。"
 msgid "MP4 check not possible"
 msgstr "无法检查 MP4"
 
+msgid "Main navigation"
+msgstr "主导航"
+
 msgid "Maintenance"
 msgstr "维护中"
 
@@ -1670,6 +1720,9 @@ msgstr "消息"
 msgid "Mobile live is temporarily disabled. Please use the desktop version or the installed app."
 msgstr "移动端直播暂时停用。请使用桌面版或已安装的应用。"
 
+msgid "Mods"
+msgstr "管理员"
+
 msgid "Monitored"
 msgstr "已监控"
 
@@ -1691,9 +1744,6 @@ msgstr "网络错误"
 msgid "Network error while loading streams."
 msgstr "加载直播时发生网络错误。"
 
-msgid "Network error:"
-msgstr "网络错误："
-
 msgid "Network is back — reconnecting…"
 msgstr "网络已恢复——正在重连…"
 
@@ -1712,8 +1762,8 @@ msgstr "新密码（留空则不更改）"
 msgid "New password * (min. 8 characters)"
 msgstr "新密码 *（至少 8 个字符）"
 
-msgid "New password..."
-msgstr "新密码..."
+msgid "New password…"
+msgstr "新密码…"
 
 msgid "New user"
 msgstr "新用户"
@@ -1736,8 +1786,8 @@ msgstr "Nextcloud、ownCloud、Hetzner Storage Box 或任何使用应用密码
 msgid "No (self-signed only)"
 msgstr "否（仅限自签名证书）"
 
-msgid "No VODs available in the archive"
-msgstr "存档中没有可用的 VOD"
+msgid "No VODs yet. Recordings appear here automatically as soon as a monitored channel goes live."
+msgstr "还没有 VOD。被监控的频道开播后，录像会自动显示在这里。"
 
 msgid "No acceptances yet."
 msgstr "尚无人同意。"
@@ -1772,6 +1822,9 @@ msgstr "没有可用的备份。"
 msgid "No badges received from Twitch."
 msgstr "未从 Twitch 获取到徽章。"
 
+msgid "No channels are monitored yet."
+msgstr "尚未监控任何频道。"
+
 msgid "No chat"
 msgstr "无聊天"
 
@@ -1812,9 +1865,6 @@ msgstr "没有监控的 Twitch 频道。"
 msgid "No monitored Twitch channels. Add streamers under Streamers."
 msgstr "没有监控的 Twitch 频道。请在“主播”中添加主播。"
 
-msgid "No monitored channels configured."
-msgstr "未配置监控频道。"
-
 msgid "No recently watched streams yet."
 msgstr "还没有最近观看的直播。"
 
@@ -1869,30 +1919,15 @@ msgstr "OAuth 说明"
 msgid "OAuth state tokens require a strong VOD_SECRET_KEY."
 msgstr "OAuth 状态令牌需要强度足够的 VOD_SECRET_KEY。"
 
+msgid "OBS overlays"
+msgstr "OBS 叠加层"
+
 msgid "OFF (normal operation)"
 msgstr "关（正常运行）"
 
-msgid "OFFLINE"
-msgstr "离线"
-
 msgid "OK"
 msgstr "确定"
 
-msgid "ONLINE"
-msgstr "在线"
-
-msgid "OPERATING MODE:"
-msgstr "运行模式："
-
-msgid "OPTION A: UPLOAD IMAGE FILE"
-msgstr "选项 A：上传图片文件"
-
-msgid "OPTION A: UPLOAD PROFILE PICTURE"
-msgstr "选项 A：上传头像"
-
-msgid "OPTION B: USE IMAGE URL"
-msgstr "选项 B：使用图片 URL"
-
 msgid "OR"
 msgstr "或"
 
@@ -1918,6 +1953,9 @@ msgstr "最早优先"
 msgid "OneDrive / Microsoft 365 via Microsoft Graph with OAuth 2.0."
 msgstr "OneDrive / Microsoft 365，通过 Microsoft Graph 和 OAuth 2.0。"
 
+msgid "Online"
+msgstr "在线"
+
 msgid "Only after a successful upload and optional cloud verification."
 msgstr "仅在上传成功且（可选）云端验证通过后。"
 
@@ -1939,6 +1977,22 @@ msgstr "打开剪辑"
 msgid "Open editor"
 msgstr "打开编辑器"
 
+#, python-format
+msgid "Open streamer %(name)s"
+msgstr "打开主播 %(name)s"
+
+msgid "Operating mode"
+msgstr "运行模式："
+
+msgid "Option A: upload image file"
+msgstr "选项 A：上传图片文件"
+
+msgid "Option A: upload profile picture"
+msgstr "选项 A：上传头像"
+
+msgid "Option B: use image URL"
+msgstr "选项 B：使用图片 URL"
+
 msgid "Option sections"
 msgstr "选项分区"
 
@@ -2049,6 +2103,9 @@ msgstr "无法播放"
 msgid "Player error — reconnecting…"
 msgstr "播放器错误——正在重连…"
 
+msgid "Please confirm"
+msgstr "请确认"
+
 msgid "Please enter a name for the storage provider."
 msgstr "请输入存储提供商的名称。"
 
@@ -2099,10 +2156,10 @@ msgid "Private video and stream archive console."
 msgstr "私人视频和直播存档控制台。"
 
 msgid "Processing video (this may take a while)..."
-msgstr "正在处理视频（可能需要一些时间）..."
+msgstr "正在处理视频（可能需要一些时间）…"
 
 msgid "Processing video..."
-msgstr "正在处理视频..."
+msgstr "正在处理视频…"
 
 msgid "Profile picture reset to default."
 msgstr "头像已恢复默认。"
@@ -2147,8 +2204,8 @@ msgstr "提供商"
 msgid "Public link created:"
 msgstr "已创建公开链接："
 
-msgid "Purpose of this user group..."
-msgstr "此用户组的用途..."
+msgid "Purpose of this user group…"
+msgstr "此用户组的用途…"
 
 msgid "Quality"
 msgstr "画质"
@@ -2162,22 +2219,12 @@ msgstr "无法读取队列"
 msgid "Quiet"
 msgstr "安静"
 
-msgid "RECORDING"
-msgstr "录制中"
-
-msgid "RECORDING ACTIVE"
-msgstr "录制进行中"
-
 msgid "Ready"
 msgstr "就绪"
 
 msgid "Real-time stream error — reconnecting…"
 msgstr "实时流错误——正在重连…"
 
-#, python-format
-msgid "Really delete backup %(name)s?"
-msgstr "确定删除备份 %(name)s 吗？"
-
 msgid "Really delete file?"
 msgstr "确定删除文件吗？"
 
@@ -2187,28 +2234,15 @@ msgstr "确定删除云端文件吗？本地副本将保留。"
 msgid "Really delete the local file? The cloud copy is kept."
 msgstr "确定删除本地文件吗？云端副本将保留。"
 
-msgid "Really delete?"
-msgstr "确定删除吗？"
-
-#, python-format
-msgid "Really remove channel %(name)s?"
-msgstr "确定移除频道 %(name)s 吗？"
-
 msgid "Really remove the provider? The cloud files are kept."
 msgstr "确定移除该提供商吗？云端文件将保留。"
 
-msgid "Really rename the file?"
-msgstr "确定重命名文件吗？"
-
 msgid "Really reset the custom banner and switch to the default?"
 msgstr "确定重置自定义横幅并切换为默认吗？"
 
 msgid "Really reset the custom profile picture and switch to the default?"
 msgstr "确定重置自定义头像并切换为默认吗？"
 
-msgid "Really revoke this share?"
-msgstr "确定撤销此共享吗？"
-
 msgid "Really stop the recording?"
 msgstr "确定停止录制吗？"
 
@@ -2218,6 +2252,9 @@ msgstr "最近的任务错误"
 msgid "Recently watched"
 msgstr "最近观看"
 
+msgid "Recommended browser-source URLs. Replace TOKEN with the value of TTS_OVERLAY_TOKEN or ALERT_OVERLAY_TOKEN. The part after # stays in OBS and reaches the server only as a request header, never in a log line."
+msgstr "推荐的浏览器源 URL。请将 TOKEN 替换为 TTS_OVERLAY_TOKEN 或 ALERT_OVERLAY_TOKEN 的值。# 之后的部分保留在 OBS 中，只以请求头形式发送到服务器，不会出现在日志中。"
+
 msgid "Recommended. Prevents data loss from incomplete uploads."
 msgstr "推荐。防止因上传不完整造成数据丢失。"
 
@@ -2236,6 +2273,9 @@ msgstr "录制"
 msgid "Recording + live stream & Discord notification"
 msgstr "录制 + 直播流和 Discord 通知"
 
+msgid "Recording active"
+msgstr "录制进行中"
+
 msgid "Recording disabled (live & Discord only)"
 msgstr "录制已停用（仅直播和 Discord）"
 
@@ -2285,8 +2325,8 @@ msgid "Remove channel"
 msgstr "移除频道"
 
 #, python-format
-msgid "Remove channel %(name)s?"
-msgstr "移除频道 %(name)s？"
+msgid "Remove channel %(name)s? Monitoring stops; existing recordings stay in the archive."
+msgstr "移除频道 %(name)s？监控将停止，现有录像会保留在存档中。"
 
 msgid "Remove only the database entry?"
 msgstr "仅移除数据库条目？"
@@ -2301,6 +2341,9 @@ msgstr "重新封装任务已启动。进度显示在管理面板中。"
 msgid "Rename file"
 msgstr "重命名文件"
 
+msgid "Rename the file? Existing links and shares to the old file name stop working."
+msgstr "重命名文件？指向旧文件名的现有链接和分享将失效。"
+
 msgid "Renamed."
 msgstr "已重命名。"
 
@@ -2326,6 +2369,9 @@ msgstr "重启失败。"
 msgid "Restart services"
 msgstr "重启服务"
 
+msgid "Restart the recorder and chat logger now? Running recordings are interrupted for a few seconds."
+msgstr "立即重启录制器和聊天记录器？正在进行的录制会中断几秒钟。"
+
 msgid "Restore"
 msgstr "恢复"
 
@@ -2342,6 +2388,9 @@ msgstr "继续播放"
 msgid "Revoke"
 msgstr "撤销"
 
+msgid "Revoke this share? The link stops working immediately."
+msgstr "撤销此分享？链接将立即失效。"
+
 #, python-format
 msgid "Role access '%(slug)s' added."
 msgstr "已添加角色授权“%(slug)s”。"
@@ -2374,9 +2423,6 @@ msgstr "运行中…"
 msgid "S3-compatible"
 msgstr "兼容 S3"
 
-msgid "START"
-msgstr "开始"
-
 msgid "Safety migration:"
 msgstr "安全迁移："
 
@@ -2430,10 +2476,7 @@ msgid "Saving transcript failed: %(error)s"
 msgstr "保存转录文本失败：%(error)s"
 
 msgid "Saving transcript..."
-msgstr "正在保存转录文本..."
-
-msgid "Saving..."
-msgstr "正在保存..."
+msgstr "正在保存转录文本…"
 
 msgid "Saving…"
 msgstr "正在保存…"
@@ -2441,8 +2484,8 @@ msgstr "正在保存…"
 msgid "Search"
 msgstr "搜索"
 
-msgid "Search VODs, streamers or games..."
-msgstr "搜索 VOD、主播或游戏..."
+msgid "Search VODs, streamers or games…"
+msgstr "搜索 VOD、主播或游戏…"
 
 msgid "Search category"
 msgstr "搜索分类"
@@ -2453,8 +2496,11 @@ msgstr "搜索分类/游戏…"
 msgid "Search failed."
 msgstr "搜索失败。"
 
-msgid "Search recordings (title, date, game)..."
-msgstr "搜索录制（标题、日期、游戏）..."
+msgid "Search recordings"
+msgstr "搜索录像"
+
+msgid "Search recordings (title, date, game)…"
+msgstr "搜索录制（标题、日期、游戏）…"
 
 msgid "Search results"
 msgstr "搜索结果"
@@ -2465,21 +2511,21 @@ msgstr "搜索主播或频道…"
 msgid "Search streamers"
 msgstr "搜索主播"
 
-msgid "Search term (e.g. player name, chat message, date)..."
-msgstr "搜索词（如玩家名、聊天消息、日期）..."
+msgid "Search term (e.g. player name, chat message, date)…"
+msgstr "搜索词（如玩家名、聊天消息、日期）…"
 
-msgid "Search user, email or group..."
-msgstr "搜索用户、电子邮件或用户组..."
+msgid "Search user, email or group…"
+msgstr "搜索用户、电子邮件或用户组…"
 
-msgid "Search..."
-msgstr "搜索..."
-
-msgid "Searching for stream..."
-msgstr "正在搜索直播流..."
+msgid "Searching for stream…"
+msgstr "正在搜索直播流…"
 
 msgid "Searching…"
 msgstr "正在搜索…"
 
+msgid "Search…"
+msgstr "搜索…"
+
 msgid "Seconds after trigger"
 msgstr "触发后秒数"
 
@@ -2569,9 +2615,21 @@ msgstr "显示在导航栏、侧边栏和主播卡片上。"
 msgid "Sign in"
 msgstr "登录"
 
+msgid "Sign out on every device? Every session of this account ends, including this one."
+msgstr "在所有设备上退出？此账户的所有会话都会结束，包括当前会话。"
+
 msgid "Size"
 msgstr "大小"
 
+msgid "Skip to content"
+msgstr "跳到内容"
+
+msgid "Sort"
+msgstr "排序"
+
+msgid "Sort order"
+msgstr "排序顺序"
+
 msgid "Sound"
 msgstr "声音"
 
@@ -2613,7 +2671,7 @@ msgid "Starting"
 msgstr "启动中"
 
 msgid "Starting download..."
-msgstr "正在开始下载..."
+msgstr "正在开始下载…"
 
 msgid "Status"
 msgstr "状态"
@@ -2652,6 +2710,9 @@ msgstr "未找到存储提供商。"
 msgid "Storage providers"
 msgstr "存储提供商"
 
+msgid "Storage usage"
+msgstr "存储用量"
+
 #, python-format
 msgid "Storage: <strong>%(pct)s%%</strong>"
 msgstr "存储：<strong>%(pct)s%%</strong>"
@@ -2713,6 +2774,9 @@ msgstr "主播、VOD 和聊天记录"
 msgid "Subfolder"
 msgstr "子文件夹"
 
+msgid "Subs"
+msgstr "订阅者"
+
 msgid "Success"
 msgstr "成功"
 
@@ -2800,6 +2864,9 @@ msgstr "条款版本已过期——请刷新页面并重新接受。"
 msgid "Test"
 msgstr "测试"
 
+msgid "Text-to-speech overlay"
+msgstr "文字转语音叠加层"
+
 msgid "Thanks for your understanding. Authorized users can sign in via the login page."
 msgstr "感谢理解。授权用户可通过登录页面登录。"
 
@@ -2912,8 +2979,10 @@ msgstr "今天 %(time)s"
 msgid "Too many VODs are playing right now. Live is not affected. Try again in a few minutes — a slot frees up as soon as someone closes the player."
 msgstr "当前播放的 VOD 过多。直播不受影响。请几分钟后再试——有人关闭播放器后就会空出名额。"
 
-msgid "Too many attempts. IP temporarily blocked. Please try again later."
-msgstr "尝试次数过多。IP 已被暂时封禁。请稍后重试。"
+#, python-format
+msgid "Too many login attempts. Please try again in %(num)d minute."
+msgid_plural "Too many login attempts. Please try again in %(num)d minutes."
+msgstr[0] "登录尝试次数过多。请在 %(num)d 分钟后重试。"
 
 msgid "Top streams are currently unavailable. Use monitored channels or the search."
 msgstr "热门直播暂不可用。请使用监控频道或搜索。"
@@ -2966,6 +3035,9 @@ msgstr "转录文本已完成"
 msgid "Transcript missing despite finished status"
 msgstr "状态为已完成，但缺少转录文本"
 
+msgid "Transcript progress"
+msgstr "转写进度"
+
 msgid "Transcription cancelled"
 msgstr "转录已取消"
 
@@ -2989,7 +3061,7 @@ msgid "Transcription queued in the worker. The result appears on the next page l
 msgstr "转录已加入工作进程队列。完成后下次加载页面时将显示结果。"
 
 msgid "Transcription running..."
-msgstr "正在转录..."
+msgstr "正在转录…"
 
 msgid "Transcription timed out"
 msgstr "转录超时"
@@ -3006,8 +3078,11 @@ msgstr "Twitch / 默认"
 msgid "Twitch badge library synchronized."
 msgstr "Twitch 徽章库已同步。"
 
-msgid "Twitch channel name..."
-msgstr "Twitch 频道名称..."
+msgid "Twitch channel name"
+msgstr "Twitch 频道名"
+
+msgid "Twitch channel name…"
+msgstr "Twitch 频道名称…"
 
 msgid "Twitch live chat"
 msgstr "Twitch 直播聊天"
@@ -3015,8 +3090,8 @@ msgstr "Twitch 直播聊天"
 msgid "Twitch live stream"
 msgstr "Twitch 直播流"
 
-msgid "Twitch name (e.g. shroud) or YouTube URL / @handle..."
-msgstr "Twitch 名称（如 shroud）或 YouTube URL / @handle..."
+msgid "Twitch name (e.g. shroud) or YouTube URL / @handle…"
+msgstr "Twitch 名称（如 shroud）或 YouTube URL / @handle…"
 
 msgid "Twitch or YouTube supported"
 msgstr "支持 Twitch 或 YouTube"
@@ -3234,12 +3309,6 @@ msgstr "可见范围："
 msgid "Volume"
 msgstr "音量"
 
-msgid "WARNING: Do you want to permanently delete this streamer and all recordings?"
-msgstr "警告：确定要永久删除此主播及所有录制吗？"
-
-msgid "WATCH LIVE"
-msgstr "观看直播"
-
 msgid "Waiting for server stream…"
 msgstr "正在等待服务器流…"
 
@@ -3252,6 +3321,9 @@ msgstr "观看"
 msgid "Watch latest video"
 msgstr "观看最新视频"
 
+msgid "Watch live"
+msgstr "观看直播"
+
 msgid "Watch now"
 msgstr "立即观看"
 
@@ -3308,8 +3380,8 @@ msgstr "不能将自己移到没有用户管理权限的用户组。"
 msgid "You have accepted version %(version)s."
 msgstr "你已接受版本 %(version)s。"
 
-msgid "Your IP has been temporarily blocked. Please try again later."
-msgstr "你的 IP 已被暂时封禁。请稍后重试。"
+msgid "Your IP has been blocked. Please contact the administrator."
+msgstr "你的 IP 已被封禁。请联系管理员。"
 
 msgid "Your browser does not support the video tag."
 msgstr "你的浏览器不支持 video 标签。"
@@ -3353,12 +3425,12 @@ msgstr "如：VIP 存档"
 msgid "e.g. alice, bob"
 msgstr "如：alice, bob"
 
-msgid "e.g. john_doe"
-msgstr "如：zhang_san"
-
 msgid "e.g. channel_name"
 msgstr "如：channel_name"
 
+msgid "e.g. john_doe"
+msgstr "如：zhang_san"
+
 #, python-format
 msgid "effective from %(date)s"
 msgstr "自 %(date)s 起生效"
diff --git a/WEBUI/webui.py b/WEBUI/webui.py
index de67612..ef4c3ff 100644
--- a/WEBUI/webui.py
+++ b/WEBUI/webui.py
@@ -3493,6 +3493,27 @@ def is_allowed_url(url):
         return False
     return True
 
+
+_CSS_URL_FORBIDDEN = frozenset("'\"()\\<> \t\r\n\f")
+
+
+def css_url(value):
+    """Return value if it is safe inside CSS url('...'), else "" (audit S8, banner/hero images).
+
+    Accepted: a same-origin path ("/static/..."), or an https URL that is_allowed_url()
+    accepts. Rejected: quotes, parentheses, backslashes, angle brackets and whitespace,
+    which could close the url() token and inject CSS.
+    """
+    text = str(value or "").strip()
+    if not text or any(ch in _CSS_URL_FORBIDDEN for ch in text):
+        return ""
+    if text.startswith("/") and not text.startswith("//"):
+        return text
+    if text.lower().startswith("https://") and is_allowed_url(text):
+        return text
+    return ""
+
+
 def is_safe_next(target):
     if not target:
         return False
@@ -10748,6 +10769,52 @@ def favicon():
     return app_icon_response(32)
 
 
+def csp_nonce():
+    """Per-request nonce for inline <script> blocks (templates: nonce="{{ csp_nonce() }}")."""
+    if not has_request_context():
+        return ""
+    nonce = getattr(g, "csp_nonce_value", None)
+    if not nonce:
+        nonce = secrets.token_urlsafe(18)
+        g.csp_nonce_value = nonce
+    return nonce
+
+
+app.add_app_template_global(csp_nonce, "csp_nonce")
+app.add_app_template_filter(css_url, "css_url")
+
+_CSP_INJECTED_SCRIPT_HASHES = []
+
+
+def csp_injected_script_hashes():
+    """sha256 sources for the static inline scripts that inject_mobile_app_head() adds.
+
+    Hashed from mobile_app_head_tags() itself (trusted server code), never from the
+    response body, so injected markup cannot whitelist itself.
+    """
+    if not _CSP_INJECTED_SCRIPT_HASHES:
+        import base64
+
+        for body in re.findall(r"<script>(.*?)</script>", mobile_app_head_tags(), flags=re.S):
+            digest = hashlib.sha256(body.encode("utf-8")).digest()
+            _CSP_INJECTED_SCRIPT_HASHES.append("'sha256-" + base64.b64encode(digest).decode("ascii") + "'")
+    return _CSP_INJECTED_SCRIPT_HASHES
+
+
+# Third-party hosts the UI talks to (chat emotes: BTTV/FFZ/7TV, sub emotes: ivr.fi;
+# clip editor slider: cdnjs). Keep in sync with static/chat_emotes.js.
+CSP_SCRIPT_HOSTS = "https://cdn.jsdelivr.net https://cdnjs.cloudflare.com"
+CSP_STYLE_HOSTS = "https://fonts.googleapis.com https://cdnjs.cloudflare.com"
+# Images: any https source. Admins may set custom banner/avatar URLs on arbitrary
+# hosts (streamer page); images cannot execute script, the CSS url() value is
+# filtered by css_url(). Twitch/emote CDNs are covered by https:.
+CSP_IMG_HOSTS = "https:"
+CSP_CONNECT_HOSTS = (
+    "https://*.googleapis.com https://clients3.google.com "
+    "https://api.betterttv.net https://api.frankerfacez.com https://7tv.io https://api.ivr.fi"
+)
+
+
 @app.after_request
 def set_security_headers(response):
     response = inject_mobile_app_head(response)
@@ -10765,24 +10832,29 @@ def set_security_headers(response):
     response.headers["X-XSS-Protection"] = "1; mode=block"
     response.headers["Referrer-Policy"] = "strict-origin-when-cross-origin"
     # HSTS is set once by nginx (avoid duplicate Strict-Transport-Security headers).
-    # Default is Report-Only. Set VOD_CSP_ENFORCE=true after overlay/player QA.
+    # Enforced by default; VOD_CSP_ENFORCE=false falls back to Report-Only.
+    # Inline <script> blocks need nonce="{{ csp_nonce() }}"; inline event handlers
+    # (onclick= ...) are blocked, so templates bind events with addEventListener.
     # worker-src / media blob: cover live clip overlay + HLS blob URLs.
+    script_src = " ".join(["'self'", "'nonce-" + csp_nonce() + "'", *csp_injected_script_hashes(), CSP_SCRIPT_HOSTS])
     csp = (
         "default-src 'self'; "
         "base-uri 'self'; "
         "form-action 'self'; "
         "frame-ancestors 'self'; "
+        "object-src 'none'; "
         "frame-src 'self' https://player.twitch.tv https://www.twitch.tv; "
         "child-src 'self' blob: https://player.twitch.tv https://www.twitch.tv; "
         "worker-src 'self' blob:; "
-        "script-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; "
-        "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; "
+        "script-src " + script_src + "; "
+        "script-src-attr 'none'; "
+        "style-src 'self' 'unsafe-inline' " + CSP_STYLE_HOSTS + "; "
         "font-src 'self' https://fonts.gstatic.com data:; "
-        "img-src 'self' data: blob: https://static-cdn.jtvnw.net https://badges.twitch.tv https://cdn.discordapp.com; "
+        "img-src 'self' data: blob: " + CSP_IMG_HOSTS + "; "
         "media-src 'self' blob:; "
-        "connect-src 'self' blob: https://*.googleapis.com https://clients3.google.com;"
+        "connect-src 'self' blob: " + CSP_CONNECT_HOSTS + ";"
     )
-    header = "Content-Security-Policy" if os.environ.get("VOD_CSP_ENFORCE", "false").lower() in ("true", "1", "yes") else "Content-Security-Policy-Report-Only"
+    header = "Content-Security-Policy" if os.environ.get("VOD_CSP_ENFORCE", "true").lower() in ("true", "1", "yes") else "Content-Security-Policy-Report-Only"
     response.headers.setdefault(header, csp)
     return response
 
diff --git a/docs/screenshots/audit-2026-11-12/desktop-confirm-dialog-1280.png b/docs/screenshots/audit-2026-11-12/desktop-confirm-dialog-1280.png
new file mode 100644
index 0000000..f019edd
Binary files /dev/null and b/docs/screenshots/audit-2026-11-12/desktop-confirm-dialog-1280.png differ
diff --git a/docs/screenshots/audit-2026-11-12/desktop-dashboard-1280.png b/docs/screenshots/audit-2026-11-12/desktop-dashboard-1280.png
new file mode 100644
index 0000000..9e7a12c
Binary files /dev/null and b/docs/screenshots/audit-2026-11-12/desktop-dashboard-1280.png differ
diff --git a/docs/screenshots/audit-2026-11-12/phone-bottom-nav-375.png b/docs/screenshots/audit-2026-11-12/phone-bottom-nav-375.png
new file mode 100644
index 0000000..53cc992
Binary files /dev/null and b/docs/screenshots/audit-2026-11-12/phone-bottom-nav-375.png differ
diff --git a/docs/screenshots/audit-2026-11-12/phone-dashboard-375.png b/docs/screenshots/audit-2026-11-12/phone-dashboard-375.png
new file mode 100644
index 0000000..b094de9
Binary files /dev/null and b/docs/screenshots/audit-2026-11-12/phone-dashboard-375.png differ
diff --git a/tests/test_recorder_reliability.py b/tests/test_recorder_reliability.py
index e3ae796..eb01512 100644
--- a/tests/test_recorder_reliability.py
+++ b/tests/test_recorder_reliability.py
@@ -925,9 +925,14 @@ def test_legal_pages_render(self):
 
 
 class ClipEditorShareXssTests(IsolatedBaseTest):
-    """?clip_name= lands in the Share button's onclick; it must stay a JS string."""
+    """?clip_name= lands in the Share button's data-clip-name; it must stay plain data.
 
-    def _share_onclick(self, clip_name):
+    Under the enforced CSP (script-src-attr 'none') the button has no onclick; the
+    listener reads data-clip-name. The value must round-trip exactly and the page
+    must not contain any inline event handler the payload could have created.
+    """
+
+    def _share_clip_name(self, clip_name):
         from html.parser import HTMLParser
         from urllib.parse import quote
 
@@ -944,24 +949,24 @@ def _share_onclick(self, clip_name):
         )
         self.assertEqual(response.status_code, 200)
 
-        handlers = []
+        share_values = []
+        inline_handlers = []
 
-        class OnclickCollector(HTMLParser):
+        class ShareCollector(HTMLParser):
             # HTMLParser decodes entities in attribute values exactly like a
-            # browser does before the onclick body reaches the JS engine.
+            # browser does before the listener reads the data attribute.
             def handle_starttag(self, tag, attrs):
-                value = dict(attrs).get("onclick") or ""
-                if value.startswith("shareClip("):
-                    handlers.append(value)
+                attr_map = dict(attrs)
+                inline_handlers.extend(name for name in attr_map if name.startswith("on"))
+                if attr_map.get("id") == "btnShareClip":
+                    share_values.append(attr_map.get("data-clip-name"))
 
-        OnclickCollector().feed(response.get_data(as_text=True))
-        self.assertEqual(len(handlers), 1)
-        return handlers[0]
+        ShareCollector().feed(response.get_data(as_text=True))
+        self.assertEqual(inline_handlers, [])
+        self.assertEqual(len(share_values), 1)
+        return share_values[0]
 
     def test_clip_name_cannot_break_out_of_the_share_handler(self):
-        import json
-        import re
-
         payloads = (
             "a');console.log('SVPOC');//",
             'a");console.log("SVPOC");//',
@@ -971,13 +976,91 @@ def test_clip_name_cannot_break_out_of_the_share_handler(self):
         )
         for payload in payloads:
             with self.subTest(payload=payload):
-                handler = self._share_onclick(payload)
-                match = re.fullmatch(r"shareClip\((.*)\)", handler, flags=re.DOTALL)
-                if match is None:
-                    self.fail(f"unexpected Share handler: {handler!r}")
-                # The single argument must be one string literal that evaluates
-                # to exactly the payload; anything else means code ran outside it.
-                self.assertEqual(json.loads(match.group(1)), payload)
+                # The attribute must decode to exactly the payload; anything else
+                # means the payload escaped the attribute into markup.
+                self.assertEqual(self._share_clip_name(payload), payload)
+
+
+class ContentSecurityPolicyTests(IsolatedBaseTest):
+    """The CSP is enforced by default and inline scripts run only with the request nonce."""
+
+    def _get(self, path):
+        from webui_test_helpers import admin_test_client
+
+        return admin_test_client().get(path)
+
+    def _inline_scripts(self, html):
+        from html.parser import HTMLParser
+
+        scripts = []
+
+        class Collector(HTMLParser):
+            current = None
+
+            def handle_starttag(self, tag, attrs):
+                attr_map = dict(attrs)
+                if tag == "script" and "src" not in attr_map:
+                    Collector.current = {"attrs": attr_map, "body": ""}
+
+            def handle_data(self, data):
+                if Collector.current is not None:
+                    Collector.current["body"] += data
+
+            def handle_endtag(self, tag):
+                if tag == "script" and Collector.current is not None:
+                    scripts.append(Collector.current)
+                    Collector.current = None
+
+        Collector(convert_charrefs=True).feed(html)
+        return scripts
+
+    def test_policy_is_enforced_with_nonce_and_without_unsafe_inline_scripts(self):
+        import base64
+        import hashlib
+        import re
+
+        for path in ("/admin", "/admin/users", "/admin/storage", "/channels", "/search", "/"):
+            with self.subTest(path=path):
+                with mock.patch.dict(os.environ, {}, clear=False):
+                    os.environ.pop("VOD_CSP_ENFORCE", None)
+                    response = self._get(path)
+                self.assertEqual(response.status_code, 200)
+                policy = response.headers.get("Content-Security-Policy")
+                self.assertIsNotNone(policy)
+                script_src = re.search(r"script-src ([^;]*);", policy).group(1)
+                self.assertNotIn("'unsafe-inline'", script_src)
+                self.assertIn("script-src-attr 'none'", policy)
+                nonce = re.search(r"'nonce-([^']+)'", script_src).group(1)
+                hashes = set(re.findall(r"'(sha256-[^']+)'", script_src))
+                scripts = self._inline_scripts(response.get_data(as_text=True))
+                self.assertTrue(scripts)
+                for script in scripts:
+                    if script["attrs"].get("type") == "application/json":
+                        continue
+                    digest = "sha256-" + base64.b64encode(
+                        hashlib.sha256(script["body"].encode("utf-8")).digest()).decode("ascii")
+                    # Every executable inline script needs this response's nonce; only the
+                    # static scripts injected by inject_mobile_app_head() may use a hash.
+                    if script["attrs"].get("nonce") != nonce:
+                        self.assertIn(digest, hashes, script["body"].strip()[:80])
+                for host in ("https://api.betterttv.net", "https://api.frankerfacez.com", "https://7tv.io", "https://api.ivr.fi"):
+                    self.assertIn(host, policy)
+
+    def test_img_src_allows_https_images_for_custom_banners(self):
+        import re
+
+        response = self._get("/admin")
+        policy = response.headers.get("Content-Security-Policy")
+        img_src = re.search(r"img-src ([^;]*);", policy).group(1).split()
+        self.assertIn("https:", img_src)
+        self.assertNotIn("http:", img_src)
+        self.assertNotIn("*", img_src)
+
+    def test_report_only_when_explicitly_disabled(self):
+        with mock.patch.dict(os.environ, {"VOD_CSP_ENFORCE": "false"}):
+            response = self._get("/admin")
+        self.assertIsNone(response.headers.get("Content-Security-Policy"))
+        self.assertIsNotNone(response.headers.get("Content-Security-Policy-Report-Only"))
 
 
 class ClientIpTests(unittest.TestCase):
diff --git a/tests/test_webui_frontend.py b/tests/test_webui_frontend.py
new file mode 100644
index 0000000..f358d1b
--- /dev/null
+++ b/tests/test_webui_frontend.py
@@ -0,0 +1,284 @@
+"""Frontend behaviour introduced by the 2026-11-12 UI audit (PR #13).
+
+- css_url: the Jinja filter that guards banner/hero image URLs inside CSS url('...')
+- chat fallbacks escape Twitch chat text when chat_emotes.js is unavailable
+- destructive actions render the shared data-confirm dialog hooks
+"""
+import json
+import os
+import re
+import shutil
+import subprocess
+import sys
+import unittest
+from pathlib import Path
+
+sys.path.insert(0, str(Path(__file__).resolve().parent))
+
+from test_recorder_reliability import IsolatedBaseTest  # noqa: E402  (sets VOD_* env first)
+from webui_test_helpers import admin_test_client  # noqa: E402
+
+TEMPLATES = Path(__file__).resolve().parents[1] / "WEBUI" / "templates"
+
+
+def require_node(test):
+    """node runs the JS logic tests; in CI (CI=true) a missing node is a failure, not a skip."""
+    if shutil.which("node"):
+        return
+    if os.environ.get("CI"):
+        test.fail("node is required in CI for the JavaScript logic tests")
+    test.skipTest("node not installed")
+
+
+def run_node(script):
+    out = subprocess.run(["node", "-e", script], capture_output=True, text=True, timeout=30, check=True)
+    return out.stdout
+
+
+class CssUrlFilterTests(IsolatedBaseTest):
+    def test_accepts_same_origin_paths_and_https_urls(self):
+        from WEBUI.webui import css_url
+
+        for value in ("/static/banners/a.jpg", "/avatar/lunarlab", "https://cdn.example.org/b.png",
+                      "HTTPS://cdn.example.org/b.png?x=1&y=2"):
+            with self.subTest(value=value):
+                self.assertEqual(css_url(value), value)
+
+    def test_rejects_values_that_could_leave_the_url_token(self):
+        from WEBUI.webui import css_url
+
+        for value in (None, "", "//evil.example/x.png", "http://plain.example/x.png", "javascript:alert(1)",
+                      "data:image/svg+xml,<svg>", "/a.png') ; background:url(//x", "/a\\b.png",
+                      'https://x.example/a"b.png', "https://x.example/a b.png", "https://x.example/a\tb.png",
+                      "https://x.example/a(b).png", "/a<b", "https://", "relative/path.png"):
+            with self.subTest(value=value):
+                self.assertEqual(css_url(value), "")
+
+    def test_registered_as_jinja_filter_and_used_by_the_streamer_template(self):
+        from WEBUI import webui
+
+        rendered = webui.app.jinja_env.from_string(
+            "url('{{ good|css_url }}') url('{{ bad|css_url }}')"
+        ).render(good="https://cdn.example.org/b.png", bad="/a.png'); color:red")
+        self.assertEqual(rendered, "url('https://cdn.example.org/b.png') url('')")
+        source = (TEMPLATES / "streamer.html").read_text(encoding="utf-8")
+        self.assertIn("{% set banner_css_url = banner_url|css_url %}", source)
+        self.assertIn("|css_url %}", source.split("hero_css_url", 1)[1].split("\n", 1)[0])
+
+
+class ChatFallbackEscapingTests(unittest.TestCase):
+    """twitch_watch_chat.js.html and mobile_player.html render chat without chat_emotes.js."""
+
+    FILES = ("twitch_watch_chat.js.html", "mobile_player.html")
+
+    def _escape_function(self, name):
+        source = (TEMPLATES / name).read_text(encoding="utf-8")
+        match = re.search(r"function escapeChatText\(value\) \{.*?\n\s*\}\n", source, flags=re.S)
+        self.assertIsNotNone(match, name)
+        return source, match.group(0)
+
+    def test_fallbacks_go_through_escape_chat_text(self):
+        for name in self.FILES:
+            with self.subTest(template=name):
+                source, _ = self._escape_function(name)
+                self.assertNotRegex(source, r"\|\|\s*\(item\.msg \|\| ''\)\s*;")
+                self.assertNotRegex(source, r":\s*\(msg\.(msg|user) \|\| ''\)\s*;")
+                self.assertIn("escapeChatText(", source.split("function escapeChatText", 1)[1])
+
+    def test_escape_chat_text_neutralises_markup(self):
+        require_node(self)
+        payload = "<img src=x onerror=alert(1)>&\"'"
+        expected = "&lt;img src=x onerror=alert(1)&gt;&amp;&quot;&#39;"
+        for name in self.FILES:
+            with self.subTest(template=name):
+                _, function = self._escape_function(name)
+                script = function + "\nprocess.stdout.write(escapeChatText(%s) + '|' + escapeChatText(null));" % json.dumps(payload)
+                out = subprocess.run(["node", "-e", script], capture_output=True, text=True, timeout=30, check=True)
+                self.assertEqual(out.stdout, expected + "|")
+
+
+class ConfirmDialogTemplateTests(IsolatedBaseTest):
+    """Destructive admin actions use the shared data-confirm dialog (static/sv_confirm.js)."""
+
+    def _client(self):
+        return admin_test_client()
+
+    def test_admin_page_renders_confirm_hooks_and_loads_the_dialog_script(self):
+        html = self._client().get("/admin").get_data(as_text=True)
+        self.assertIn("sv_confirm.js", html)
+        restart = re.search(r'<form method="post" action="[^"]*restart[^"]*"[^>]*>', html, flags=re.S)
+        self.assertIsNotNone(restart)
+        self.assertIn('data-confirm="', restart.group(0))
+        self.assertIn('data-confirm-ok="', restart.group(0))
+        self.assertNotIn("window.confirm(", html)
+        self.assertNotIn("return confirm(", html)
+        # svT() strings for the dialog come from JS_MESSAGES via components/js_i18n.html
+        self.assertIn("window.SV_I18N", html)
+
+    def test_no_template_uses_the_old_parallel_confirm_attributes(self):
+        for path in TEMPLATES.rglob("*.html"):
+            source = path.read_text(encoding="utf-8")
+            with self.subTest(template=path.name):
+                self.assertNotIn("data-streamer-confirm", source)
+                self.assertNotIn("data-storage-confirm", source)
+                self.assertNotRegex(source, r"\bonsubmit=|\bonclick=")
+
+    def test_dialog_strings_are_registered_for_translation(self):
+        from WEBUI import i18n
+
+        for text in ("Please confirm", "Confirm", "Cancel"):
+            self.assertIn(text, i18n.JS_MESSAGES)
+
+
+class OverlayTokenTransportTests(unittest.TestCase):
+    """OBS overlays: token from #token= (legacy ?token= moved into the fragment), header only,
+    no polling without a token, 401 stops polling, errors back off."""
+
+    STATIC = TEMPLATES.parent / "static"
+    COMMON = (TEMPLATES.parent / "static" / "overlay_common.js").as_posix()
+
+    def test_overlay_scripts_use_the_shared_helper_and_send_headers_only(self):
+        for name, header in (("tts_overlay.js", "X-TTS-Token"), ("alerts_overlay.js", "X-Alert-Token")):
+            with self.subTest(script=name):
+                source = (self.STATIC / name).read_text(encoding="utf-8")
+                self.assertIn("overlay.readToken()", source)
+                self.assertIn('"%s": token' % header, source)
+                self.assertIn("overlay.createPoller(", source)
+                self.assertNotIn("setInterval(", source)
+                self.assertNotRegex(source, r'searchParams\.set\("token"')
+                # no token: the script returns before any poller exists
+                guard = source.index("if (!token) {")
+                self.assertLess(guard, source.index("overlay.createPoller("))
+                self.assertIn("return;", source[guard:guard + 200])
+        for page in ("tts_overlay.html", "alerts_overlay.html"):
+            html = (self.STATIC / page).read_text(encoding="utf-8")
+            self.assertLess(html.index("/static/overlay_common.js"), html.index("_overlay.js\"></script>", html.index("/static/overlay_common.js") + 1))
+
+    def test_parse_token_prefers_fragment_and_moves_query_token_into_it(self):
+        require_node(self)
+        script = """
+const o = require(%s);
+const cases = [
+  "https://h/tts/overlay?streamer=a&token=Q#toast=0",
+  "https://h/alerts/overlay#token=F",
+  "https://h/alerts/overlay?token=Q#token=F",
+  "https://h/alerts/overlay",
+];
+process.stdout.write(JSON.stringify(cases.map(function (u) {
+  const r = o.parseToken(u);
+  return [r.token, r.fromQuery, r.cleanUrl, r.params.get("streamer"), r.params.get("toast"), r.params.has("token")];
+})));
+""" % json.dumps(self.COMMON)
+        result = json.loads(run_node(script))
+        self.assertEqual(result, [
+            ["Q", True, "https://h/tts/overlay?streamer=a#toast=0&token=Q", "a", "0", False],
+            ["F", False, "https://h/alerts/overlay#token=F", None, None, False],
+            ["F", False, "https://h/alerts/overlay#token=F", None, None, False],
+            ["", False, "https://h/alerts/overlay", None, None, False],
+        ])
+
+    def test_poller_backs_off_on_errors_and_stops_on_401(self):
+        require_node(self)
+        script = """
+const o = require(%s);
+const results = ["error", "error", "error", "error", "error", "error", "ok", "unauthorized", "ok"];
+const delays = [];
+let pending = null;
+let unauthorized = 0;
+let calls = 0;
+const poller = o.createPoller(async function () { return results[calls++]; }, {
+  interval: 1000, maxInterval: 8000,
+  schedule: function (fn, ms) { delays.push(ms); pending = fn; return delays.length; },
+  cancel: function () { pending = null; },
+  onUnauthorized: function () { unauthorized += 1; },
+});
+(async function () {
+  const flush = function () { return new Promise(function (r) { setImmediate(r); }); };
+  poller.start();
+  await flush();
+  for (let i = 0; i < 20 && pending; i++) {
+    const fn = pending; pending = null;
+    await fn();
+  }
+  await flush();
+  process.stdout.write(JSON.stringify({delays: delays, calls: calls, stopped: poller.stopped, unauthorized: unauthorized}));
+})();
+""" % json.dumps(self.COMMON)
+        result = json.loads(run_node(script))
+        self.assertEqual(result["delays"], [2000, 4000, 8000, 8000, 8000, 8000, 1000])
+        self.assertEqual(result["calls"], 8)
+        self.assertTrue(result["stopped"])
+        self.assertEqual(result["unauthorized"], 1)
+
+
+class LogoutEverywhereTemplateTests(IsolatedBaseTest):
+    """POST /logout/all (components/logout_everywhere.html) in the rail, the bottom nav and both
+    mobile templates, rendered with CSRF token and confirmation."""
+
+    DESKTOP = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) Chrome/130.0"
+    MOBILE = "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) Mobile/15E148 Safari/604.1"
+
+    def _forms(self, html):
+        return re.findall(r'<form method="post" action="/logout/all"([^>]*)>\s*'
+                          r'<input type="hidden" name="csrf_token" value="t">', html)
+
+    def test_dashboard_and_mobile_streamer_render_the_form(self):
+        (self.base / "teststreamer").mkdir()
+        client = admin_test_client()
+        cases = (("/", self.DESKTOP, 2), ("/", self.MOBILE, 1), ("/streamer/teststreamer", self.MOBILE, 1))
+        for path, ua, expected in cases:
+            with self.subTest(path=path, mobile=ua is self.MOBILE):
+                response = client.get(path, headers={"User-Agent": ua})
+                self.assertEqual(response.status_code, 200)
+                html = response.get_data(as_text=True)
+                if path.startswith("/streamer/"):
+                    self.assertIn("mobile-body", html)  # mobile_streamer.html, not the desktop page
+                forms = self._forms(html)
+                self.assertEqual(len(forms), expected)
+                for attrs in forms:
+                    self.assertIn("data-confirm=", attrs)
+                    self.assertIn("data-confirm-danger", attrs)
+        for name in ("components/sidebar.html", "mobile_index.html", "mobile_streamer.html"):
+            source = (TEMPLATES / name).read_text(encoding="utf-8")
+            self.assertIn("components/logout_everywhere.html", source)
+            self.assertNotIn("url_for('logout_everywhere')", source)
+
+
+class ObsOverlayPanelTests(IsolatedBaseTest):
+    """Options > Settings recommends overlay URLs with the token in the fragment."""
+
+    def test_admin_panel_shows_fragment_token_urls(self):
+        html = admin_test_client().get("/admin").get_data(as_text=True)
+        for field_id, path in (("obsTtsUrl", "/tts/overlay?streamer=CHANNEL#token=TOKEN"),
+                               ("obsAlertsUrl", "/alerts/overlay#token=TOKEN")):
+            with self.subTest(field=field_id):
+                match = re.search(r'<input id="%s"[^>]*value="([^"]+)"' % field_id, html)
+                self.assertIsNotNone(match)
+                value = match.group(1)
+                self.assertTrue(value.endswith(path), value)
+                self.assertNotIn("?token=", value)
+                self.assertNotIn("&token=", value)
+
+
+class NoNativeConfirmTests(unittest.TestCase):
+    def test_templates_use_the_confirmation_dialog(self):
+        for path in TEMPLATES.rglob("*.html"):
+            source = path.read_text(encoding="utf-8")
+            with self.subTest(template=path.name):
+                self.assertNotRegex(source, r"(?<![\w.])confirm\(|window\.confirm\(")
+
+
+class StorageProviderFieldIdTests(unittest.TestCase):
+    """Add and edit provider modals render the same fields; their ids must differ."""
+
+    def test_field_ids_are_prefixed_with_the_modal_container(self):
+        source = (TEMPLATES / "storage.html").read_text(encoding="utf-8")
+        self.assertIn("const id = idPrefix + '-cfg_' + key;", source)
+        self.assertIn("return fieldMarkup(field, values || {}, containerId);", source)
+        self.assertIn("<label for=\"' + id + '\">", source)
+        self.assertIn("renderFields('add-provider-fields'", source)
+        self.assertIn("renderFields('edit-provider-fields'", source)
+
+
+if __name__ == "__main__":
+    unittest.main()
diff --git a/tests/webui_test_helpers.py b/tests/webui_test_helpers.py
new file mode 100644
index 0000000..f6dab05
--- /dev/null
+++ b/tests/webui_test_helpers.py
@@ -0,0 +1,18 @@
+"""Shared helpers for WebUI tests (not a test module itself)."""
+import time
+
+from core import config
+
+
+def admin_test_client(csrf_token="t"):
+    """Flask test client with a logged-in admin session and a fixed CSRF token."""
+    from WEBUI import webui
+
+    webui.ensure_admin_user()
+    webui.app.config.update(TESTING=True)
+    client = webui.app.test_client()
+    with client.session_transaction() as sess:
+        now = time.time()
+        sess.update(logged_in=True, user_role="admin", username=config.VOD_USER,
+                    login_time=now, last_active=now, _csrf_token=csrf_token)
+    return client