beautifying the tags

public/s/css/f0ckm.css

@@ -10537,7 +10537,11 @@ body.layout-modern>.pagewrapper:not(:has(.index-layout-wrapper)):not(:has(.item-
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: pointer;
   text-decoration: none !important;
-  padding: 5px;
+  /* Match badge proportions */
+  padding: 1.5px 5px;
+  border-radius: 3px;
+  font-size: inherit;
+  line-height: inherit;
 }
 
 
@@ -10549,33 +10553,25 @@ body.layout-modern>.pagewrapper:not(:has(.index-layout-wrapper)):not(:has(.item-
   color: #dc3545 !important;
 }
 
-/* Rating Button in gapRight */
+/* Rating Button — icon-only, badge-proportioned */
 #a_toggle.rating-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0 5px;
-  height: 14px;
-  border-radius: 4px;
+  /* Match badge proportions exactly */
+  padding: 1.5px 5px;
+  border-radius: 3px;
   border: 1px solid rgba(255, 255, 255, 0.15);
   background-color: #444;
   color: #fff;
-  font-size: 8px;
-  font-weight: 800;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
+  font-size: inherit;
+  line-height: inherit;
   cursor: pointer;
   white-space: nowrap;
   transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
-  line-height: 1;
   font-family: inherit;
 }
 
-#a_toggle.rating-btn:hover {
-  filter: brightness(1.15);
-  transform: scale(1.05);
-}
-
 #a_toggle.rating-btn.is-sfw {
   background-color: var(--badge-sfw);
   border-color: rgba(0, 0, 0, 0.15);
@@ -10595,11 +10591,7 @@ body.layout-modern>.pagewrapper:not(:has(.index-layout-wrapper)):not(:has(.item-
   background-color: #444;
 }
 
-.tag-btn svg {
-  fill: currentColor;
-  width: 20px;
-  height: 20px;
-}
+
 
 .rules {
   padding: 10px;

public/s/js/admin.js

@@ -60,7 +60,7 @@
       a.textContent = tag.tag;
 
       const span = document.createElement("span");
-      span.classList.add("badge", "mr-2");
+      span.classList.add("badge");
       if (highlightTag && (tag.tag === highlightTag || tag.normalized === highlightTag)) {
         span.classList.add('new-tag-glow');
       }

public/s/js/f0ckm.js

@@ -3659,7 +3659,7 @@ window.cancelAnimFrame = (function () {
 
       // Backup current state
       const oldClasses = [...toggleBtn.classList];
-      const oldTextContent = toggleBtn.textContent;
+      const oldInnerHTML = toggleBtn.innerHTML;
 
       // Track active request ID to ignore out-of-order race conditions on rapid keypresses
       const reqId = (toggleBtn._lastCycleReqId || 0) + 1;
@@ -3671,7 +3671,7 @@ window.cancelAnimFrame = (function () {
       // Optimistically apply new state
       toggleBtn.classList.remove('is-sfw', 'is-nsfw', 'is-nsfl', 'is-untagged');
       toggleBtn.classList.add(`is-${nextRating}`);
-      toggleBtn.textContent = nextLabel;
+      // (icon stays — only CSS class color changes)
 
       // Optimistically update the sidebar tag list
       let originalTags = [];
@@ -3750,7 +3750,7 @@ window.cancelAnimFrame = (function () {
             // Verify visual state and sync tags
             toggleBtn.classList.remove('is-sfw', 'is-nsfw', 'is-nsfl', 'is-untagged');
             toggleBtn.classList.add(`is-${res.rating}`);
-            toggleBtn.textContent = labels[res.rating] || res.rating.toUpperCase();
+            // icon stays constant — class drives the color
 
             if (window.renderTags) {
               window.renderTags(res.tags);
@@ -3778,7 +3778,7 @@ window.cancelAnimFrame = (function () {
       function revert() {
         toggleBtn.className = '';
         oldClasses.forEach(cls => toggleBtn.classList.add(cls));
-        toggleBtn.textContent = oldTextContent;
+        toggleBtn.innerHTML = oldInnerHTML;
         if (window.renderTags && originalTags.length > 0) {
           window.renderTags(originalTags);
         }
@@ -7138,7 +7138,7 @@ class NotificationSystem {
       const fragment = document.createDocumentFragment();
       data.tags.forEach(tag => {
         const span = document.createElement('span');
-        span.className = `badge ${tag.badge} mr-2`;
+        span.className = `badge ${tag.badge}`;
         if (hasSession) span.setAttribute('tooltip', tag.display_name || tag.user);
 
         const a = document.createElement('a');

public/s/js/user.js

@@ -56,7 +56,7 @@
       a.textContent = tag.tag;
 
       const span = document.createElement("span");
-      span.classList.add("badge", "mr-2");
+      span.classList.add("badge");
       if (highlightTag && (tag.tag === highlightTag || tag.normalized === highlightTag)) {
         span.classList.add('new-tag-glow');
       }

views/item-partial-legacy.html

@@ -158,7 +158,7 @@
                             <i class="fa-solid fa-plus"></i>
                         </a>
                         @if(can_manage_item)
-                        <button class="rating-btn {{ item.is_nsfl ? 'is-nsfl' : (item.is_nsfw ? 'is-nsfw' : (item.is_sfw ? 'is-sfw' : 'is-untagged')) }}" id="a_toggle" title="Toggle Rating">{{ item.is_nsfl ? 'NSFL' : (item.is_nsfw ? 'NSFW' : (item.is_sfw ? 'SFW' : '?')) }}</button>
+                        <button class="rating-btn {{ item.is_nsfl ? 'is-nsfl' : (item.is_nsfw ? 'is-nsfw' : (item.is_sfw ? 'is-sfw' : 'is-untagged')) }}" id="a_toggle" title="Toggle Rating"><i class="fa-solid fa-arrow-right-arrow-left"></i></button>
                         @endif
                     </div>
                     @endif

views/item-partial-modern.html

@@ -33,7 +33,7 @@
                 <i class="fa-solid fa-plus"></i>
             </a>
             @if(can_manage_item)
-            <button class="rating-btn {{ item_rating_class }}" id="a_toggle" title="Toggle Rating">{{ item_rating_label }}</button>
+            <button class="rating-btn {{ item_rating_class }}" id="a_toggle" title="Toggle Rating"><i class="fa-solid fa-arrow-right-arrow-left"></i></button>
             @endif
         </div>
         @endif