pre-tailwind removal bc the snackbar ain't coloring right

frontend/src/components/AppSnackbar.vue

@@ -0,0 +1,36 @@
+<template>
+  <v-snackbar
+    v-model="show"
+    :color="options.color ?? 'success'"
+    :timeout="options.timeout ?? 5000"
+    timer="bottom"
+    variant="flat"
+    theme="dark"
+    timer-color="green"
+    location="bottom center"
+    rounded="lg"
+  >
+    <v-icon start>{{ options.icon ?? 'mdi-check-circle-outline' }}</v-icon>
+    {{ options.message }} — color: {{ options.color }}
+  </v-snackbar>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const show    = ref(false)
+const options = ref({})
+
+function toast(message, opts = {}) {
+  options.value = { message, ...opts }
+  show.value    = true
+}
+
+// Shorthand helpers
+const success = (msg, opts = {}) => toast(msg, { color: 'success', icon: 'mdi-check-circle-outline',  ...opts })
+const error   = (msg, opts = {}) => toast(msg, { color: 'error',   icon: 'mdi-alert-circle-outline',  ...opts })
+const warning = (msg, opts = {}) => toast(msg, { color: 'warning', icon: 'mdi-alert-outline',         ...opts })
+const info    = (msg, opts = {}) => toast(msg, { color: 'info',    icon: 'mdi-information-outline',   ...opts })
+
+defineExpose({ toast, success, error, warning, info })
+</script>

frontend/src/components/HelloWorld.vue

@@ -100,18 +100,4 @@
 </script>
 
 <style scoped>
-@reference "../styles/tailwind.css";
-
-/*
-  1. mixing helper classes and @apply for demonstration purposes only
-  2. the classes below are NOT wrapped in any CSS layer, so they "win" over everything else
-*/
-.hero-card {
-  @apply py-3 md:pr-[120px] w-full transition-none;
-}
-
-:deep(.v-card) {
-  @apply bg-gray-200;
-  @apply dark:bg-black dark:bg-linear-to-r dark:from-primary/50 dark:to-primary/30 dark:text-white/80;
-}
 </style>