feat: show instructions when playlist is empty & fix high contrast contrast

src/app/home/home.page.scss

@@ -368,6 +368,24 @@ ion-title {
   }
 }
 
+.non-validati-add-icon {
+  font-size: 1.1rem;
+  color: #000;
+  font-weight: bold;
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 50%;
+  padding: 2px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+:host-context(body.high-contrast) {
+  .non-validati-add-icon {
+    color: #ffffff !important;
+    background: rgba(255, 255, 255, 0.2) !important;
+  }
+}
+
 // Custom Item Layout
 .custom-item {
   --padding-start: 16px;
@@ -1285,3 +1303,38 @@ ion-title {
     }
   }
 }
+
+.empty-playlist-container {
+  padding: 12px 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.empty-playlist-instruction {
+  margin: 0;
+  font-size: 0.85rem;
+  line-height: 1.4;
+  color: rgba(255, 255, 255, 0.8);
+  text-align: center;
+  background: rgba(var(--ion-color-secondary-rgb), 0.08);
+  border: 1px dashed rgba(var(--ion-color-secondary-rgb), 0.35);
+  padding: 12px 16px;
+  border-radius: 12px;
+  max-width: 480px;
+  width: 100%;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+:host-context(body.high-contrast) {
+  .empty-playlist-instruction {
+    color: #000000 !important;
+    background: rgba(var(--ion-color-secondary-rgb), 0.12) !important;
+    border-color: var(--ion-color-secondary) !important;
+    box-shadow: none !important;
+  }
+}
+
+