Merge claude/2

The plain text link read as unstyled; give it the same pill shape as the
Reclaim Space button (icon + label) in the accent colour, so it looks
intentional without borrowing Reclaim's caution-orange.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>

containers/libreportal/frontend/css/admin.css

@@ -1081,6 +1081,29 @@ table.sys-apps tr:hover td { background: rgba(var(--text-rgb), 0.03); }
     transform: none;
 }
 .sys-storage-reclaim svg { flex: 0 0 auto; }
+/* Neutral pill CTA — same shape as Reclaim, accent colour (e.g. "View storage
+   breakdown" on the Disk metric page). */
+.sys-storage-cta {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 9px 16px;
+    font-size: 0.85rem;
+    font-weight: 600;
+    white-space: nowrap;
+    color: var(--accent);
+    background: rgba(var(--accent-rgb), 0.12);
+    border: 1px solid rgba(var(--accent-rgb), 0.4);
+    border-radius: 10px;
+    cursor: pointer;
+    transition: background .15s ease, border-color .15s ease, transform .15s ease;
+}
+.sys-storage-cta:hover {
+    background: rgba(var(--accent-rgb), 0.2);
+    border-color: rgba(var(--accent-rgb), 0.65);
+    transform: translateY(-1px);
+}
+.sys-storage-cta svg { flex: 0 0 auto; }
 .sys-storage-reclaim.is-running svg { animation: sysReclaimSpin 0.8s linear infinite; }
 @keyframes sysReclaimSpin { to { transform: rotate(360deg); } }
 @media (prefers-reduced-motion: reduce) {

containers/libreportal/frontend/js/components/admin/system-metric-page.js

@@ -175,7 +175,10 @@ class SystemMetricPage {
                         <p class="sys-metric-sub">${fmt.escape(this._subline())}</p>
                     </div>
                     <div class="sys-metric-actions">
-                        ${this.metricKey === 'disk' ? `<button type="button" class="sys-storage-more" data-go-storage>View storage breakdown →</button>` : ''}
+                        ${this.metricKey === 'disk' ? `<button type="button" class="sys-storage-cta" data-go-storage title="Open the full storage breakdown">
+                            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>
+                            View storage breakdown
+                        </button>` : ''}
                         <div class="sys-detail-range" role="tablist" aria-label="Time range">
                             ${[[60,'1h'],[360,'6h'],[1440,'24h'],[10080,'7d']]
                                 .map(([m,l]) => `<button type="button" role="tab" class="sys-detail-range-btn ${this.rangeMin===m?'active':''}" data-rng="${m}">${l}</button>`).join('')}