diff --git a/frontend/src/components/ChannelTags.tsx b/frontend/src/components/ChannelTags.tsx
index 703b1990..ee985a8d 100644
--- a/frontend/src/components/ChannelTags.tsx
+++ b/frontend/src/components/ChannelTags.tsx
@@ -22,7 +22,7 @@ interface TagChipProps {
 }
 
 function TagChip({ tag, onClick, title }: TagChipProps) {
-  const cls = "chip-solid shrink-0 text-3xs px-1.5 py-0.5 rounded-full border max-w-36 truncate";
+  const cls = "chip-solid shrink-0 text-3xs px-1.5 py-0.5 rounded-full max-w-36 truncate";
   return onClick ? (
     <button
       type="button"
diff --git a/frontend/src/components/Channels.tsx b/frontend/src/components/Channels.tsx
index 5a2a3fc0..4068bb96 100644
--- a/frontend/src/components/Channels.tsx
+++ b/frontend/src/components/Channels.tsx
@@ -483,11 +483,8 @@ export default function Channels() {
         <button
           key={f.id}
           onClick={() => setStatusFilter(f.id)}
-          className={`text-xs px-2.5 py-1 rounded-full border transition ${
-            statusFilter === f.id
-              ? "bg-accent text-accent-fg border-accent"
-              : "bg-card border-border text-muted hover:border-accent"
-          }`}
+          aria-pressed={statusFilter === f.id}
+          className="pill text-xs px-2.5 py-1 rounded-full border"
         >
           {t(f.labelKey)}
         </button>
@@ -622,11 +619,8 @@ export default function Channels() {
           <button
             key={v}
             onClick={() => setView(v)}
-            className={`text-sm px-3 py-1.5 rounded-full border transition ${
-              view === v
-                ? "bg-accent text-accent-fg border-accent"
-                : "bg-card border-border text-muted hover:border-accent"
-            }`}
+            aria-pressed={view === v}
+            className="pill text-sm px-3 py-1.5 rounded-full border"
           >
             {t(`channels.tabs.${v}`)}
           </button>
diff --git a/frontend/src/components/PlexSidebar.tsx b/frontend/src/components/PlexSidebar.tsx
index 4e882374..2b1ac4b9 100644
--- a/frontend/src/components/PlexSidebar.tsx
+++ b/frontend/src/components/PlexSidebar.tsx
@@ -148,8 +148,9 @@ export default function PlexSidebar({ layout, setLayout, collapsed, onToggleColl
             <button
               key={s}
               onClick={() => setScope(s)}
-              className={`min-w-0 px-1.5 py-1.5 rounded-lg text-xs font-medium truncate transition ${
-                s === scope ? "bg-accent text-accent-fg" : "glass-card glass-hover"
+              aria-pressed={s === scope}
+              className={`pill min-w-0 px-1.5 py-1.5 rounded-lg text-xs font-medium truncate ${
+                s === scope ? "" : "glass-card glass-hover"
               }`}
             >
               {t(`plex.filter.scopeOpt.${s}`)}
@@ -505,9 +506,8 @@ function Chip({
   return (
     <button
       onClick={onClick}
-      className={`px-2.5 py-1 rounded-full text-xs transition ${
-        active ? "bg-accent text-accent-fg" : "glass-card glass-hover"
-      }`}
+      aria-pressed={active}
+      className={`pill px-2.5 py-1 rounded-full text-xs ${active ? "" : "glass-card glass-hover"}`}
     >
       {children}
     </button>
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index ae0a8f97..0eda45a9 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -46,11 +46,8 @@ function TagChip({
       data-tag={tag.name}
       onClick={onClick}
       title={t("sidebar.channelCount", { count })}
-      className={`inline-flex items-center gap-1.5 text-xs px-2.5 py-1 rounded-full border shadow-xs hover:shadow-sm active:translate-y-px transition ${
-        active
-          ? "bg-accent text-accent-fg border-accent"
-          : "bg-card border-border text-fg hover:border-accent"
-      }`}
+      aria-pressed={active}
+      className="pill inline-flex items-center gap-1.5 text-xs px-2.5 py-1 rounded-full border shadow-xs hover:shadow-sm active:translate-y-px"
     >
       <span>{tag.name}</span>
       <span
@@ -169,11 +166,8 @@ export default function Sidebar({
                         dateTo: undefined,
                       })
                     }
-                    className={`text-xs px-2.5 py-1 rounded-full border shadow-xs active:translate-y-px transition ${
-                      activePreset
-                        ? "bg-accent text-accent-fg border-accent"
-                        : "bg-card border-border hover:border-accent"
-                    }`}
+                    aria-pressed={activePreset}
+                    className="pill text-xs px-2.5 py-1 rounded-full border shadow-xs active:translate-y-px"
                   >
                     {t("sidebar.datePreset." + p.key)}
                   </button>
@@ -185,11 +179,8 @@ export default function Sidebar({
                   setCustomDates(next);
                   if (next) setFilters({ ...filters, maxAgeDays: undefined });
                 }}
-                className={`text-xs px-2.5 py-1 rounded-full border shadow-xs active:translate-y-px transition ${
-                  customDates || filters.dateFrom || filters.dateTo
-                    ? "bg-accent text-accent-fg border-accent"
-                    : "bg-card border-border hover:border-accent"
-                }`}
+                aria-pressed={!!(customDates || filters.dateFrom || filters.dateTo)}
+                className="pill text-xs px-2.5 py-1 rounded-full border shadow-xs active:translate-y-px"
               >
                 {t("sidebar.custom")}
               </button>
diff --git a/frontend/src/components/Stats.tsx b/frontend/src/components/Stats.tsx
index a7d44392..59c4602e 100644
--- a/frontend/src/components/Stats.tsx
+++ b/frontend/src/components/Stats.tsx
@@ -35,11 +35,8 @@ export default function Stats() {
             <button
               key={id}
               onClick={() => setTab(id)}
-              className={`px-3 py-1.5 rounded-full text-sm border transition ${
-                tab === id
-                  ? "bg-accent text-accent-fg border-accent"
-                  : "bg-card border-border text-muted hover:border-accent"
-              }`}
+              aria-pressed={tab === id}
+              className="pill px-3 py-1.5 rounded-full text-sm border"
             >
               {t(`stats.tabs.${id}`)}
             </button>
@@ -236,11 +233,8 @@ function SystemStats() {
             <button
               key={d}
               onClick={() => setDays(d)}
-              className={`px-3 py-1.5 rounded-full text-sm border transition ${
-                days === d
-                  ? "bg-accent text-accent-fg border-accent"
-                  : "bg-card border-border text-muted hover:border-accent"
-              }`}
+              aria-pressed={days === d}
+              className="pill px-3 py-1.5 rounded-full text-sm border"
             >
               {t("stats.rangeDays", { count: d })}
             </button>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 560b6b4c..dba7d92f 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -474,7 +474,7 @@ body {
      .chip-solid is intentionally a PAINT-ONLY modifier (bg/text/border colour, no display or
      geometry): it sits on a site's OWN chip geometry so a truncating single-element chip
      (ChannelTags) isn't forced into inline-flex, which would break its text-overflow. Use it WITH a
-     site's `rounded-full`/`border` utilities (or on top of `.chip`), never bare. */
+     site's own geometry (`rounded-full`, optional `border`) or on top of `.chip`, never bare. */
   .chip {
     display: inline-flex;
     align-items: center;