diff --git a/config/paginator-templates.php b/config/paginator-templates.php
index 4841b56f..a8f6d054 100644
--- a/config/paginator-templates.php
+++ b/config/paginator-templates.php
@@ -5,15 +5,15 @@
  * Shared pagination and sorting links, including Interact's enhanced navigation.
  */
 return [
-    'nextActive' => '<a class="page-link" rel="next nofollow" href="{{url}}">{{text}}</a>',
-    'nextDisabled' => '<span class="page-link" aria-disabled="true">{{text}}</span>',
-    'prevActive' => '<a class="page-link" rel="prev nofollow" href="{{url}}">{{text}}</a>',
-    'prevDisabled' => '<span class="page-link" aria-disabled="true">{{text}}</span>',
-    'number' => '<a class="page-link numbered-page" rel="nofollow" href="{{url}}">{{text}}</a>',
-    'current' => '<span class="page-link numbered-page" aria-current="page">{{text}}</span>',
+    'nextActive' => '<a class="page-link btn btn-outline" rel="next nofollow" href="{{url}}">{{text}}</a>',
+    'nextDisabled' => '<span class="page-link btn btn-outline" aria-disabled="true">{{text}}</span>',
+    'prevActive' => '<a class="page-link btn btn-outline" rel="prev nofollow" href="{{url}}">{{text}}</a>',
+    'prevDisabled' => '<span class="page-link btn btn-outline" aria-disabled="true">{{text}}</span>',
+    'number' => '<a class="page-link btn btn-outline numbered-page" rel="nofollow" href="{{url}}">{{text}}</a>',
+    'current' => '<span class="page-link btn btn-outline numbered-page" aria-current="page">{{text}}</span>',
     'ellipsis' => '<span class="numbered-page" aria-hidden="true">&hellip;</span>',
-    'first' => '<a class="page-link" rel="nofollow" href="{{url}}">{{text}}</a>',
-    'last' => '<a class="page-link" rel="nofollow" href="{{url}}">{{text}}</a>',
+    'first' => '<a class="page-link btn btn-outline" rel="nofollow" href="{{url}}">{{text}}</a>',
+    'last' => '<a class="page-link btn btn-outline" rel="nofollow" href="{{url}}">{{text}}</a>',
     'sort' => '<a class="sort-option" rel="nofollow" href="{{url}}">{{text}}</a>',
     'sortAsc' => '<a class="sort-option sort-option-active" rel="nofollow" href="{{url}}">{{text}} ↑</a>',
     'sortDesc' => '<a class="sort-option sort-option-active" rel="nofollow" href="{{url}}">{{text}} ↓</a>',
diff --git a/resources/css/style.css b/resources/css/style.css
index 19f781be..8a70f338 100644
--- a/resources/css/style.css
+++ b/resources/css/style.css
@@ -74,13 +74,13 @@
     --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     --color-cake-red: #d33c43;
     --color-cake-blue: #2f85ae;
-}
-
-:root, [data-theme="cakephp"] {
     --color-muted: #60646c;
     --color-control: #858a94;
     --color-link-hover: #92232a;
     --color-row-hover: #f1f2f4;
+}
+
+:root, [data-theme="cakephp"] {
     --glow-rose: #d33c4329;
     --glow-violet: #7d85dd26;
     --glow-amber: #ffb98133;
@@ -97,8 +97,19 @@
 }
 
 [x-cloak] { display: none !important; }
-html { background: var(--color-base-200); scroll-padding-top: 5rem; }
-body { isolation: isolate; min-height: 100svh; margin: 0; background: var(--color-base-200); color: var(--color-base-content); font-family: var(--font-sans); font-size: 1rem; line-height: 1.6; }
+
+@layer base {
+    html { background: var(--color-base-200); scroll-padding-top: 5rem; }
+    body { isolation: isolate; min-height: 100svh; margin: 0; background: var(--color-base-200); color: var(--color-base-content); font-family: var(--font-sans); font-size: 1rem; line-height: 1.6; }
+    ::selection { background: color-mix(in srgb, var(--color-cake-red) 25%, transparent); }
+    a:where(:not(.btn)) { color: var(--color-primary); text-underline-offset: 0.2em; }
+    a:where(:not(.btn)):hover { color: var(--color-link-hover); }
+    button, summary { cursor: pointer; }
+    :focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
+    ::placeholder { color: var(--color-muted); opacity: 1; }
+    h1, h2, h3 { text-wrap: balance; }
+}
+
 /* The welcome-page palette from cakephp/app#1110, kept static for browsing. */
 body::before {
     content: "";
@@ -111,262 +122,350 @@ body::before {
         radial-gradient(ellipse at 85% 25%, var(--glow-violet), transparent 55%),
         radial-gradient(ellipse at 45% 90%, var(--glow-amber), transparent 55%);
 }
-::selection { background: color-mix(in srgb, var(--color-cake-red) 25%, transparent); }
-a:where(:not(.btn)) { color: var(--color-primary); text-underline-offset: 0.2em; }
-a:where(:not(.btn)):hover { color: var(--color-link-hover); }
-button, input, select, textarea { font: inherit; }
-button, summary { cursor: pointer; }
-:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
-::placeholder { color: var(--color-muted); opacity: 1; }
-h1, h2, h3 { text-wrap: balance; }
-.muted { color: var(--color-muted); }
-.site-width { width: min(100% - 3rem, 75rem); margin-inline: auto; }
-.site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--color-base-100) 88%, transparent); backdrop-filter: blur(16px); border-bottom: 1px solid var(--color-base-300); }
-.site-nav { display: flex; min-height: 4rem; align-items: center; gap: 2rem; }
-.brand { display: inline-flex; align-items: center; gap: 0.625rem; flex-shrink: 0; color: var(--color-base-content); text-decoration: none; font-weight: 700; letter-spacing: -0.02em; }
-.brand:hover { color: var(--color-base-content); }
-.brand-mark { width: 2rem; height: 1.6rem; flex-shrink: 0; color: var(--color-cake-red); }
-.brand-label { color: var(--color-muted); font-weight: 450; }
-.desktop-nav { display: flex; align-items: center; gap: 1.5rem; }
-.nav-link { display: inline-flex; min-height: 2.75rem; align-items: center; color: var(--color-muted); font-size: 0.875rem; text-decoration: none; }
-.nav-link[aria-current="page"] { color: var(--color-primary); font-weight: 650; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.45rem; }
-.header-actions { display: flex; align-items: center; gap: 0.625rem; margin-left: auto; }
-.icon-button { display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; flex-shrink: 0; color: var(--color-base-content); background: transparent; border: 1px solid transparent; border-radius: 0.5rem; }
-.icon-button:hover { background: var(--color-row-hover); }
-.icon-button:disabled { cursor: wait; }
-.icon-button svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
-.action-link { display: inline-flex; min-height: 2.5rem; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.375rem 0.875rem; border: 1px solid var(--color-control); border-radius: 0.5rem; background: var(--color-base-100); color: var(--color-base-content); font-size: 0.875rem; font-weight: 600; text-decoration: none; }
-.action-link:hover { color: var(--color-base-content); background: var(--color-row-hover); }
-.action-link svg { width: 1.125rem; height: 1.125rem; }
-.user-avatar { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; }
-.navigation-menu { position: relative; }
-.navigation-menu summary { list-style: none; }
-.navigation-menu summary::-webkit-details-marker { display: none; }
-.menu-panel { position: absolute; top: calc(100% + 0.5rem); right: 0; display: grid; gap: 0.25rem; min-width: 15rem; padding: 0.5rem; background: var(--color-base-100); border: 1px solid var(--color-control); border-radius: 0.75rem; box-shadow: 0 0.5rem 1.5rem #00000014; }
-.menu-panel .nav-link, .menu-panel .action-link { padding: 0.5rem 0.75rem; }
-.menu-panel .nav-link:hover { background: var(--color-row-hover); }
-.menu-identity { padding: 0.5rem 0.75rem; overflow-wrap: anywhere; font-size: 0.875rem; }
-.menu-identity span { display: block; color: var(--color-muted); }
-.mobile-menu { display: none; }
-.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.5rem; margin-top: 2rem; border-top: 1px solid var(--color-base-300); color: var(--color-muted); font-size: 0.875rem; }
-.site-footer nav { display: flex; gap: 1.5rem; }
-.skip-link { position: fixed; top: 0.5rem; left: 0.5rem; z-index: 110; padding: 0.5rem 1rem; background: var(--color-base-100); transform: translateY(-200%); }
-.skip-link:focus { transform: none; }
-.directory { padding-top: 1.25rem; }
-.page-intro { margin-bottom: 1.5rem; }
-.page-intro h1 { margin: 0 0 0.5rem; font-size: clamp(1.875rem, 3.5vw, 2.5rem); line-height: 1.25; font-weight: 700; letter-spacing: -0.025em; }
-.catalogue-discovery { padding: 1.25rem; margin-bottom: 1.5rem; border: 1px solid var(--color-base-300); border-radius: 1rem; background: var(--color-base-100); }
-.page-intro p { margin: 0; color: var(--color-muted); }
-.catalogue-search-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
-.catalogue-search { flex: 1; min-width: 0; }
-.reset-filters { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; min-height: 2.5rem; flex-shrink: 0; font-size: 0.8125rem; font-weight: 500; white-space: nowrap; }
-.search-control { display: flex; position: relative; align-items: center; gap: 0.75rem; min-height: 3rem; padding: 0.5rem 1rem; border: 1px solid var(--color-control); border-radius: 0.5rem; background: var(--color-base-200); }
-.search-control:focus-within { outline: 3px solid var(--color-primary); outline-offset: 2px; }
-.search-control > svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: var(--color-muted); }
-.search-control input { min-width: 0; width: 100%; background: transparent; color: var(--color-base-content); border: 0; outline: 0; }
-.search-control input:focus-visible { outline: none; }
-.search-status { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; color: var(--color-muted); font-size: 0.875rem; }
-.catalogue-filters { display: grid; gap: 0.25rem; }
-.version-filter { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.5rem; align-items: center; }
-.filter-label { white-space: nowrap; font-size: 0.8125rem; font-weight: 600; }
-.version-options { display: flex; align-items: center; gap: 0.25rem; min-width: 0; overflow-x: auto; padding: 0.25rem; scrollbar-width: thin; scrollbar-color: var(--color-control) transparent; }
-.version-pill { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; min-height: 1.5rem; padding: 0.125rem 0.4375rem; color: var(--color-muted); background: transparent; border: 1px solid var(--color-base-300); border-radius: 999px; font-size: 0.75rem; line-height: 1.25; font-weight: 500; text-decoration: none; white-space: nowrap; }
-.version-pill:focus-visible { outline-width: 2px; outline-offset: 2px; }
-.version-pill:hover { color: var(--color-primary); border-color: var(--color-primary); }
-.version-pill[aria-pressed="true"] { color: var(--color-primary-content); border-color: var(--color-primary); background: var(--color-primary); }
-.featured-section { margin-bottom: 1.5rem; }
-.featured-section h2 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem; font-size: 1rem; font-weight: 650; }
-.featured-section h2 svg { width: 1rem; height: 1rem; color: var(--color-primary); }
-.featured-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
-.featured-item { --plugin-accent: var(--color-cake-red); min-width: 0; overflow: hidden; border: 1px solid var(--color-base-300); border-radius: 1rem; background: radial-gradient(ellipse at top left, color-mix(in srgb, var(--plugin-accent) 14%, transparent), transparent 75%), var(--color-base-100); }
+
+/* Shared view patterns use Tailwind utilities; DaisyUI supplies the control primitives. */
+.site-width {
+    @apply mx-auto w-[calc(100%-2rem)] max-w-[75rem] md:w-[calc(100%-3rem)];
+}
+.site-header {
+    @apply sticky top-0 z-40 border-b border-base-300 bg-base-100/88 backdrop-blur-lg;
+}
+.site-nav {
+    @apply flex min-h-14 items-center gap-3 md:min-h-16 md:gap-8;
+}
+.desktop-nav {
+    @apply hidden items-center gap-6 md:flex;
+}
+.nav-link {
+    @apply inline-flex min-h-11 items-center text-sm leading-[1.6] text-muted no-underline hover:text-link-hover aria-[current=page]:font-[650]
+        aria-[current=page]:text-primary aria-[current=page]:underline aria-[current=page]:decoration-2
+        aria-[current=page]:underline-offset-[0.45rem];
+}
+.icon-button {
+    @apply size-11 shrink-0 rounded-lg border-transparent p-0 text-base-content shadow-none hover:bg-row-hover
+        disabled:cursor-wait;
+    & svg { @apply size-5 shrink-0; }
+}
+.action-link {
+    @apply h-auto min-h-10 gap-2 rounded-lg border-control bg-base-100 px-3.5 py-1.5 text-sm leading-[1.6] font-semibold
+        text-base-content no-underline shadow-none hover:border-control hover:bg-row-hover hover:text-base-content;
+    & svg { @apply size-4.5; }
+}
+.menu-panel {
+    @apply absolute top-[calc(100%+0.5rem)] right-0 grid min-w-60 gap-1 rounded-xl border border-control bg-base-100 p-2
+        shadow-[0_0.5rem_1.5rem_#00000014];
+    & a { @apply px-3 py-2; }
+    & a:hover { @apply bg-row-hover; }
+}
+.menu-identity {
+    @apply px-3 py-2 text-sm leading-[1.6] wrap-anywhere;
+    & span { @apply block text-muted; }
+}
+.site-footer {
+    @apply mt-8 flex items-center justify-between gap-4 border-t border-base-300 py-6 text-sm leading-[1.6] text-muted;
+    & nav { @apply flex gap-6; }
+}
+.skip-link {
+    @apply fixed top-2 left-2 z-[110] -translate-y-[200%] bg-base-100 px-4 py-2 focus:translate-y-0;
+}
+.page-intro {
+    @apply mb-6;
+    & h1 { @apply mb-2 text-[clamp(1.875rem,3.5vw,2.5rem)] leading-tight font-bold tracking-[-0.025em]; }
+    & p { @apply text-muted; }
+}
+.catalogue-discovery {
+    @apply mb-6 rounded-2xl border border-base-300 bg-base-100 p-4 md:p-5;
+}
+.reset-filters {
+    @apply inline-flex min-h-10 shrink-0 items-center justify-center gap-1.5 text-[0.8125rem] font-medium
+        whitespace-nowrap max-md:w-10;
+    & span { @apply max-md:hidden; }
+}
+.search-control {
+    @apply relative flex h-auto min-h-12 w-full items-center gap-3 rounded-lg border-control bg-base-200 px-4 py-2
+        shadow-none focus-within:border-control focus-within:outline-3 focus-within:outline-offset-2
+        focus-within:outline-primary text-base;
+    & > svg { @apply size-5 shrink-0 text-muted; }
+    & input { @apply min-w-0 bg-transparent text-base-content outline-none placeholder:text-muted placeholder:opacity-100; }
+}
+.version-filter {
+    @apply grid grid-cols-[7rem_minmax(0,1fr)] items-center gap-2;
+}
+.version-options {
+    @apply flex min-w-0 items-center gap-1 overflow-x-auto p-1 [scrollbar-width:thin]
+        [scrollbar-color:var(--color-control)_transparent];
+}
+.version-pill {
+    @apply h-auto min-h-6 shrink-0 rounded-full border-base-300 bg-transparent px-1.75 py-0.5 text-xs leading-tight
+        font-medium whitespace-nowrap text-muted no-underline hover:border-primary hover:text-primary
+        focus-visible:outline-2 focus-visible:outline-offset-2 aria-pressed:border-primary aria-pressed:bg-primary
+        aria-pressed:text-primary-content forced-colors:aria-pressed:outline-2
+        forced-colors:aria-pressed:outline-[Highlight];
+}
+.featured-section {
+    @apply mb-6;
+    & > h2 { @apply mb-3 flex items-center gap-2 text-base leading-[1.6] font-[650]; }
+    & > h2 svg { @apply size-4 text-primary; }
+}
+.featured-grid {
+    @apply grid grid-flow-col auto-cols-[min(80vw,20rem)] gap-3 overflow-x-auto p-0.5 pb-2 snap-x snap-proximity
+        [scrollbar-width:thin] [scrollbar-color:var(--color-control)_transparent] md:grid-flow-row md:auto-cols-auto
+        md:grid-cols-3 md:gap-4 md:overflow-visible md:p-0;
+}
+.featured-item {
+    @apply min-w-0 snap-start overflow-hidden rounded-2xl border border-base-300;
+    --plugin-accent: var(--color-cake-red);
+    background: radial-gradient(ellipse at top left, color-mix(in srgb, var(--plugin-accent) 14%, transparent), transparent 75%), var(--color-base-100);
+}
+.featured-card {
+    @apply grid h-full grid-cols-[3rem_minmax(0,1fr)] grid-rows-[1fr_auto] items-start gap-x-3 p-4 text-base-content
+        no-underline hover:text-base-content focus-visible:rounded-2xl focus-visible:outline-offset-[-4px] md:gap-x-4
+        md:p-5;
+}
+.plugin-avatar-tile {
+    @apply relative grid size-12 place-items-center rounded-[0.875rem] border text-lg leading-[1.6] font-bold
+        tracking-[-0.035em];
+    border-color: color-mix(in srgb, var(--plugin-accent) 30%, var(--color-base-300));
+    background: color-mix(in srgb, var(--plugin-accent) 17%, var(--color-base-100));
+    color: color-mix(in srgb, var(--color-base-content) 85%, var(--plugin-accent));
+    & img { @apply absolute inset-0 size-full rounded-[inherit] bg-base-100 object-contain p-1.5; }
+}
+.featured-card-arrow {
+    @apply grid size-7.5 shrink-0 place-items-center rounded-full border border-base-300 bg-base-100 text-base
+        leading-[1.6] text-muted group-hover:border-primary group-hover:text-primary group-focus-within:border-primary
+        group-focus-within:text-primary;
+}
+.featured-card-name {
+    @apply min-w-0 wrap-anywhere;
+    & h3 { @apply text-[1.0625rem] leading-[1.35] font-[650] text-base-content; }
+    & .awesome-badge { @apply mt-2; }
+}
+.featured-description {
+    @apply mt-2.5 mb-5 line-clamp-2 min-h-[2.625rem] text-sm leading-normal text-muted wrap-anywhere;
+}
+.featured-card-footer {
+    @apply col-span-full flex flex-wrap items-center justify-between gap-2 border-t border-base-300 pt-3 text-xs
+        leading-[1.6] text-muted tabular-nums;
+}
+.featured-release {
+    @apply h-auto max-w-full rounded-md border-base-300 bg-base-100 px-1.5 py-0.25 text-xs leading-[1.6] text-muted
+        wrap-anywhere;
+}
+.awesome-badge {
+    @apply h-auto gap-1 rounded-md border-0 px-1.75 py-0.5 text-[0.6875rem] leading-normal font-semibold
+        whitespace-nowrap;
+}
+.plugin-category-links {
+    @apply mt-2 flex flex-wrap items-center gap-1.5;
+    & a { @apply text-primary; }
+}
+.category-label {
+    @apply h-auto rounded-md border-base-300 px-1.75 py-0.5 text-xs leading-normal whitespace-normal text-muted;
+}
+.category-browser {
+    @apply mt-4 border-t border-base-300 pt-3;
+    & > summary { @apply flex min-h-8 w-fit list-none items-center gap-2 text-[0.8125rem] font-semibold text-base-content; }
+    & > summary::-webkit-details-marker { @apply hidden; }
+    & > summary svg { @apply size-4 shrink-0; }
+}
+.category-browser-chevron {
+    @apply group-open:rotate-180;
+}
+.category-search {
+    @apply w-full max-w-full md:w-68;
+    & input { @apply w-full min-h-10 rounded-lg border-control bg-base-100 px-3 py-2 text-[0.8125rem]; }
+}
+.category-choice {
+    @apply flex min-h-12 min-w-0 items-center justify-between gap-2 rounded-lg border border-base-300 p-2 text-left
+        text-[0.8125rem] text-base-content no-underline hover:border-primary hover:bg-row-hover
+        aria-[current=true]:border-primary aria-[current=true]:bg-primary/8 aria-[current=true]:text-primary md:px-3
+        md:py-2.5;
+}
+.catalogue-summary {
+    @apply flex min-w-0 flex-wrap items-center gap-2.5;
+    & h2 { @apply text-base leading-[1.6] font-[650]; }
+}
+.selected-category {
+    @apply h-auto max-w-full gap-2 rounded-md border-base-300 px-2 py-1 text-xs leading-[1.6] whitespace-normal
+        text-primary wrap-anywhere;
+    & span { @apply text-base; }
+}
+.curation-toggle {
+    @apply h-auto min-h-10 gap-1.5 rounded-lg border-control bg-transparent px-2.5 py-1.5 text-[0.8125rem] leading-[1.6]
+        font-normal whitespace-nowrap text-base-content no-underline shadow-none hover:border-control
+        hover:bg-row-hover hover:text-base-content aria-pressed:border-primary aria-pressed:bg-primary
+        aria-pressed:text-primary-content aria-pressed:hover:bg-primary;
+}
+.catalogue-panel {
+    @apply rounded-2xl border border-base-300 bg-base-100;
+}
+.catalogue-toolbar {
+    @apply flex flex-wrap items-center justify-between gap-3 border-b border-base-300 px-4 py-3.5 md:px-5;
+}
+.result-count {
+    @apply mr-1 h-auto min-h-6 rounded-md border-0 px-1.75 py-0 text-[0.8125rem] leading-[1.6] tabular-nums;
+}
+.catalogue-controls {
+    @apply flex w-full max-w-full flex-wrap items-center gap-2 text-sm leading-[1.6] max-[384px]:justify-between
+        md:w-auto md:gap-4;
+}
+.sort-control {
+    @apply flex items-center gap-2;
+    & > span { @apply hidden md:inline; }
+}
+.sort-menu {
+    @apply relative;
+    & > summary {
+        @apply inline-flex min-h-10 list-none items-center justify-between gap-3 rounded-lg border border-control
+            bg-base-100 px-3 py-1.5 font-medium;
+    }
+    & > summary::-webkit-details-marker { @apply hidden; }
+    & > summary svg { @apply size-4; }
+}
+.sort-options {
+    @apply absolute top-[calc(100%+0.5rem)] right-0 z-20 min-w-48 rounded-lg border border-control bg-base-100 p-1.5;
+}
+.sort-option {
+    @apply block rounded-sm px-3 py-2 text-base-content no-underline hover:bg-row-hover hover:text-base-content;
+}
+.sort-option-active {
+    @apply font-[650] text-primary hover:text-primary;
+}
+.catalogue-error {
+    @apply alert mx-4 mt-4 flex flex-wrap items-center gap-3 rounded-lg border border-error bg-base-100 p-4
+        text-base-content shadow-none md:mx-5;
+    & p { @apply min-w-48 flex-1; }
+}
+.package-row {
+    @apply grid grid-cols-1 gap-2 border-b border-base-300 p-4 hover:bg-row-hover/55 md:grid-cols-[minmax(0,1fr)_8rem]
+        md:gap-6 md:px-5 md:py-4.5;
+}
+.package-name {
+    @apply mb-2 text-lg leading-[1.4] font-[650] wrap-anywhere;
+    & a { @apply text-base-content; }
+    & a:hover { @apply text-primary underline; }
+}
+.package-summary {
+    @apply flex flex-row items-center justify-between gap-2 md:flex-col md:items-end;
+}
+.package-meta {
+    @apply text-right text-[0.8125rem];
+    & dt { @apply text-muted; }
+    & dd { @apply font-semibold tabular-nums; }
+    & div { @apply max-md:flex max-md:flex-row-reverse max-md:gap-1.5; }
+}
+.plugin-modal-box {
+    @apply w-[calc(100%-1rem)] max-w-[52rem] max-h-[calc(100dvh-1rem)] rounded-2xl border border-base-300 bg-base-100 p-0
+        text-base-content md:w-[calc(100%-3rem)] md:max-h-[calc(100dvh-4rem)] md:rounded-[1.25rem];
+}
+.plugin-modal-bar {
+    @apply sticky top-0 z-1 flex min-h-13 items-center justify-between border-b border-base-300 bg-base-100 px-4 py-2
+        text-[0.8125rem] text-muted md:px-5;
+    & button { @apply text-base-content; }
+}
+.plugin-details-heading {
+    @apply px-5 py-6 md:px-8 md:pt-8 md:pb-7;
+    background: radial-gradient(ellipse at top left, var(--glow-rose), transparent 65%), radial-gradient(ellipse at top right, var(--glow-violet), transparent 65%);
+    & h2 { @apply text-[clamp(1.75rem,4vw,2.25rem)] leading-[1.2] font-bold tracking-[-0.035em] wrap-anywhere; }
+    & > .awesome-badge { @apply mt-2; }
+}
+.plugin-resource-links {
+    @apply mt-6 flex flex-wrap gap-2.5;
+    & svg { @apply size-4; }
+}
+.plugin-stats {
+    @apply grid grid-cols-2 gap-4 border-y border-base-300 bg-base-200 px-5 py-4 md:grid-cols-4 md:px-8 md:py-5;
+    & dt { @apply text-xs leading-[1.6] text-muted; }
+    & dd { @apply mt-1 text-[0.9375rem] font-[650] wrap-anywhere tabular-nums; }
+}
+.plugin-details-section {
+    @apply px-5 py-5 md:px-8 md:py-6;
+    & + .plugin-details-section { @apply pt-1 pb-6 md:pb-8; }
+    & h3 { @apply mb-3 text-[0.9375rem] font-[650]; }
+}
+.plugin-install-command {
+    @apply flex items-center justify-between gap-2 rounded-[0.625rem] border border-base-300 bg-base-200 py-2.5 pr-3 pl-3
+        md:gap-3 md:pl-4;
+    & code { @apply min-w-0 text-[0.8125rem] text-base-content wrap-anywhere select-all; }
+    & button { @apply min-w-18 shrink-0; }
+}
+.plugin-section-hint {
+    @apply mt-2 text-[0.8125rem] text-muted;
+}
+.plugin-version-section {
+    & h3 { @apply mb-1; }
+}
+.plugin-version-group {
+    @apply mt-4 grid grid-cols-[4rem_minmax(0,1fr)] items-start gap-2 md:grid-cols-[5rem_minmax(0,1fr)] md:gap-4;
+    & h4 { @apply py-0.5 text-[0.8125rem] font-[550]; }
+    & .plugin-section-hint { @apply m-0; }
+}
+.plugin-page {
+    @apply max-w-[52rem] pt-6 pb-12;
+}
+.plugin-page-panel {
+    @apply overflow-hidden rounded-[1.25rem] border border-base-300 bg-base-100;
+}
+.empty-results {
+    @apply grid justify-items-start gap-3 px-5 py-8;
+    & h3 { @apply text-xl leading-[1.6] font-[650]; }
+    & p { @apply text-muted; }
+}
+.catalogue-pagination {
+    @apply flex flex-wrap items-center justify-between gap-4 px-4 py-4 text-sm leading-[1.6] text-muted md:px-5;
+}
+.page-link {
+    @apply h-auto min-h-10 min-w-9 rounded-lg border-control bg-base-100 px-2 py-1.5 text-[0.8125rem] leading-[1.6]
+        font-normal text-base-content no-underline shadow-none hover:border-primary hover:text-primary
+        aria-[current=page]:border-primary aria-[current=page]:bg-primary aria-[current=page]:text-primary-content
+        aria-disabled:border-base-300 aria-disabled:text-muted md:min-w-10 md:px-3 md:text-sm
+        forced-colors:aria-[current=page]:outline-2 forced-colors:aria-[current=page]:outline-[Highlight];
+}
+.numbered-page {
+    @apply hidden md:inline-flex;
+}
+.page-loading-bar {
+    @apply h-full w-1/3 bg-primary motion-reduce:w-full motion-reduce:animate-none forced-colors:bg-[Highlight];
+    animation: page-loading 1s ease-in-out infinite;
+}
+.docs-page {
+    @apply max-w-[54rem] py-10;
+}
+.docs-section {
+    @apply mb-4 rounded-2xl border border-base-300 bg-base-100 p-5 md:p-6;
+    & h2 { @apply mb-3 text-xl leading-[1.6] font-[650]; }
+    & ul { @apply list-disc pl-5; }
+    & li+li { @apply mt-2.5; }
+    & p { @apply my-3; }
+    & pre { @apply max-w-full overflow-x-auto rounded-lg border border-base-300 bg-base-100 p-4 text-sm leading-[1.6]; }
+}
+.composer-examples {
+    @apply grid grid-cols-1 gap-6 md:grid-cols-2;
+    & h3 { @apply mb-2 text-sm leading-[1.6] font-semibold text-muted; }
+}
+.error-page {
+    @apply max-w-[48rem] py-12;
+    & h1 { @apply mb-4 text-[2rem] font-bold; }
+    & p { @apply mb-4; }
+}
+
 .featured-item[data-plugin-tone="violet"] { --plugin-accent: #7d85dd; }
 .featured-item[data-plugin-tone="amber"] { --plugin-accent: #d49b67; }
-.featured-item:hover, .featured-item:focus-within { border-color: color-mix(in srgb, var(--plugin-accent) 65%, var(--color-base-300)); box-shadow: 0 4px 20px color-mix(in srgb, var(--plugin-accent) 10%, transparent); }
-.featured-card { display: grid; grid-template-columns: 3rem minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: start; column-gap: 1rem; height: 100%; padding: 1.25rem; color: var(--color-base-content); text-decoration: none; }
-.featured-card-content { min-width: 0; }
-a.featured-card:hover { color: var(--color-base-content); }
-.featured-card:focus-visible { outline-offset: -4px; border-radius: 1rem; }
-.featured-card-top { display: flex; align-items: start; justify-content: space-between; gap: 0.625rem; }
-.plugin-avatar { flex-shrink: 0; align-self: flex-start; }
-.plugin-avatar-tile { position: relative; display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid color-mix(in srgb, var(--plugin-accent) 30%, var(--color-base-300)); border-radius: 0.875rem; background: color-mix(in srgb, var(--plugin-accent) 17%, var(--color-base-100)); color: color-mix(in srgb, var(--color-base-content) 85%, var(--plugin-accent)); font-size: 1.125rem; font-weight: 700; letter-spacing: -0.035em; }
-.plugin-avatar-tile img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0.375rem; border-radius: inherit; object-fit: contain; background: var(--color-base-100); }
-.featured-card-arrow { display: grid; place-items: center; flex-shrink: 0; width: 1.875rem; height: 1.875rem; border: 1px solid var(--color-base-300); border-radius: 50%; color: var(--color-muted); background: var(--color-base-100); font-size: 1rem; }
-.featured-item:hover .featured-card-arrow, .featured-item:focus-within .featured-card-arrow { color: var(--color-primary); border-color: var(--color-primary); }
-.featured-card-name { min-width: 0; overflow-wrap: anywhere; }
-.featured-vendor { display: block; margin-bottom: 0.125rem; color: var(--color-muted); font-size: 0.75rem; }
-.featured-item h3 { margin: 0; color: var(--color-base-content); font-size: 1.0625rem; line-height: 1.35; font-weight: 650; }
-.featured-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.625rem; margin: 0.625rem 0 1.25rem; color: var(--color-muted); font-size: 0.875rem; line-height: 1.5; overflow-wrap: anywhere; }
-.featured-card-footer { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--color-base-300); color: var(--color-muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
-.featured-downloads { display: inline-flex; align-items: center; gap: 0.375rem; }
-.featured-release { max-width: 100%; overflow-wrap: anywhere; padding: 0.0625rem 0.375rem; border: 1px solid var(--color-base-300); border-radius: 0.375rem; background: var(--color-base-100); }
-.awesome-badge { display: inline-flex; align-items: center; gap: 0.25rem; width: fit-content; padding: 0.125rem 0.4375rem; border-radius: 0.375rem; background: color-mix(in srgb, var(--color-primary) 10%, var(--color-base-100)); color: var(--color-primary); font-size: 0.6875rem; line-height: 1.5; font-weight: 600; white-space: nowrap; }
-.featured-card-name .awesome-badge, .plugin-details-heading > .awesome-badge { margin-top: 0.5rem; }
-.package-curation, .plugin-category-links { display: flex; align-items: center; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.5rem; }
-.category-label { padding: 0.125rem 0.4375rem; border: 1px solid var(--color-base-300); border-radius: 0.375rem; color: var(--color-muted); font-size: 0.75rem; line-height: 1.5; }
-.plugin-category-links .category-label { color: var(--color-primary); }
-.category-browser { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--color-base-300); }
-.category-browser summary { display: flex; align-items: center; gap: 0.5rem; width: fit-content; min-height: 2rem; list-style: none; color: var(--color-base-content); font-size: 0.8125rem; font-weight: 600; }
-.category-browser summary::-webkit-details-marker { display: none; }
-.category-browser summary svg { width: 1rem; height: 1rem; flex-shrink: 0; }
-.category-browser[open] .category-browser-chevron { transform: rotate(180deg); }
-.category-browser-content { padding-top: 0.75rem; }
-.category-browser-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.75rem; }
-.category-source { margin: 0; color: var(--color-muted); font-size: 0.75rem; }
-.category-search { width: 17rem; max-width: 100%; }
-.category-search input { width: 100%; min-height: 2.5rem; padding: 0.5rem 0.75rem; border: 1px solid var(--color-control); border-radius: 0.5rem; background: var(--color-base-100); font-size: 0.8125rem; }
-.category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
-a.category-choice { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-width: 0; min-height: 3rem; padding: 0.625rem 0.75rem; border: 1px solid var(--color-base-300); border-radius: 0.5rem; color: var(--color-base-content); font-size: 0.8125rem; text-decoration: none; }
-a.category-choice:hover { border-color: var(--color-primary); background: var(--color-row-hover); }
-a.category-choice[aria-current="true"] { color: var(--color-primary); border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, var(--color-base-100)); }
-.category-choice-label { overflow-wrap: anywhere; }
-.category-choice-count { flex-shrink: 0; color: var(--color-muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
-.category-no-matches { margin: 1rem 0 0; color: var(--color-muted); font-size: 0.875rem; }
-.catalogue-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 0.625rem; min-width: 0; }
-a.selected-category { display: inline-flex; align-items: center; gap: 0.5rem; max-width: 100%; padding: 0.25rem 0.5rem; border: 1px solid var(--color-base-300); border-radius: 0.375rem; color: var(--color-primary); font-size: 0.75rem; overflow-wrap: anywhere; }
-.selected-category span { font-size: 1rem; }
-.curation-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; min-height: 2.5rem; padding: 0.375rem 0.625rem; border: 1px solid var(--color-control); border-radius: 0.5rem; font-size: 0.8125rem; white-space: nowrap; }
-.awesome-toggle-logo { width: 1.5rem; height: 0.875rem; flex-shrink: 0; }
-a.curation-toggle { color: var(--color-base-content); }
-a.curation-toggle[aria-pressed="true"] { color: var(--color-primary-content); background: var(--color-primary); border-color: var(--color-primary); }
-.catalogue-panel { border: 1px solid var(--color-base-300); border-radius: 1rem; background: var(--color-base-100); }
-.catalogue-toolbar { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--color-base-300); }
-.catalogue-toolbar h2 { margin: 0; font-size: 1rem; font-weight: 650; }
-.result-count { display: inline-flex; align-items: center; min-height: 1.5rem; padding: 0 0.4375rem; margin-right: 0.25rem; border-radius: 0.375rem; color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, var(--color-base-100)); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
-.catalogue-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; max-width: 100%; font-size: 0.875rem; }
-.sort-control { display: flex; align-items: center; gap: 0.5rem; }
-.sort-menu { position: relative; }
-.sort-menu summary { display: inline-flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 2.5rem; padding: 0.375rem 0.75rem; list-style: none; border: 1px solid var(--color-control); border-radius: 0.5rem; background: var(--color-base-100); font-weight: 500; }
-.sort-menu summary::-webkit-details-marker { display: none; }
-.sort-menu summary svg { width: 1rem; height: 1rem; }
-.sort-options { position: absolute; right: 0; top: calc(100% + 0.5rem); min-width: 12rem; padding: 0.375rem; border: 1px solid var(--color-control); border-radius: 0.5rem; background: var(--color-base-100); z-index: 20; }
-.sort-option { display: block; padding: 0.5rem 0.75rem; border-radius: 0.25rem; color: var(--color-base-content); text-decoration: none; }
-.sort-option:hover { color: var(--color-base-content); background: var(--color-row-hover); }
-.sort-option-active { color: var(--color-primary); font-weight: 650; }
-.catalogue-error { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 1rem 1.25rem 0; padding: 1rem; border: 1px solid var(--color-error); border-radius: 0.5rem; background: var(--color-base-100); }
-.catalogue-error p { flex: 1; margin: 0; min-width: 12rem; }
-.package-row { display: grid; grid-template-columns: minmax(0, 1fr) 8rem; gap: 1.5rem; padding: 1.125rem 1.25rem; border-bottom: 1px solid var(--color-base-300); }
-.package-row:hover { background: color-mix(in srgb, var(--color-row-hover) 55%, var(--color-base-100)); }
-.package-info { min-width: 0; }
-.package-name { margin: 0 0 0.5rem; font-size: 1.125rem; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
-.package-name a { color: var(--color-base-content); }
-.package-name a:hover { color: var(--color-primary); text-decoration: underline; }
-.package-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; overflow-wrap: anywhere; font-size: 0.9375rem; }
-.package-compatibility { margin: 0.5rem 0 0; color: var(--color-muted); font-size: 0.8125rem; }
-.package-summary { display: flex; flex-direction: column; align-items: end; justify-content: space-between; gap: 0.5rem; }
-.package-meta { margin: 0; text-align: right; font-size: 0.8125rem; }
-.package-meta dt { color: var(--color-muted); }
-.package-meta dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
-.package-details-link { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2rem; font-size: 0.8125rem; font-weight: 550; }
-.compatibility-versions { display: flex; flex-wrap: wrap; gap: 0.375rem; padding: 0.125rem; }
-.plugin-modal-box { width: calc(100% - 3rem); max-width: 52rem; max-height: calc(100dvh - 4rem); padding: 0; border: 1px solid var(--color-base-300); border-radius: 1.25rem; background: var(--color-base-100); color: var(--color-base-content); }
-.plugin-modal-bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; min-height: 3.25rem; padding: 0.5rem 1.25rem; background: var(--color-base-100); border-bottom: 1px solid var(--color-base-300); color: var(--color-muted); font-size: 0.8125rem; }
-.plugin-modal-bar button { color: var(--color-base-content); }
-.plugin-details-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; min-height: 16rem; padding: 2rem; color: var(--color-muted); }
-.plugin-details-heading { padding: 2rem 2rem 1.75rem; background: radial-gradient(ellipse at top left, var(--glow-rose), transparent 65%), radial-gradient(ellipse at top right, var(--glow-violet), transparent 65%); }
-.plugin-vendor { margin: 0 0 0.25rem; color: var(--color-muted); font-size: 0.9375rem; font-weight: 500; overflow-wrap: anywhere; }
-.plugin-details-heading h2 { margin: 0; font-size: clamp(1.75rem, 4vw, 2.25rem); line-height: 1.2; letter-spacing: -0.035em; font-weight: 700; overflow-wrap: anywhere; }
-.plugin-details-description { margin: 1rem 0 0; color: var(--color-base-content); font-size: 1rem; line-height: 1.7; overflow-wrap: anywhere; }
-.plugin-resource-links { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.5rem; }
-.plugin-resource-links svg { width: 1rem; height: 1rem; }
-.plugin-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 1.25rem 2rem; border-block: 1px solid var(--color-base-300); background: var(--color-base-200); }
-.plugin-stats dt { color: var(--color-muted); font-size: 0.75rem; }
-.plugin-stats dd { margin: 0.25rem 0 0; font-size: 0.9375rem; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
-.plugin-details-section { padding: 1.5rem 2rem; }
-.plugin-details-section + .plugin-details-section { padding-top: 0.25rem; padding-bottom: 2rem; }
-.plugin-details-section h3 { margin: 0 0 0.75rem; font-size: 0.9375rem; font-weight: 650; }
-.plugin-install-command { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.625rem 0.75rem 0.625rem 1rem; border: 1px solid var(--color-base-300); border-radius: 0.625rem; background: var(--color-base-200); }
-.plugin-install-command code { min-width: 0; color: var(--color-base-content); font-size: 0.8125rem; overflow-wrap: anywhere; user-select: all; }
-.plugin-install-command button { flex-shrink: 0; min-width: 4.5rem; }
-.plugin-copy-feedback, .plugin-section-hint { margin: 0.5rem 0 0; color: var(--color-muted); font-size: 0.8125rem; }
-.plugin-version-section h3 { margin-bottom: 0.25rem; }
-.plugin-version-group { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 1rem; align-items: start; margin-top: 1rem; }
-.plugin-version-group h4 { margin: 0; padding-block: 0.125rem; font-size: 0.8125rem; font-weight: 550; }
-.plugin-version-group .plugin-section-hint { margin: 0; }
-.plugin-page { max-width: 52rem; padding-block: 1.5rem 3rem; }
-.plugin-back-link { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem; font-size: 0.875rem; }
-.plugin-page-panel { overflow: hidden; border: 1px solid var(--color-base-300); border-radius: 1.25rem; background: var(--color-base-100); }
-.empty-results { display: grid; justify-items: start; gap: 0.75rem; padding: 2rem 1.25rem; }
-.empty-results h3 { margin: 0; font-size: 1.25rem; font-weight: 650; }
-.empty-results p { margin: 0; color: var(--color-muted); }
-.catalogue-pagination { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.25rem; color: var(--color-muted); font-size: 0.875rem; }
-.page-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
-.page-link { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; min-width: 2.5rem; padding: 0.375rem 0.75rem; background: var(--color-base-100); border: 1px solid var(--color-control); border-radius: 0.5rem; color: var(--color-base-content); text-decoration: none; font-variant-numeric: tabular-nums; }
-.page-link:hover { color: var(--color-primary); border-color: var(--color-primary); }
-.page-link[aria-current="page"] { color: var(--color-primary-content); background: var(--color-primary); border-color: var(--color-primary); }
-.page-link[aria-disabled="true"] { color: var(--color-muted); border-color: var(--color-base-300); }
-.page-loading-track { pointer-events: none; position: fixed; inset: 0 0 auto; z-index: 100; height: 0.25rem; overflow: hidden; }
-.page-loading-bar { height: 100%; width: 33.333%; background: var(--color-primary); animation: page-loading 1s ease-in-out infinite; }
-@keyframes page-loading { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
-.docs-page { max-width: 54rem; padding-block: 2.5rem; }
-.docs-section { padding: 1.5rem; margin-bottom: 1rem; border: 1px solid var(--color-base-300); border-radius: 1rem; background: var(--color-base-100); }
-.docs-section h2 { margin: 0 0 0.75rem; font-size: 1.25rem; font-weight: 650; }
-.docs-section ul { padding-left: 1.25rem; }
-.docs-section li + li { margin-top: 0.625rem; }
-.docs-section p { margin-block: 0.75rem; }
-.composer-examples { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
-.composer-examples h3 { margin: 0 0 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--color-muted); }
-.code-chip { padding: 0.125rem 0.375rem; border-radius: 0.25rem; background: var(--color-base-100); border: 1px solid var(--color-base-300); color: var(--color-base-content); font-size: 0.875em; overflow-wrap: anywhere; }
-pre { max-width: 100%; overflow-x: auto; padding: 1rem; border: 1px solid var(--color-base-300); border-radius: 0.5rem; background: var(--color-base-100); font-size: 0.875rem; }
-.flash-message { display: flex; align-items: start; gap: 1rem; margin: 1rem auto; padding: 1rem; border: 1px solid var(--color-base-300); border-radius: 0.5rem; background: var(--color-base-100); }
-.flash-message > p { flex: 1; margin: 0; }
-.flash-error { border-color: var(--color-error); }
-.flash-success { border-color: var(--color-success); }
-.flash-warning { border-color: var(--color-warning); }
-.flash-info { border-color: var(--color-info); }
-.error-page { padding-block: 3rem; max-width: 48rem; }
-.error-page h1 { margin-bottom: 1rem; font-size: 2rem; font-weight: 700; }
-.error-page p { margin-bottom: 1rem; }
-@media (min-width: 48.001rem) and (max-width: 64rem) {
-    .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-}
-@media (max-width: 48rem) {
-    .site-width { width: calc(100% - 2rem); }
-    .site-nav { gap: 0.75rem; min-height: 3.5rem; }
-    .desktop-nav, .desktop-account { display: none; }
-    .mobile-menu { display: block; }
-    .directory { padding-top: 1rem; }
-    .catalogue-discovery { padding: 1rem; }
-    .catalogue-search-row { gap: 0.75rem; }
-    .reset-filters { width: 2.5rem; }
-    .reset-filters span { display: none; }
-    .version-filter { grid-template-columns: 7rem minmax(0, 1fr); gap: 0.5rem; }
-    .featured-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(80vw, 20rem); gap: 0.75rem; overflow-x: auto; padding: 0.125rem 0.125rem 0.5rem; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--color-control) transparent; }
-    .featured-item { scroll-snap-align: start; }
-    .featured-card { column-gap: 0.75rem; padding: 1rem; }
-    .catalogue-controls { width: 100%; gap: 0.5rem; }
-    .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-    a.category-choice { padding: 0.5rem; }
-    .category-search { width: 100%; }
-    .sort-control > .muted { display: none; }
-    .search-status-text { display: none; }
-    .package-row { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; padding: 1rem; }
-    .package-summary { flex-direction: row; align-items: center; }
-    .package-meta div { display: flex; flex-direction: row-reverse; gap: 0.375rem; }
-    .catalogue-toolbar, .catalogue-pagination { padding: 0.875rem 1rem; }
-    .catalogue-error { margin-inline: 1rem; }
-    .docs-section { padding: 1.25rem; }
-    .plugin-modal-box { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); border-radius: 1rem; }
-    .plugin-modal-bar { padding-inline: 1rem; }
-    .plugin-details-heading { padding: 1.5rem 1.25rem; }
-    .plugin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 1rem 1.25rem; }
-    .plugin-details-section { padding: 1.25rem; }
-    .plugin-details-section + .plugin-details-section { padding-bottom: 1.5rem; }
-    .plugin-version-group { gap: 0.5rem; grid-template-columns: 4rem minmax(0, 1fr); }
-    .plugin-install-command { gap: 0.5rem; padding-left: 0.75rem; }
-    .composer-examples { grid-template-columns: minmax(0, 1fr); }
-    .page-links .numbered-page { display: none; }
-    .page-links .page-link { min-width: 2.25rem; padding-inline: 0.5rem; font-size: 0.8125rem; }
-}
-@media (max-width: 24rem) {
-    .brand-label { display: none; }
-    .catalogue-controls { width: 100%; justify-content: space-between; }
+.featured-item:hover, .featured-item:focus-within {
+    border-color: color-mix(in srgb, var(--plugin-accent) 65%, var(--color-base-300));
+    box-shadow: 0 4px 20px color-mix(in srgb, var(--plugin-accent) 10%, transparent);
 }
+.flash-message { @apply my-4 flex items-start gap-4 rounded-lg border border-base-300 bg-base-100 p-4 text-base-content shadow-none; }
+.flash-message > p { @apply m-0 flex-1; }
+.flash-error { @apply border-error; }
+.flash-success { @apply border-success; }
+.flash-warning { @apply border-warning; }
+.flash-info { @apply border-info; }
+.plugin-copy-feedback { @apply mt-2 text-[0.8125rem] text-muted; }
+@keyframes page-loading { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
 @media (prefers-reduced-motion: reduce) {
-    .page-loading-bar { animation: none; width: 100%; }
-    .loading { animation: none; }
+    .page-loading-bar, .loading { animation: none; }
 }
 @media (forced-colors: active) {
-    .version-pill[aria-pressed="true"], .page-link[aria-current="page"] { outline: 2px solid Highlight; }
-    .page-loading-bar { background: Highlight; }
     body::before { display: none; }
 }
diff --git a/templates/Error/error400.php b/templates/Error/error400.php
index 268e1277..1a5e0f74 100644
--- a/templates/Error/error400.php
+++ b/templates/Error/error400.php
@@ -25,5 +25,5 @@
         <strong><?= __d('cake', 'Error') ?>: </strong>
         <?= __d('cake', 'The requested address {0} was not found on this server.', "<strong>'" . h($url) . "'</strong>") ?>
     </p>
-    <?= $this->Html->link(__('Browse plugins'), '/', ['class' => 'action-link']) ?>
+    <?= $this->Html->link(__('Browse plugins'), '/', ['class' => 'action-link btn btn-outline']) ?>
 </div>
diff --git a/templates/Error/error500.php b/templates/Error/error500.php
index b84c339b..68a97df9 100644
--- a/templates/Error/error500.php
+++ b/templates/Error/error500.php
@@ -36,5 +36,5 @@
         <strong><?= __d('cake', 'Error') ?>: </strong>
         <?= h($message) ?>
     </p>
-    <?= $this->Html->link(__('Browse plugins'), '/', ['class' => 'action-link']) ?>
+    <?= $this->Html->link(__('Browse plugins'), '/', ['class' => 'action-link btn btn-outline']) ?>
 </div>
diff --git a/templates/Packages/view.php b/templates/Packages/view.php
index 0a35c3e5..19cad8ba 100644
--- a/templates/Packages/view.php
+++ b/templates/Packages/view.php
@@ -7,7 +7,7 @@
 ?>
 <div class="plugin-page site-width">
     <h1 class="sr-only"><?= h($package->package) ?></h1>
-    <a class="plugin-back-link" href="<?= $this->Url->build(['controller' => 'Packages', 'action' => 'index']) ?>" x-interact:navigate>
+    <a class="mb-5 inline-flex items-center gap-2 text-sm leading-[1.6]" href="<?= $this->Url->build(['controller' => 'Packages', 'action' => 'index']) ?>" x-interact:navigate>
         <span aria-hidden="true">←</span> <?= __('Browse plugins') ?>
     </a>
     <div class="plugin-page-panel">
diff --git a/templates/Pages/requirements.php b/templates/Pages/requirements.php
index c1a05cc9..169a9838 100644
--- a/templates/Pages/requirements.php
+++ b/templates/Pages/requirements.php
@@ -26,7 +26,7 @@
     <section class="docs-section">
         <h2><?= __('What does not qualify') ?></h2>
         <p>A generic library depending only on PSR interfaces does not qualify. A README that mentions CakePHP support is not enough without a Composer dependency.</p>
-        <p class="muted">Only <?= $this->element('code_chip', ['text' => 'require']) ?> dependencies are considered for compatibility tags.</p>
+        <p class="text-muted">Only <?= $this->element('code_chip', ['text' => 'require']) ?> dependencies are considered for compatibility tags.</p>
     </section>
     <section class="docs-section">
         <h2><?= __('Composer examples') ?></h2>
@@ -53,5 +53,5 @@
             </div>
         </div>
     </section>
-    <?= $this->Html->link(__('Browse plugins'), '/', ['class' => 'action-link', 'x-interact:navigate' => '']) ?>
+    <?= $this->Html->link(__('Browse plugins'), '/', ['class' => 'action-link btn btn-outline', 'x-interact:navigate' => '']) ?>
 </section>
diff --git a/templates/element/Packages/awesome_badge.php b/templates/element/Packages/awesome_badge.php
index 4d56addc..79d9c84f 100644
--- a/templates/element/Packages/awesome_badge.php
+++ b/templates/element/Packages/awesome_badge.php
@@ -5,7 +5,7 @@
  */
 ?>
 <?php if ($package->categories) : ?>
-    <span class="awesome-badge" title="<?= __('Listed in the community-curated Awesome CakePHP list') ?>">
+    <span class="awesome-badge badge badge-soft badge-primary" title="<?= __('Listed in the community-curated Awesome CakePHP list') ?>">
         <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
             <path d="m12 3 2.8 5.7 6.3.9-4.6 4.5 1.1 6.3-5.6-3-5.6 3 1.1-6.3-4.6-4.5 6.3-.9L12 3Z" stroke-linejoin="round"></path>
         </svg>
diff --git a/templates/element/Packages/category_browser.php b/templates/element/Packages/category_browser.php
index b44f5f6e..0cd279b8 100644
--- a/templates/element/Packages/category_browser.php
+++ b/templates/element/Packages/category_browser.php
@@ -10,7 +10,7 @@
  */
 $allCategoriesSelected = $category === '';
 ?>
-<details class="category-browser" id="catalogue-categories" x-ref="categoryBrowser" @toggle="categoriesToggled($event)">
+<details class="category-browser group" id="catalogue-categories" x-ref="categoryBrowser" @toggle="categoriesToggled($event)">
     <summary>
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
             <rect x="3" y="3" width="5" height="5" rx="1"></rect>
@@ -23,21 +23,22 @@
             <path d="m4 6 4 4 4-4" stroke-linecap="round" stroke-linejoin="round"></path>
         </svg>
     </summary>
-    <div class="category-browser-content">
-        <div class="category-browser-heading">
-            <p class="category-source">
+    <div class="pt-3">
+        <div class="mb-3 flex flex-wrap items-center justify-between gap-3">
+            <p class="text-xs leading-[1.6] text-muted">
                 <?= __('Categories from') ?>
                 <a href="<?= AwesomeListImporter::SOURCE_URL ?>" target="_blank" rel="noopener noreferrer">Awesome CakePHP</a>.
             </p>
             <label class="category-search" x-cloak>
                 <span class="sr-only"><?= __('Find a category') ?></span>
-                <input type="search" x-model="categorySearch" placeholder="<?= __('Find a category') ?>" autocomplete="off" aria-controls="category-grid">
+                <input class="input input-sm" type="search" x-model="categorySearch" placeholder="<?= __('Find a category') ?>"
+                       autocomplete="off" aria-controls="category-grid">
             </label>
         </div>
-        <div class="category-grid" id="category-grid" x-ref="categoryGrid" role="group" aria-label="<?= __('Plugin categories') ?>">
+        <div class="grid grid-cols-2 gap-2 md:grid-cols-3 lg:grid-cols-4" id="category-grid" x-ref="categoryGrid" role="group" aria-label="<?= __('Plugin categories') ?>">
             <a class="category-choice" href="<?= h($clearCategoryUrl) ?>" data-category-slug="" data-category-name="<?= __('All categories') ?>"
                x-show="matchesCategory($el.dataset.categoryName)" <?= $allCategoriesSelected ? 'aria-current="true"' : '' ?>>
-                <span class="category-choice-label"><?= __('All categories') ?></span>
+                <span class="wrap-anywhere"><?= __('All categories') ?></span>
                 <span aria-hidden="true">→</span>
             </a>
             <?php foreach ($categoryOptions as $slug => $option) : ?>
@@ -49,11 +50,11 @@
                    data-category-slug="<?= h($slug) ?>" data-category-name="<?= h($option['name']) ?>"
                    aria-label="<?= h(__n('{0}, {1} plugin', '{0}, {1} plugins', $option['count'], $option['name'], $option['count'])) ?>"
                    title="<?= __('Total plugins in this category') ?>" x-show="matchesCategory($el.dataset.categoryName)" <?= $categorySelected ? 'aria-current="true"' : '' ?>>
-                    <span class="category-choice-label"><?= h($option['name']) ?></span>
-                    <span class="category-choice-count" aria-hidden="true"><?= $this->Number->format($option['count']) ?></span>
+                    <span class="wrap-anywhere"><?= h($option['name']) ?></span>
+                    <span class="shrink-0 text-xs leading-normal text-muted tabular-nums" aria-hidden="true"><?= $this->Number->format($option['count']) ?></span>
                 </a>
             <?php endforeach; ?>
         </div>
-        <p class="category-no-matches" role="status" x-show="categorySearch && !hasCategoryMatches()" x-cloak><?= __('No matching categories. Try another name.') ?></p>
+        <p class="mt-4 text-sm leading-[1.6] text-muted" role="status" x-show="categorySearch && !hasCategoryMatches()" x-cloak><?= __('No matching categories. Try another name.') ?></p>
     </div>
 </details>
diff --git a/templates/element/Packages/package-row.php b/templates/element/Packages/package-row.php
index 4b82d201..2704ffcc 100644
--- a/templates/element/Packages/package-row.php
+++ b/templates/element/Packages/package-row.php
@@ -13,26 +13,26 @@
 $detailsUrl = $this->Url->build(['_name' => 'plugin:view', 'id' => $package->id]);
 ?>
 <article class="package-row" id="package-<?= (int)$package->id ?>" data-package-row>
-    <div class="package-info">
+    <div class="min-w-0">
         <h3 class="package-name">
             <a href="<?= $detailsUrl ?>" data-open-plugin data-plugin-id="<?= (int)$package->id ?>" data-plugin-name="<?= h($package->package) ?>">
                 <?= h($package->package) ?>
             </a>
         </h3>
-        <p class="package-description"><?= h($package->description ?: __('No description available.')) ?></p>
+        <p class="line-clamp-2 text-[0.9375rem] wrap-anywhere"><?= h($package->description ?: __('No description available.')) ?></p>
         <?php if ($package->categories) : ?>
-            <div class="package-curation">
+            <div class="mt-2 flex flex-wrap items-center gap-1.5">
                 <?= $this->element('Packages/awesome_badge', compact('package')) ?>
                 <?php foreach (array_slice($package->categories, 0, 2) as $category) : ?>
-                    <span class="category-label"><?= h($category->name) ?></span>
+                    <span class="category-label badge badge-outline"><?= h($category->name) ?></span>
                 <?php endforeach; ?>
                 <?php if (count($package->categories) > 2) : ?>
-                    <span class="category-label">+<?= count($package->categories) - 2 ?></span>
+                    <span class="category-label badge badge-outline">+<?= count($package->categories) - 2 ?></span>
                 <?php endif; ?>
             </div>
         <?php endif; ?>
         <?php if ($summaries !== []) : ?>
-            <p class="package-compatibility"><?= h(implode(' · ', $summaries)) ?></p>
+            <p class="mt-2 text-[0.8125rem] text-muted"><?= h(implode(' · ', $summaries)) ?></p>
         <?php endif; ?>
     </div>
     <div class="package-summary">
@@ -42,7 +42,7 @@
                 <dd><?= $this->Number->format($package->downloads) ?></dd>
             </div>
         </dl>
-        <a class="package-details-link" href="<?= $detailsUrl ?>" aria-label="<?= __('View {0} details', h($package->package)) ?>"
+        <a class="inline-flex min-h-8 items-center gap-1.5 text-[0.8125rem] font-[550]" href="<?= $detailsUrl ?>" aria-label="<?= __('View {0} details', h($package->package)) ?>"
            data-open-plugin data-plugin-id="<?= (int)$package->id ?>" data-plugin-name="<?= h($package->package) ?>">
             <?= __('View details') ?> <span aria-hidden="true">→</span>
         </a>
diff --git a/templates/element/Packages/plugin-avatar.php b/templates/element/Packages/plugin-avatar.php
index d7081987..74b06f38 100644
--- a/templates/element/Packages/plugin-avatar.php
+++ b/templates/element/Packages/plugin-avatar.php
@@ -9,7 +9,7 @@
 $initials = mb_substr($words[0], 0, 1);
 $initials .= count($words) > 1 ? mb_substr($words[1], 0, 1) : mb_substr($words[0], 1, 1);
 ?>
-<div class="avatar avatar-placeholder plugin-avatar" aria-hidden="true">
+<div class="avatar avatar-placeholder shrink-0 self-start" aria-hidden="true">
     <div class="plugin-avatar-tile">
         <span><?= h(mb_strtoupper($initials)) ?></span>
         <?php if ($logo !== null) : ?>
diff --git a/templates/element/Packages/plugin-details.php b/templates/element/Packages/plugin-details.php
index 4d171bf8..c319f0d3 100644
--- a/templates/element/Packages/plugin-details.php
+++ b/templates/element/Packages/plugin-details.php
@@ -14,10 +14,10 @@
 ?>
 <article class="plugin-details" id="plugin-details-<?= (int)$package->id ?>">
     <header class="plugin-details-heading">
-        <p class="plugin-vendor"><?= h($vendor) ?> /</p>
+        <p class="mb-1 text-[0.9375rem] font-medium text-muted wrap-anywhere"><?= h($vendor) ?> /</p>
         <h2><?= h($name ?: $vendor) ?></h2>
         <?= $this->element('Packages/awesome_badge', compact('package')) ?>
-        <p class="plugin-details-description"><?= h($package->description ?: __('No description available.')) ?></p>
+        <p class="mt-4 text-base leading-[1.7] text-base-content wrap-anywhere"><?= h($package->description ?: __('No description available.')) ?></p>
         <div class="plugin-resource-links">
             <a class="btn btn-sm btn-primary" href="<?= h($package->repo_url) ?>" target="_blank" rel="noopener noreferrer">
                 <?= $this->element('github_icon') ?>
@@ -59,7 +59,8 @@
             <h3><?= __('Categories') ?></h3>
             <div class="plugin-category-links">
                 <?php foreach ($package->categories as $category) : ?>
-                    <a class="category-label" href="<?= $this->Url->build(['plugin' => null, 'controller' => 'Packages', 'action' => 'index', '?' => ['category' => $category->slug]]) ?>"
+                    <a class="category-label badge badge-outline"
+                       href="<?= $this->Url->build(['plugin' => null, 'controller' => 'Packages', 'action' => 'index', '?' => ['category' => $category->slug]]) ?>"
                        data-filter-package-category data-category-slug="<?= h($category->slug) ?>"><?= h($category->name) ?></a>
                 <?php endforeach; ?>
             </div>
@@ -91,14 +92,14 @@
         <?php foreach ($groups as $group) : ?>
             <div class="plugin-version-group">
                 <h4><?= h($group['label']) ?></h4>
-                <div class="compatibility-versions" role="group" aria-label="<?= __('{0} compatibility', $group['label']) ?>">
+                <div class="flex flex-wrap gap-1.5 p-0.5" role="group" aria-label="<?= __('{0} compatibility', $group['label']) ?>">
                     <?php if ($group['tags'] === []) : ?>
                         <span class="plugin-section-hint"><?= __('Not listed') ?></span>
                     <?php endif; ?>
                     <?php foreach ($group['tags'] as $tags) : ?>
                         <?php foreach ($tags as $tag) : ?>
                             <?php $version = str_replace($group['label'] . ': ', '', $tag->label); ?>
-                            <a class="version-pill"
+                            <a class="version-pill badge badge-outline"
                                aria-label="<?= h($group['label'] . ' ' . $version) ?>"
                                href="<?= $this->Url->build(['controller' => 'Packages', 'action' => 'index', 'plugin' => null, '?' => [$group['query'] => [$tag->slug]]]) ?>"
                                data-filter-package-version data-version-group="<?= h($group['query']) ?>" data-version-slug="<?= h($tag->slug) ?>">
diff --git a/templates/element/awesome_logo.php b/templates/element/awesome_logo.php
index d2286be3..bed86206 100644
--- a/templates/element/awesome_logo.php
+++ b/templates/element/awesome_logo.php
@@ -6,7 +6,7 @@
  * @link https://github.com/sindresorhus/awesome/blob/main/media/readme.md
  */
 ?>
-<svg class="awesome-toggle-logo" xmlns="http://www.w3.org/2000/svg" width="24" height="14" viewBox="20 -55 604 320"
+<svg class="h-3.5 w-6 shrink-0" xmlns="http://www.w3.org/2000/svg" width="24" height="14" viewBox="20 -55 604 320"
      fill="currentColor" aria-hidden="true" focusable="false">
     <path d="M614.2 91l-150-137.6-21.1 23L568.1 91H75.4l125-114.7-21.1-23L29.3 91h-.1v90.7c0 41 39.5 74.4 88 74.4h92.5c48.5 0 88-33.4 88-74.4
              v-59.6h48v59.6c0 41 39.5 74.4 88 74.4h92.5c48.5 0 88-33.4 88-74.4V91z"></path>
diff --git a/templates/element/brand.php b/templates/element/brand.php
index e9411621..428b35bf 100644
--- a/templates/element/brand.php
+++ b/templates/element/brand.php
@@ -1,13 +1,14 @@
 <?php
 /** @var \App\View\AppView $this */
 ?>
-<a class="brand" href="<?= $this->Url->build('/') ?>" x-interact:navigate.hover aria-label="<?= __('CakePHP Plugins home') ?>">
-    <svg class="brand-mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58 45.258" fill="currentColor" aria-hidden="true">
+<a class="inline-flex shrink-0 items-center gap-2.5 font-bold tracking-[-0.02em] text-base-content no-underline hover:text-base-content"
+   href="<?= $this->Url->build('/') ?>" x-interact:navigate.hover aria-label="<?= __('CakePHP Plugins home') ?>">
+    <svg class="h-[1.6rem] w-8 shrink-0 text-cake-red" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58 45.258" fill="currentColor" aria-hidden="true">
         <path d="M28.993,18.11l22.685,5.632c3.948-1.541,6.318-3.505,6.318-5.632V9.052C57.996,4.058,45.011,0,28.993,0
             C12.979,0,0,4.058,0,9.052v9.058c0,4.995,12.979,9.05,28.993,9.05V18.11z" />
         <path d="M51.676,32.796L28.993,27.16v9.051l22.683,5.638c3.95-1.549,6.322-3.504,6.322-5.638V27.16
             C57.999,29.292,55.626,31.25,51.676,32.796" />
         <path d="M0,27.16v9.052c0,4.996,12.979,9.047,28.993,9.047v-9.047C12.979,36.211,0,32.155,0,27.16" />
     </svg>
-    <span>CakePHP <span class="brand-label">Plugins</span></span>
+    <span>CakePHP <span class="font-[450] text-muted max-[384px]:hidden">Plugins</span></span>
 </a>
diff --git a/templates/element/code_chip.php b/templates/element/code_chip.php
index c5d99167..544c62f3 100644
--- a/templates/element/code_chip.php
+++ b/templates/element/code_chip.php
@@ -5,4 +5,4 @@
  * @var string|null $variant
  */
 ?>
-<code class="code-chip"><?= h($text) ?></code>
+<code class="rounded-sm border border-base-300 bg-base-100 px-1.5 py-0.5 text-[0.875em] text-base-content wrap-anywhere"><?= h($text) ?></code>
diff --git a/templates/element/flash/message.php b/templates/element/flash/message.php
index 042f90e6..e0049fe9 100644
--- a/templates/element/flash/message.php
+++ b/templates/element/flash/message.php
@@ -9,9 +9,9 @@
     $message = h($message);
 }
 ?>
-<div class="flash-message site-width flash-<?= h($type) ?>" role="<?= $type === 'error' ? 'alert' : 'status' ?>" x-data="flashMessage" x-show="open">
+<div class="alert flash-message site-width flash-<?= h($type) ?>" role="<?= $type === 'error' ? 'alert' : 'status' ?>" x-data="flashMessage" x-show="open">
     <p><?= $message ?></p>
-    <button type="button" class="icon-button" @click="close()" aria-label="<?= __('Dismiss message') ?>" x-cloak>
+    <button type="button" class="icon-button btn btn-square btn-ghost" @click="close()" aria-label="<?= __('Dismiss message') ?>" x-cloak>
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
             <path d="m4 4 8 8M12 4l-8 8" stroke-linecap="round"></path>
         </svg>
diff --git a/templates/element/navbar.php b/templates/element/navbar.php
index 98107fc2..a1133ece 100644
--- a/templates/element/navbar.php
+++ b/templates/element/navbar.php
@@ -28,14 +28,14 @@
             <?php endforeach; ?>
         </nav>
         <?php if (!$minimal) : ?>
-            <div class="header-actions">
+            <div class="ml-auto flex items-center gap-2.5">
                 <?= $this->Interact->render('ThemeToggle', key: 'theme-toggle') ?>
                 <?php if ($loggedIn) : ?>
-                    <details class="navigation-menu desktop-account">
-                        <summary class="icon-button" aria-label="<?= __('User menu') ?>">
-                            <?= $this->User->avatar(80, ['class' => 'user-avatar']) ?>
+                    <details class="dropdown dropdown-end relative hidden md:block">
+                        <summary class="icon-button btn btn-square btn-ghost" aria-label="<?= __('User menu') ?>">
+                            <?= $this->User->avatar(80, ['class' => 'size-8 rounded-full object-cover']) ?>
                         </summary>
-                        <div class="menu-panel">
+                        <div class="menu-panel dropdown-content">
                             <p class="menu-identity">
                                 <?= h($this->User->displayName()) ?>
                                 <span>@<?= h($this->User->username()) ?></span>
@@ -44,21 +44,21 @@
                         </div>
                     </details>
                 <?php else : ?>
-                    <div class="desktop-account">
+                    <div class="hidden md:block">
                         <?= $this->Form->postLink(
                             $this->element('github_icon') . '<span>' . __('Sign in') . '</span>',
                             $loginUrl,
-                            ['class' => 'action-link', 'escape' => false],
+                            ['class' => 'action-link btn btn-outline', 'escape' => false],
                         ) ?>
                     </div>
                 <?php endif; ?>
-                <details class="navigation-menu mobile-menu">
-                    <summary class="icon-button" aria-label="<?= __('Open menu') ?>">
+                <details class="dropdown dropdown-end relative mobile-menu block md:hidden">
+                    <summary class="icon-button btn btn-square btn-ghost" aria-label="<?= __('Open menu') ?>">
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                             <path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round"></path>
                         </svg>
                     </summary>
-                    <nav class="menu-panel" aria-label="<?= __('Mobile navigation') ?>">
+                    <nav class="menu-panel dropdown-content" aria-label="<?= __('Mobile navigation') ?>">
                         <?php foreach ($links as $link) : ?>
                             <?= $this->Html->link($link['label'], $link['url'], [
                                 'class' => 'nav-link',
@@ -70,7 +70,7 @@
                             <p class="menu-identity"><?= h($this->User->displayName()) ?></p>
                             <?= $this->Html->link(__('Sign out'), ['controller' => 'Users', 'action' => 'logout'], ['class' => 'nav-link']) ?>
                         <?php else : ?>
-                            <?= $this->Form->postLink(__('Sign in with GitHub'), $loginUrl, ['class' => 'action-link']) ?>
+                            <?= $this->Form->postLink(__('Sign in with GitHub'), $loginUrl, ['class' => 'action-link btn btn-outline']) ?>
                         <?php endif; ?>
                     </nav>
                 </details>
diff --git a/templates/island/catalogue.php b/templates/island/catalogue.php
index 4c3b7a66..f712dea7 100644
--- a/templates/island/catalogue.php
+++ b/templates/island/catalogue.php
@@ -29,23 +29,23 @@
     '?' => array_replace($catalogueQuery, ['category' => '']),
 ]);
 ?>
-<div class="directory site-width" x-data="catalogue" @click="activate($event)" @keydown.escape="closeMenu($event)"
+<div class="directory pt-4 md:pt-5 site-width" x-data="catalogue" @click="activate($event)" @keydown.escape="closeMenu($event)"
      @catalogue-version.window="selectVersion($event)" @catalogue-category.window="selectCategory($event)">
     <h1 class="sr-only"><?= __('CakePHP plugins') ?></h1>
 
     <div class="catalogue-discovery">
-        <div class="catalogue-search-row">
+        <div class="mb-4 flex items-center gap-3 md:gap-4">
             <?= $this->Form->create(null, [
                 'type' => 'get',
                 'url' => ['controller' => 'Packages', 'action' => 'index', 'plugin' => null],
-                'class' => 'catalogue-search',
+                'class' => 'min-w-0 flex-1',
                 'id' => 'catalogue-search-form',
                 'role' => 'search',
                 'aria-label' => __('Find plugins'),
                 'x-interact:submit' => '$server.sync()',
             ]) ?>
                 <label for="package-search" class="sr-only"><?= __('Search plugins') ?></label>
-                <div class="search-control" id="catalogue-search-control">
+                <div class="search-control input" id="catalogue-search-control">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                         <circle cx="11" cy="11" r="7"></circle>
                         <path d="m16 16 4.5 4.5" stroke-linecap="round"></path>
@@ -54,10 +54,10 @@
                            x-interact:model.live="search" maxlength="100" autocomplete="off"
                            placeholder="<?= __('Search by name or description') ?>" aria-controls="catalogue-results"
                            :aria-busy="!$server.error && ($server.dirty || $server.pending()) ? 'true' : 'false'">
-                    <span class="search-status" role="status" aria-label="<?= __('Updating results') ?>"
+                    <span class="flex shrink-0 items-center gap-2 text-sm leading-[1.6] text-muted" role="status" aria-label="<?= __('Updating results') ?>"
                           x-show="!$server.error && ($server.dirty || $server.pending())" x-cloak>
                         <span class="loading loading-spinner loading-sm" aria-hidden="true"></span>
-                        <span class="search-status-text"><?= __('Updating results…') ?></span>
+                        <span class="hidden md:inline"><?= __('Updating results…') ?></span>
                     </span>
                 </div>
                 <?php foreach (['cakephp_slugs' => $cakephpSlugs, 'php_slugs' => $phpSlugs] as $key => $slugs) : ?>
@@ -85,7 +85,7 @@
             <?php endif; ?>
         </div>
 
-        <div class="catalogue-filters">
+        <div class="grid gap-1">
             <?php
             $filters = [
                 ['name' => 'cakephp_slugs', 'label' => __('CakePHP version'), 'prefix' => 'CakePHP', 'options' => $cakephpTags, 'selected' => $cakephpSlugs],
@@ -94,7 +94,7 @@
             ?>
             <?php foreach ($filters as $filter) : ?>
                 <div class="version-filter" role="group" aria-label="<?= h($filter['label']) ?>">
-                    <span class="filter-label"><?= h($filter['label']) ?></span>
+                    <span class="text-[0.8125rem] font-semibold whitespace-nowrap"><?= h($filter['label']) ?></span>
                     <div class="version-options" tabindex="0" aria-label="<?= __('{0} choices; scroll for older versions', $filter['label']) ?>">
                         <?php foreach ($filter['options'] as $slug => $label) : ?>
                             <?php
@@ -105,7 +105,7 @@
                                 ? array_values(array_diff($filter['selected'], [$slug]))
                                 : [...$filter['selected'], $slug];
                             ?>
-                            <a class="version-pill" role="button" aria-pressed="<?= $selected ? 'true' : 'false' ?>"
+                            <a class="version-pill badge badge-outline" role="button" aria-pressed="<?= $selected ? 'true' : 'false' ?>"
                                aria-label="<?= h($filter['prefix'] . ' ' . $version) ?>"
                                href="<?= $this->Url->build(['controller' => 'Packages', 'action' => 'index', 'plugin' => null, '?' => $filterQuery]) ?>"
                                @keydown.space.prevent="$el.click()"
@@ -128,9 +128,9 @@
     <section class="catalogue-panel" id="packages-index-content" aria-label="<?= __('Plugin directory') ?>">
         <div class="catalogue-toolbar">
             <div class="catalogue-summary">
-                <h2 aria-live="polite"><span class="result-count"><?= $this->Paginator->counter('{{count}}') ?></span> <?= __('plugins') ?></h2>
+                <h2 aria-live="polite"><span class="result-count badge badge-soft badge-primary"><?= $this->Paginator->counter('{{count}}') ?></span> <?= __('plugins') ?></h2>
                 <?php if ($category !== '') : ?>
-                    <a class="selected-category" href="<?= h($clearCategoryUrl) ?>" data-category-slug=""
+                    <a class="selected-category badge badge-outline" href="<?= h($clearCategoryUrl) ?>" data-category-slug=""
                        aria-label="<?= h(__('Remove category filter: {0}', $categoryOptions[$category]['name'])) ?>">
                         <?= h($categoryOptions[$category]['name']) ?>
                         <span aria-hidden="true">×</span>
@@ -139,22 +139,22 @@
             </div>
             <div class="catalogue-controls">
                 <?php $awesomeQuery = array_replace($catalogueQuery, ['awesome' => $awesomeOnly ? '0' : '1']); ?>
-                <a class="curation-toggle" role="button" aria-pressed="<?= $awesomeOnly ? 'true' : 'false' ?>"
+                <a class="curation-toggle btn btn-outline" role="button" aria-pressed="<?= $awesomeOnly ? 'true' : 'false' ?>"
                    href="<?= $this->Url->build(['plugin' => null, 'controller' => 'Packages', 'action' => 'index', '?' => $awesomeQuery]) ?>"
                    data-toggle-awesome @keydown.space.prevent="$el.click()">
                     <?= $this->element('awesome_logo') ?>
                     <?= __('Awesome only') ?>
                 </a>
                 <div class="sort-control">
-                    <span class="muted"><?= __('Sort by') ?></span>
-                    <details class="sort-menu">
+                    <span class="text-muted"><?= __('Sort by') ?></span>
+                    <details class="sort-menu dropdown dropdown-end">
                         <summary aria-label="<?= __('Sort plugins') ?>">
                             <?= h($sortLabel) ?>
                             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
                                 <path d="m4 6 4 4 4-4" stroke-linecap="round" stroke-linejoin="round"></path>
                             </svg>
                         </summary>
-                        <div class="sort-options">
+                        <div class="sort-options dropdown-content">
                             <?= $this->Paginator->sort('latest_stable_release_date', __('Latest release'), ['direction' => 'desc']) ?>
                             <?= $this->Paginator->sort('downloads', __('Downloads'), ['direction' => 'desc']) ?>
                             <?= $this->Paginator->sort('stars', __('Stars'), ['direction' => 'desc']) ?>
@@ -166,7 +166,7 @@
 
         <div class="catalogue-error" role="alert" x-show="$server.error" x-cloak>
             <p><?= __('We couldn’t update the results. Your current list is still here. Please try again.') ?></p>
-            <button class="action-link" type="button" @click="$server.sync()" :disabled="$server.pending()">
+            <button class="action-link btn btn-outline" type="button" @click="$server.sync()" :disabled="$server.pending()">
                 <?= __('Retry') ?>
             </button>
         </div>
@@ -176,7 +176,7 @@
                 <div class="empty-results">
                     <h3><?= __('No plugins found') ?></h3>
                     <p><?= __('Try another search or reset your filters.') ?></p>
-                    <a class="action-link" href="<?= h($clearUrl) ?>" data-clear-catalogue><?= __('Clear all') ?></a>
+                    <a class="action-link btn btn-outline" href="<?= h($clearUrl) ?>" data-clear-catalogue><?= __('Clear all') ?></a>
                 </div>
             <?php else : ?>
                 <?php foreach ($packages as $package) : ?>
@@ -188,11 +188,11 @@
         <?php if (count($packages) > 0) : ?>
             <div class="catalogue-pagination">
                 <p><?= $this->Paginator->counter(__('Showing {{start}}–{{end}} of {{count}}')) ?></p>
-                <nav class="page-links" aria-label="<?= __('Results pages') ?>">
+                <nav class="flex flex-wrap items-center gap-1.5" aria-label="<?= __('Results pages') ?>">
                     <?php if ($this->Paginator->hasPrev()) : ?>
                         <?= $this->Paginator->first(__('First')) ?>
                     <?php else : ?>
-                        <span class="page-link" aria-disabled="true"><?= __('First') ?></span>
+                        <span class="page-link btn btn-outline" aria-disabled="true"><?= __('First') ?></span>
                     <?php endif; ?>
                     <?= $this->Paginator->prev(__('Previous')) ?>
                     <?= $this->Paginator->numbers(['modulus' => 2]) ?>
@@ -200,7 +200,7 @@
                     <?php if ($this->Paginator->hasNext()) : ?>
                         <?= $this->Paginator->last(__('Last')) ?>
                     <?php else : ?>
-                        <span class="page-link" aria-disabled="true"><?= __('Last') ?></span>
+                        <span class="page-link btn btn-outline" aria-disabled="true"><?= __('Last') ?></span>
                     <?php endif; ?>
                 </nav>
             </div>
diff --git a/templates/island/featured_plugins.php b/templates/island/featured_plugins.php
index 786c4511..f2b15533 100644
--- a/templates/island/featured_plugins.php
+++ b/templates/island/featured_plugins.php
@@ -20,7 +20,7 @@
                     [$vendor, $name] = array_pad(explode('/', $package->package, 2), 2, '');
                     $tone = ['rose', 'violet', 'amber'][hexdec(substr(hash('sha256', $package->package), 0, 4)) % 3];
                     ?>
-                    <article class="featured-item" data-plugin-tone="<?= $tone ?>">
+                    <article class="featured-item group" data-plugin-tone="<?= $tone ?>">
                         <a class="featured-card" href="<?= $this->Url->build(['_name' => 'plugin:view', 'id' => $package->id]) ?>"
                            aria-label="<?= __('View {0} details', h($package->package)) ?>"
                            data-open-plugin data-plugin-id="<?= (int)$package->id ?>" data-plugin-name="<?= h($package->package) ?>">
@@ -28,10 +28,10 @@
                                 'packageName' => $package->package,
                                 'logo' => $featuredMetadata[$package->package]['logo'] ?? null,
                             ]) ?>
-                            <div class="featured-card-content">
-                                <div class="featured-card-top">
+                            <div class="min-w-0">
+                                <div class="flex items-start justify-between gap-2.5">
                                     <div class="featured-card-name">
-                                        <span class="featured-vendor"><?= h($vendor) ?></span>
+                                        <span class="mb-0.5 block text-xs leading-[1.6] text-muted"><?= h($vendor) ?></span>
                                         <h3><?= h($name ?: $vendor) ?></h3>
                                         <?= $this->element('Packages/awesome_badge', compact('package')) ?>
                                     </div>
@@ -40,14 +40,14 @@
                                 <p class="featured-description"><?= h($package->description ?: __('No description available.')) ?></p>
                             </div>
                             <div class="featured-card-footer">
-                                <span class="featured-downloads">
+                                <span class="inline-flex items-center gap-1.5">
                                     <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
                                         <path d="M12 3v12m-4-4 4 4 4-4M4 16v5h16v-5" stroke-linecap="round" stroke-linejoin="round"></path>
                                     </svg>
                                     <?= __('{0} downloads', $this->Number->format($package->downloads)) ?>
                                 </span>
                                 <?php if ($package->latest_stable_version) : ?>
-                                    <span class="featured-release" title="<?= __('Latest stable release') ?>"><?= h($package->latest_stable_version) ?></span>
+                                    <span class="featured-release badge badge-outline" title="<?= __('Latest stable release') ?>"><?= h($package->latest_stable_version) ?></span>
                                 <?php endif; ?>
                             </div>
                         </a>
diff --git a/templates/island/plugin_details.php b/templates/island/plugin_details.php
index 655e406c..28f3571d 100644
--- a/templates/island/plugin_details.php
+++ b/templates/island/plugin_details.php
@@ -5,11 +5,11 @@
  */
 ?>
 <div x-data="pluginDetails" @plugin-open.window="load($event)" :aria-busy="$server.pending()">
-    <div id="plugin-details-loading" class="plugin-details-status" role="status" x-show="$server.pending()" x-cloak>
+    <div id="plugin-details-loading" class="flex min-h-64 flex-wrap items-center justify-center gap-3 p-8 text-muted" role="status" x-show="$server.pending()" x-cloak>
         <span class="loading loading-spinner loading-sm" aria-hidden="true"></span>
         <?= __('Loading plugin details…') ?>
     </div>
-    <div id="plugin-details-error" class="plugin-details-status" role="alert" x-show="$server.error" x-cloak>
+    <div id="plugin-details-error" class="flex min-h-64 flex-wrap items-center justify-center gap-3 p-8 text-muted" role="alert" x-show="$server.error" x-cloak>
         <p><?= __('We couldn’t load this plugin. Please try again.') ?></p>
         <button type="button" class="btn btn-sm btn-outline" @click="retry"><?= __('Retry') ?></button>
     </div>
diff --git a/templates/island/theme_toggle.php b/templates/island/theme_toggle.php
index 382fc714..0697fe70 100644
--- a/templates/island/theme_toggle.php
+++ b/templates/island/theme_toggle.php
@@ -7,7 +7,7 @@
 <button
     type="button"
     id="theme-toggle"
-    class="icon-button theme-toggle"
+    class="icon-button btn btn-square btn-ghost theme-toggle"
     aria-label="<?= __('Toggle theme') ?>"
     aria-pressed="<?= $dark ? 'true' : 'false' ?>"
     :aria-pressed="$store.theme.dark"
diff --git a/templates/layout/default.php b/templates/layout/default.php
index 9e6278a6..7cc41d16 100644
--- a/templates/layout/default.php
+++ b/templates/layout/default.php
@@ -52,7 +52,7 @@
 <body>
     <a class="skip-link" href="#main-content"><?= __('Skip to content') ?></a>
     <?= $this->element('navbar') ?>
-    <div class="page-loading-track"
+    <div class="pointer-events-none fixed inset-x-0 top-0 z-[100] h-1 overflow-hidden"
          x-data x-show="$store.interactNavigation.loading()" x-cloak
          role="progressbar" aria-label="<?= __('Loading page') ?>">
         <div class="page-loading-bar"></div>
diff --git a/tests/TestCase/Island/FeaturedPluginsIslandTest.php b/tests/TestCase/Island/FeaturedPluginsIslandTest.php
index 77805f7d..0f1a41ca 100644
--- a/tests/TestCase/Island/FeaturedPluginsIslandTest.php
+++ b/tests/TestCase/Island/FeaturedPluginsIslandTest.php
@@ -63,6 +63,6 @@ public function testSelectionIsBoundedToThreePackages(): void
             'vendor/package-01' => ['logo' => null],
         ]);
         $island = $this->testIsland('FeaturedPlugins');
-        $this->assertSame(3, substr_count($island->result()->html, 'class="featured-item"'));
+        $this->assertSame(3, substr_count($island->result()->html, 'data-plugin-tone='));
     }
 }