fix(ui): dark-theme polish for mobile biases + center mobile Box

src/components/Box/Box.module.scss

@@ -4,7 +4,8 @@
      env() is 0 on devices without a safe area, so desktop layout is
      unchanged. Pairs with `viewport-fit=cover` in SeoGenerator. */
   bottom: max(15px, env(safe-area-inset-bottom));
-  right: 15px;
+  left: 50%;
+  transform: translateX(-50%);
   width: 100%;
   max-width: 480px;
   padding: 20px;
@@ -154,10 +155,8 @@
 
 @media (max-width: 500px) {
   .content {
-    right: unset;
-    margin: 0 15px;
+    width: calc(100% - 30px);
     max-width: unset;
-    width: unset;
     bottom: max(15px, env(safe-area-inset-bottom));
   }
 }

src/components/Headline/Headline.module.scss

@@ -276,8 +276,6 @@
 
 @media (min-width: 1921px) {
   .headline {
-    height: 800px;
-
     .contentWrapper {
       padding-left: 0;
       padding-top: 0;
@@ -286,19 +284,6 @@
     .headlineInfo {
       justify-content: center;
       align-items: center;
-
-      .videoContainer {
-        .poster {
-          height: 800px;
-          object-fit: none;
-        }
-
-        .video {
-          height: 800px;
-          object-fit: none;
-          background-color: #e7e7e7;
-        }
-      }
     }
   }
 }

src/styles/404.module.scss

@@ -91,3 +91,16 @@
     }
   }
 }
+
+:global(body.darkTheme) .pageNotFound {
+  background-image: none;
+  background-color: #1b1e26;
+
+  .content {
+    color: #dadada;
+
+    .image {
+      filter: invert(1) hue-rotate(180deg);
+    }
+  }
+}

src/uxcore/assets/icons/MoonIcon.tsx

@@ -0,0 +1,17 @@
+const MoonIcon = () => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+  </svg>
+);
+
+export default MoonIcon;

src/uxcore/assets/icons/SunIcon.tsx

@@ -0,0 +1,18 @@
+const SunIcon = () => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="12" cy="12" r="4" />
+    <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
+  </svg>
+);
+
+export default SunIcon;

src/uxcore/components/CompletionBar/CompletionBar.module.scss

@@ -537,11 +537,15 @@
   }
 
   .progressBar .levelTxt {
-    color: rgba(218, 218, 218, 0.55);
+    color: #dadada;
   }
 
   .step {
-    color: rgba(218, 218, 218, 0.5);
+    color: #dadada;
+  }
+
+  .step:not(.completed):not(.completedMilestone):not(.hoveredLvl):not(.singleHoveredLvl) {
+    background-image: url("data:image/svg+xml;utf8,<svg width='22' height='22' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'><path d='M9.99998 20L18.6603 15V5L9.99998 0L1.33972 5V15L9.99998 20Z' fill='%23000000d9'/></svg>");
   }
 
   .bar,

src/uxcore/components/Logos/Logos.module.scss

@@ -67,6 +67,9 @@
 
 // Dark theme: lift the description text, then desaturate + invert the
 // partner logos so the black-on-white marks read as soft light marks on dark.
+// The mobile breakpoint above paints `.logoWrapper` solid white to give the
+// logos breathing room on the cramped mobile column — on dark that becomes
+// a bright slab mid-page, so blank the background out here.
 :global(body.darkTheme) {
   .title {
     color: rgba(218, 218, 218, 0.65);
@@ -76,4 +79,10 @@
     filter: invert(1) hue-rotate(180deg) brightness(0.95) saturate(0.85);
     opacity: 0.85;
   }
+
+  @media (max-width: 1010px) {
+    .logoWrapper {
+      background-color: transparent;
+    }
+  }
 }

src/uxcore/components/PageSwitcher/PageSwitcher.module.scss

@@ -84,3 +84,35 @@ $active-color: #359eff;
     grid-template-columns: 1fr;
   }
 }
+
+// Dark theme: default button rail is a white panel with hairline-gray
+// borders and black labels — on the dark page that becomes a bright slab
+// with invisible text. Repaint to the dark surface and lift the labels
+// and active accent to the dark-mode palette.
+:global(body.darkTheme) .PageSwitcher {
+  background-color: transparent;
+
+  & .Button {
+    border-color: #303338;
+
+    & svg path {
+      fill: #dadada;
+    }
+
+    & .Description {
+      color: #dadada;
+    }
+
+    &.Active {
+      border-color: #7fb3d5;
+
+      & svg > path {
+        fill: #7fb3d5;
+      }
+
+      & .Description {
+        color: #7fb3d5;
+      }
+    }
+  }
+}

src/uxcore/components/ToolHeader/ToolHeader.module.scss

@@ -13,7 +13,7 @@ $headerHeight: 46px;
   flex-direction: row;
   align-items: center;
   box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05);
-  z-index: 2;
+  z-index: 10;
   box-sizing: border-box;
   justify-content: space-between;
 
@@ -550,6 +550,14 @@ $headerHeight: 46px;
   .openLink {
     filter: invert(1) brightness(2) saturate(0);
   }
+
+  .PageSwitcherItem {
+    color: #dadada;
+
+    svg path {
+      fill: #dadada;
+    }
+  }
 }
 
 @media (max-width: 920px) {

src/uxcore/components/ToolHeader/ToolHeader.tsx

@@ -3,7 +3,9 @@ import { userInfoUpdate } from '@uxcore/api/uxcat/settings';
 import { getUserInfo } from '@uxcore/api/uxcat/users-me';
 import CloseIcon from '@uxcore/assets/icons/CloseIcon';
 import DiamondIcon from '@uxcore/assets/icons/DiamondIcon';
+import MoonIcon from '@uxcore/assets/icons/MoonIcon';
 import PodcastIcon from '@uxcore/assets/icons/PodcastIcon';
+import SunIcon from '@uxcore/assets/icons/SunIcon';
 import MobileHeader from '@uxcore/components/_biases/MobileHeader';
 import { GlobalContext } from '@uxcore/components/Context/GlobalContext';
 import LanguageSwitcher from '@uxcore/components/LanguageSwitcher';
@@ -464,34 +466,7 @@ const ToolHeader: FC<TToolHeader> = ({
                 aria-pressed={isDarkTheme}
                 data-cy="theme-toggle"
               >
-                {isDarkTheme ? (
-                  <svg
-                    width="20"
-                    height="20"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  >
-                    <circle cx="12" cy="12" r="4" />
-                    <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
-                  </svg>
-                ) : (
-                  <svg
-                    width="20"
-                    height="20"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  >
-                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
-                  </svg>
-                )}
+                {isDarkTheme ? <SunIcon /> : <MoonIcon />}
               </button>
               <LanguageSwitcher
                 withFlag

src/uxcore/components/UXCoreModalMobile/UXCoreModalMobile.module.scss

@@ -278,3 +278,69 @@
     opacity: 0;
   }
 }
+
+// Dark theme: bias detail modal defaults to a white card with black body
+// text, a faint gray hairline border, and a near-white "mentioned in"
+// strip. On the dark page the whole sheet reads as a bright slab and the
+// body text falls back to invisible. Repaint surfaces + borders to the
+// dark palette and lift content + accents to dark-mode foreground.
+:global(body.darkTheme) {
+  .ModalOverlay {
+    background-color: rgba(0, 0, 0, 0.6);
+
+    & .Modal {
+      color: #dadada;
+      background: #1b1e26;
+      border-color: #303338;
+      box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.5);
+
+      & .ModalBody {
+        &::-webkit-scrollbar {
+          border-left-color: #303338;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background: rgba(127, 179, 213, 0.5);
+          border-left-color: #303338;
+        }
+
+        & .ModalBodyTitle.mentionedIn {
+          background-color: #15171f;
+
+          span {
+            color: rgba(218, 218, 218, 0.65);
+          }
+        }
+
+        .ModalBodyContent .switcher {
+          .switcherItem {
+            border-color: #303338;
+          }
+
+          .activeProduct,
+          .activeHr {
+            border-color: #7fb3d5;
+            color: #7fb3d5;
+
+            svg {
+              fill: #7fb3d5;
+            }
+          }
+        }
+      }
+
+      .ModalButtons {
+        .arrowRight,
+        .arrowLeft {
+          > svg {
+            fill: #7fb3d5;
+          }
+        }
+      }
+    }
+  }
+
+  .a {
+    color: #dadada !important;
+  }
+}

src/uxcore/components/_biases/BiasLabel/BiasLabel.module.scss

@@ -224,20 +224,20 @@ $purple-border: #8073ff;
 
 @media (min-width: 2500px) {
   .label {
-    height: 1.4vh;
+    height: 0.6vw;
 
     .txt {
-      font-size: 1.2vh;
+      font-size: 0.45vw;
     }
   }
 }
 
 @media (min-width: 3500px) {
   .label {
-    height: 1vh;
+    height: 0.55vw;
 
     .txt {
-      font-size: 0.8vh;
+      font-size: 0.42vw;
     }
   }
 }