fix: MCP cards redesign, inline graph, DAST spacing, missing back buttons

- Redesign MCP server cards with proper CSS (grid layout, config details,
  tool chips, token section with icon actions)
- Add back button to MCP Servers page and DAST Findings page
- Embed graph explorer inline on repositories page (toggle via graph icon)
  instead of navigating to separate page
- Refactor GraphExplorerPage into shared GraphExplorerBody component
  with GraphExplorerInline variant for embedding
- Fix DAST Overview spacing: proper stat cards, button margins, icons
- Add btn-active state for toggled graph button

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

compliance-dashboard/assets/main.css

@@ -727,6 +727,208 @@ tbody tr:last-child td {
 .mcp-status-dot.stopped { background: var(--text-tertiary); }
 .mcp-status-dot.error { background: var(--danger); }
 
+/* ── MCP Server Cards ── */
+
+.mcp-cards-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
+    gap: 16px;
+}
+
+.mcp-card {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    padding: 20px;
+    transition: border-color 0.2s;
+}
+
+.mcp-card:hover {
+    border-color: var(--border-bright);
+}
+
+.mcp-card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+}
+
+.mcp-card-title {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.mcp-card-title h3 {
+    font-family: var(--font-display);
+    font-size: 16px;
+    font-weight: 600;
+    margin: 0;
+    color: var(--text-primary);
+}
+
+.mcp-card-status {
+    font-size: 11px;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    padding: 2px 8px;
+    border-radius: 10px;
+}
+
+.mcp-card-status.running {
+    color: var(--success);
+    background: var(--success-bg);
+}
+
+.mcp-card-status.stopped {
+    color: var(--text-secondary);
+    background: var(--bg-secondary);
+}
+
+.mcp-card-status.error {
+    color: var(--danger);
+    background: var(--danger-bg);
+}
+
+.mcp-card-desc {
+    font-size: 13px;
+    color: var(--text-secondary);
+    margin: 0 0 16px;
+    line-height: 1.4;
+}
+
+.mcp-card-details {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-bottom: 16px;
+    padding: 12px;
+    background: var(--bg-secondary);
+    border-radius: var(--radius-md);
+}
+
+.mcp-detail-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 13px;
+    color: var(--text-secondary);
+}
+
+.mcp-detail-label {
+    font-size: 12px;
+    color: var(--text-secondary);
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 80px;
+    flex-shrink: 0;
+}
+
+.mcp-detail-value {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: var(--text-primary);
+    word-break: break-all;
+}
+
+.mcp-card-tools {
+    margin-bottom: 16px;
+}
+
+.mcp-tools-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-top: 8px;
+}
+
+.mcp-tool-chip {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    padding: 3px 10px;
+    background: var(--accent-muted);
+    color: var(--accent);
+    border-radius: 12px;
+    border: 1px solid var(--border-accent);
+}
+
+.mcp-card-token {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 10px 12px;
+    background: var(--bg-secondary);
+    border-radius: var(--radius-md);
+    margin-bottom: 12px;
+}
+
+.mcp-token-display {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+    flex: 1;
+    color: var(--text-secondary);
+}
+
+.mcp-token-code {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: var(--text-primary);
+    word-break: break-all;
+}
+
+.mcp-token-actions {
+    display: flex;
+    gap: 4px;
+    flex-shrink: 0;
+}
+
+.mcp-card-footer {
+    font-size: 11px;
+    color: var(--text-tertiary);
+}
+
+/* ── DAST Stat Cards ── */
+
+.stat-card-item {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    padding: 20px;
+    text-align: center;
+}
+
+.stat-card-value {
+    font-family: var(--font-display);
+    font-size: 28px;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin-bottom: 6px;
+}
+
+.stat-card-label {
+    font-size: 13px;
+    color: var(--text-secondary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+}
+
+/* ── Button active state ── */
+
+.btn-active,
+.btn.btn-active {
+    background: var(--accent-muted);
+    border-color: var(--accent);
+    color: var(--accent);
+}
+
 .spinner {
     display: inline-block;
     width: 14px;