diff --git a/bun.lock b/bun.lock
index 6688d63b..1f3053bf 100644
--- a/bun.lock
+++ b/bun.lock
@@ -33,6 +33,7 @@
         "electron-vite": "^5.0.0",
         "esbuild": "^0.27.4",
         "node-addon-api": "^8.6.0",
+        "postcss": "^8.5.8",
         "rollup-plugin-visualizer": "^7.0.1",
         "stylelint": "^17.4.0",
         "stylelint-config-standard": "^40.0.0",
@@ -698,7 +699,7 @@
 
     "flat-cache": ["flat-cache@6.1.20", "", { "dependencies": { "cacheable": "^2.3.2", "flatted": "^3.3.3", "hookified": "^1.15.0" } }, "sha512-AhHYqwvN62NVLp4lObVXGVluiABTHapoB57EyegZVmazN+hhGhLTn3uZbOofoTw4DSDvVCadzzyChXhOAvy8uQ=="],
 
-    "flatted": ["flatted@3.4.1", "", {}, "sha512-IxfVbRFVlV8V/yRaGzk0UVIcsKKHMSfYw66T/u4nTwlWteQePsxe//LjudR1AMX4tZW3WFCh3Zqa/sjlqpbURQ=="],
+    "flatted": ["flatted@3.4.2", "", {}, "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA=="],
 
     "foreground-child": ["foreground-child@3.3.1", "", { "dependencies": { "cross-spawn": "^7.0.6", "signal-exit": "^4.0.1" } }, "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw=="],
 
diff --git a/package.json b/package.json
index 5cbed2d5..9a765447 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "url": "git+https://github.com/opencor/webapp.git"
   },
   "type": "module",
-  "version": "0.20260318.0",
+  "version": "0.20260318.1",
   "engines": {
     "bun": ">=1.2.0"
   },
@@ -83,6 +83,7 @@
     "electron-vite": "^5.0.0",
     "esbuild": "^0.27.4",
     "node-addon-api": "^8.6.0",
+    "postcss": "^8.5.8",
     "rollup-plugin-visualizer": "^7.0.1",
     "stylelint": "^17.4.0",
     "stylelint-config-standard": "^40.0.0",
diff --git a/src/renderer/bun.lock b/src/renderer/bun.lock
index b13d0cbe..63d07fdd 100644
--- a/src/renderer/bun.lock
+++ b/src/renderer/bun.lock
@@ -23,6 +23,7 @@
         "@vue/tsconfig": "^0.9.0",
         "autoprefixer": "^10.4.27",
         "esbuild": "^0.27.4",
+        "postcss": "^8.5.8",
         "rollup-plugin-visualizer": "^7.0.1",
         "stylelint": "^17.4.0",
         "stylelint-config-standard": "^40.0.0",
@@ -429,7 +430,7 @@
 
     "flat-cache": ["flat-cache@6.1.20", "", { "dependencies": { "cacheable": "^2.3.2", "flatted": "^3.3.3", "hookified": "^1.15.0" } }, "sha512-AhHYqwvN62NVLp4lObVXGVluiABTHapoB57EyegZVmazN+hhGhLTn3uZbOofoTw4DSDvVCadzzyChXhOAvy8uQ=="],
 
-    "flatted": ["flatted@3.4.1", "", {}, "sha512-IxfVbRFVlV8V/yRaGzk0UVIcsKKHMSfYw66T/u4nTwlWteQePsxe//LjudR1AMX4tZW3WFCh3Zqa/sjlqpbURQ=="],
+    "flatted": ["flatted@3.4.2", "", {}, "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA=="],
 
     "fraction.js": ["fraction.js@5.3.4", "", {}, "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ=="],
 
diff --git a/src/renderer/package.json b/src/renderer/package.json
index 2eff04ff..7d5d253a 100644
--- a/src/renderer/package.json
+++ b/src/renderer/package.json
@@ -42,7 +42,7 @@
     },
     "./style.css": "./dist/opencor.css"
   },
-  "version": "0.20260318.0",
+  "version": "0.20260318.1",
   "scripts": {
     "build": "vite build && bun scripts/generate.version.js",
     "build:lib": "vite build --config vite.lib.config.ts && bun scripts/copy.indexdts.js",
@@ -84,6 +84,7 @@
     "@vue/tsconfig": "^0.9.0",
     "autoprefixer": "^10.4.27",
     "esbuild": "^0.27.4",
+    "postcss": "^8.5.8",
     "rollup-plugin-visualizer": "^7.0.1",
     "stylelint": "^17.4.0",
     "stylelint-config-standard": "^40.0.0",
diff --git a/src/renderer/src/components/DragNDropComponent.vue b/src/renderer/src/components/DragNDropComponent.vue
index 919f499e..b4b32915 100644
--- a/src/renderer/src/components/DragNDropComponent.vue
+++ b/src/renderer/src/components/DragNDropComponent.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="absolute w-full h-full border-[0.375rem] border-dashed border-primary z-99999">
+  <div class="absolute w-full h-full border-[0.375rem] border-dashed border-primary z-99999 highlight">
     <div
       class="message absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-[1.5rem] leading-tight text-center rounded-2xl p-[0.5rem_1rem] bg-primary text-primary-contrast whitespace-nowrap"
     >
@@ -10,6 +10,10 @@
 </template>
 
 <style scoped>
+.highlight {
+  background-color: color-mix(in srgb, var(--p-primary-color) 7%, transparent);
+}
+
 .message {
   box-shadow: 0 0 0.75rem 0.375rem var(--p-content-border-color);
 }
diff --git a/src/renderer/src/components/OpenCOR.vue b/src/renderer/src/components/OpenCOR.vue
index ce7e64ce..aa4fd46d 100644
--- a/src/renderer/src/components/OpenCOR.vue
+++ b/src/renderer/src/components/OpenCOR.vue
@@ -20,7 +20,16 @@
       @dragleave="onDragLeave"
     >
       <input ref="filesRef" type="file" multiple style="display: none;" @change="onChange" />
-      <DragNDropComponent v-show="dragAndDropCounter" />
+      <Transition
+        enter-active-class="transition-opacity duration-200"
+        leave-active-class="transition-opacity duration-200"
+        enter-from-class="opacity-0"
+        enter-to-class="opacity-100"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+      >
+        <DragNDropComponent v-if="dragAndDropCounter" />
+      </Transition>
       <MainMenu ref="mainMenuRef" v-if="isFullWebApp"
         :isActive="compIsActive"
         :uiEnabled="compUiEnabled"
diff --git a/src/renderer/vite.lib.config.ts b/src/renderer/vite.lib.config.ts
index 167e56b1..e2351b90 100644
--- a/src/renderer/vite.lib.config.ts
+++ b/src/renderer/vite.lib.config.ts
@@ -2,6 +2,7 @@ import * as primeVueAutoImportResolver from '@primevue/auto-import-resolver';
 import tailwindcssPlugin from '@tailwindcss/vite';
 import vuePlugin from '@vitejs/plugin-vue';
 
+import * as postcss from 'postcss';
 import vitePlugin from 'unplugin-vue-components/vite';
 import * as vite from 'vite';
 
@@ -53,71 +54,30 @@ export default vite.defineConfig({
       generateBundle(_options, bundle) {
         for (const asset of Object.values(bundle)) {
           if (asset.type === 'asset' && typeof asset.source === 'string' && asset.fileName.endsWith('.css')) {
-            // Process @layer blocks: strip base, unwrap others.
+            // Process @layer blocks through a CSS AST:
+            //  1. Remove @layer base blocks;
+            //  2. Unwrap remaining @layer blocks; and
+            //  3. Remove bare @layer ordering declarations.
 
-            const processLayers = (source: string): string => {
-              const layerBlockRegEx = /@layer\s+([\w-]+)\s*\{/g;
-              let res = '';
-              let pos = 0;
+            const root = postcss.parse(asset.source);
 
-              for (;;) {
-                layerBlockRegEx.lastIndex = pos;
+            root.walkAtRules('layer', (atRule) => {
+              if (!atRule.nodes || atRule.nodes.length === 0) {
+                atRule.remove();
 
-                const match = layerBlockRegEx.exec(source);
-
-                if (!match) {
-                  res += source.slice(pos);
-
-                  break;
-                }
-
-                const layerName = match[1] ?? '';
-                const start = match.index;
-                const contentStart = start + match[0].length;
-
-                // Scan forward to find the matching closing brace.
-
-                let depth = 1;
-                let i = contentStart;
-
-                while (i < source.length && depth > 0) {
-                  if (source[i] === '{') {
-                    ++depth;
-                  } else if (source[i] === '}') {
-                    --depth;
-                  }
-
-                  ++i;
-                }
-
-                const end = i; // One past the closing '}'.
-
-                // Append everything before this @layer block unchanged.
-
-                res += source.slice(pos, start);
-
-                if (layerName !== 'base') {
-                  // Unwrap: keep content, remove @layer wrapper.
-                  // Note: we recurse so any nested @layer blocks are also processed.
-
-                  res += processLayers(source.slice(contentStart, end - 1));
-                }
-
-                // 'base' is stripped entirely (no append).
-
-                pos = end;
+                return;
               }
 
-              return res;
-            };
+              if (atRule.params.trim() === 'base') {
+                atRule.remove();
 
-            let css = processLayers(asset.source);
-
-            // Remove bare @layer ordering declarations (e.g., "@layer base, components;").
+                return;
+              }
 
-            css = css.replace(/@layer\s+[\w\s,-]+;/g, '');
+              atRule.replaceWith(...atRule.nodes);
+            });
 
-            asset.source = css;
+            asset.source = root.toString();
           }
         }
       }