diff --git a/assets/components/ContainerTable.vue b/assets/components/ContainerTable.vue
index 8ad81693..c52edd9d 100644
--- a/assets/components/ContainerTable.vue
+++ b/assets/components/ContainerTable.vue
@@ -203,7 +203,7 @@ function isVisible(field: keys) {
 </script>
 
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 
 [data-icon] {
   display: none;
diff --git a/assets/components/ContainerViewer/ContainerActionsToolbar.vue b/assets/components/ContainerViewer/ContainerActionsToolbar.vue
index 28dcfb0e..aeee88fb 100644
--- a/assets/components/ContainerViewer/ContainerActionsToolbar.vue
+++ b/assets/components/ContainerViewer/ContainerActionsToolbar.vue
@@ -220,7 +220,7 @@ const toggleAllLevels = computed({
 </script>
 
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 
 li.line {
   @apply bg-base-content/20 h-px;
diff --git a/assets/components/ContainerViewer/ContainerHealth.vue b/assets/components/ContainerViewer/ContainerHealth.vue
index 6f1c0e4b..8249db85 100644
--- a/assets/components/ContainerViewer/ContainerHealth.vue
+++ b/assets/components/ContainerViewer/ContainerHealth.vue
@@ -15,7 +15,7 @@ defineProps<{
 </script>
 
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 [health="unhealthy"] {
   @apply text-red;
 }
diff --git a/assets/components/FuzzySearchModal.vue b/assets/components/FuzzySearchModal.vue
index ffbda786..7954b9b1 100644
--- a/assets/components/FuzzySearchModal.vue
+++ b/assets/components/FuzzySearchModal.vue
@@ -217,7 +217,7 @@ function matchedName({ item, matches = [] }: FuseResult<Item>) {
 </script>
 
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 :deep(mark) {
   @apply bg-transparent text-inherit underline underline-offset-2;
 }
diff --git a/assets/components/LogViewer/ComplexLogItem.vue b/assets/components/LogViewer/ComplexLogItem.vue
index 255891cd..6c8734c8 100644
--- a/assets/components/LogViewer/ComplexLogItem.vue
+++ b/assets/components/LogViewer/ComplexLogItem.vue
@@ -30,7 +30,7 @@ const showDrawer = useDrawer();
 </script>
 
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 .text-light {
   @apply text-base-content/70;
 }
diff --git a/assets/components/LogViewer/ContainerEventLogItem.vue b/assets/components/LogViewer/ContainerEventLogItem.vue
index 614cab99..ebd0b46f 100644
--- a/assets/components/LogViewer/ContainerEventLogItem.vue
+++ b/assets/components/LogViewer/ContainerEventLogItem.vue
@@ -13,7 +13,7 @@ const { logEntry } = defineProps<{
 </script>
 
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 [data-event="container-stopped"] {
   @apply text-red;
 }
diff --git a/assets/components/LogViewer/LogDetails.vue b/assets/components/LogViewer/LogDetails.vue
index bccd9b64..333e36c3 100644
--- a/assets/components/LogViewer/LogDetails.vue
+++ b/assets/components/LogViewer/LogDetails.vue
@@ -166,7 +166,7 @@ function syntaxHighlight(json: any) {
 useSortable(list, fields);
 </script>
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 .font-mono {
   font-family:
     ui-monospace,
diff --git a/assets/components/LogViewer/LogLevel.vue b/assets/components/LogViewer/LogLevel.vue
index 2736a509..bf5310ac 100644
--- a/assets/components/LogViewer/LogLevel.vue
+++ b/assets/components/LogViewer/LogLevel.vue
@@ -11,7 +11,7 @@ defineProps<{
 </script>
 
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 [data-position="start"] {
   border-radius: 0.5em 0.5em 0 0;
   height: 70%;
@@ -35,7 +35,7 @@ defineProps<{
 }
 </style>
 <style>
-@import "@/main.css" reference;
+@reference "@/main.css";
 [data-level="debug"],
 [data-level="trace"] {
   @apply !bg-purple;
diff --git a/assets/components/LogViewer/LogList.vue b/assets/components/LogViewer/LogList.vue
index e8d3d2f3..6c8d32a7 100644
--- a/assets/components/LogViewer/LogList.vue
+++ b/assets/components/LogViewer/LogList.vue
@@ -54,7 +54,7 @@ useIntersectionObserver(
 );
 </script>
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 .events {
   font-family:
     ui-monospace,
diff --git a/assets/components/LogViewer/LogStd.vue b/assets/components/LogViewer/LogStd.vue
index 075abb87..e2b19af1 100644
--- a/assets/components/LogViewer/LogStd.vue
+++ b/assets/components/LogViewer/LogStd.vue
@@ -13,7 +13,7 @@ defineProps<{
 </script>
 
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 [std="stdout"] {
   @apply text-blue;
 }
diff --git a/assets/components/LogViewer/MultiContainerActionToolbar.vue b/assets/components/LogViewer/MultiContainerActionToolbar.vue
index 47c742e5..c693254a 100644
--- a/assets/components/LogViewer/MultiContainerActionToolbar.vue
+++ b/assets/components/LogViewer/MultiContainerActionToolbar.vue
@@ -103,7 +103,7 @@ const downloadUrl = computed(() =>
 </script>
 
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 li.line {
   @apply bg-base-content/20 h-px;
 }
diff --git a/assets/components/LogViewer/SimpleLogItem.vue b/assets/components/LogViewer/SimpleLogItem.vue
index 77efa990..f3c46176 100644
--- a/assets/components/LogViewer/SimpleLogItem.vue
+++ b/assets/components/LogViewer/SimpleLogItem.vue
@@ -35,7 +35,7 @@ const linkify = (text: string) =>
 </script>
 
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 .log-wrapper :deep(a) {
   @apply text-primary underline-offset-4 hover:underline;
 }
diff --git a/assets/components/Terminal.vue b/assets/components/Terminal.vue
index adf8c565..022ca2ec 100644
--- a/assets/components/Terminal.vue
+++ b/assets/components/Terminal.vue
@@ -58,7 +58,7 @@ onUnmounted(() => {
 });
 </script>
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 
 .shell {
   & :deep(.terminal) {
diff --git a/assets/components/common/MobileMenu.vue b/assets/components/common/MobileMenu.vue
index b7f307ae..1751de5b 100644
--- a/assets/components/common/MobileMenu.vue
+++ b/assets/components/common/MobileMenu.vue
@@ -37,7 +37,7 @@ watch(route, () => {
 });
 </script>
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 .fade-enter-active,
 .fade-leave-active {
   @apply transition-opacity;
diff --git a/assets/components/common/SideDrawer.vue b/assets/components/common/SideDrawer.vue
index 5c1a847c..a6ba35b1 100644
--- a/assets/components/common/SideDrawer.vue
+++ b/assets/components/common/SideDrawer.vue
@@ -38,7 +38,7 @@ defineExpose({
 useEventListener(panel, "close", () => (open.value = false));
 </script>
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 
 .modal-right :where(.modal-box) {
   @apply bg-base-100 fixed right-0 h-lvh max-h-screen translate-x-24 scale-100 rounded-none shadow-none;
diff --git a/assets/layouts/default.vue b/assets/layouts/default.vue
index 4b7072c0..4272be3b 100644
--- a/assets/layouts/default.vue
+++ b/assets/layouts/default.vue
@@ -95,7 +95,7 @@ function onResized({ panes }: { panes: { size: number }[] }) {
 </script>
 
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 
 :deep(.splitpanes--vertical > .splitpanes__splitter) {
   @apply bg-base-100 hover:bg-secondary min-w-[5px];
diff --git a/assets/pages/settings.vue b/assets/pages/settings.vue
index 9df0d456..15e0eb59 100644
--- a/assets/pages/settings.vue
+++ b/assets/pages/settings.vue
@@ -206,7 +206,7 @@ const fakeMessages = computedWithControl(
 );
 </script>
 <style scoped>
-@import "@/main.css" reference;
+@reference "@/main.css";
 
 .has-underline {
   @apply border-base-content/50 mb-4 border-b py-4;