diff --git a/packages/nicolium/src/styles/new/accounts.scss b/packages/nicolium/src/styles/new/accounts.scss
index 7400a73d0..ba5bffa4c 100644
--- a/packages/nicolium/src/styles/new/accounts.scss
+++ b/packages/nicolium/src/styles/new/accounts.scss
@@ -1,4 +1,5 @@
 @use 'mixins';
+@use 'variables';
 
 .⁂-account-layout {
   display: flex;
@@ -8,7 +9,11 @@
 
 .⁂-account-header {
   &__container {
-    @apply -mx-4 -mt-4 sm:-mx-6 sm:-mt-6;
+    margin: -1rem -1rem 0;
+
+    @media (min-width: variables.$breakpoint-sm) {
+    margin: -1.5rem -1.5rem 0;
+    }
   }
 }
 
diff --git a/packages/nicolium/src/styles/new/components.scss b/packages/nicolium/src/styles/new/components.scss
index f1e3016d2..5eaa2aaea 100644
--- a/packages/nicolium/src/styles/new/components.scss
+++ b/packages/nicolium/src/styles/new/components.scss
@@ -1329,20 +1329,54 @@ div[data-viewport-type='window']:has(.⁂-empty-message) {
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 
   &__track {
-    @apply absolute top-1/2 h-1 w-full -translate-y-1/2 rounded-full bg-primary-200 dark:bg-primary-700;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+
+  width: 100%;
+  height: 0.25rem;
+  border-radius: 9999px;
+
+  background-color: rgb(var(--color-primary-200));
+
+  .dark & {
+    background-color: rgb(var(--color-primary-700));
+  }
   }
 
   &__fill {
-    @apply absolute top-1/2 h-1 -translate-y-1/2 rounded-full bg-accent-500 transition-[width] duration-0 ease-in-out;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+
+    height: 0.25rem;
+    border-radius: 9999px;
+
+    background-color: rgb(var(--color-accent-500));
+
+    transition: width 0ms ease-in-out;
   }
 
   &__thumb {
-    @apply absolute top-1/2 z-10 -ml-1.5 size-3 -translate-y-1/2 rounded-full bg-accent-500 shadow transition-[left] duration-0 ease-in-out;
+    position: absolute;
+    z-index: 10;
+    top: 50%;
+    transform: translateY(-50%);
+
+    width: 0.75rem;
+    height: 0.75rem;
+    margin-left: -0.375rem;
+    border-radius: 9999px;
+
+    background-color: rgb(var(--color-accent-500));
+    box-shadow: 0 1px 2px 0 #0001;
+
+    transition: left 0ms ease-in-out;
   }
 
   &--animate {
     .⁂-slider__fill {
-      @apply duration-150;
+    transition-duration: 150ms;
     }
   }
 }
@@ -1359,18 +1393,58 @@ div[data-viewport-type='window']:has(.⁂-empty-message) {
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 
   &__track {
-    @apply absolute top-1/2 h-1 w-full -translate-y-1/2 rounded-full bg-primary-200 dark:bg-primary-700;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+
+    width: 100%;
+    height: 0.25rem;
+    border-radius: 9999px;
+
+    background-color: rgb(var(--color-primary-200));
+
+    .dark & {
+      background-color: rgb(var(--color-primary-700));
+    }
   }
 
   &__fill {
-    @apply absolute top-1/2 h-1 -translate-y-1/2 rounded-full bg-accent-500;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+
+    height: 0.25rem;
+    border-radius: 9999px;
+
+    background-color: rgb(var(--color-secondary-500));
   }
 
   &__step {
-    @apply absolute top-1/2 z-10 h-3 w-1 -translate-y-1/2 bg-accent-300;
+    position: absolute;
+    z-index: 10;
+    top: 50%;
+    transform: translateY(-50%);
+
+    width: 0.25rem;
+    height: 0.75rem;
+
+    background-color: rgb(var(--color-primary-500));
   }
 
   &__thumb {
-    @apply absolute top-1/2 z-10 -ml-1.5 size-3 -translate-y-1/2 rounded-full bg-accent-500 shadow transition-[left] duration-100 ease-in-out;
+    position: absolute;
+    z-index: 10;
+    top: 50%;
+    transform: translateY(-50%);
+
+    width: 0.75rem;
+    height: 0.75rem;
+    margin-left: -0.375rem;
+    border-radius: 9999px;
+
+    background-color: rgb(var(--color-secondary-500));
+    box-shadow: 0 1px 2px 0 #0001;
+
+    transition: left 100ms ease-in-out;
   }
 }
diff --git a/packages/nicolium/src/styles/ui.scss b/packages/nicolium/src/styles/ui.scss
index 0d357e5d9..33c533842 100644
--- a/packages/nicolium/src/styles/ui.scss
+++ b/packages/nicolium/src/styles/ui.scss
@@ -6,20 +6,21 @@
   &::-moz-focus-inner,
   &:focus,
   &:active {
-    @apply outline-0 #{!important};
+  outline: 0 !important;
   }
 
   &:hover,
   &:active,
   &:focus {
-    @apply opacity-60 transition-colors duration-200 ease-out;
+    opacity: 0.6;
+    @apply transition-colors duration-200 ease-out;
   }
 
   @apply text-black dark:text-white inline-flex items-center p-0 border-0 bg-transparent cursor-pointer transition duration-100 ease-in opacity-40;
 }
 
 .react-datepicker-popper {
-  @apply z-[9999] #{!important};
+z-index: 9999 !important;
 }
 
 .ellipsis::after {
@@ -27,11 +28,14 @@
 }
 
 .react-swipeable-view-container {
-  @apply h-full;
+height: 100%;
 }
 
 .react-swipeable-view-container > * {
-  @apply flex items-center justify-center h-full;
+display: flex;
+align-items: center;
+justify-content: center;
+height: 100%;
 }
 
 ::-webkit-scrollbar-thumb {