diff --git a/starpilot/system/the_galaxy/assets/mobile/css/material.css b/starpilot/system/the_galaxy/assets/mobile/css/material.css
index fdc0b7ecc9..ac27f505e6 100644
--- a/starpilot/system/the_galaxy/assets/mobile/css/material.css
+++ b/starpilot/system/the_galaxy/assets/mobile/css/material.css
@@ -36,6 +36,7 @@
   --glass-border-light: rgba(255, 255, 255, 0.2);
   --glass-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.35);
   --glass-blur: blur(4px);
+  --card-scroll-bg: rgba(22, 18, 38, 0.95);
   --glass-text: #f3f2f8;
   --glass-accent: #9d72ff;
 
@@ -105,6 +106,7 @@
   --surface-container: rgba(255, 255, 255, 0.75);
   --surface-container-high: rgba(255, 255, 255, 0.95);
   --surface-container-low: rgba(240, 243, 252, 0.75);
+  --card-scroll-bg: rgba(245, 246, 252, 0.96);
 
   --on-surface: #171526;
   --on-surface-variant: #5f5b7d;
@@ -184,78 +186,44 @@ body {
     radial-gradient(ellipse at 85% 75%, rgba(85, 45, 180, 0.18) 0%, transparent 60%),
     radial-gradient(circle at 75% 15%, rgba(77, 232, 232, 0.12) 0%, transparent 48%);
   pointer-events: none;
-  contain: strict;
   transform: translateZ(0);
+  will-change: transform;
+  isolation: isolate;
+  contain: strict;
 }
 
 #galaxy-bg::before {
   content: "";
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 1px;
-  height: 1px;
-  border-radius: 50%;
-  background: #ffffff;
-  box-shadow:
-    30px 40px #ffffff,
-    110px 220px rgba(220, 200, 255, 0.8),
-    200px 90px #ffffff,
-    310px 340px rgba(160, 240, 255, 0.9),
-    410px 150px #ffffff,
-    640px 110px #ffffff,
-    890px 180px #ffffff,
-    150px 450px #ffffff,
-    270px 580px rgba(220, 200, 255, 0.8),
-    450px 510px rgba(160, 240, 255, 0.9),
-    720px 470px #ffffff,
-    950px 530px #ffffff,
-    30px 640px #ffffff,
-    110px 820px rgba(220, 200, 255, 0.8),
-    200px 690px #ffffff,
-    310px 940px rgba(160, 240, 255, 0.9),
-    410px 750px #ffffff,
-    640px 710px #ffffff,
-    890px 780px #ffffff,
-    150px 1050px #ffffff,
-    270px 1180px rgba(220, 200, 255, 0.8),
-    450px 1110px rgba(160, 240, 255, 0.9),
-    720px 1070px #ffffff,
-    950px 1130px #ffffff;
+  top: 0; left: 0; width: 100%; height: 200%;
+  background-image:
+    radial-gradient(1px 1px at 30px 40px, #ffffff, rgba(255,255,255,0)),
+    radial-gradient(1px 1px at 110px 220px, rgba(220, 200, 255, 0.8), rgba(255,255,255,0)),
+    radial-gradient(1.5px 1.5px at 200px 90px, #ffffff, rgba(255,255,255,0)),
+    radial-gradient(1.5px 1.5px at 310px 340px, rgba(160, 240, 255, 0.9), rgba(255,255,255,0)),
+    radial-gradient(1px 1px at 410px 150px, #ffffff, rgba(255,255,255,0)),
+    radial-gradient(1.5px 1.5px at 640px 110px, #ffffff, rgba(255,255,255,0)),
+    radial-gradient(1px 1px at 890px 180px, #ffffff, rgba(255,255,255,0));
+  background-size: 800px 400px;
   opacity: 0.5;
-  animation: gx-drift-layer1 240s linear infinite;
   will-change: transform;
+  transform: translate3d(var(--gx-para-x), 0, 0);
 }
 
 #galaxy-bg::after {
   content: "";
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 2px;
-  height: 2px;
-  border-radius: 50%;
-  background: #ffffff;
-  box-shadow:
-    80px 140px #ffffff,
-    240px 390px rgba(190, 235, 255, 0.9),
-    380px 60px rgba(230, 195, 255, 0.85),
-    560px 480px #ffffff,
-    730px 220px rgba(255, 255, 255, 0.9),
-    80px 590px #ffffff,
-    320px 520px rgba(255, 255, 255, 0.9),
-    610px 380px rgba(190, 235, 255, 0.9),
-    80px 740px #ffffff,
-    240px 990px rgba(190, 235, 255, 0.9),
-    380px 660px rgba(230, 195, 255, 0.85),
-    560px 1080px #ffffff,
-    730px 820px rgba(255, 255, 255, 0.9),
-    80px 1190px #ffffff,
-    320px 1120px rgba(255, 255, 255, 0.9),
-    610px 980px rgba(190, 235, 255, 0.9);
-  opacity: 0.65;
-  animation: gx-drift-layer2 150s linear infinite;
+  top: 0; left: 0; width: 100%; height: 200%;
+  background-image:
+    radial-gradient(1.5px 1.5px at 80px 140px, #ffffff, rgba(255,255,255,0)),
+    radial-gradient(2px 2px at 240px 390px, rgba(190, 235, 255, 0.9), rgba(255,255,255,0)),
+    radial-gradient(1.5px 1.5px at 380px 60px, rgba(230, 195, 255, 0.85), rgba(255,255,255,0)),
+    radial-gradient(2px 2px at 560px 480px, #ffffff, rgba(255,255,255,0)),
+    radial-gradient(1.5px 1.5px at 730px 220px, rgba(255, 255, 255, 0.9), rgba(255,255,255,0));
+  background-size: 900px 450px;
+  opacity: 0.6;
   will-change: transform;
+  transform: translate3d(var(--gx-para-x), 0, 0);
 }
 
 #galaxy-bg .galaxy-hero {
@@ -266,28 +234,16 @@ body {
   background: #ffffff;
   box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
   animation: galaxy-twinkle 6s ease-in-out infinite alternate;
-  will-change: opacity, transform;
-}
-
-@keyframes gx-drift-layer1 {
-  0%   { transform: translate3d(var(--gx-para-x, 0px), 0, 0); }
-  100% { transform: translate3d(var(--gx-para-x, 0px), -600px, 0); }
-}
-
-@keyframes gx-drift-layer2 {
-  0%   { transform: translate3d(var(--gx-para-x, 0px), 0, 0); }
-  100% { transform: translate3d(var(--gx-para-x, 0px), -600px, 0); }
 }
 
 @keyframes galaxy-twinkle {
   0%, 100% { opacity: 0.3; transform: scale(0.9); }
-  50%      { opacity: 1.0; transform: scale(1.2); }
+  50% { opacity: 1; transform: scale(1.2); }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  #galaxy-bg::before,
-  #galaxy-bg::after,
-  #galaxy-bg .galaxy-hero {
+  #galaxy-bg, #galaxy-bg::before, #galaxy-bg::after, #galaxy-bg .galaxy-hero,
+  #galaxy-stars, #galaxy-stars .galaxy-hero {
     animation: none !important;
   }
 }
@@ -303,11 +259,9 @@ body {
 [data-theme="light"] #galaxy-bg::before,
 [data-theme="light"] #galaxy-bg::after,
 [data-theme="light"] #galaxy-bg .galaxy-hero {
-  opacity: 0.18;
+  opacity: 0.12;
 }
 
-
-
 [v-cloak] { display: none !important; }
 a { color: inherit; text-decoration: none; }
 button { font-family: var(--font-body); }
@@ -350,6 +304,8 @@ ul { list-style: none; margin: 0; padding: 0; }
   position: sticky;
   top: 0;
   z-index: var(--z-appbar);
+  transform: translateZ(0);
+  isolation: isolate;
 }
 
 .gx-appbar__pill {
@@ -369,8 +325,7 @@ ul { list-style: none; margin: 0; padding: 0; }
   transition: background-color var(--motion-fast), border-color var(--motion-fast);
 }
 
-.gx-appbar__back,
-.gx-theme-toggle {
+.gx-appbar__back {
   background: var(--glass-bg);
   backdrop-filter: var(--glass-blur);
   -webkit-backdrop-filter: var(--glass-blur);
@@ -384,8 +339,7 @@ ul { list-style: none; margin: 0; padding: 0; }
   transition: transform var(--motion-fast), background-color var(--motion-fast);
 }
 
-.gx-appbar__back:active,
-.gx-theme-toggle:active { transform: scale(0.92); }
+.gx-appbar__back:active { transform: scale(0.92); }
 
 .gx-appbar__title {
   background: linear-gradient(135deg, #8b6cc5 0%, #5ec8c8 55%, #d4789c 100%);
@@ -457,6 +411,27 @@ ul { list-style: none; margin: 0; padding: 0; }
 .gx-back-btn { display: none; }
 .gx-menu-btn { display: inline-flex; }
 
+.gx-theme-toggle {
+  background: var(--glass-bg);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  border: 1px solid var(--glass-border);
+  border-radius: 50%;
+  box-shadow: var(--glass-shadow);
+  color: var(--glass-text);
+  flex: none;
+  height: var(--touch-target);
+  width: var(--touch-target);
+  transition: transform var(--motion-fast), background-color var(--motion-fast), border-color var(--motion-fast);
+}
+
+.gx-theme-toggle:active { transform: scale(0.92); }
+
+[data-theme="light"] .gx-theme-toggle {
+  border: 1.5px solid var(--primary);
+  box-shadow: 0 2px 8px rgba(120, 73, 232, 0.2);
+}
+
 .gx-searchwrap {
   align-items: center;
   display: flex;
@@ -538,7 +513,10 @@ ul { list-style: none; margin: 0; padding: 0; }
   position: fixed;
   bottom: calc(18px + env(safe-area-inset-bottom, 0px));
   left: 50%;
-  transform: translateX(-50%);
+  transform: translateX(-50%) translateZ(0);
+  will-change: transform;
+  isolation: isolate;
+  contain: layout style;
   z-index: 1000;
 
   display: flex;
@@ -614,7 +592,81 @@ ul { list-style: none; margin: 0; padding: 0; }
   box-shadow: var(--elev-1);
   margin-bottom: var(--sp-4);
   overflow: hidden;
-  transition: transform var(--motion-fast), box-shadow var(--motion-fast);
+  transition: transform var(--motion-fast), box-shadow var(--motion-fast), background-color 0.15s ease-out;
+}
+
+/* Surgical content-visibility for top-level non-collapsible cards */
+.dh-card:not(.dh-stat),
+.gx-content > div > .gx-card {
+  content-visibility: auto;
+  contain-intrinsic-size: 280px;
+  contain-intrinsic-size: auto 280px;
+}
+
+.dh-stat {
+  content-visibility: auto;
+  contain-intrinsic-size: 110px;
+  contain-intrinsic-size: auto 110px;
+}
+
+/* Disarm containment on collapsible sections and nested cards */
+.gx-card:has(.gx-section__body),
+.gx-card .gx-card,
+.gx-tree-node .gx-card {
+  content-visibility: visible !important;
+  contain-intrinsic-size: none !important;
+}
+
+/* Velocity-Adaptive Glass: bypass blur on scrolling cards with contrast boost */
+body.is-scrolling .gx-card,
+body.is-scrolling .gx-tile {
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+  background: var(--card-scroll-bg) !important;
+}
+
+/* Layer 2: Celestial Starlight Canopy */
+#galaxy-stars {
+  position: fixed;
+  inset: 0;
+  z-index: 20;
+  pointer-events: none;
+  overflow: hidden;
+  contain: strict;
+  transform: translateZ(0);
+}
+
+#galaxy-stars .galaxy-hero {
+  position: absolute;
+  border-radius: 50%;
+  background: radial-gradient(
+    circle,
+    rgba(255, 255, 255, 0.95) 0%,
+    rgba(157, 114, 255, 0.65) 35%,
+    rgba(77, 232, 232, 0.2) 65%,
+    transparent 100%
+  );
+  box-shadow:
+    0 0 8px rgba(157, 114, 255, 0.4),
+    0 0 3px rgba(255, 255, 255, 0.8);
+  mix-blend-mode: screen;
+  will-change: transform, opacity;
+  animation: galaxy-twinkle 6s ease-in-out infinite alternate;
+}
+
+/* Keep decorative animation out of modal backdrops and drawer content. */
+body:has(.gx-scrim, .gx-underlay, .gx-drawer.open) #galaxy-stars {
+  display: none;
+}
+
+[data-theme="light"] #galaxy-stars {
+  opacity: 0.4;
+}
+
+[data-theme="light"] #galaxy-stars .galaxy-hero {
+  background: radial-gradient(circle at center, #7849e8 0%, #b38fff 60%, rgba(120, 73, 232, 0) 100%);
+  box-shadow: 0 0 4px rgba(120, 73, 232, 0.45), 0 0 8px rgba(77, 232, 232, 0.3);
+  mix-blend-mode: normal;
 }
 
 .gx-unit-note {
@@ -892,6 +944,10 @@ input[type="range"].gx-slider:active::-webkit-slider-thumb {
   border: 1.5px solid var(--primary);
 }
 
+/* Fields are fluid and shrinkable: never let a select/textarea blow past its
+   container (intrinsic width from options/content) or refuse to shrink inside
+   a flex row. Contexts that want a full-width field (e.g. stacked toggle rows,
+   .gx-field--full) still stretch explicitly. */
 .gx-field {
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid var(--glass-border);
@@ -1317,6 +1373,8 @@ input[type="color"].gx-color {
   margin-top: var(--sp-5);
 }
 
+/* Native-style bottom sheet used for fullscreen player overlays. Kept as a
+   sibling of gx-sheet so confirm dialogs keep their centered look. */
 .gx-scrim--bottomsheet {
   align-items: flex-end;
   padding: var(--sp-4) 0 calc(var(--bottomnav-height) + var(--sp-3));
@@ -1478,6 +1536,9 @@ input[type="color"].gx-color {
 .gx-fade-enter-active, .gx-fade-leave-active { transition: opacity var(--motion-base); }
 .gx-fade-enter-from, .gx-fade-leave-to { opacity: 0; }
 
+/* Keep the underlay (and star suppression) until the drawer finishes closing. */
+.gx-underlay.gx-fade-leave-active { transition: opacity var(--motion-slow); }
+
 .gx-slide-enter-active, .gx-slide-leave-active {
   transition: transform var(--motion-base), opacity var(--motion-base);
 }
@@ -1491,6 +1552,8 @@ input[type="color"].gx-color {
 }
 .gx-collapse-enter-from, .gx-collapse-leave-to { max-height: 0; opacity: 0; }
 
+/* ---- PWA install guidance (Galaxy page) ---- */
+
 .gx-install__body {
   display: grid;
   gap: var(--sp-3);
@@ -1581,4 +1644,4 @@ input[type="color"].gx-color {
   .gx-menu-btn { display: inline-flex; }
   .gx-back-btn { display: none; }
   .gx-content { padding-bottom: var(--sp-6); }
-}
\ No newline at end of file
+}