fix(ui): hide topbar on splash and login, prevent tv shows search overlap, and eliminate header blur over spotlight

apex/ui/abyss.css

@@ -599,7 +599,7 @@ body:has(#videoOsdPage:not(.hide)) header.MuiAppBar-root>.MuiToolbar-root>.MuiBo
 }
 
 html[data-theme="dark"] .MuiBox-root .tabContent.pageTabContent.is-active.abyss-spotlight-active .featurediframe.focusable {
-    margin-top: 52px;
+    margin-top: 0 !important;
 }
 
 html[data-theme="dark"] header.MuiAppBar-root {
@@ -3729,10 +3729,11 @@ body, html, .backgroundContainer {
 .skinHeader,
 .skinHeader.focuscontainer-x,
 .skinHeader-withBackground {
-    background: rgba(0, 0, 0, 0.72) !important;
-    backdrop-filter: blur(24px) !important;
-    -webkit-backdrop-filter: blur(24px) !important;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
+    background: transparent !important;
+    backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
+    border: none !important;
+    border-bottom: none !important;
     box-shadow: none !important;
 }
 
@@ -3902,14 +3903,18 @@ header.MuiAppBar-root > .MuiToolbar-root > .MuiStack-root:first-of-type:has(butt
     opacity: 0 !important;
 }
 
-/* 2. HEADER CONTAINER & BAR */
+/* 2. HEADER CONTAINER & BAR - Fully transparent, zero blur over spotlight */
 .skinHeader,
 .skinHeader.focuscontainer-x,
 .skinHeader-withBackground,
+.skinHeader-withBackground::before,
 header.MuiAppBar-root {
-    background: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.5) 75%, transparent 100%) !important;
-    backdrop-filter: blur(20px) !important;
-    -webkit-backdrop-filter: blur(20px) !important;
+    background: transparent !important;
+    background-color: transparent !important;
+    background-image: none !important;
+    backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
+    border: none !important;
     border-bottom: none !important;
     box-shadow: none !important;
     height: 56px !important;
@@ -3920,6 +3925,12 @@ header.MuiAppBar-root {
     left: 0 !important;
     right: 0 !important;
     z-index: 1000 !important;
+    pointer-events: none !important;
+}
+
+.skinHeader *,
+header.MuiAppBar-root * {
+    pointer-events: auto;
 }
 
 .headerTop,
@@ -4412,22 +4423,73 @@ div[data-category="nextup"] .cardScalable,
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
 }
 
-/* Mobile Portrait Mode */
+/* Mobile Portrait Mode: Compact tabs to prevent TV Shows & Search collision */
 @media (max-width: 600px) and (orientation: portrait) {
     #apex-tv-topbar {
-        height: 52px !important;
-        padding: 0 8px !important;
+        height: 48px !important;
+        padding: 0 4px !important;
+        background: transparent !important;
+        backdrop-filter: none !important;
+        -webkit-backdrop-filter: none !important;
     }
     #apex-tv-topbar .apex-tv-tabs {
-        gap: 6px !important;
+        gap: 4px !important;
     }
     .apex-tv-tab,
     .apex-nav-item {
-        font-size: 13px !important;
-        padding: 5px 10px !important;
+        font-size: 12px !important;
+        padding: 4px 7px !important;
+        letter-spacing: -0.01em !important;
+    }
+    /* Right side controls: Search & Profile pinned safely to the right */
+    .headerRight,
+    header.MuiAppBar-root > .MuiToolbar-root > .MuiBox-root:last-of-type,
+    header.MuiAppBar-root > .MuiToolbar-root > .MuiStack-root:last-of-type {
+        position: absolute !important;
+        right: 8px !important;
+        top: 0 !important;
+        bottom: 0 !important;
+        display: flex !important;
+        align-items: center !important;
+        gap: 2px !important;
+        padding: 0 !important;
+        margin: 0 !important;
+    }
+    .headerSearchButton,
+    button[data-action="search"],
+    .headerUserButtonRound,
+    .headerButton-user {
+        margin: 0 1px !important;
+        padding: 4px !important;
+        min-width: 32px !important;
+        width: 32px !important;
+        height: 32px !important;
     }
 }
 
+/* Never display topbar on splash screen, login screen, server selection, or wizard */
+#loginPage ~ #apex-tv-topbar,
+body:has(#loginPage:not(.hide)) #apex-tv-topbar,
+body:has(.loginPage:not(.hide)) #apex-tv-topbar,
+body:has(#selectServerPage:not(.hide)) #apex-tv-topbar,
+body:has(#forgotPasswordPage:not(.hide)) #apex-tv-topbar,
+body:has(.manualLoginForm) #apex-tv-topbar,
+body:has(.splashLogo:not(.hide):not(:empty)) #apex-tv-topbar,
+body.is-logged-out #apex-tv-topbar {
+    display: none !important;
+    visibility: hidden !important;
+    opacity: 0 !important;
+    pointer-events: none !important;
+}
+
+/* Clean header on login and splash */
+#loginPage .skinHeader,
+.loginPage .skinHeader,
+#selectServerPage .skinHeader,
+.selectServerPage .skinHeader {
+    display: none !important;
+}
+
 /* Landscape Mode & Desktop/TV */
 @media (min-width: 601px), (orientation: landscape) {
     #apex-tv-topbar {

apex/ui/spotlight-loader.js

@@ -765,11 +765,24 @@ function findHomeTab() {
       if (tvTopbar) {
         var isVideo = !!document.querySelector(".videoPlayerContainer:not(.hide), #videoOsdPage:not(.hide), video");
         var hash = window.location.hash || "";
-        var isHiddenRoute = hash.indexOf("dashboard") !== -1 || hash.indexOf("settings") !== -1;
-        if (isVideo || isHiddenRoute) {
+        var isHiddenRoute = hash.indexOf("dashboard") !== -1 ||
+                            hash.indexOf("settings") !== -1 ||
+                            hash.indexOf("login") !== -1 ||
+                            hash.indexOf("selectserver") !== -1 ||
+                            hash.indexOf("forgotpassword") !== -1;
+
+        var isAuthPage = !!document.querySelector("#loginPage:not(.hide), .loginPage:not(.hide), #selectServerPage:not(.hide), #forgotPasswordPage:not(.hide), .manualLoginForm, form[data-action='login'], input[type='password']");
+        var isSplash = !!document.querySelector(".splashLogo:not(.hide), #splashPage:not(.hide), .splashLogo");
+        var hasHomeOrLibrary = !!document.querySelector("#indexPage, .homePage, #homeTab, .pageTabContent, .mainDrawer, .itemsContainer");
+        var isUserLoggedIn = (window.ApiClient && typeof window.ApiClient.isLoggedIn === "function") ? window.ApiClient.isLoggedIn() : (window.ApiClient && !!window.ApiClient.accessToken());
+
+        if (isVideo || isHiddenRoute || isAuthPage || (isSplash && !hasHomeOrLibrary) || (!isUserLoggedIn && !hasHomeOrLibrary)) {
           tvTopbar.style.display = "none";
+          tvTopbar.style.visibility = "hidden";
+          return;
         } else {
           tvTopbar.style.display = "flex";
+          tvTopbar.style.visibility = "visible";
         }
       }
 

apex/ui/spotlight.css

@@ -26,14 +26,8 @@ body {
 	z-index: 1;
 	opacity: 0;
 	transition: opacity 1.2s var(--ease);
-	-webkit-mask-image:
-		linear-gradient(to bottom, black 35%, transparent 100%),
-		linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
-	-webkit-mask-composite: source-in;
-	mask-image:
-		linear-gradient(to bottom, black 35%, transparent 100%),
-		linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
-	mask-composite: intersect;
+	-webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
+	mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
 }
 
 #backdrop img {
@@ -61,9 +55,7 @@ body {
 		/* Seamless bottom fade directly to OLED pitch black #000000 */
 		linear-gradient(to top, #000000 0%, rgba(0, 0, 0, 0.88) 22%, rgba(0, 0, 0, 0.45) 48%, transparent 80%),
 		/* Left side reading gradient ensuring text/metadata has 100% contrast */
-		linear-gradient(to right, #000000 0%, rgba(0, 0, 0, 0.8) 32%, rgba(0, 0, 0, 0.35) 58%, transparent 85%),
-		/* Subtle top gradient for header bar integration */
-		linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, transparent 18%);
+		linear-gradient(to right, #000000 0%, rgba(0, 0, 0, 0.8) 32%, rgba(0, 0, 0, 0.35) 58%, transparent 85%);
 	pointer-events: none;
 }