Make MCP tools grid solid and readable on locked page

Increased tool card opacity, added card container background,
green-highlighted count in heading, removed fade overlay.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: Sbussiso

frontend/src/index.css

@@ -2512,8 +2512,9 @@ body {
 }
 
 .mcp-tool-locked {
-    opacity: 0.35;
+    opacity: 0.85;
     pointer-events: none;
+    border-color: rgba(34, 197, 94, 0.15);
 }
 
 /* ── MCP Locked / Gate Page ───────────────────────────────────── */
@@ -2645,26 +2646,22 @@ body {
 .mcp-locked-tools {
     position: relative;
     z-index: 1;
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 1.5rem;
 }
 
 .mcp-locked-tools h3 {
-    font-size: 1rem;
+    font-size: 1.05rem;
     font-weight: 600;
-    margin-bottom: 1rem;
-    color: var(--text-muted);
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
+    margin-bottom: 1.25rem;
+    color: var(--text-primary);
     text-align: center;
 }
 
-.mcp-tools-fade {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 120px;
-    background: linear-gradient(to top, var(--bg-primary), transparent);
-    pointer-events: none;
+.mcp-locked-tools h3 span {
+    color: var(--accent-green);
 }
 
 @media (max-width: 600px) {

frontend/src/pages/McpPage.jsx

@@ -165,7 +165,7 @@ function McpPage() {
           </div>
 
           <div className="mcp-locked-tools">
-            <h3>{TOOLS.length} tools included</h3>
+            <h3><span>{TOOLS.length}</span> tools included with Pro</h3>
             <div className="mcp-tools-grid">
               {TOOLS.map((tool) => (
                 <div key={tool.name} className="mcp-tool-card mcp-tool-locked">
@@ -174,7 +174,6 @@ function McpPage() {
                 </div>
               ))}
             </div>
-            <div className="mcp-tools-fade" />
           </div>
         </div>