diff --git a/src/components/AddMoreCard.vue b/src/components/AddMoreCard.vue
index d1ac50c..524653d 100755
--- a/src/components/AddMoreCard.vue
+++ b/src/components/AddMoreCard.vue
@@ -3,12 +3,12 @@
 <template>
   <router-link
     to="/add"
-    class="card relative w-full h-full flex items-center justify-center aspect-2/3 bg-white/40 backdrop-blur-md rounded-lg transition-all duration-300"
+    class="card relative w-full h-full flex items-center justify-center aspect-2/3 bg-base-300/40 backdrop-blur-md rounded-lg transition-all duration-300 hover:bg-base-200/50"
     v-motion-fade-visible-once
   >
     <!-- Plus icon -->
     <div
-      class="flex flex-col items-center justify-center text-gray-400 hover:text-gray-600 transition"
+      class="flex flex-col items-center justify-center text-base-content/50 hover:text-base-content/70 transition"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
diff --git a/src/components/ImageWithFallback.vue b/src/components/ImageWithFallback.vue
index 0039f92..f74d1b3 100755
--- a/src/components/ImageWithFallback.vue
+++ b/src/components/ImageWithFallback.vue
@@ -23,7 +23,7 @@ const imageSource = computed(() => {
 </script>
 
 <template>
-  <figure class="overflow-hidden flex items-center justify-center bg-gray-50 aspect-2/3">
+  <figure class="overflow-hidden flex items-center justify-center bg-base-300 aspect-2/3">
     <span v-if="!loaded" class="loading loading-ring loading-lg text-primary"></span>
 
     <div v-else-if="imageLoadFailed" class="flex items-center justify-center">
@@ -33,7 +33,7 @@ const imageSource = computed(() => {
         viewBox="0 0 24 24"
         stroke-width="1.5"
         stroke="currentColor"
-        class="w-12 h-12 text-gray-300"
+        class="w-12 h-12 text-base-content/40"
       >
         <path
           stroke-linecap="round"
diff --git a/src/components/MediaFilters.vue b/src/components/MediaFilters.vue
index 1ed5449..4c73f7c 100755
--- a/src/components/MediaFilters.vue
+++ b/src/components/MediaFilters.vue
@@ -50,36 +50,38 @@ watch(
 </script>
 
 <template>
-  <form class="flex gap-2 justify-center mb-8">
-    <label>
+  <form class="flex gap-2 justify-center mb-8 flex-wrap">
+    <label class="btn btn-outline" :class="local.includeAdult ? 'btn-error' : 'btn-ghost'">
       <input
-        class="btn"
-        :class="local.includeAdult ? 'btn-error' : ''"
         type="checkbox"
         :checked="local.includeAdult"
         @change="toggleIncludeAdult"
         aria-label="Adult"
+        class="sr-only"
       />
+      Adult
     </label>
 
-    <label>
+    <label class="btn btn-outline" :class="local.onlyMovies ? 'btn-primary' : 'btn-ghost'">
       <input
-        class="btn"
         type="checkbox"
         :checked="local.onlyMovies"
         @change="toggleOnlyMovies"
         aria-label="Movies"
+        class="sr-only"
       />
+      Movies
     </label>
 
-    <label>
+    <label class="btn btn-outline" :class="local.onlySeries ? 'btn-primary' : 'btn-ghost'">
       <input
-        class="btn"
         type="checkbox"
         :checked="local.onlySeries"
         @change="toggleOnlySeries"
         aria-label="TV Series"
+        class="sr-only"
       />
+      TV Series
     </label>
   </form>
 </template>
diff --git a/src/components/MediaList.vue b/src/components/MediaList.vue
index 950bd68..627fb56 100755
--- a/src/components/MediaList.vue
+++ b/src/components/MediaList.vue
@@ -31,10 +31,10 @@ window.addEventListener('scroll', () => {
   <div>
     <p
       v-if="props.medias.length === 0"
-      class="text-center text-gray-500 py-12 bg-gray-50/60 rounded-lg border border-gray-200"
+      class="text-center text-base-content/60 py-12 bg-base-300/60 rounded-lg border border-base-content/20"
     >
       No media found.<br />
-      <RouterLink to="/add" class="text-gray-700 font-semibold hover:text-gray-900 transition">
+      <RouterLink to="/add" class="text-base-content/70 font-semibold hover:text-base-content transition">
         Add media
       </RouterLink>
     </p>
@@ -62,7 +62,7 @@ window.addEventListener('scroll', () => {
 
     <div v-if="props.isSearch && props.medias.length > 0" class="flex justify-center mt-8">
       <button
-        class="btn px-6 bg-linear-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300 hover:text-gray-900 disabled:opacity-50"
+        class="btn px-6 bg-gradient-to-r from-base-300 to-base-200 border border-base-content/30 text-base-content hover:from-base-200 hover:to-base-100 hover:text-base-content/90 disabled:opacity-50"
         @click="emit('loadMore')"
         :disabled="props.loadingMore"
       >
diff --git a/src/components/MediaTypeBadge.vue b/src/components/MediaTypeBadge.vue
index 32fb928..2a0ef53 100755
--- a/src/components/MediaTypeBadge.vue
+++ b/src/components/MediaTypeBadge.vue
@@ -11,7 +11,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 <template>
   <span
-    :class="`flex items-center w-max px-3 py-1 rounded-md text-sm bg-linear-to-r from-gray-100 to-gray-200 ${type ? 'badge-' + type : ''} text-gray-700 border border-gray-300`"
+    :class="`flex items-center w-max px-3 py-1 rounded-md text-sm bg-gradient-to-r from-base-300 to-base-200 ${type ? 'badge-' + type : ''} text-base-content border border-base-content/30`"
   >
     {{ props.text }}
   </span>
diff --git a/src/components/MovieDetails.vue b/src/components/MovieDetails.vue
index c3b548f..e14c8e6 100755
--- a/src/components/MovieDetails.vue
+++ b/src/components/MovieDetails.vue
@@ -21,7 +21,7 @@ const alreadyAdded = computed(() =>
 <template>
   <!-- Hero -->
   <div
-    class="flex flex-col lg:flex-row gap-12 items-center max-w-6xl w-full bg-white/70 border border-gray-200/60 rounded-xl p-8 transition"
+    class="flex flex-col lg:flex-row gap-12 items-center max-w-6xl w-full bg-base-200/70 border border-base-content/20 rounded-xl p-8 transition"
     v-motion-fade-visible-once
   >
     <!-- Poster -->
@@ -34,18 +34,18 @@ const alreadyAdded = computed(() =>
 
     <!-- Text -->
     <div class="flex-1">
-      <h1 class="text-4xl font-bold text-gray-800 mb-2">
+      <h1 class="text-4xl font-bold text-base-content/95 mb-2">
         {{ props.movie!.Title }}
-        <span class="text-gray-400 text-lg font-normal"
+        <span class="text-base-content/70 text-lg font-normal"
           >({{ props.movie!.ReleaseDate?.slice(0, 4) }})</span
         >
       </h1>
 
-      <p v-if="props.movie!.Tagline" class="italic text-gray-500 mb-2">
+      <p v-if="props.movie!.Tagline" class="italic text-base-content/65 mb-2">
         {{ props.movie!.Tagline }}
       </p>
 
-      <p class="text-accent leading-relaxed mb-6">
+      <p class="text-base-content leading-relaxed mb-6">
         {{ props.movie!.Overview }}
       </p>
 
@@ -54,19 +54,21 @@ const alreadyAdded = computed(() =>
         <MediaTypeBadge v-for="g in props.movie!.Genres" :key="g.id" :text="g.name" />
       </div>
 
-      <div class="card bg-base-200 w-full lg:w-96 shadow-sm mb-6 mt-6">
+      <div class="card border border-accent bg-base-200 w-full lg:w-96 shadow-sm mb-6 mt-6">
         <div class="card-body">
-          <p class="font-semibold text-gray-900">
-            Runtime: <span class="text-gray-600">{{ props.movie!.Runtime }} minutes</span>
+          <p class="font-semibold text-base-content/90">
+            Runtime: <span class="text-base-content/70">{{ props.movie!.Runtime }} minutes</span>
           </p>
-          <p class="font-semibold text-gray-900">
+          <p class="font-semibold text-base-content/90">
             Language:
-            <span class="text-gray-600">{{ props.movie!.SpokenLanguages[0]?.englishName }}</span>
+            <span class="text-base-content/70">{{
+              props.movie!.SpokenLanguages[0]?.englishName
+            }}</span>
           </p>
-          <p class="font-semibold text-gray-900">
+          <p class="font-semibold text-base-content/90">
             Release Date:
             <time
-              class="text-sm font-semibold text-gray-600"
+              class="text-sm font-semibold text-base-content/70"
               :datetime="
                 props.movie!.ReleaseDate === ''
                   ? 'unknown'
@@ -90,9 +92,9 @@ const alreadyAdded = computed(() =>
               :href="`https://www.themoviedb.org/movie/${props.movie?.Id}`"
               target="_blank"
               rel="noopener noreferrer"
-              class="btn btn-square btn-md bg-accent border-none"
+              class="btn btn-square btn-md bg-base-300 border border-base-content/30"
             >
-              <img src="/logos/tmdb.svg" alt="TMDB" class="m-0.5" />
+              <img src="/logos/tmdb.svg" alt="TMDB" class="h-6 w-6" />
             </a>
 
             <!-- IMDB button -->
@@ -101,9 +103,9 @@ const alreadyAdded = computed(() =>
               :href="`https://www.imdb.com/title/${props.movie.ImdbId}`"
               target="_blank"
               rel="noopener noreferrer"
-              class="btn btn-square btn-md bg-[#f5c518] border-none"
+              class="btn btn-square btn-md bg-[#f5c518] border border-[#f5c518]/30"
             >
-              <img src="/logos/imdb.svg" alt="IMDB" class="m-0.5" />
+              <img src="/logos/imdb.svg" alt="IMDB" class="h-6 w-6" />
             </a>
           </div>
         </div>
@@ -114,7 +116,7 @@ const alreadyAdded = computed(() =>
         <template v-if="props.movie && props.media">
           <button
             v-if="!alreadyAdded"
-            class="btn btn-square bg-linear-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300"
+            class="btn btn-square bg-gradient-to-r from-base-300 to-base-200 border border-base-content/30 text-base-content hover:from-base-200 hover:to-base-100"
             @click="store.addMedia(props.media)"
           >
             <svg
@@ -134,7 +136,7 @@ const alreadyAdded = computed(() =>
           </button>
           <button
             v-else
-            class="btn btn-square bg-linear-to-r from-red-50 to-red-100 border border-red-200 text-red-600 hover:from-red-100 hover:to-red-200"
+            class="btn btn-square bg-gradient-to-r from-error/10 to-error/20 border border-error/30 text-error hover:from-error/20 hover:to-error/30"
             @click="store.removeMedia(props.media.Id)"
           >
             <svg
@@ -164,7 +166,7 @@ const alreadyAdded = computed(() =>
           }"
         >
           <button
-            class="btn relative flex items-center gap-2 px-6 bg-linear-to-r from-indigo-500 to-violet-500 text-white border-0 shadow-md hover:opacity-90 transition"
+            class="btn relative flex items-center gap-2 px-6 bg-gradient-to-r from-primary to-secondary text-primary-content border-0 shadow-md hover:opacity-90 transition"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
index bd675a2..ec93060 100755
--- a/src/components/SearchBar.vue
+++ b/src/components/SearchBar.vue
@@ -15,10 +15,10 @@ function onSubmit() {
 <template>
   <form @submit.prevent="onSubmit" class="flex justify-center mb-3">
     <div
-      class="flex items-center w-full max-w-md bg-white/70 backdrop-blur-md border border-gray-200/60 shadow-sm hover:shadow-md transition rounded-lg overflow-hidden"
+      class="flex items-center w-full max-w-md bg-base-200/70 backdrop-blur-md border border-base-content/20 shadow-sm hover:shadow-md transition rounded-lg overflow-hidden"
     >
       <!-- Icon -->
-      <span class="pl-3 text-gray-400">
+      <span class="pl-3 text-base-content/50">
         <svg
           class="h-5 w-5"
           xmlns="http://www.w3.org/2000/svg"
@@ -41,7 +41,7 @@ function onSubmit() {
         required
         :value="props.modelValue"
         @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
-        class="flex-1 px-3 py-2 bg-transparent outline-none text-gray-700 placeholder-gray-400"
+        class="flex-1 px-3 py-2 bg-transparent outline-none text-base-content/70 placeholder-base-content/50"
       />
 
       <!-- Optional button -->
diff --git a/src/components/TVSeriesDetails.vue b/src/components/TVSeriesDetails.vue
index 5cd4c65..fe063ae 100755
--- a/src/components/TVSeriesDetails.vue
+++ b/src/components/TVSeriesDetails.vue
@@ -21,7 +21,7 @@ const alreadyAdded = computed(() =>
 <template>
   <!-- Hero -->
   <div
-    class="flex flex-col lg:flex-row gap-12 items-center max-w-6xl w-full bg-white/70 border border-gray-200/60 rounded-xl p-8 transition"
+    class="flex flex-col lg:flex-row gap-12 items-center max-w-6xl w-full bg-base-200/70 border border-base-content/20 rounded-xl p-8 transition"
     v-motion-fade-visible-once
   >
     <!-- Poster -->
@@ -34,18 +34,18 @@ const alreadyAdded = computed(() =>
 
     <!-- Text -->
     <div class="flex-1">
-      <h1 class="text-4xl font-bold text-gray-800 mb-2">
+      <h1 class="text-4xl font-bold text-base-content/95 mb-2">
         {{ props.tvSeries!.Name }}
-        <span class="text-gray-400 text-lg font-normal"
+        <span class="text-base-content/70 text-lg font-normal"
           >({{ props.tvSeries!.FirstAirDate?.slice(0, 4) }})</span
         >
       </h1>
 
-      <p v-if="props.tvSeries!.Tagline" class="italic text-gray-500 mb-2">
+      <p v-if="props.tvSeries!.Tagline" class="italic text-base-content/65 mb-2">
         {{ props.tvSeries!.Tagline }}
       </p>
 
-      <p class="text-accent leading-relaxed mb-6">
+      <p class="text-base-content leading-relaxed mb-6">
         {{ props.tvSeries!.Overview }}
       </p>
 
@@ -54,18 +54,18 @@ const alreadyAdded = computed(() =>
         <MediaTypeBadge v-for="g in props.tvSeries!.Genres" :key="g.id" :text="g.name" />
       </div>
 
-      <div class="card bg-base-200 w-full lg:w-96 shadow-sm mb-6 mt-6">
+      <div class="card bg-base-200 w-full lg:w-96 shadow-sm border border-accent mb-6 mt-6">
         <div class="card-body">
           <div class="inline-flex items-center gap-2">
-            <span class="flex items-center font-semibold text-gray-900">
+            <span class="flex items-center font-semibold text-base-content/90">
               Seasons:
-              <span class="ml-1 text-gray-600">{{ props.tvSeries!.NumberOfSeasons }}</span>
+              <span class="ml-1 text-base-content/70">{{ props.tvSeries!.NumberOfSeasons }}</span>
             </span>
 
             <!-- SVG star separator -->
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              class="w-4 h-4 text-yellow-500 shrink-0"
+              class="w-4 h-4 text-warning shrink-0"
               viewBox="0 0 20 20"
               fill="currentColor"
               aria-hidden="true"
@@ -75,24 +75,24 @@ const alreadyAdded = computed(() =>
               />
             </svg>
 
-            <span class="flex items-center font-semibold text-gray-900">
+            <span class="flex items-center font-semibold text-base-content/90">
               Episodes:
-              <span class="ml-1 text-gray-600">{{ props.tvSeries!.NumberOfEpisodes }}</span>
+              <span class="ml-1 text-base-content/70">{{ props.tvSeries!.NumberOfEpisodes }}</span>
             </span>
           </div>
 
-          <p class="font-semibold text-gray-900">
+          <p class="font-semibold text-base-content/90">
             Last Episode:
-            <span class="text-gray-600">{{ props.tvSeries!.LastEpisodeToAir?.name }}</span>
+            <span class="text-base-content/70">{{ props.tvSeries!.LastEpisodeToAir?.name }}</span>
           </p>
-          <p class="font-semibold text-gray-900">
+          <p class="font-semibold text-base-content/90">
             Language:
-            <span class="text-gray-600">{{ props.tvSeries!.SpokenLanguages[0]?.englishName }}</span>
+            <span class="text-base-content/70">{{ props.tvSeries!.SpokenLanguages[0]?.englishName }}</span>
           </p>
-          <p class="font-semibold text-gray-900">
+          <p class="font-semibold text-base-content/90">
             First Air Date:
             <time
-              class="text-sm font-semibold text-gray-600"
+              class="text-sm font-semibold text-base-content/70"
               :datetime="
                 props.tvSeries!.FirstAirDate === ''
                   ? 'unknown'
@@ -116,9 +116,9 @@ const alreadyAdded = computed(() =>
               :href="`https://www.themoviedb.org/tv/${props.tvSeries?.Id}`"
               target="_blank"
               rel="noopener noreferrer"
-              class="btn btn-square btn-md bg-accent border-none"
+              class="btn btn-square btn-md bg-base-300 border border-base-content/30"
             >
-              <img src="/logos/tmdb.svg" alt="TMDB" class="m-0.5" />
+              <img src="/logos/tmdb.svg" alt="TMDB" class="h-6 w-6" />
             </a>
 
             <!-- IMDB button -->
@@ -127,9 +127,9 @@ const alreadyAdded = computed(() =>
               :href="props.tvSeries.Homepage"
               target="_blank"
               rel="noopener noreferrer"
-              class="btn btn-square btn-md bg-[#f5c518] border-none"
+              class="btn btn-square btn-md bg-[#f5c518] border border-[#f5c518]/30"
             >
-              <img src="/logos/imdb.svg" alt="IMDB" class="m-0.5" />
+              <img src="/logos/imdb.svg" alt="IMDB" class="h-6 w-6" />
             </a>
           </div>
         </div>
@@ -140,7 +140,7 @@ const alreadyAdded = computed(() =>
         <template v-if="props.tvSeries && props.media">
           <button
             v-if="!alreadyAdded"
-            class="btn btn-square bg-linear-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300"
+            class="btn btn-square bg-gradient-to-r from-base-300 to-base-200 border border-base-content/30 text-base-content hover:from-base-200 hover:to-base-100"
             @click="store.addMedia(props.media)"
           >
             <svg
@@ -160,7 +160,7 @@ const alreadyAdded = computed(() =>
           </button>
           <button
             v-else
-            class="btn btn-square bg-linear-to-r from-red-50 to-red-100 border border-red-200 text-red-600 hover:from-red-100 hover:to-red-200"
+            class="btn btn-square bg-gradient-to-r from-error/10 to-error/20 border border-error/30 text-error hover:from-error/20 hover:to-error/30"
             @click="store.removeMedia(props.media.Id)"
           >
             <svg
@@ -190,7 +190,7 @@ const alreadyAdded = computed(() =>
           }"
         >
           <button
-            class="btn relative flex items-center gap-2 px-6 bg-linear-to-r from-indigo-500 to-violet-500 text-white border-0 shadow-md hover:opacity-90 transition"
+            class="btn relative flex items-center gap-2 px-6 bg-gradient-to-r from-primary to-secondary text-primary-content border-0 shadow-md hover:opacity-90 transition"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
diff --git a/src/views/AddView.vue b/src/views/AddView.vue
index 4f5a68c..eae35d8 100755
--- a/src/views/AddView.vue
+++ b/src/views/AddView.vue
@@ -122,7 +122,7 @@ watch(filters, () => {
   <div class="container mx-auto px-4 py-12" v-motion-fade-visible-once>
     <!-- Title -->
     <h1
-      class="text-4xl font-extrabold text-center mb-10 bg-linear-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
+      class="text-4xl font-extrabold text-center mb-10 bg-gradient-to-r from-base-content to-base-content/70 bg-clip-text text-transparent"
     >
       Add Media
     </h1>
@@ -151,7 +151,7 @@ watch(filters, () => {
     <!-- Empty state -->
     <p
       v-else
-      class="text-center text-gray-500 mt-16 bg-gray-50/60 border border-gray-200 rounded-lg py-12"
+      class="text-center text-base-content/60 mt-16 bg-base-300/60 border border-base-content/20 rounded-lg py-12"
     >
       Search for a movie or TV Serie to add it to your list
     </p>
diff --git a/src/views/ListView.vue b/src/views/ListView.vue
index 375e73c..e60f3ad 100755
--- a/src/views/ListView.vue
+++ b/src/views/ListView.vue
@@ -17,7 +17,7 @@ const handleRemoveMedia = (mediaId: number) => {
 <template>
   <div class="container mx-auto px-4 py-12" v-motion-fade-visible-once>
     <h1
-      class="text-4xl font-extrabold text-center mb-10 bg-linear-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
+      class="text-4xl font-extrabold text-center mb-10 bg-gradient-to-r from-base-content to-base-content/70 bg-clip-text text-transparent"
     >
       Media Library
     </h1>
diff --git a/src/views/NotFoundView.vue b/src/views/NotFoundView.vue
index 6a97782..1d5f95d 100755
--- a/src/views/NotFoundView.vue
+++ b/src/views/NotFoundView.vue
@@ -2,24 +2,24 @@
 
 <template>
   <div
-    class="min-h-screen flex flex-col items-center justify-center bg-linear-to-b from-gray-50 to-white px-4"
+    class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-base-300 to-base-100 px-4"
   >
     <!-- Big 404 -->
     <h1
-      class="text-8xl font-extrabold mb-4 bg-linear-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
+      class="text-8xl font-extrabold mb-4 bg-gradient-to-r from-base-content/70 to-base-content/50 bg-clip-text text-transparent"
     >
       404
     </h1>
 
     <!-- Message -->
-    <p class="text-xl text-gray-600 mb-8 text-center">
+    <p class="text-xl text-base-content/70 mb-8 text-center">
       Oops! The page you’re looking for doesn’t exist.
     </p>
 
     <!-- Button back home -->
     <RouterLink
       to="/"
-      class="btn px-6 py-3 bg-linear-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300 hover:text-gray-900 transition"
+      class="btn px-6 py-3 bg-gradient-to-r from-base-300 to-base-200 border border-base-content/30 text-base-content hover:from-base-200 hover:to-base-100 hover:text-base-content/90 transition"
     >
       Back to Home
     </RouterLink>
diff --git a/src/views/WatchView.vue b/src/views/WatchView.vue
index a0c4867..b456145 100755
--- a/src/views/WatchView.vue
+++ b/src/views/WatchView.vue
@@ -9,7 +9,7 @@ const isLoaded = ref(false)
 </script>
 
 <template>
-  <div class="flex flex-col items-center w-full min-h-screen bg-black text-white">
+  <div class="flex flex-col items-center w-full min-h-screen bg-base-100 text-base-content">
     <!-- Title -->
     <h1 class="text-2xl md:text-3xl font-bold my-4">
       {{ mediaName }}
@@ -17,7 +17,7 @@ const isLoaded = ref(false)
 
     <!-- Loading spinner -->
     <div v-if="!isLoaded" class="flex justify-center items-center flex-1 w-full">
-      <span class="loading loading-ring loading-lg text-white"></span>
+      <span class="loading loading-ring loading-xl text-primary"></span>
     </div>
 
     <!-- Video player -->
@@ -32,7 +32,7 @@ const isLoaded = ref(false)
     </div>
 
     <!-- Disclaimer -->
-    <p class="mt-4 text-xs text-gray-400 text-center px-4 max-w-xl">
+    <p class="mt-4 text-xs text-base-content/60 text-center px-4 max-w-xl">
       ⚠️ This player is provided by a <span class="font-semibold">third‑party service</span>. Ads
       and pop‑ups may appear, and I do not control or endorse them.
     </p>