style

src/styles/globals.css

@@ -257,6 +257,14 @@ body {
  * Use them when building new components.
  * ==========================================================================*/
 
+/* Active / Selected Highlight Ring
+ * Prominent focus ring for cards and items in an "active" or "selected" state.
+ * Use on gallery items, avatar cards, and similar selectable surfaces.
+ */
+.x-highlight-ring {
+    @apply ring-[3px] ring-ring border-ring;
+}
+
 /* Hover Transitions
  * Smooth hover state changes to avoid harsh flickering.
  *   x-hover-card — Cards & panels (0.2s, bg + shadow)

src/views/MyAvatars/components/MyAvatarCard.vue

@@ -6,7 +6,7 @@
                     <div class="avatar-card-wrapper rounded-lg" @click="$emit('click')">
                         <Card
                             class="avatar-card x-hover-card flex flex-col gap-0 p-0 cursor-pointer overflow-hidden rounded-lg relative hover:bg-accent hover:shadow-sm"
-                            :class="isActive ? 'ring-[3px] ring-ring border-ring' : 'border border-border/50'">
+                            :class="isActive ? 'x-highlight-ring' : 'border border-border/50'">
                             <div class="w-full aspect-5/2 overflow-hidden bg-muted relative">
                                 <img
                                     v-if="avatar.thumbnailImageUrl && !imageLoadError"

src/views/Tools/Gallery.vue

@@ -87,7 +87,7 @@
                             variant="outline"
                             size="sm"
                             class="p-0 x-hover-card hover:bg-accent hover:shadow-sm"
-                            :class="compareCurrentProfilePic(image.id) ? 'ring-[3px] ring-ring border-ring' : ''"
+                            :class="compareCurrentProfilePic(image.id) ? 'x-highlight-ring' : ''"
                             as-child>
                             <div
                                 v-if="image.versions && image.versions.length > 0 && image.versions[image.versions.length - 1].file.url"
@@ -159,7 +159,7 @@
                             variant="outline"
                             size="sm"
                             class="p-0 x-hover-card hover:bg-accent hover:shadow-sm"
-                            :class="compareCurrentVRCPlusIcon(image.id) ? 'ring-[3px] ring-ring border-ring' : ''"
+                            :class="compareCurrentVRCPlusIcon(image.id) ? 'x-highlight-ring' : ''"
                             as-child>
                             <div
                                 v-if="image.versions && image.versions.length > 0 && image.versions[image.versions.length - 1].file.url"